/* Generated by site/home/build.mjs from cred_count_app/design_system; never edit. */

@font-face { font-family: 'MaterialIcons'; font-display: block; src: url('../fonts/air-icons.woff2') format('woff2'); }

@font-face { font-family: 'CredSymbols'; font-display: block; src: url('../fonts/air-symbols.woff2') format('woff2'); }

/* 00-core.css */
/* The root: the mode's ground, and the body text the app draws in
   (Material's body under the theme: 14 / 1.43, +0.25 tracking). */
.air-app {
  background: var(--air-ground);
  color: var(--air-text);
  font-family: var(--air-font);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.25px;
  text-rendering: geometricPrecision;
}
.air-app *, .air-app *::before, .air-app *::after { box-sizing: border-box; }
.air-app--glow {
  background:
    radial-gradient(110% 55% at 8% -8%,
      color-mix(in srgb, var(--air-brand-gradient-1) calc(var(--air-glow-strength) * 100%), transparent) 0%,
      color-mix(in srgb, var(--air-brand-gradient-1) 0%, transparent) 62%),
    radial-gradient(80% 45% at 100% -4%,
      color-mix(in srgb, var(--air-brand-gradient-2) calc(var(--air-glow-strength) * 100%), transparent) 0%,
      color-mix(in srgb, var(--air-brand-gradient-2) 0%, transparent) 60%),
    var(--air-ground);
  background-attachment: local;
}

/* An icon: the glyph centred in a square of its size. */
.air-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: 'MaterialIcons';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  overflow: visible;
  user-select: none;
}
.air-icon--symbol { font-family: 'CredSymbols'; }
.air-icon--unknown { outline: 2px dashed var(--air-danger); outline-offset: -2px; }

/* A solid surface (AirSurface). */
.air-surface {
  position: relative;
  background: var(--air-tile);
  box-shadow: inset 0 1px 0 var(--air-tile-top-light), 0 1px 2px var(--air-tile-shadow);
}
[data-air-mode="high-contrast"] .air-surface {
  box-shadow: inset 0 0 0 1.5px var(--air-tile-top-light);
}
.air-surface--ticket { background: var(--air-ticket-paper); }
.air-surface--meaning {
  background: color-mix(in srgb, var(--air-m) calc(var(--air-tint-strength) * 100%), var(--air-tile));
}
.air-surface--ticket.air-surface--meaning {
  background: color-mix(in srgb, var(--air-m) calc(var(--air-ticket-tint-strength) * 100%), var(--air-ticket-paper));
}
[data-air-mode="high-contrast"] .air-surface--meaning {
  box-shadow: inset 0 0 0 2px var(--air-m);
}
.air-surface--outlined,
[data-air-mode] .air-surface--outlined {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--air-line);
}
.air-surface--selected,
[data-air-mode] .air-surface--selected {
  background: var(--air-selected-tint);
  box-shadow: inset 0 0 0 1.5px var(--air-selected-edge);
}
.air-surface--focused { box-shadow: inset 0 0 0 1px var(--air-focus-edge); }
[data-air-mode="high-contrast"] .air-surface--focused { box-shadow: inset 0 0 0 1.5px var(--air-focus-edge); }
/* The brand's surface (AirSurface.brand): the two brand colours washed
   corner to corner (--air-brand-angle, set from the box), a thin cyan edge;
   high contrast draws the accent's 2-point edge and no wash. */
.air-surface--brand {
  background:
    linear-gradient(var(--air-brand-angle, 135deg),
      color-mix(in srgb, var(--air-brand-gradient-1) var(--air-brand-wash-share), transparent),
      color-mix(in srgb, var(--air-brand-gradient-2) var(--air-brand-wash-share), transparent)),
    var(--air-tile);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--air-brand-gradient-1) var(--air-brand-edge-share), transparent),
    inset 0 1px 0 var(--air-tile-top-light), 0 1px 2px var(--air-tile-shadow);
}
[data-air-mode="high-contrast"] .air-surface--brand { box-shadow: inset 0 0 0 2px var(--air-accent); }
.air-surface--lit { box-shadow: inset 0 0 0 1.5px var(--air-accent); }

/* The selected state in a meaning other than the accent
   (AirColors.selectedIn; TIME's chips in ops): set --air-selected-m, and
   read --air-selected-in-tint, -edge and -ink where the accent's selected
   tokens would be read. The shares and the ink's mix are the mode's
   tokens. */
.air-selected-in {
  --air-selected-in-tint: color-mix(in srgb, var(--air-selected-m) var(--air-selected-tint-share), transparent);
  --air-selected-in-edge: color-mix(in srgb, var(--air-selected-m) var(--air-selected-edge-share), transparent);
  --air-selected-in-ink: color-mix(in srgb, var(--air-selected-m) var(--air-selected-ink-keep), var(--air-selected-ink-toward));
}

/* The press (AirPress): shrink under the finger, spring back. */
.air-press {
  cursor: pointer;
  transition: transform var(--air-spring-press-duration) var(--air-spring-press);
  -webkit-tap-highlight-color: transparent;
}
.air-press:active { transform: scale(var(--air-press-scale)); }
.air-press--row:active { transform: scale(var(--air-row-press-scale)); }
@media (prefers-reduced-motion: reduce) {
  .air-press, .air-press:active { transition: none; transform: none; }
}

/* The Sky ground (§2): three colours from the top, fading into the ground. */
.air-app--sky-morning { --air-sky-1: var(--air-sky-morning-1); --air-sky-2: var(--air-sky-morning-2); --air-sky-3: var(--air-sky-morning-3); }
.air-app--sky-afternoon { --air-sky-1: var(--air-sky-afternoon-1); --air-sky-2: var(--air-sky-afternoon-2); --air-sky-3: var(--air-sky-afternoon-3); }
.air-app--sky-evening { --air-sky-1: var(--air-sky-evening-1); --air-sky-2: var(--air-sky-evening-2); --air-sky-3: var(--air-sky-evening-3); }
.air-app--sky-night { --air-sky-1: var(--air-sky-night-1); --air-sky-2: var(--air-sky-night-2); --air-sky-3: var(--air-sky-night-3); }
.air-app--sky {
  background:
    linear-gradient(180deg,
      var(--air-sky-1) var(--air-sky-stop-1),
      var(--air-sky-2) var(--air-sky-stop-2),
      var(--air-sky-3) var(--air-sky-stop-3),
      var(--air-ground) var(--air-sky-fade-by)),
    var(--air-ground);
  background-attachment: local;
}


/* 10-tile.css */
.air-tile {
  display: block;
  border-radius: var(--air-shape-tile);
  padding: var(--air-space-tile-padding-vertical) var(--air-space-tile-padding-horizontal);
  min-width: var(--air-space-target);
  overflow: hidden;
  color: var(--air-text);
}

.air-note { display: flex; align-items: flex-start; }
.air-note > .air-icon { margin-right: 12px; }
.air-note__words { flex: 1; min-width: 0; }
.air-note__title { color: var(--air-text); padding-bottom: 4px; }
.air-note__message { color: var(--air-text-2); line-height: 1.4; }
.air-note__close { transform: translate(10px, -12px); }
/* What stands under the words fills the note's width, as its Flutter column stretches it. */
.air-note__action { margin-top: 14px; display: flex; flex-direction: column; align-items: stretch; }

.air-tile-line { display: flex; align-items: center; min-height: 28px; }
.air-tile-line--door { min-height: var(--air-space-target); }
.air-tile-line__label { flex: 1; color: var(--air-text-2); }
.air-tile-line__label--door { color: var(--air-accent); }
.air-tile-line__value { padding-left: 12px; text-align: end; color: var(--air-text); }

.air-tile-close {
  appearance: none; border: 0; background: transparent; padding: 0;
  width: var(--air-space-target); height: var(--air-space-target);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}


/* 12-kicker.css */
.air-kicker__count { color: var(--air-text-3); }
.air-kicker--question { color: var(--air-text-2); padding-bottom: 12px; }
/* An aside keeps its own case and tracking among the capitals. */
.air-kicker__aside { color: var(--air-text-3); text-transform: none; letter-spacing: 0; }


/* 14-figure.css */
.air-figure__label { display: flex; align-items: center; padding-bottom: 10px; }
.air-figure__row { display: flex; align-items: flex-start; }
.air-figure__figure { flex: 1; min-width: 0; line-height: 1; }
.air-figure__number { line-height: 1; }
.air-figure__unit { color: var(--air-text-3); }
.air-figure__line { display: flex; align-items: flex-end; padding-top: 6px; }


/* 16-grouped.css */
.air-grouped { display: flex; flex-direction: column; gap: var(--air-space-row-gap); }
.air-grouped > .air-tile { border-radius: var(--air-shape-group-between); }
.air-grouped > .air-tile:first-child { border-top-left-radius: var(--air-shape-group-end); border-top-right-radius: var(--air-shape-group-end); }
.air-grouped > .air-tile:last-child { border-bottom-left-radius: var(--air-shape-group-end); border-bottom-right-radius: var(--air-shape-group-end); }
.air-grouped > .air-tile.air-press:active { transform: scale(var(--air-row-press-scale)); }


/* 18-row.css */
.air-row__inner { display: flex; align-items: center; gap: 12px; }
.air-row__main { flex: 1; min-width: 0; }
.air-row__text { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
.air-row__words { flex: 1 1 auto; min-width: 0; }
.air-row__text--value .air-row__words { flex-basis: 50%; }
.air-row__title { color: var(--air-text); }
.air-row__line { color: var(--air-text-3); }
.air-row__value { flex: 0 1 auto; }
.air-row__below { padding-top: 6px; }
.air-row__chevron { margin-left: -6px; }
.air-glyph-square {
  width: 35px; height: 35px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--air-tile-raised); border-radius: 12px;
}
/* The row's box is at least 60; its contents stand centred in it, as a Row does. */
.air-row { display: flex; flex-direction: column; justify-content: center; }
/* A row waiting on another: faint (AirPicker's multi rows). */
.air-row--waiting { opacity: 0.4; }


/* 20-button.css */
.air-button {
  appearance: none; border: 0; margin: 0; font: inherit; text-decoration: none;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; min-width: var(--air-space-target);
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--air-on-fill);
  text-align: center;
  vertical-align: top;
}
.air-button--expand { display: flex; width: 100%; }
.air-button--compact { min-height: 32px; min-width: 32px; padding: 4px 12px; }
.air-button--circle { padding: 0; border-radius: 50%; min-height: 0; }
.air-button__words { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.air-button--compact .air-button__words { gap: 6px; }
.air-button--loading .air-button__words { opacity: 0; }
.air-button__busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* A coloured kind: flat, its top stop. */
.air-button--filled { background: var(--air-b-top); }
/* An earning kind: lit from above, a bright edge outside, the glow beneath
   (a CSS blur of 18, dropped 6, drawn 6 in), a light along its top. */
.air-button--glows {
  background: linear-gradient(180deg, var(--air-b-top), var(--air-b-bottom));
  box-shadow:
    inset 0 1px 0 var(--air-button-top-light),
    0 0 0 calc(var(--air-button-edge-width) * 1px) color-mix(in srgb, var(--air-b-light) calc(var(--air-button-edge-alpha) * 100%), transparent),
    0 6px 18px -6px color-mix(in srgb, var(--air-b-light) calc(var(--air-button-glow-alpha) * 100%), transparent);
}
/* Its breath (ruling 60): the glow swells and radiates, then rests, every 2s. */
.air-button--breathes::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  animation: air-breath 2s linear infinite;
  box-shadow: 0 0 0 0 transparent;
}
@keyframes air-breath {
  0% { box-shadow: 0 0 2px 0 transparent; }
  25% { box-shadow: 0 0 4px 2px color-mix(in srgb, var(--air-b-light) calc(var(--air-button-glow-alpha) * 42%), transparent); }
  80% { box-shadow: 0 0 7px 10px transparent; }
  100% { box-shadow: 0 0 7px 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .air-button--breathes::before { animation: none; } }

/* The raised kinds. */
.air-button--raised { background: var(--air-tile-raised); color: var(--air-text); }
.air-button--dangerQuiet { color: var(--air-danger); }

/* High contrast: every coloured kind edged solid, no glow, no light; the raised kinds a line. */
[data-air-mode="high-contrast"] .air-button--filled,
[data-air-mode="high-contrast"] .air-button--glows {
  box-shadow: 0 0 0 calc(var(--air-button-edge-width) * 1px) var(--air-b-light);
}
[data-air-mode="high-contrast"] .air-button--glows { background: linear-gradient(180deg, var(--air-b-top), var(--air-b-bottom)); }
[data-air-mode="high-contrast"] .air-button--breathes::before { animation: none; }
[data-air-mode="high-contrast"] .air-button--raised { box-shadow: inset 0 0 0 1.5px var(--air-line); }

.air-button--disabled { opacity: var(--air-inert-opacity); cursor: default; }
.air-button--disabled:active { transform: none; }

.air-busy-arc {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: air-spin 0.9s linear infinite;
}
@keyframes air-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .air-busy-arc { animation: none; } }


/* 30-section.css */
/* A section's heading: inset 4 from the tiles' edge. Each part is a band
   holding the air above the words (the section gap) and below them (the
   tile gap), its words centred in what is left, so a pressable part's 48
   target grows into the air and the words stand where they would anyway. */
.air-section { padding: 0 4px; }
.air-section__top { display: flex; align-items: stretch; gap: 10px; }
.air-section__top--pressable { min-height: var(--air-space-target); }
.air-section__band {
  display: flex; align-items: center;
  padding-top: var(--air-space-section-gap);
  padding-bottom: var(--air-space-tile-gap);
}
.air-section__band--nested { padding-top: 0; }
.air-section__band--lined { padding-bottom: 0; }
.air-section__name { flex: 1; min-width: 0; }
.air-section__title { color: var(--air-text); min-width: 0; }
.air-section__open { margin-left: 4px; transform: rotate(-90deg); }
.air-section__count { color: var(--air-text-3); }
.air-section__right { justify-content: flex-end; }
.air-section__action { min-width: var(--air-space-target); }
.air-section__line { color: var(--air-text-2); padding: 6px 0 var(--air-space-tile-gap); }
/* The app draws the lit part as the lead style at 700 (AirSection._lineText):
   the one weight here that no generated type class carries. */
.air-section__lit { color: var(--air-accent); font-weight: 700; }


/* 32-switch.css */
/* The switch: a 52 × 48 target, the 52 × 32 track centred in it. */
.air-switch {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent; font: inherit;
  width: 52px; height: var(--air-space-target); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.air-switch:disabled { cursor: default; }

/* Off: the raised tile's tone, a 1.5 line edge inside, the knob in text3 at
   the left, 4 in. On: accent, no edge, the knob in the words' colour, 20
   along. The knob travels on the travel spring. */
.air-switch-track {
  position: relative; display: block; flex: none;
  width: 52px; height: 32px; border-radius: var(--air-shape-pill);
  background: var(--air-tile-raised);
  box-shadow: inset 0 0 0 1.5px var(--air-line);
}
.air-switch-track--on { background: var(--air-accent); box-shadow: none; }
.air-switch-track--inert { opacity: var(--air-inert-opacity); }
.air-switch-track__knob {
  position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--air-text-3);
  transition: transform var(--air-spring-travel-duration) var(--air-spring-travel);
}
.air-switch-track--on .air-switch-track__knob { background: var(--air-on-accent); transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .air-switch-track__knob { transition: none; } }


/* 34-chip.css */
/* The target: at least 48 each way, the pill centred in it. */
.air-chip {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent; font: inherit; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: var(--air-space-target); min-width: var(--air-space-target);
  vertical-align: top; text-align: start;
}
.air-chip:disabled { cursor: default; }

/* The pill: 44 high, a 1-point line edge, the words in text2. */
.air-chip__pill {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--air-line); border-radius: var(--air-shape-pill);
  color: var(--air-text-2);
  transition: background-color var(--air-fade), border-color var(--air-fade), color var(--air-fade);
}
.air-chip__pill--opens { padding-right: 8px; }
.air-chip__pill--clears { padding-right: 10px; }
.air-chip__pill--selected {
  background: var(--air-selected-in-tint, var(--air-selected-tint));
  border-color: var(--air-selected-in-edge, var(--air-selected-edge));
  color: var(--air-selected-in-ink, var(--air-selected-ink));
}
.air-chip__words { min-width: 0; }
.air-chip__count { white-space: pre; }
.air-chip__glyph { margin-right: 6px; }
.air-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--air-community); margin-right: 8px; flex: none; }
.air-chip__opens { margin-left: 2px; }
.air-chip__clears { margin-left: 6px; }
.air-chip__held { display: inline-grid; justify-items: start; }
.air-chip__held > * { grid-area: 1 / 1; }
.air-chip__unseen { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .air-chip__pill { transition: none; } }

/* A row: one line, scrolling sideways, a hairline (24, 10 of air either
   side) between groups, chips 8 apart. */
.air-chip-row {
  display: flex; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.air-chip-row::-webkit-scrollbar { display: none; }
.air-chip-row__slot { display: flex; flex: none; }
.air-chip-row__slot--after { margin-left: 8px; }
.air-chip-row__divider { flex: none; width: 1px; height: 24px; margin: 0 10px; background: var(--air-line); }

/* A cloud: wrapping, the pills 8 apart each way (the targets 4 between runs). */
.air-chip-cloud { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; }


/* 35-tick-box.css */
/* The tick box: a rounded square, its edge 1.8 in text3 off; on, filled and
   edged in its tone with the tick in the ground's colour. */
.air-tick-box {
  box-sizing: border-box; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.8px solid var(--air-text-3);
  background: transparent;
  transition: background-color var(--air-fade), border-color var(--air-fade);
}
.air-tick-box--on { background: var(--air-tick); border-color: var(--air-tick); }
.air-tick-box__tick { color: var(--air-ground); opacity: 0; transition: opacity var(--air-fade); }
.air-tick-box--on .air-tick-box__tick { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .air-tick-box, .air-tick-box__tick { transition: none; }
}


/* 36-suggestion.css */
/* The suggestion: the target at least 48 high, the pill centred in it, as
   wide as its words. The pill is 44 at least with a 1-point edge, 14 either
   side and 6 above and below; unchosen it is washed in the trip's selected
   state (.air-selected-in with --air-selected-m: trip), chosen in the
   accent's. */
.air-suggestion {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent; font: inherit; color: inherit;
  display: flex; align-items: center; justify-content: center; flex: none;
  min-height: var(--air-space-target); max-width: 100%; box-sizing: border-box;
  text-align: center;
}
.air-suggestion:disabled { cursor: default; }
.air-suggestion__pill {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 44px; max-width: 100%; padding: 6px 14px;
  border: 1px solid var(--air-selected-in-edge, var(--air-selected-edge));
  border-radius: var(--air-shape-pill);
  background: var(--air-selected-in-tint, var(--air-selected-tint));
  color: var(--air-selected-in-ink, var(--air-selected-ink));
  transition: background-color var(--air-fade), border-color var(--air-fade), color var(--air-fade);
}
.air-suggestion__words { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .air-suggestion__pill { transition: none; } }

/* The cloud: centred lines, the pills 8 apart across and the targets 4
   apart down, so the drawn pills are 8 apart. The measure is unseen. */
.air-suggestion-cloud { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.air-suggestion-cloud__line { display: flex; justify-content: center; column-gap: 8px; }
.air-suggestion-cloud__line + .air-suggestion-cloud__line { margin-top: 4px; }
.air-suggestion-cloud__measure {
  position: absolute; left: 0; top: 0; height: 0; overflow: hidden;
  visibility: hidden; white-space: nowrap; pointer-events: none;
}
.air-suggestion-cloud__measure > span { display: inline-block; }


/* 40-button-group.css */
/* The track: a pill in a tile's fill (the surface), 4 either side. */
.air-bgroup {
  display: block;
  border-radius: var(--air-shape-pill);
  padding: 0 4px;
}

.air-bgroup__row { position: relative; display: flex; gap: 3px; }

/* Each segment is the track's full height as a target: 4, the drawn 44, 4.
   Its width is its words and its padding, and an equal share of what is left. */
.air-bgroup__segment {
  appearance: none; border: 0; margin: 0; background: transparent; font: inherit;
  position: relative; z-index: 1;
  display: flex; flex: 1 0 auto; min-width: var(--air-space-target);
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--air-fade);
  -webkit-tap-highlight-color: transparent;
}
.air-bgroup__segment:disabled { cursor: default; }
.air-bgroup__drawn {
  flex: 1; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 14px;
  text-align: center;
}
.air-bgroup__words { display: inline-flex; align-items: center; white-space: nowrap; }
.air-bgroup__count { white-space: pre; }
.air-bgroup__leading {
  width: 16px; height: 16px; margin-right: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.air-bgroup__leading > .air-icon { font-size: 16px; width: 16px; height: 16px; }

/* The selection, travelling between the segments' places. */
.air-bgroup__lit {
  position: absolute; top: 4px; bottom: 4px; z-index: 0;
  border-radius: var(--air-shape-pill);
  background: var(--air-selected-tint);
  box-shadow: inset 0 0 0 1px var(--air-selected-edge);
  transition:
    left var(--air-spring-travel-duration) var(--air-spring-travel),
    width var(--air-spring-travel-duration) var(--air-spring-travel),
    background-color var(--air-fade), box-shadow var(--air-fade), opacity var(--air-fade);
}
.air-bgroup__lit--none { opacity: 0; }

/* Wrapped: every segment in sight at its own width, each lit in place, the
   track's ends the pill's round (22 + 4). */
.air-bgroup--wrapped { border-radius: 26px; padding: 4px; }
.air-bgroup--wrapped .air-bgroup__row { flex-wrap: wrap; }
.air-bgroup--wrapped .air-bgroup__segment { flex: 0 1 auto; max-width: 100%; padding: 0; border-radius: var(--air-shape-pill); }
.air-bgroup--wrapped .air-bgroup__drawn { min-height: var(--air-space-target); }
.air-bgroup--wrapped .air-bgroup__words { white-space: normal; }
.air-bgroup--wrapped .air-bgroup__segment--on {
  background: var(--air-selected-tint);
  box-shadow: inset 0 0 0 1px var(--air-selected-edge);
}

/* A meaning's selection: washed and edged as strongly as the selected
   state's own (the mode's shares), its words in the meaning itself. */
.air-bgroup__lit.air-bgroup--meaning,
.air-bgroup--wrapped .air-bgroup__segment--on.air-bgroup--meaning {
  background: color-mix(in srgb, var(--air-m) var(--air-selected-tint-share), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--air-m) var(--air-selected-edge-share), transparent);
}

/* The words measured unseen, each on one line. */
.air-bgroup__measure {
  position: absolute; left: 0; top: 0; height: 0; overflow: hidden;
  visibility: hidden; white-space: nowrap; pointer-events: none;
}
.air-bgroup__measure > span { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .air-bgroup__lit { transition: none; }
}


/* 42-search.css */
/* The pill: 52 high at least, 18 either side (2 at the right once the ✕
   stands there on its own 48), the glyph, 10, the words. */
.air-search {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--air-shape-pill);
  transition: box-shadow var(--air-fade);
}
.air-search--clearable { padding-right: 2px; gap: 0; }
.air-search--clearable > .air-icon { margin-right: 10px; }
.air-search--bar { height: 40px; min-height: 0; }

.air-search__input {
  appearance: none; border: 0; outline: 0; background: transparent; margin: 0;
  flex: 1; min-width: 0;
  padding: 14px 0;
  color: var(--air-text);
  caret-color: var(--air-accent);
}
.air-search--bar .air-search__input { padding: 0; }
.air-search__input::placeholder { color: var(--air-text-3); opacity: 1; }
.air-search__input::-webkit-search-cancel-button,
.air-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.air-search__clear {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  width: var(--air-space-target); height: var(--air-space-target); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* A chip beside it: the row is as tall as the taller of the two, and both fill it. */
.air-search-beside { display: flex; align-items: stretch; gap: 8px; }
.air-search-beside > .air-search { flex: 1; min-width: 0; }
.air-search-beside__chip { display: flex; flex: none; }
.air-search-beside__chip > * { height: auto; min-height: 0; }


/* 44-tile-grid.css */
/* The grid: columns as many as fit their least width, tileGap apart; a
   row's tiles as tall as its tallest. AirTileGrid sets the columns and each
   tile's span once it has measured; until then the columns fit themselves. */
.air-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(9.6 * 16px), 1fr));
  gap: var(--air-space-tile-gap);
  align-items: stretch;
}
.air-grid--wide { gap: var(--air-space-tile-gap-wide); }
.air-grid__cell { display: contents; }
.air-grid__cell > * { grid-column: span var(--air-grid-span, 1); min-width: 0; }


/* 46-stepper.css */
.air-stepper { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.air-stepper__row { display: flex; align-items: center; }
.air-stepper__row--apart { justify-content: space-between; }
.air-stepper__figure { flex: 1; min-width: 0; display: flex; justify-content: center; }

/* The number in figure, its line 1.1; not known, a dash in text3. */
.air-stepper__number {
  line-height: 1.1;
  color: var(--air-text);
  text-align: center;
  white-space: nowrap;
}
.air-stepper__number--unknown { color: var(--air-text-3); }
.air-stepper__input {
  appearance: none; border: 0; outline: 0; background: transparent; margin: 0; padding: 0;
  width: 100%; min-width: 0;
  caret-color: var(--air-accent);
}
.air-stepper__input::placeholder { color: var(--air-text-3); opacity: 1; }
.air-stepper__measure {
  position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none;
}

.air-stepper__target {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  width: var(--air-space-target); height: var(--air-space-target); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.air-stepper__target:disabled { cursor: default; }
.air-stepper__target:disabled:active { transform: none; }
.air-stepper__circle {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--air-tile-raised);
}
[data-air-mode="high-contrast"] .air-stepper__circle { box-shadow: inset 0 0 0 1.5px var(--air-line); }


/* 48-stars.css */
.air-stars { display: inline-flex; align-items: center; vertical-align: top; }
.air-stars__shown { display: inline-flex; }

/* Each star a 48 target at least; pressed, it grows (1.25) on the press spring. */
.air-stars__star {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  min-width: var(--air-space-target); min-height: var(--air-space-target);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--air-spring-press-duration) var(--air-spring-press);
  -webkit-tap-highlight-color: transparent;
}
.air-stars__star:active { transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .air-stars__star, .air-stars__star:active { transition: none; transform: none; }
}


/* 50-glass.css */
/* Glass (AirGlass): the ground at 58% (62% light) over a 20 blur with 160%
   saturation (AirGlass.blur, AirGlass.saturation), its edge drawn inside the
   shape over the body, as a Flutter border paints. The edge is 1 point; 1.5
   and solid, with no blur, in high contrast (--air-glass is the tile there). */
.air-glass {
  --air-glass-e: var(--air-glass-edge);
  --air-glass-w: 1px;
  position: relative;
  background: var(--air-glass);
  -webkit-backdrop-filter: blur(var(--air-glass-blur)) saturate(var(--air-glass-saturation));
  backdrop-filter: blur(var(--air-glass-blur)) saturate(var(--air-glass-saturation));
  color: var(--air-text);
}
[data-air-mode="high-contrast"] .air-glass {
  --air-glass-w: 1.5px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.air-glass--around { --air-glass-line: inset 0 0 0 var(--air-glass-w) var(--air-glass-e); }
.air-glass--below { --air-glass-line: inset 0 calc(var(--air-glass-w) * -1) 0 var(--air-glass-e); }
.air-glass--above { --air-glass-line: inset 0 var(--air-glass-w) 0 var(--air-glass-e); }
.air-glass--right { --air-glass-line: inset calc(var(--air-glass-w) * -1) 0 0 var(--air-glass-e); }
.air-glass--none { --air-glass-line: 0 0 transparent; }
.air-glass { box-shadow: var(--air-glass-line); }
/* Floating: the shadow, black 35%, dropped 12, a 30 blur, cast outside the
   shape only (the app converts the CSS blur to Flutter's with
   AirSurface.cssBlur, so the two draw alike). */
.air-glass--floating { box-shadow: var(--air-glass-line), 0 12px 30px var(--air-glass-shadow); }
/* A meaning's glow round it: a 34 blur, spread 4; high contrast drops it. */
.air-glass--glow { box-shadow: var(--air-glass-line), 0 0 34px 4px var(--air-glass-g); }
.air-glass--glow.air-glass--floating {
  box-shadow: var(--air-glass-line), 0 0 34px 4px var(--air-glass-g), 0 12px 30px var(--air-glass-shadow);
}
[data-air-mode="high-contrast"] .air-glass--glow { box-shadow: var(--air-glass-line); }
[data-air-mode="high-contrast"] .air-glass--glow.air-glass--floating { box-shadow: var(--air-glass-line), 0 12px 30px var(--air-glass-shadow); }

/* A glass circle: 48 across, the glyph 22 centred; the tile at rest. */
.air-glass-circle {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent;
  position: relative; flex: none;
  width: var(--air-space-target); height: var(--air-space-target);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--air-text);
}
.air-glass-circle--tile { background: var(--air-tile); }
.air-glass-circle__glass { position: absolute; inset: 0; }
.air-glass-circle > .air-icon { position: relative; }

/* A glass pill: 44 high, centred in a 48 target, 16 either side of its words. */
.air-glass-pill {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent; font: inherit;
  display: inline-flex; align-items: center; flex: none;
  min-height: var(--air-space-target);
}
.air-glass-pill__glass {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 16px;
}
.air-glass-pill__word { white-space: nowrap; }


/* 52-page-header.css */
/* What both headers share (AirHeaderBackdrop, AirHeaderTitle): the glass
   behind the whole header once content is under it, and the title centred
   in it, one line. The backdrop's box stands the glass beneath whatever it
   holds. */
.air-header-backdrop-box { position: relative; isolation: isolate; }
.air-header-backdrop { position: absolute; inset: 0; z-index: -1; }
.air-header-backdrop__rest { position: absolute; inset: 0; z-index: -1; }
.air-header-title {
  height: 100%; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--air-text);
}
.air-header-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air-header-title--lines > span {
  white-space: normal; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--air-title-lines);
}
.air-header-title--placeholder > span { color: var(--air-text-3); }
.air-header-title--hidden { opacity: 0; pointer-events: none; }
/* In a header's row it is laid over the row, between the circles. */
.air-page-header__title, .air-sheet-header__title { position: absolute; top: 0; bottom: 0; height: auto; }

/* A page's header: sticks to the top of what scrolls; a 64 row, 10 in. */
.air-page-header {
  position: sticky; top: 0; z-index: 2;
  height: 64px;
}
.air-page-header__row {
  position: relative; height: 100%;
  display: flex; align-items: center;
  padding: 0 10px;
}
.air-page-header__label { flex: 1; min-width: 0; }
.air-page-header__label-words {
  color: var(--air-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.air-page-header__title { left: var(--air-bar-left, 64px); right: var(--air-bar-right, 64px); }
/* A corner of the row: measured, to keep the title clear of the wider of the two. */
.air-page-header__end { display: flex; flex: none; }

/* The action and search in one pill: two 48 halves, a hairline between. */
.air-header-actions { display: flex; align-items: center; height: var(--air-space-target); flex: none; }
.air-header-actions__half {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent;
  width: var(--air-space-target); height: var(--air-space-target); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.air-header-actions__hairline { width: 1px; height: 24px; background: var(--air-glass-edge); flex: none; position: relative; }

/* A page's large title: the kicker (label capitals, accent) 4 above it. */
.air-page-title { display: flex; flex-direction: column; align-items: flex-start; }
.air-page-title__kicker {
  color: var(--air-accent); padding-bottom: 4px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.air-page-title__title {
  color: var(--air-text); max-width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.air-page-title__line { padding-top: 4px; }


/* 53-header-search.css */
/* The search in a header's row: from the search button's left edge (the
   row's width less 10 and a 48 circle) out to the 18 gutter, its right edge
   pulling in from 10 by a circle and its 8 as the ✕ arrives. */
.air-header-search { position: relative; height: 100%; }
.air-header-search__field {
  position: absolute; top: 0; bottom: 0;
  left: calc((100% - 58px) * (1 - var(--air-hs-stretch)) + var(--air-space-gutter) * var(--air-hs-stretch));
  right: calc(10px + 56px * var(--air-hs-pull));
  display: flex; flex-direction: column; justify-content: center;
}
.air-header-search__close {
  position: absolute; right: 10px; top: 0; bottom: 0; width: var(--air-space-target);
  display: flex; align-items: center; justify-content: center;
}


/* 54-sheet-header.css */
/* A sheet's header: the sheet's ground at rest, glass once content is
   beneath; 8 above the grabber, 8 below the row, 10 from the sides. */
.air-sheet-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--air-ground);
}
.air-sheet-header--scrolled { background: transparent; }
.air-sheet-header__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 10px;
}
.air-sheet-header__grabber {
  width: 40px; height: 5px; border-radius: 3px; margin-bottom: 8px;
  background: var(--air-line);
}
.air-sheet-header__row { position: relative; align-self: stretch; display: flex; align-items: center; min-height: var(--air-space-target); }
.air-sheet-header__spare { width: var(--air-space-target); flex: none; }
.air-sheet-header__middle { flex: 1; min-width: 0; padding: 0 12px; }
.air-sheet-header__title { left: 60px; right: 60px; }

/* A flow's steps: segments 5 high, 6 apart, corners 3. */
.air-progress { display: flex; gap: 6px; }
.air-progress__segment { flex: 1; height: 5px; border-radius: 3px; background: var(--air-tile-raised); }
.air-progress__segment--reached { background: var(--air-progress-on); }


/* 56-dock.css */
/* The dock: 12 from the sides, 22 above the edge; the capsule 8 inside,
   its corner 36; 520 across, centred, on a wide screen. */
.air-dock { padding: 0 12px 22px; }
.air-dock__capsule { padding: 8px; }
@media (min-width: 600px) { .air-dock__capsule { max-width: 520px; margin: 0 auto; } }

/* Buttons inside fill their share and stand 52 high (AirDock.dockedHeight). */
.air-dock .air-button { display: flex; width: 100%; }
.air-dock .air-button:not(.air-button--circle):not(.air-button--compact) { min-height: 52px; }
.air-dock .air-button--circle { width: auto; }
.air-dock__pair { display: flex; align-items: stretch; gap: 10px; }
.air-dock__pair > * { flex: 1 1 0; min-width: 0; }
.air-dock__stack { display: flex; flex-direction: column; gap: 10px; }
.air-dock__with-trailing { display: flex; align-items: center; gap: 10px; }
.air-dock__with-trailing > :first-child { flex: 1; min-width: 0; }


/* 57-report-doors.css */
/* The doors at a page's foot: a section gap above, full width, a tile gap
   apart. */
.air-report-doors { padding-top: var(--air-space-section-gap); display: flex; flex-direction: column; gap: var(--air-space-tile-gap); }
.air-report-doors > .air-button { width: 100%; }


/* 58-dock-area.css */
/* A dock's area: the content fills it and scrolls (clipped here), the dock
   stands at its foot, floating over the content. */
.air-dock-area { position: relative; height: 100%; }
.air-dock-area__content { height: 100%; box-sizing: border-box; overflow: hidden; }
.air-dock-area__dock { position: absolute; left: 0; right: 0; bottom: 0; }


/* 59-picker.css */
/* A picker's sheet: the sheet's ground, 20 round at the top, standing at
   the foot of its box. The header's room, the search (12 above and below
   it, 16 in from the sides) or 12 of air without one, then the rows, 16 in. */
.air-picker { position: relative; background: var(--air-ground); border-radius: 20px 20px 0 0; overflow: hidden; }
.air-picker__search { padding: 12px 16px; }
.air-picker__space { height: 12px; }
.air-picker__rows { padding: 0 16px; }


/* 60-own-listing.css */
/* Your own listing's mark: the dot over the glyph's lower right corner,
   and a gap bitten out of the glyph round it (radius 7: the dot's 5 and
   the gap's 2). The glyph's box is widened 8 all round before the bite is
   masked, so a glyph that paints past its box keeps its overshoot. */
.air-own-mark { position: relative; display: inline-flex; flex: none; vertical-align: top; }
.air-own-mark__glyph {
  display: inline-flex;
  margin: -8px;
  padding: 8px;
  -webkit-mask: radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), transparent 6.75px, #000 7.25px);
  mask: radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), transparent 6.75px, #000 7.25px);
}
.air-own-mark__dot,
.air-own-tag__dot {
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: var(--air-community);
}
.air-own-mark__dot { position: absolute; right: 0; bottom: 0; }

.air-own-tag { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; min-width: 0; }
.air-own-tag__words { color: var(--air-community); }


/* 61-attraction.css */
/* The attraction (AIRTIME §9.2): a tile (131 high at least, the words at
   its foot) or a row (66 high at least, its contents centred in it). */
.air-attraction__tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 103px; }
.air-attraction__head { display: flex; align-items: flex-start; }
.air-attraction__spacer { flex: 1; }
.air-attraction--tile .air-attraction__words { padding-top: 12px; }

.air-attraction--row { display: flex; flex-direction: column; justify-content: center; }
.air-attraction__row { display: flex; align-items: center; }
.air-attraction__row > .air-attraction__words { flex: 1; min-width: 0; margin-left: 14px; }

.air-attraction__name { color: var(--air-text); }
.air-attraction__line { padding-top: 3px; color: var(--air-text-3); }
.air-attraction__found-by { padding-top: 3px; color: var(--air-text-3); font-style: italic; }

.air-attraction__status { padding-top: 4px; margin-left: 8px; display: inline-flex; }
.air-attraction__count { margin-left: 10px; line-height: 1; color: var(--air-text); }
/* What a sitting has just logged: "+n" on the accent, a pill 26 high. */
.air-attraction__added {
  margin-left: 10px;
  min-width: 26px; min-height: 26px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--air-accent);
  color: var(--air-on-accent);
}
.air-attraction__added > span { line-height: 1; }

/* The stamp under a tile's line: fitted into 24, from its left. */
.air-attraction__stamp { display: flex; align-items: center; height: 32px; padding-top: 8px; }
.air-attraction__stamp-fit { display: inline-flex; flex: none; transform-origin: left center; }


/* 62-ticket.css */
/* The ticket (AIRTIME §9.3). The notches and punches are cut out with mask
   layers, one disc each, so the ground shows through them. A mask cuts the
   element's own edges too, so an edge that follows a notch round is drawn
   by a disc at the notch (__notch) whose outer shadow falls inside the
   paper: a stroke on the notched outline, as the app strokes it. */

/* The tear's colour: text3 at 45%. */
.air-ticket, .air-ticket-compact { --air-tear: color-mix(in srgb, var(--air-text-3) 45%, transparent); }

/* ---- The stamp: word over number, a double rule, 7 degrees off level. */
.air-stamp {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; flex: none;
  padding: 6px 12px;
  color: var(--air-s);
  transform: rotate(-7deg);
  vertical-align: top;
}
.air-stamp__label, .air-stamp__number { display: block; white-space: nowrap; line-height: 1.1; }
/* The number is the app's numeric face at 11 (monoNumeric: Roboto 900,
   tabular), which the type tokens do not carry as a style of its own. */
.air-stamp__number {
  font-size: 11px; letter-spacing: 1.2px; line-height: 1.2;
  text-transform: none; font-variant-numeric: tabular-nums;
}
/* Inked: a 2-point rule centred on the box (radius 7), a 1-point rule 3.5 inside it. */
.air-stamp::before, .air-stamp::after { content: ''; position: absolute; pointer-events: none; border-style: solid; border-color: currentColor; }
.air-stamp::before { inset: -1px; border-width: 2px; border-radius: 8px; }
.air-stamp::after { inset: 3px; border-width: 1px; border-radius: 4px; }
/* Pending: one dashed rule (1.5, 4 on 4 off). */
.air-stamp--pending::before, .air-stamp--pending::after { content: none; }
.air-stamp__dashes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.air-stamp__dashes rect { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 4; }

/* ---- A printed field: a label over a value. */
.air-ticket-field { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; vertical-align: top; }
.air-ticket-field__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.air-ticket-field__label { color: var(--air-text-2); }
.air-ticket-field__answer { display: flex; align-items: center; min-width: 0; max-width: 100%; margin-top: 2px; }
.air-ticket-field__value { color: var(--air-text); min-width: 0; }
.air-ticket-field__value--one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The value's figure: the app's numeric face at 17 (monoNumeric), which
   the type tokens do not carry as a style of its own. */
.air-ticket-field__figure { font-size: 17px; }
.air-ticket-field__arrow { margin-left: 2px; }
/* A control: the text at 6%, 14 round, 48 high at least, centred in it. */
.air-ticket-field--control {
  justify-content: center;
  min-height: var(--air-space-target);
  padding: 7px 10px 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--air-text) 6%, transparent);
}
.air-ticket-field__controlled { display: flex; flex-direction: column; align-items: stretch; }
.air-ticket-field__child { margin-top: 4px; }
.air-ticket-field__hint { color: var(--air-text-3); text-align: center; }

.air-ticket-fields { display: flex; align-items: flex-end; }
.air-ticket-fields__share { flex: 1 1 0; min-width: 0; }

/* ---- The ticket: two pieces, the tear between. */
.air-ticket { display: flex; flex-direction: column; }
.air-ticket__piece { position: relative; }
.air-ticket__main {
  border-radius: var(--air-shape-tile) var(--air-shape-tile) 0 0;
  /* The stamp's colour at 16% at the top, the paper by 42% of the height. */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--air-t) 16%, var(--air-ticket-paper)) 0%,
    var(--air-ticket-paper) 42%);
  box-shadow: inset 0 1px 0 var(--air-tile-top-light);
  -webkit-mask:
    radial-gradient(circle at 0 100%, transparent calc(var(--air-shape-notch-large) - 0.25px), #000 calc(var(--air-shape-notch-large) + 0.25px)),
    radial-gradient(circle at 100% 100%, transparent calc(var(--air-shape-notch-large) - 0.25px), #000 calc(var(--air-shape-notch-large) + 0.25px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 100%, transparent calc(var(--air-shape-notch-large) - 0.25px), #000 calc(var(--air-shape-notch-large) + 0.25px)),
    radial-gradient(circle at 100% 100%, transparent calc(var(--air-shape-notch-large) - 0.25px), #000 calc(var(--air-shape-notch-large) + 0.25px));
  mask-composite: intersect;
}
[data-air-mode="light"] .air-ticket__main { box-shadow: none; }
/* The stub: a shade deeper than the paper. */
.air-ticket__stub {
  border-radius: 0 0 var(--air-shape-tile) var(--air-shape-tile);
  background: linear-gradient(var(--air-stub-shade-dark), var(--air-stub-shade-dark)), var(--air-ticket-paper);
}
[data-air-mode="light"] .air-ticket__stub {
  background: linear-gradient(var(--air-stub-shade-light), var(--air-stub-shade-light)), var(--air-ticket-paper);
}
/* The tear: dashes of 4 every 10, round-capped, between the notches (8 clear of each). */
.air-ticket__tear {
  position: absolute; top: 0; left: calc(var(--air-shape-notch-large) + 8px);
  width: calc(100% - 2 * (var(--air-shape-notch-large) + 8px)); height: 2px; overflow: visible; pointer-events: none;
}
.air-ticket__tear line { stroke: var(--air-tear); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }

/* The notch discs carry an edge only in high contrast. */
.air-ticket__notch {
  position: absolute; pointer-events: none; border-radius: 50%;
  width: calc(var(--air-shape-notch-large) * 2); height: calc(var(--air-shape-notch-large) * 2);
}
.air-ticket__notch--bl { left: calc(var(--air-shape-notch-large) * -1); bottom: calc(var(--air-shape-notch-large) * -1); }
.air-ticket__notch--br { right: calc(var(--air-shape-notch-large) * -1); bottom: calc(var(--air-shape-notch-large) * -1); }
.air-ticket__notch--tl { left: calc(var(--air-shape-notch-large) * -1); top: calc(var(--air-shape-notch-large) * -1); }
.air-ticket__notch--tr { right: calc(var(--air-shape-notch-large) * -1); top: calc(var(--air-shape-notch-large) * -1); }

/* High contrast: flat paper, and a 1.5 edge round each piece but along the
   tear (drawn past the tear side, where the piece's mask cuts it off). */
[data-air-mode="high-contrast"] .air-ticket__main,
[data-air-mode="high-contrast"] .air-ticket__stub { background: var(--air-ticket-paper); box-shadow: none; }
[data-air-mode="high-contrast"] .air-ticket__piece::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  box-shadow: inset 0 0 0 1.5px var(--air-tile-top-light);
}
[data-air-mode="high-contrast"] .air-ticket__main::before { inset: 0 0 -2px 0; border-radius: var(--air-shape-tile) var(--air-shape-tile) 0 0; }
[data-air-mode="high-contrast"] .air-ticket__stub::before { inset: -2px 0 0 0; border-radius: 0 0 var(--air-shape-tile) var(--air-shape-tile); }
[data-air-mode="high-contrast"] .air-ticket__notch { box-shadow: 0 0 0 1.5px var(--air-tile-top-light); }

/* The punches' strip, at the stub's foot: what they count, then the rims. */
.air-ticket__punch { position: relative; }
.air-ticket__punch-label { position: absolute; left: 16px; height: 11px; display: flex; align-items: center; min-width: 0; }
.air-ticket__punch-label > span { color: var(--air-text-2); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air-ticket__rim { position: absolute; border-radius: 50%; pointer-events: none; }

/* ---- In a list: the body, and a stub of 110 at the right. */
.air-ticket-compact-shadow { filter: drop-shadow(0 1px 1px var(--air-tile-shadow)); }
.air-ticket-compact {
  --air-ticket-stub: 110px;
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--air-ticket-stub)) 0, transparent calc(var(--air-shape-notch) - 0.25px), #000 calc(var(--air-shape-notch) + 0.25px)),
    radial-gradient(circle at calc(100% - var(--air-ticket-stub)) 100%, transparent calc(var(--air-shape-notch) - 0.25px), #000 calc(var(--air-shape-notch) + 0.25px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at calc(100% - var(--air-ticket-stub)) 0, transparent calc(var(--air-shape-notch) - 0.25px), #000 calc(var(--air-shape-notch) + 0.25px)),
    radial-gradient(circle at calc(100% - var(--air-ticket-stub)) 100%, transparent calc(var(--air-shape-notch) - 0.25px), #000 calc(var(--air-shape-notch) + 0.25px));
  mask-composite: intersect;
}
.air-ticket-compact__row { display: flex; align-items: stretch; min-height: 80px; }
.air-ticket-compact__body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.air-ticket-compact__words { flex: 1; min-width: 0; }
.air-ticket-compact__name { color: var(--air-text); }
.air-ticket-compact__line { color: var(--air-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air-ticket-compact__below, .air-ticket-compact__stars { padding-top: 3px; }
.air-ticket-compact__stars { display: flex; }
/* The stub: the stamp centred, the tear (dashes of 5 every 9) down its leading edge. */
.air-ticket-compact__stub {
  width: var(--air-ticket-stub); flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  background: repeating-linear-gradient(to bottom, var(--air-tear) 0 5px, transparent 5px 9px) left top / 2px 100% no-repeat;
}
/* The notches' edges: the top light's crescent under the top notch in
   dark; the mode's edge, or the tint's, or the selected edge, round both. */
.air-ticket-compact__notch {
  position: absolute; pointer-events: none; border-radius: 50%;
  width: calc(var(--air-shape-notch) * 2); height: calc(var(--air-shape-notch) * 2);
  left: calc(100% - var(--air-ticket-stub) - var(--air-shape-notch));
  box-shadow: 0 1px 0 0 var(--air-tile-top-light);
}
.air-ticket-compact__notch--top { top: calc(var(--air-shape-notch) * -1); }
.air-ticket-compact__notch--bottom { bottom: calc(var(--air-shape-notch) * -1); }
[data-air-mode="high-contrast"] .air-ticket-compact__notch { box-shadow: 0 0 0 1.5px var(--air-tile-top-light); }
[data-air-mode="high-contrast"] .air-surface--meaning .air-ticket-compact__notch { box-shadow: 0 0 0 2px var(--air-m); }
.air-surface--selected .air-ticket-compact__notch,
[data-air-mode] .air-surface--selected .air-ticket-compact__notch { box-shadow: 0 0 0 1.5px var(--air-selected-edge); }


/* 70-field.css */
/* The field: a tile at 18 corners, 56 high at least, 16 either side, 9
   above and 11 below; what it holds stands centred in it, as a Row does.
   A glyph keeps its room at the right: 10, then its 22. */
.air-field {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56px;
  padding: 9px 16px 11px;
  border-radius: var(--air-shape-field);
  color: var(--air-text);
  transition: box-shadow var(--air-fade);
}
.air-field--glyph { padding-right: calc(16px + 10px + 22px); }
/* Inside the dock's capsule its corner follows the capsule's: 36 less the
   capsule's 8 (AirDock.innerRadius). */
.air-dock .air-field { border-radius: 28px; }

.air-field__main { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.air-field__label { color: var(--air-text-3); padding-bottom: 3px; }

/* The answer at 17 with its line 1.35 (AirField.answerStyle); an empty
   one in text3 at the regular weight. */
.air-field__answer { line-height: 1.35; color: var(--air-text); animation: air-field-arrive var(--air-fade) ease both; }
.air-field__answer--empty { color: var(--air-text-3); }
@keyframes air-field-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .air-field__answer { animation: none; } }

.air-field__typed { display: flex; align-items: baseline; gap: 4px; }
.air-field__input, .air-field__input.air-typed {
  appearance: none; border: 0; outline: 0; background: transparent; margin: 0; padding: 0;
  flex: 1; min-width: 0; display: block;
  resize: none; overflow: hidden;
  line-height: 1.35;
  color: var(--air-text);
  caret-color: var(--air-accent);
}
.air-field__input::placeholder { color: var(--air-text-3); opacity: 1; }
.air-field__unit { color: var(--air-text-3); flex: none; }

/* The glyph: centred on the tile's height, a 48 target over its room.
   As a button it is ringed, a 36 disc in the selected tint and edge. */
.air-field__glyph {
  position: absolute; top: 0; bottom: 0; right: calc(16px - (var(--air-space-target) - 22px) / 2);
  margin: auto 0;
  width: var(--air-space-target); height: var(--air-space-target);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.air-field__glyph--button { pointer-events: auto; }
.air-field__ring {
  position: absolute; width: 36px; height: 36px; border-radius: 50%;
  background: var(--air-selected-tint);
  box-shadow: inset 0 0 0 1px var(--air-selected-edge);
  opacity: 0;
  transition: opacity var(--air-fade);
}
.air-field__glyph--button .air-field__ring { opacity: 1; }
.air-field__glyph > .air-icon { position: relative; }
.air-field__glyph-ink { color: var(--air-selected-ink); }


/* 72-name-field.css */
/* The name over its two-point rule: the selected edge, the accent while
   typed into. The ✕'s 48 room sets the least height and is kept while the
   ✕ is hidden; the rule runs under it. The name stands at the top, the ✕
   centred on the name's lines. */
.air-name-field__rule {
  display: flex; align-items: center;
  border-bottom: 2px solid var(--air-selected-edge);
  transition: border-color var(--air-fade);
}
.air-name-field__rule:focus-within { border-bottom-color: var(--air-accent); }

/* The title's size with its line 1.12 (AirNameField.nameStyle), 4 clear of
   the rule. */
.air-name-field__input, .air-name-field__input.air-typed {
  appearance: none; border: 0; outline: 0; background: transparent; margin: 0;
  flex: 1; min-width: 0; display: block; align-self: flex-start;
  padding: 0 0 4px;
  resize: none; overflow: hidden;
  line-height: 1.12;
  color: var(--air-text);
  caret-color: var(--air-accent);
}
.air-name-field__input::placeholder { color: var(--air-dim); opacity: 1; }

.air-name-field__clear {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0 0 -2px;
  width: var(--air-space-target); height: var(--air-space-target); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--air-fade);
}
.air-name-field__clear--shown { opacity: 1; pointer-events: auto; }


/* 73-text-box.css */
/* The text box: a field's tile at 18 corners, 16 either side and 13 above
   and below; the words at body with a reading line of 1.45. It grows from
   its least lines to its most, then scrolls inside itself. */
.air-text-box {
  display: block; box-sizing: border-box;
  padding: 13px 16px;
  border-radius: var(--air-shape-field);
  color: var(--air-text);
  transition: box-shadow var(--air-fade);
}
/* Inside the dock's capsule its corner follows the capsule's, as a field's. */
.air-dock .air-text-box { border-radius: 28px; }

.air-text-box__input, .air-text-box__input.air-typed {
  appearance: none; border: 0; outline: 0; background: transparent; margin: 0; padding: 0;
  display: block; width: 100%; box-sizing: border-box; min-width: 0;
  /* Flutter's editable text keeps the caret's 2 points clear at the line's end. */
  padding-right: 2px;
  resize: none; overflow: hidden;
  line-height: 1.45;
  color: var(--air-text);
  caret-color: var(--air-accent);
}
textarea.air-text-box__input { min-height: calc(var(--air-lines-min) * 1.45em); }
textarea.air-text-box__input--capped { max-height: calc(var(--air-lines-max) * 1.45em); overflow-y: auto; }
.air-text-box__input::placeholder { color: var(--air-text-3); opacity: 1; }


/* 74-type-grid.css */
/* The grid: 8 between tiles both ways; a row as tall as its tallest. */
.air-type-grid { display: grid; gap: 8px; }

/* A tile: a field's 18 corners, 8 either side and 12 above and below, the
   glyph (28), 6, the word; centred. Pressed, it shrinks deeper than a
   button (0.94), since it is small and square. The selected state cross-fades. */
.air-type-tile {
  --air-press-scale: 0.94;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 8px;
  border-radius: var(--air-shape-field);
  transition:
    transform var(--air-spring-press-duration) var(--air-spring-press),
    background-color var(--air-fade), box-shadow var(--air-fade);
}
.air-type-tile__ink { color: var(--air-text-2); transition: color var(--air-fade); }
.air-surface--selected .air-type-tile__ink { color: var(--air-selected-ink); }
.air-type-tile__word { margin-top: 6px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .air-type-tile { transition: none; } }


/* 76-fold.css */
/* The folded line: 56 high at least, 16 either side and 10 above and
   below, outlined 1.5 in the line colour at a field's 18 corners (drawn
   over the padding, as a DecoratedBox draws it). */
.air-fold__line {
  display: flex; align-items: center;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: var(--air-shape-field);
  box-shadow: inset 0 0 0 1.5px var(--air-line);
}
.air-fold__line:focus-visible { outline: 0; background: var(--air-selected-tint); }
.air-fold__line > .air-glyph-square { margin-right: 12px; }
.air-fold__words { flex: 1; min-width: 0; white-space: pre-wrap; }
.air-fold__title { color: var(--air-text); }
.air-fold--quiet .air-fold__title { color: var(--air-text-3); }
.air-fold__tag { color: var(--air-text-3); }
.air-fold__detail { padding-left: 12px; color: var(--air-text-3); flex: none; }
.air-fold__chevron { margin-left: 12px; transition: transform var(--air-fade) ease; }
.air-fold--open .air-fold__chevron { transform: rotate(180deg); }

/* The chapter: 10 below the line; opening eases its size and fades it in,
   closing the other way. */
.air-fold__body { display: grid; grid-template-rows: 1fr; animation: air-fold-open var(--air-resize) ease-out both; }
.air-fold__body--leaving { animation-name: air-fold-close; }
.air-fold__inner { min-height: 0; overflow: hidden; padding-top: var(--air-space-tile-gap); }
@keyframes air-fold-open { from { grid-template-rows: 0fr; opacity: 0; } }
@keyframes air-fold-close { to { grid-template-rows: 0fr; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .air-fold__chevron { transition: none; }
  .air-fold__body { animation: none; }
  .air-fold__body--leaving { display: none; }
}


/* 78-change-mark.css */
/* The bar: 4 wide in the edit's colour along the field's leading edge,
   following its 18 corners; beside, a 4 pill in the margin 6 before it.
   It arrives and leaves as a fade, and the field keeps its place. */
.air-change-mark__field { position: relative; }
.air-change-mark__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--air-shape-field);
  border-radius: var(--air-shape-field) 0 0 var(--air-shape-field);
  background: linear-gradient(to right, var(--air-m) 4px, transparent 4px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--air-fade);
}
.air-change-mark--beside .air-change-mark__bar {
  left: calc(-4px - 6px); width: 4px; border-radius: 4px;
  background: var(--air-m);
}
.air-change-mark--changed .air-change-mark__bar { opacity: 1; }

/* "was" and the old value struck through, 4 under the field, level with
   the field's words: inside a tile's 16, or flush beside. */
.air-change-mark__was {
  padding: 4px 16px 0;
  color: var(--air-text-3);
  animation: air-change-mark-arrive var(--air-fade) ease both;
}
.air-change-mark--beside .air-change-mark__was { padding-left: 0; }
.air-change-mark__old { text-decoration: line-through; text-decoration-color: var(--air-text-3); }
@keyframes air-change-mark-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .air-change-mark__bar { transition: none; }
  .air-change-mark__was { animation: none; }
}


/* 80-park-tile.css */
/* The park (AIRTIME §9.4): the glyph and the words in a row, centred
   across; the track under them, closer to the tile's foot than words. */
.air-park-tile__head { display: flex; align-items: center; gap: 12px; }
.air-park-tile__words { flex: 1; min-width: 0; }
.air-park-tile__name { color: var(--air-text); }
.air-park-tile__line { padding-top: 2px; color: var(--air-text-3); }
.air-park-tile__drawing { padding-top: 12px; }

/* The park's track: drawn in SVG from its hills; a painter's strokes are
   not clipped to its box, so neither are these. */
.air-park-track { position: relative; }
.air-park-track__svg { display: block; overflow: visible; }


/* 82-day-strip.css */
/* The Day Strip (AIRTIME §9.4): a 96 band of sky with 12 corners, the
   day's track standing 6 over its foot, the hours under it, and the
   day's words under those. */

.air-day-strip__drawn { position: relative; }
.air-day-strip__band {
  position: absolute; left: 0; right: 0; top: 0; height: 96px;
  border-radius: 12px; overflow: hidden;
  background: var(--air-tile);
}
.air-day-strip__sky { position: absolute; inset: 0; }
/* The horizon's colours faded in down the band over the top's. */
.air-day-strip__horizon {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}
/* Darker at the foot, so the track stands out against a pale horizon. */
.air-day-strip__foot {
  background: linear-gradient(to bottom, var(--air-ground-clear), color-mix(in srgb, var(--air-ground) 60%, transparent));
}
.air-day-strip__track { position: absolute; left: 8px; right: 8px; }
.air-day-strip__marks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.air-day-strip__hour {
  position: absolute; transform: translateX(-50%);
  white-space: nowrap; color: var(--air-text-3);
}

/* A thumbnail is the band alone: the hours under it are cut away. */
.air-day-strip--thumbnail { height: 96px; overflow: hidden; pointer-events: none; }

.air-day-strip__words {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  column-gap: 12px; row-gap: 4px;
}
.air-day-strip__caption { color: var(--air-text-3); }
.air-day-strip__time { color: var(--air-text); }


/* 84-day-tile.css */
/* The day (AIRTIME §9.4): the date behind the sun, the park, the headline,
   the strip, the counts and the trip, one under another. */
.air-day-tile__date { display: flex; align-items: center; gap: 6px; }
.air-day-tile__date > .air-kicker { flex: 1; min-width: 0; }
.air-day-tile__park { padding-top: 3px; color: var(--air-text); }
.air-day-tile__headline { padding-top: 2px; color: var(--air-text-2); }
.air-day-tile__drawing { padding-top: 11px; }
.air-day-tile__line { padding-top: 6px; color: var(--air-text-2); }
.air-day-tile__figures { padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.air-day-tile__trip { padding-top: 11px; display: flex; }

/* A count as a door: 48 by 76 at least, the figure over its word, on a
   raised tone or its meaning's tint. High contrast, where a tint is
   nothing, edges a meaning's figure 3 points in its colour and a plain one
   1.5 (AirSurface.contrastEdge), drawn over the face. The figure's size and
   the word's are the app's copyWith over a type style. */
.air-day-figure {
  min-height: 48px; min-width: 76px; box-sizing: border-box;
  padding: 6px 12px 6px 11px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border-radius: 14px;
  background: var(--air-tile-raised);
  color: var(--air-text);
  --air-day-figure-quiet: var(--air-text-3);
}
.air-day-figure--meaning {
  background: color-mix(in srgb, var(--air-m) calc(var(--air-tint-strength) * 100%), var(--air-tile));
  color: var(--air-m);
  --air-day-figure-quiet: var(--air-m);
}
[data-air-mode="high-contrast"] .air-day-figure { box-shadow: inset 0 0 0 1.5px var(--air-tile-top-light); }
[data-air-mode="high-contrast"] .air-day-figure--meaning { box-shadow: inset 0 0 0 3px var(--air-m); }
.air-day-figure__figure { font-size: 20px; line-height: 1.05; }
.air-day-figure__word { display: flex; align-items: center; margin-top: 2px; color: var(--air-day-figure-quiet); }
.air-day-figure__word > .air-type-second { font-size: 12px; line-height: 1.2; }
.air-day-figure__symbol { margin-right: 3px; }
/* A meaning's symbol drawn only where its colour is only an edge. */
[data-air-mode]:not([data-air-mode="high-contrast"]) .air-day-figure__symbol--contrast { display: none; }

/* A trip (TripChip): a pill in the trip's fill at 18%, the plane and the
   name in `trip`. A door stands in a 48 target, the pill centred in its
   height; a label is the pill alone. High contrast draws the tint as a
   2-point `trip` edge over the pill (AirSurface.contrastEdge). */
.air-trip-chip { display: flex; width: fit-content; max-width: 100%; }
.air-trip-chip--door { align-items: center; min-height: var(--air-space-target); min-width: var(--air-space-target); }
.air-trip-chip__pill {
  position: relative; display: flex; align-items: center; min-width: 0;
  padding: 4px 10px;
  border-radius: var(--air-shape-pill);
  background: color-mix(in srgb, var(--air-trip-fill) 18%, transparent);
  color: var(--air-trip);
}
[data-air-mode="high-contrast"] .air-trip-chip__pill { box-shadow: inset 0 0 0 2px var(--air-trip); }
.air-trip-chip__name { margin-left: 6px; min-width: 0; }


/* 90-menu.css */
/* The menu (AirMenu): grown from its control, 8 from it, lined up with the
   control's nearer edge; floating glass round a list 6 inside. At least
   230 wide, else as wide as its widest line, which never wraps. */
.air-menu-anchor { position: relative; display: flex; width: fit-content; }
.air-menu {
  position: absolute; z-index: 1;
  width: max-content; min-width: 230px; box-sizing: border-box;
  padding: 6px;
}
.air-menu--below { top: calc(100% + 8px); }
.air-menu--above { bottom: calc(100% + 8px); }
.air-menu--start { left: 0; }
.air-menu--end { right: 0; }
.air-menu__list { display: flex; flex-direction: column; }

/* An item: 52 at least, 14 either side and 8 above and below. */
.air-menu__item {
  display: flex; align-items: center;
  min-height: 52px; box-sizing: border-box;
  padding: 8px 14px;
  color: var(--air-text);
  white-space: nowrap;
}
.air-menu__glyph { margin-right: 12px; }
.air-menu__detail { flex: 1; margin-left: 16px; text-align: end; }
.air-menu__heading { padding: 10px 14px 4px; color: var(--air-text-3); white-space: nowrap; }
.air-menu__divider { height: 1px; margin: 4px 10px; background: var(--air-hairline); }


/* 92-dialog.css */
/* The dialog (AirDialog): the scrim over the whole screen it is placed in,
   the card centred, a gutter clear above and below. */
.air-dialog-scrim {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: var(--air-space-gutter) 0;
  background: var(--air-scrim);
}
.air-dialog { width: min(86%, 360px); max-height: 100%; display: flex; }
.air-dialog__card { flex: 1; min-width: 0; overflow: hidden; }
.air-dialog__body {
  display: flex; flex-direction: column;
  padding: 28px 24px 24px;
  max-height: 100%; overflow: auto; box-sizing: border-box;
}
/* The question at 1.2; the line is second at reading weight (400, the one
   part style under second's own 500, as the app sets it) and 1.5 apart. */
.air-dialog__question { line-height: 1.2; color: var(--air-text); }
.air-dialog__line { margin-top: 12px; font-weight: 400; line-height: 1.5; color: var(--air-text-2); }
.air-dialog__child { margin-top: 18px; }
.air-dialog__actions { margin-top: 26px; display: flex; flex-direction: column; gap: var(--air-space-tile-gap); }
/* The ✕ in the card's corner, over its padding, 10 in from the top and right. */
.air-dialog__close { position: absolute; top: 10px; right: 10px; }


/* 94-toast.css */
/* The toast (AirToast): across the screen at its resting height, in a room
   the screen's width less its gutters (420 at most), hugging its words. */
.air-toast-place {
  position: absolute; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center;
  pointer-events: none;
}
.air-toast-room {
  width: min(calc(100% - 2 * var(--air-space-gutter)), 420px);
  display: flex; justify-content: center;
}
.air-toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; padding: 14px 16px;
}
.air-toast > .air-icon { flex: none; }
.air-toast__words { min-width: 0; color: var(--air-text); }


/* 96-empty-state.css */
/* The empty state (AirEmptyState): centred in the room it is given, a
   gutter at the sides and a section's gap above and below; the glyph 14
   over the title, the title 6 over its line (body at 1.45), the button 20
   below. */
.air-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--air-space-section-gap) var(--air-space-gutter);
  text-align: center;
}
.air-empty__title { margin-top: 14px; color: var(--air-text); }
.air-empty__line { margin-top: 6px; line-height: 1.45; color: var(--air-text-2); }
.air-empty__action { margin-top: 20px; display: flex; justify-content: center; }


/* 97-loader.css */
/* The loader (AirLoader): the track, and the line 14 below it (28 when it
   is the screen's own words), centred. */
.air-loader { display: flex; flex-direction: column; align-items: center; }
.air-loader__track { display: block; flex: none; overflow: visible; }
.air-loader__line { margin-top: 14px; text-align: center; color: var(--air-text-2); }
.air-loader__line--prominent { margin-top: 28px; color: var(--air-text); }

/* The cover (AirLoaderCover): the page, and over its middle the loader on
   its card, which takes no taps. */
.air-loader-cover { position: relative; }
.air-loader-cover__over {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.air-loader-cover__card { padding: 24px 28px; }


/* 98-status.css */
/* The status dot (AirStatusDot): 12 across; a filled disc for Operating,
   a 2-point ring for the others. */
.air-status-dot {
  display: inline-block; flex: none; box-sizing: border-box;
  width: 12px; height: 12px; border-radius: 50%;
  vertical-align: top;
}
.air-status-dot--operating { background: var(--air-cred); }
.air-status-dot--sbno { border: 2px solid var(--air-rating); }
.air-status-dot--defunct { border: 2px solid var(--air-danger); }
/* Live: faint to full once a second each way; still under Reduce Motion. */
.air-status-dot--live { animation: air-status-breath 1s linear infinite alternate; }
@keyframes air-status-breath { from { opacity: 0.3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .air-status-dot--live { animation: none; } }

/* The status line (AirStatusLine): the dot 8 before the words, centred on
   their first line; the place 2 below. */
.air-status-line { display: flex; flex-direction: column; align-items: flex-start; }
.air-status-line__first { display: flex; align-items: flex-start; }
.air-status-line__dot { display: flex; flex: none; margin-right: 8px; padding-top: calc((14px * 1.43 - 12px) / 2); }
.air-status-line__words { min-width: 0; color: var(--air-text-2); }
.air-status-line__place { margin-top: 2px; color: var(--air-text-3); }

/* The quiet hint (AirHint): the glyph 1 down, 8 before its sentence. */
.air-hint { display: flex; align-items: flex-start; }
.air-hint__glyph { margin-top: 1px; margin-right: 8px; flex: none; }
.air-hint__line { flex: 1; min-width: 0; color: var(--air-text-3); }

/* The flash (AirFlash): a 3-point ring in the accent that stands outside
   the tile, its outer edge 3 beyond the tile's corners at the start and 14
   at the end, fading from full to nothing as it spreads. The tile's face is
   never covered. Under Reduce Motion the ring stands at its start and goes
   when the run ends. */
.air-flash { position: relative; }
.air-flash--still::after, .air-flash--run::after {
  content: ''; position: absolute; pointer-events: none; box-sizing: border-box;
  inset: calc(var(--air-flash-spread, 3px) * -1);
  border-radius: calc(var(--air-shape-tile) + var(--air-flash-spread, 3px));
  border: 3px solid color-mix(in srgb, var(--air-accent) var(--air-flash-alpha, 100%), transparent);
}
.air-flash--run::after { animation: air-flash 1.3s cubic-bezier(0, 0, 0.58, 1) 1 both; }
@keyframes air-flash {
  from { inset: -3px; border-radius: calc(var(--air-shape-tile) + 3px); border-color: var(--air-accent); }
  to { inset: -14px; border-radius: calc(var(--air-shape-tile) + 14px); border-color: transparent; }
}
@keyframes air-flash-still {
  from { border-color: var(--air-accent); }
  to { border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .air-flash--run::after { animation: air-flash-still 1.3s step-end 1 both; } }


/* A0-tab-bar.css */
/* The tab bar (CockpitNavBar): 76 high, on glass (.air-glass
   .air-glass--above: AirGlass's 20 blur with 160% saturation and its edge
   along the top); solid ground with a line above it in high contrast. */
.air-tab-bar {
  position: relative;
  display: flex;
  height: 76px;
}
[data-air-mode="high-contrast"] .air-tab-bar {
  background: var(--air-ground);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--air-line);
}

/* The one pill, 62 by 34, centred over the chosen tab's symbol, 11.5 from
   the top: the brand's two colours at 26%, left to right, edged inside in
   the accent at 30%. */
.air-tab-bar__pill {
  position: absolute;
  top: 11.5px;
  left: calc(100% / var(--air-tabs) * var(--air-tab-current) + (100% / var(--air-tabs) - 62px) / 2);
  width: 62px; height: 34px;
  border-radius: 17px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--air-brand-gradient-1) 26%, transparent),
    color-mix(in srgb, var(--air-brand-gradient-2) 26%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--air-accent) 30%, transparent);
}

/* A tab: its share of the width, the symbol centred in the pill's box,
   4 above the word. The word is the tab bar's own style (12.5 / 1.2, 500;
   700 chosen), which no type class carries. */
.air-tab-bar__tab {
  appearance: none; border: 0; margin: 0; background: transparent; font: inherit;
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 11.5px 0 0;
  color: var(--air-text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.air-tab-bar__slot { display: flex; align-items: center; justify-content: center; width: 62px; height: 34px; }
.air-tab-bar__symbol { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.air-tab-bar__fill { fill: currentColor; }
.air-tab-bar__label { margin-top: 4px; font-size: 12.5px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.air-tab-bar__tab--chosen { cursor: default; }
.air-tab-bar__tab--chosen .air-tab-bar__slot { color: var(--air-selected-ink); }
.air-tab-bar__tab--chosen .air-tab-bar__label { color: var(--air-text); font-weight: 700; }

/* The rail (CockpitNavBar.rail): the same tabs down the left of a wide
   screen, 96 across on glass edged down its right (.air-glass--right), the
   first tab 40 from the top and each 14 under the last; solid with a line
   down its right in high contrast. A tab is the 56 by 34 pill's box, 4, and
   its word (12.5 × 1.2 = 15), so one stands 67 under the last. */
.air-tab-bar--rail {
  flex-direction: column;
  width: 96px; height: auto;
  padding-top: 40px;
  gap: 14px;
}
[data-air-mode="high-contrast"] .air-tab-bar--rail { box-shadow: inset -1px 0 0 var(--air-line); }
.air-tab-bar--rail .air-tab-bar__pill {
  top: calc(40px + var(--air-tab-current) * 67px);
  left: 20px;
  width: 56px;
}
.air-tab-bar--rail .air-tab-bar__tab { flex: none; padding: 0; }
.air-tab-bar--rail .air-tab-bar__slot { width: 56px; }


/* A1-park-day.css */
/* The lone round action (CockpitFAB): 56, the glyph 28. */
.air-fab { width: 56px; height: 56px; }

/* The park-day pill. Closed: the + alone at the right. */
.air-park-day { position: relative; display: flex; }
.air-park-day--closed { justify-content: flex-end; }

/* Open: its own glass, a 16 blur over the ground at 58% (not AirGlass),
   as round as it is high, 64 at least. Its shadow (black 45%, dropped 10,
   the app's blur 24, a sigma of 14.4, a CSS blur of 28.8) is cast outside
   its shape only, so the glass's blur never takes it in. High contrast
   draws it solid: the tile, with no blur, and glass's solid edge. */
.air-park-day__glass {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  min-height: 64px;
  padding-left: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--air-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28.8px color-mix(in srgb, #000 45%, transparent);
}
[data-air-mode="high-contrast"] .air-park-day__glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Its edge, the text at 14%, drawn over it; glass's own edge at 1.5 in
   high contrast. */
.air-park-day__edge {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--air-text) 14%, transparent);
}
[data-air-mode="high-contrast"] .air-park-day__edge {
  box-shadow: inset 0 0 0 1.5px var(--air-glass-edge);
}

/* The ✕: a 40 disc of the text at 7% on a 48 target, its disc 12 from the end. */
.air-park-day__end {
  appearance: none; border: 0; margin: 0 4px 0 0; padding: 0; background: transparent;
  flex: none; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.air-park-day__end-disc {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--air-text) 7%, transparent);
}

/* The words: the park in capitals at 13 (+0.8) on two lines at most, the
   count under it on one, 10 above and below. The dot, the cred colour
   with a halo of 3 at 30%, sits centred on the name's first line. */
.air-park-day__words { flex: 1; min-width: 0; padding: 10px 0; }
.air-park-day__name-row { display: flex; align-items: flex-start; gap: 8px; }
.air-park-day__dot {
  flex: none; width: 7px; height: 7px; margin-top: 5.8px; border-radius: 50%;
  background: var(--air-cred);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--air-cred) 30%, transparent);
}
.air-park-day__name {
  flex: 1; min-width: 0;
  font-size: 13px; letter-spacing: 0.8px;
  color: var(--air-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.air-park-day__count {
  margin-top: 2px; color: var(--air-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The stopwatch 12 after the words, and the + in a 64 box at the end:
   each a 56 FAB fitted to 48, so its edge and glyph scale with it. */
.air-park-day__button { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.air-park-day__button > .air-fab { flex: none; transform: scale(calc(48 / 56)); }
.air-park-day__words + .air-park-day__button { margin-left: 12px; }
.air-park-day__plus { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }


/* A2-stub.css */
/* The stub (AirStub): over the whole page it is placed in. */
.air-stub { position: absolute; inset: 0; pointer-events: none; }
/* The page behind goes darker, black from 25% at the top to 65% at the
   foot in every mode (AirPalette.stubScrim, which the tokens do not
   carry). */
.air-stub__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, #000 25%, transparent), color-mix(in srgb, #000 65%, transparent));
}
/* The ticket 16 in from the sides. Its shadow (black 54%, dropped 10, the
   app's blur 24, a sigma of 14.4) follows its outline, notches and
   corners: the mask cuts a box-shadow away, so it is a drop-shadow on the
   wrapper, whose blur is the sigma itself. */
.air-stub__place {
  position: absolute; left: 16px; right: 16px; pointer-events: auto;
  filter: drop-shadow(0 10px 14.4px color-mix(in srgb, #000 54%, transparent));
}
.air-stub__place > .air-ticket { position: relative; }
.air-stub__ticket .air-ticket__stub { overflow: hidden; }

/* Above the tear: 14 above, 10 below, 16 at the sides. The headline is
   the label style spaced to 2 on a 12 line, after its 14 tick. */
.air-stub__main { padding: 14px 16px 10px; }
.air-stub__headline { display: flex; align-items: center; gap: 6px; }
.air-stub__headline-words {
  flex: 1; min-width: 0; letter-spacing: 2px; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The name: the title style at 22 on a 1.05 line, two lines at most,
   12 from the stamp. */
.air-stub__name-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.air-stub__name {
  flex: 1; min-width: 0;
  font-size: 22px; line-height: 1.05; text-transform: uppercase; color: var(--air-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.air-stub__rate { display: flex; align-items: center; margin-top: 6px; }
.air-stub__stars { flex: 1; min-width: 0; display: flex; }

/* Below the tear: the actions (14 above, 12 below, 16 at the sides),
   ADD SEAT & NOTES and UNDO sharing the width 5 to 3, 8 apart; then the
   bar, 3 high, what is left of its time. */
.air-stub__actions { display: flex; gap: 8px; padding: 14px 16px 12px; }
.air-stub__details { flex: 5 1 0; min-width: 0; }
.air-stub__undo { flex: 3 1 0; min-width: 0; }
.air-stub__life { height: 3px; }


/* A3-nudge.css */
/* The nudge (AirNudge): a tile, on the brand's surface when lit; the glyph square 12 before the
   words; 6 under the kicker, 2 over the detail, 14 over the picture and
   the action. The ✕ stands in the corner, pulled in as a tile's is (4 from
   the top, 7 from the right), and the kicker keeps 36 clear of it. */
.air-nudge { position: relative; }
.air-nudge__lead { display: flex; align-items: flex-start; gap: 12px; }
.air-nudge__words { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.air-nudge__kicker { margin-bottom: 6px; }
.air-nudge--close-room { padding-right: 36px; }
.air-nudge__title { color: var(--air-text); line-height: 1.3; }
.air-nudge__detail { margin-top: 2px; color: var(--air-text-2); }
.air-nudge__picture { margin-top: 14px; border-radius: var(--air-shape-field); overflow: hidden; }
.air-nudge__action {
  display: flex; align-items: center; gap: 2px; margin-top: 14px;
  width: fit-content;
}
.air-nudge__close { position: absolute; top: 4px; right: 7px; }


/* A4-celebration.css */
/* The celebration (AirCelebration): the stage centred over the page,
   which is frosted (an 8 blur) and dimmed by the celebration scrim. The
   frost is a layer of its own beneath the stage: a backdrop filter on the
   stage's parent would cut the glass off from the page behind it. */
.air-celebration {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.air-celebration__frost {
  position: absolute; inset: 0;
  background: var(--air-celebration-scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* The stage: 24 all round, 360 across at most inside it. Nothing
   overflows it, so the app's scroll view does not clip the light. */
.air-celebration__stage {
  position: relative;
  width: min(100%, 408px);
  padding: 24px;
}
.air-celebration__count-block { position: relative; display: flex; flex-direction: column; }
/* The meaning's light behind the count: a 420 disc, its colour at 30% at
   the centre gone by 65%, its top 120 above the kicker. */
.air-celebration__light {
  position: absolute; top: -120px; left: 50%;
  width: 420px; height: 420px; margin-left: -210px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--air-c) 30%, transparent) 0%, color-mix(in srgb, var(--air-c) 0%, transparent) 65%);
}
/* The kicker in the label style (capitals), in the colour. */
.air-celebration__kicker { position: relative; text-align: center; color: var(--air-c); }
/* The count: display type at 84 on a 1.05 line, in the colour. The app
   draws each digit apart (a wheel each), so no pair is kerned. */
.air-celebration__count { position: relative; font-kerning: none; margin-top: 6px; text-align: center; font-size: 84px; line-height: 1.05; color: var(--air-c); }
.air-celebration__card { position: relative; margin-top: 18px; }
.air-celebration__glass { padding: 22px 20px; text-align: center; }
/* The log's stamp over the card's lower right corner: 10 in, 12 below. */
.air-celebration__stamp { position: absolute; right: 10px; bottom: -12px; }
.air-celebration__attraction { line-height: 1.2; color: var(--air-text); }
.air-celebration__where { margin-top: 6px; color: var(--air-text-2); }
/* DONE fills the row; the Share circle 10 beside it. */
.air-celebration__buttons { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.air-celebration__done { flex: 1; min-width: 0; }


/* A5-rolling-count.css */
/* The rolling count: a row of wheels, one digit each, standing as wide as the
   widest digit (the unseen 0) and as tall as one line. The digits slide
   inside it and are clipped to it; the app draws each digit apart, so no
   pair is kerned. */
.air-rolling-count { display: flex; align-items: flex-start; }
.air-rolling-count__wheel { position: relative; display: block; overflow: hidden; font-kerning: none; font-variant-numeric: tabular-nums; }
.air-rolling-count__ghost { display: block; visibility: hidden; }
.air-rolling-count__digit { position: absolute; left: 0; top: 0; }


/* A6-reading.css */
/* The reading measure: prose stops at 35 text sizes (35 × 16 = 560) and
   starts at the left, where the page's headings do. */
.air-reading { max-width: 560px; }


/* A7-found-by.css */
/* Why a search found a row: the second line's size, in text3, slanted, 3
   under the line above. */
.air-found-by { padding-top: 3px; color: var(--air-text-3); font-style: italic; }


/* A8-step-question.css */
/* A step's question: the title in text on a 1.15 line, the lead 8 beneath
   it in text2 on a 1.45 line (a blank line inside it is the line's own
   height, so its newlines are kept). The user's own words are text at 600. */
.air-step-question { display: flex; flex-direction: column; align-items: stretch; }
.air-step-question__question { margin: 0; line-height: 1.15; color: var(--air-text); }
.air-step-question__lead { margin-top: 8px; line-height: 1.45; color: var(--air-text-2); white-space: pre-wrap; }
.air-step-question__quoted { color: var(--air-text); font-weight: 600; }


/* A9-match-strength.css */
/* The match strength panel (AirMatchStrength) inside a tile: the band's icon
   (20), its words and the score on one line; a 6-high meter 12 below; the
   two sides 16 below that, 8 apart; the explanation 12 below. The meter
   fills and the score counts up over 500 ms, easing out (the app's slow
   duration and decelerating curve); the count is an animated integer. */
@property --air-match-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.air-match { display: flex; flex-direction: column; align-items: stretch; }
.air-match__head { display: flex; align-items: center; }
.air-match__head > .air-icon { margin-right: 8px; flex: none; }
.air-match__label { flex: 1; min-width: 0; }

.air-match__score {
  flex: none; line-height: 1; color: var(--air-match-c);
  counter-reset: air-match-n var(--air-match-n);
  animation: air-match-count 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.air-match__score::after { content: counter(air-match-n) '%'; }
@keyframes air-match-count { from { --air-match-n: 0; } to { --air-match-n: var(--air-score); } }

.air-match__meter { position: relative; height: 6px; margin-top: 12px; border-radius: 3px; background: var(--air-line); }
.air-match__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--air-score) * 1%);
  border-radius: 3px; background: var(--air-match-c);
  box-shadow: 0 0 8px color-mix(in srgb, var(--air-match-c) 40%, transparent);
  animation: air-match-fill 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes air-match-fill { from { width: 0; } }
.air-match__edge { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--air-tile); }

.air-match__sides { margin-top: 16px; }
.air-match__side + .air-match__side { margin-top: 8px; }
.air-match__name { margin-top: 4px; color: var(--air-text); }
.air-match__park { color: var(--air-text-2); }
.air-match__explanation { margin-top: 12px; line-height: 1.4; color: var(--air-text-2); }

@media (prefers-reduced-motion: reduce) {
  .air-match__score, .air-match__fill { animation: none; }
  .air-match__score { --air-match-n: var(--air-score); }
}


/* B0-ride-order.css */
/* The ride order: a field's tile (18 corners), 12 either side, 10 above and 8
   below, a caption line and the chips on a track. Each chip's slot is 48
   high at least, 8 apart across and 4 between rows so the drawn pills are 8
   apart each way; its pill is 44 at least, in the selected state, the
   number on an accent disc leading and the drag glyph trailing. A slot's
   size is its words' as the app measures them (AirRideOrder.tsx). */
.air-ride-order { border-radius: var(--air-shape-field); padding: 10px 12px 8px; }
.air-ride-order__caption { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding: 0 4px 4px; }
.air-ride-order__hint { color: var(--air-text-3); }

.air-ride-order__track { position: relative; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; }
.air-ride-order__probe {
  position: absolute; left: 0; top: 0; height: 0; width: max-content; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  visibility: hidden; pointer-events: none;
}
.air-ride-order__slot { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; }

.air-ride-order__pill {
  display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-height: 44px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--air-selected-edge); border-radius: var(--air-shape-pill);
  background: var(--air-selected-tint); color: var(--air-selected-ink);
}
.air-ride-order__disc {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--air-accent); color: var(--air-ground);
  font-size: 12px; line-height: 1;
}
.air-ride-order__words { flex: 1 1 auto; min-width: 0; margin-left: 8px; color: var(--air-selected-ink); }
.air-ride-order__grip { flex: none; margin-left: 6px; }

/* The strip: one row, chips 6 apart, each 32 high at least with its number
   on a 20 disc. */
.air-ride-strip { display: block; width: 100%; }
.air-ride-strip__row { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.air-ride-strip__row::-webkit-scrollbar { display: none; }
.air-ride-strip__chip {
  flex: none; display: flex; align-items: center; box-sizing: border-box; min-height: 32px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--air-selected-edge); border-radius: var(--air-shape-pill);
  background: var(--air-selected-tint); color: var(--air-selected-ink);
}
.air-ride-strip__chip + .air-ride-strip__chip { margin-left: 6px; }
.air-ride-strip__disc {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--air-accent); color: var(--air-ground);
  font-size: 11px; line-height: 1;
}
.air-ride-strip__words { margin-left: 6px; color: var(--air-selected-ink); white-space: nowrap; }


/* B1-vocabulary-field.css */
/* An ordered vocabulary field: the chosen ones in their ride order above the
   cloud, a little air above (8) and below (12). */
.air-vocabulary-field { display: flex; flex-direction: column; align-items: stretch; }
.air-vocabulary-field__order { padding: 8px 0 12px; }


/* C5-front-page.css */
/* The Front page: a screen that scrolls under its header (it clips here); the
   content 16 in from the sides, the nudge 10 under the hero; what stands in
   the tickets' place fills what is left of the screen, centred. */
.air-front { position: relative; overflow: hidden; background: var(--air-ground); }
.air-front__page { display: flex; flex-direction: column; box-sizing: border-box; }
.air-front__content { flex: 1; display: flex; flex-direction: column; padding: 0 16px; }
.air-front__nudge { padding-top: 10px; }
.air-front__empty { flex: 1; display: flex; flex-direction: column; justify-content: center; }


/* C6-utility-page.css */
/* The Utility page: the header's row, the large title 8 under it, the content
   16 under the title; 16 in from the sides. */
.air-utility { position: relative; background: var(--air-ground); }
.air-utility__title { padding: 8px 16px 0; }
.air-utility__content { padding: 16px 16px 0; }


/* C7-form.css */
/* The form: the flow's header, then the body the list scrolls in, the dock
   floating over its foot. The list is 16 in from the sides; the first thing
   16 under the header; the fields 18 under the first thing and `spacing`
   apart. The sheet is the flow's ground, 20 round at the top. */
.air-form { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.air-form--sheet { background: var(--air-ground); border-radius: 20px 20px 0 0; }
.air-form__body { position: relative; flex: 1; min-height: 0; }
.air-form__behind { position: absolute; inset: 0; overflow: hidden; }
.air-form__list { padding: 0 16px; }
.air-form__lead { padding-top: 16px; }
.air-form__fields { display: flex; flex-direction: column; }
.air-form__fields > * + * { margin-top: var(--air-form-spacing); }

/* A group: its kicker 8 over the first field, the fields 8 apart. */
.air-form-group { display: flex; flex-direction: column; gap: 8px; }
.air-form__body > .air-dock-area { position: absolute; inset: 0; height: auto; }


/* C8-composer.css */
/* The composer on the dock: its suggestions in a strip over the field (each
   chip 8 from the next, the strip 8 above the field), the field and its tick
   on the field's last line (the tick 4 up from the foot, 8 from the box). */
.air-composer { display: flex; flex-direction: column; align-items: stretch; }
.air-composer__suggestions {
  display: flex; margin-bottom: 8px;
  padding-left: 7px; overflow-x: auto; scrollbar-width: none;
}
.air-composer__suggestions::-webkit-scrollbar { display: none; }
.air-composer__suggestion { flex: none; padding-right: 8px; }
.air-composer__field { display: flex; align-items: flex-end; gap: 8px; }
.air-composer__box { flex: 1; min-width: 0; }
.air-composer__tick { flex: none; padding-bottom: 4px; }
/* The composer at rest: a read-only box that presses as a field does. */
.air-composer-box { display: block; transition: opacity var(--air-fade); }


/* C9-vocabulary-page.css */
/* The vocabulary page's sheet: the sheet's ground, 20 round at the top, at
   the foot of its box; the search 12 above and below, the list 16 in. */
.air-vocabulary-page { position: relative; background: var(--air-ground); border-radius: 20px 20px 0 0; overflow: hidden; }
.air-vocabulary-page__search { padding: 12px 16px; }
.air-vocabulary-page__strip { padding: 0 16px 12px; }
.air-vocabulary-page__list { padding: 0 16px; }
.air-vocabulary-page__none { padding-top: 18px; color: var(--air-text-3); }


/* D0-panes.css */
/* Two panes: the list a fixed 420 wide (laid out at its own width and
   clipped as it folds away under the rail), a one-point hairline, and the
   report filling the rest. The handle is a 24 strip down the hairline that
   takes the tap, its capsule 5 by 44 in text3, centred. */
.air-panes { position: relative; height: 100%; display: flex; align-items: stretch; overflow: hidden; }
.air-panes > .air-index, .air-panes > .air-list-page { flex: 1; }
.air-panes__list { flex: none; overflow: hidden; display: flex; justify-content: flex-end; transition: width 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.air-panes__list--gone { pointer-events: none; }
.air-panes__list-inner { flex: none; height: 100%; }
.air-panes__hairline { flex: none; width: 1px; background: var(--air-hairline); }
.air-panes__report { flex: 1; min-width: 0; position: relative; }
.air-panes__empty { height: 100%; display: flex; align-items: center; justify-content: center; }
.air-panes__handle {
  appearance: none; border: 0; margin: 0; padding: 0; background: transparent;
  position: absolute; top: 0; bottom: 0; width: 24px; cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
  transition: left 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.air-panes__capsule { width: 5px; height: 44px; border-radius: 2.5px; background: var(--air-text-3); }
@media (prefers-reduced-motion: reduce) {
  .air-panes__list, .air-panes__handle { transition: none; }
}


/* D1-index.css */
/* The index: the hero 4 under the header's row, 16 in; the controls, each
   12 below the last and 12 after; the offer and the hint where the list
   begins, 12 under each; the content 16 in. The controls stand pinned to the
   top of the scrolling list, over the ground at rest. */
.air-index { height: 100%; }
.air-index__hero { padding: 4px 16px 0; }
.air-index__pinned { position: sticky; top: 0; z-index: 2; }
.air-index__lead { padding: 0 16px; }
.air-index__lead > * { padding-bottom: 12px; }
.air-index__results { padding: 0 16px; }
.air-index__gap { height: 12px; }

.air-index-controls { display: flex; flex-direction: column; }
.air-index-controls > .air-index-controls__slot { padding: 12px var(--air-index-gutter, 16px) 0; }
.air-index-controls > .air-index-controls__slot--chips { padding: 12px 0 0; }
.air-index-controls__foot { height: 12px; }


/* D2-list-page.css */
/* The root tabs' page at rest: the 64 row, the band 8 under it (the hero,
   or the large title), the pinned controls 12 under that in a room of their
   own height, the 12 cushion, then the list, 16 in (28 once the page itself
   is wide: read from its own width, the app reads the window's). */
.air-list-page { height: 100%; container-type: inline-size; container-name: air-list-page; }
.air-list-page__band { padding: 0 16px 8px; }
.air-list-page__controls { padding: 12px 16px 0; box-sizing: border-box; }
.air-list-page__secondary { padding-top: 10px; box-sizing: border-box; }
.air-list-page__cushion { height: 12px; }
.air-list-page__content { padding-left: 16px; padding-right: 16px; }
@container air-list-page (min-width: 600px) {
  .air-list-page__band, .air-list-page__controls, .air-list-page__content { padding-left: 28px; padding-right: 28px; }
}


/* D3-detail-page.css */
/* A pushed page: the page fills its box and scrolls in it (AirDockArea's
   content); the header sticks, the large title 8 under it, the content
   beneath, 16 in from the sides and 28 once the page itself is wide
   (600 and over: read from its own width, the app reads the window's). */
.air-detail { height: 100%; container-type: inline-size; container-name: air-detail; }
.air-detail__title { padding: 8px 16px 0; }
.air-detail__content { padding: 0 16px; }
@container air-detail (min-width: 600px) {
  .air-detail__title, .air-detail__content { padding-left: 28px; padding-right: 28px; }
}


/* D4-report.css */
/* A report's body: the status line 16 above what follows; the offer a
   tile's gap under the figures (14 on a wide grid). */
.air-report-body { display: flex; flex-direction: column; }
.air-report-body__status { padding-bottom: 16px; }
.air-report-body__offer { padding-top: var(--air-space-tile-gap); }
.air-grid--wide + .air-report-body__offer { padding-top: var(--air-space-tile-gap-wide); }


/* D5-odometer-dial.css */
/* The odometer's dial: drawn on a 200 by 172 box, scaled to the width and
   cropped to the ring as the widgets' picture is (the glow ends in a hard
   line at the sides). */
.air-odometer-dial { position: relative; overflow: hidden; flex: none; }
.air-odometer-dial__box { position: absolute; top: 0; width: 200px; height: 172px; transform-origin: 0 0; }
.air-odometer-dial__layer { position: absolute; left: 0; top: 0; overflow: visible; }


/* D6-lead-words.css */
/* A lead beside its words: a row, the lead and the words' column (taking what
   is left), then an aside and the trailing parts, which carry no gap of their own. */
.air-lead-words { display: flex; align-items: center; }
.air-lead-words--start { align-items: flex-start; }
.air-lead-words__words { flex: 1 1 0; min-width: 0; }
.air-lead-words__aside { flex: none; }