/* ==========================================================================
   estimator.css: the project estimator widget (markup built by js/estimator.js).

   1. Tokens (neutral defaults; each theme overrides them at the bottom)
   2. Layout, mobile first: options stacked above the result ticket; from a
      ~54rem-wide container, options left and a sticky result ticket right.
      Components size themselves with container queries, so the widget reflows
      cleanly at any width and while the window is being resized.
   3. Components: questions, platform tiles, feature chips, size segments,
      design pills, the result ticket, plans, the math, send button, notes,
      phone peek bar
   4. Theme skins, each scoped to :root[data-theme="…"]:
        diner    = a diner order pad / guest check
        forest   = a ranger's field logbook / park fee sheet
        airfield = a flight manifest / boarding pass
   Every class starts with "est". Checked states never rely on colour alone:
   each option shows a check mark when it's on.
   ========================================================================== */

/* ---- 1. tokens ------------------------------------------------------------ */

.estimator,
.est-peek {
  --est-ink: #0C2C3C;
  --est-ink-soft: #445862;
  --est-sheet: #FFFCF5;
  --est-sheet-edge: rgba(12, 44, 60, .16);
  --est-tile: #FFFFFF;
  --est-tile-hover: #F6F8F9;
  --est-tile-edge: rgba(12, 44, 60, .3);
  --est-on: #0C2C3C;
  --est-on-ink: #FFFFFF;
  --est-on-soft: rgba(255, 255, 255, .84);
  --est-on-edge: #0C2C3C;
  --est-mark: #C4452A;
  --est-mark-ink: #FFFFFF;
  --est-num: #0C2C3C;
  --est-num-ink: #FFFFFF;
  --est-legend-ink: var(--est-ink);
  --est-focus: var(--focus, #1668C7);
  --est-radius: 14px;
  --est-radius-sm: 10px;
  --est-font-body: var(--font-body, 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --est-font-display: var(--font-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  --est-font-label: var(--est-font-body);
  --est-font-total: var(--est-font-display);
  --est-total-weight: 800;
  --est-total-scale: 1;
  --est-paper: #FFFFFF;
  --est-paper-ink: #0C2C3C;
  --est-paper-soft: #4A5B64;
  --est-paper-line: rgba(12, 44, 60, .18);
  --est-plan: rgba(255, 255, 255, .7);
  --est-plan-edge: rgba(12, 44, 60, .28);
  --est-plan-on: #FFFFFF;
  --est-plan-on-edge: #0C2C3C;
  --est-total-ink: #0C2C3C;
  --est-badge: #F2B43A;
  --est-badge-ink: #0C2C3C;
  --est-btn: #C4452A;
  --est-btn-ink: #FFFFFF;
  --est-btn-edge: #0C2C3C;
  --est-shadow: 0 1px 0 rgba(12, 44, 60, .05), 0 18px 40px -24px rgba(12, 44, 60, .5);
  --est-sticky-top: calc(var(--header-h, 4.5rem) + 1rem);
}

/* theme-only copy (base.css hides these too; repeated so the widget never depends on it) */
:root:not([data-theme="diner"]) .estimator [data-only="diner"],
:root:not([data-theme="forest"]) .estimator [data-only="forest"],
:root:not([data-theme="airfield"]) .estimator [data-only="airfield"] { display: none !important; }

.estimator [hidden],
.est-peek [hidden] { display: none !important; }

.est-vh,
.est-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
/* An option's hidden input spans the option's box (still fully clipped, so unseen and unclickable):
   keyboard focus scrolls that box into view, so the whole option is brought on screen (and above
   the phone peek bar), not just a 1px point at its top edge. */
.est-tile > .est-vh,
.est-chip > .est-vh,
.est-seg__opt > .est-vh,
.est-pill > .est-vh { inset: 0; width: auto; height: auto; margin: 0; }

.est-ico {
  width: 1em; height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.est-ico .f { fill: currentColor; stroke: none; }

/* ---- 2. layout -------------------------------------------------------------- */

.estimator {
  display: block;
  color: var(--est-ink);
  font-family: var(--est-font-body);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: break-word;
}
.estimator *,
.estimator *::before,
.estimator *::after { box-sizing: border-box; }

.est-shell { container: est / inline-size; }

.est {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5cqi, 2.25rem);
  align-items: start;
  margin: 0;
}

.est__options {
  container: est-opts / inline-size;
  display: grid;
  gap: clamp(1.5rem, 4cqi, 2.1rem);
  padding: clamp(1.1rem, 4.5cqi, 2.25rem);
  background: var(--est-sheet);
  border: 1px solid var(--est-sheet-edge);
  border-radius: var(--est-radius);
  box-shadow: var(--est-shadow);
  position: relative;
  min-width: 0;
}

.est__result {
  container: est-ticket / inline-size;
  min-width: 0;
  scroll-margin-top: var(--est-sticky-top);
  outline: none;
}
.est__result:focus-visible { outline: 3px solid var(--est-focus); outline-offset: 4px; border-radius: var(--est-radius); }

/* Wide: options left; the ticket rides along (sticky) on the right, and the stub with the
   math and notes waits at the bottom of the column, where the ticket meets it. The rail
   keeps the sticky ticket from sliding over the stub. js/estimator.js sets
   --est-ticket-h; a ticket taller than the window sticks by its bottom edge instead. */
.est__result { display: flex; flex-direction: column; }
.est-rail { flex: 1 0 auto; }
@container est (min-width: 54rem) {
  .est {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3cqi, 2.75rem);
  }
  .est__result { align-self: stretch; }
  .est .est-ticket {
    position: sticky;
    top: min(var(--est-sticky-top), calc(100vh - var(--est-ticket-h, 0px) - 1rem));
    top: min(var(--est-sticky-top), calc(100dvh - var(--est-ticket-h, 0px) - 1rem));
  }
  .est-ticket__order { display: none; }
}
@container est (min-width: 78rem) {
  .est { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}

/* ---- 3. components --------------------------------------------------------------- */

/* questions */
.est-q {
  margin: 0; padding: 0; border: 0;
  min-width: 0;
}
.est-q__legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 .3rem; padding: 0;
  color: var(--est-legend-ink);
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 1.2cqi, 1.65rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.est-q__legend + * { clear: both; }
.est-q__num {
  display: inline-grid; place-items: center;
  flex: none;
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  background: var(--est-num);
  color: var(--est-num-ink);
  font-family: var(--est-font-display);
  font-size: .72em;
  font-weight: 800;
  letter-spacing: 0;
}
.est-q__help {
  clear: both;
  margin: 0 0 .85rem;
  color: var(--est-ink-soft);
  font-size: .95rem;
}

/* shared check mark: a ring that fills in with a tick when its option is on */
.est-check {
  display: inline-grid; place-items: center;
  flex: none;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  border: 2px solid var(--est-tile-edge);
  background: transparent;
  color: var(--est-mark-ink);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.est-check .est-ico { width: 1.05rem; height: 1.05rem; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.est-check--sm { width: 1.35rem; height: 1.35rem; }
.est-check--sm .est-ico { width: .85rem; height: .85rem; }
.est-vh:checked + * .est-check,
.est-vh:checked + * > .est-check { background: var(--est-mark); border-color: var(--est-mark); }
.est-vh:checked + * .est-check .est-ico { opacity: 1; transform: none; }

/* focus: every option shows a clear ring when reached by keyboard */
.est-vh:focus-visible + * {
  outline: 3px solid var(--est-focus);
  outline-offset: 3px;
}

/* platform tiles */
.est-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: .65rem;
}
.est-tile { position: relative; display: block; cursor: pointer; min-width: 0; }
.est-tile__box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  height: 100%;
  min-height: 4.4rem;
  padding: .75rem .8rem .75rem .9rem;
  border: 2px solid var(--est-tile-edge);
  border-radius: var(--est-radius-sm);
  background: var(--est-tile);
  color: var(--est-ink);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.est-tile__icon { width: 2rem; height: 2rem; stroke-width: 1.6; }
.est-tile__label { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.est-tile__hint { display: block; margin-top: .15rem; color: var(--est-ink-soft); font-size: .875rem; line-height: 1.3; }
.est-tile:hover .est-tile__box { background: var(--est-tile-hover); }
.est-vh:checked + .est-tile__box {
  background: var(--est-on);
  border-color: var(--est-on-edge);
  color: var(--est-on-ink);
}
.est-vh:checked + .est-tile__box .est-tile__hint { color: var(--est-on-soft); }

/* feature chips */
.est-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.est-chip { position: relative; display: block; cursor: pointer; max-width: 100%; }
.est-chip__box {
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: .45rem 1rem .45rem .55rem;
  border: 2px solid var(--est-tile-edge);
  border-radius: 999px;
  background: var(--est-tile);
  color: var(--est-ink);
  font-weight: 500;
  font-size: .97rem;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.est-chip:hover .est-chip__box { background: var(--est-tile-hover); }
.est-chip__mark {
  display: inline-grid; place-items: center; flex: none;
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  border: 1.5px solid var(--est-tile-edge);
}
.est-chip__mark .est-ico { grid-area: 1 / 1; width: .9rem; height: .9rem; stroke-width: 2.6; transition: opacity .15s ease, transform .2s ease; }
.est-chip__tick { opacity: 0; transform: scale(.4); }
.est-vh:checked + .est-chip__box { background: var(--est-on); border-color: var(--est-on-edge); color: var(--est-on-ink); }
.est-vh:checked + .est-chip__box .est-chip__mark { background: var(--est-mark); border-color: var(--est-mark); color: var(--est-mark-ink); }
.est-vh:checked + .est-chip__box .est-chip__plus { opacity: 0; transform: rotate(90deg) scale(.4); }
.est-vh:checked + .est-chip__box .est-chip__tick { opacity: 1; transform: none; }

/* size: segmented control */
.est-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--est-tile-edge);
  border-radius: var(--est-radius-sm);
  background: var(--est-tile);
  overflow: hidden;
}
.est-seg__opt { position: relative; display: block; cursor: pointer; min-width: 0; }
.est-seg__opt + .est-seg__opt .est-seg__box { border-left: 2px solid var(--est-tile-edge); }
.est-seg__box {
  display: flex; align-items: flex-start; gap: .55rem;
  height: 100%;
  min-height: 3.6rem;
  padding: .7rem .8rem;
  color: var(--est-ink);
  transition: background-color .18s ease, color .18s ease;
}
.est-seg__box .est-check { margin-top: .05rem; }
.est-seg__label { display: block; font-weight: 600; line-height: 1.2; }
.est-seg__hint { display: block; margin-top: .1rem; color: var(--est-ink-soft); font-size: .85rem; line-height: 1.3; }
.est-seg__opt:hover .est-seg__box { background: var(--est-tile-hover); }
.est-vh:checked + .est-seg__box { background: var(--est-on); color: var(--est-on-ink); }
.est-vh:checked + .est-seg__box .est-seg__hint { color: var(--est-on-soft); }
.est-seg .est-vh:focus-visible + .est-seg__box { outline-offset: -5px; }
@container est-opts (max-width: 30rem) {
  .est-seg { grid-template-columns: minmax(0, 1fr); }
  .est-seg__opt + .est-seg__opt .est-seg__box { border-left: 0; border-top: 2px solid var(--est-tile-edge); }
  .est-seg__box { align-items: center; min-height: 3rem; padding-block: .55rem; }
  .est-seg__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; }
}

/* design: pills */
.est-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: .5rem; }
.est-pill { position: relative; display: block; cursor: pointer; min-width: 0; }
.est-pill__box {
  display: flex; align-items: center; gap: .6rem;
  height: 100%;
  min-height: 2.9rem;
  padding: .55rem .9rem .55rem .65rem;
  border: 2px solid var(--est-tile-edge);
  border-radius: var(--est-radius-sm);
  background: var(--est-tile);
  color: var(--est-ink);
  font-weight: 500;
  font-size: .97rem;
  line-height: 1.25;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.est-pill:hover .est-pill__box { background: var(--est-tile-hover); }
.est-vh:checked + .est-pill__box { background: var(--est-on); border-color: var(--est-on-edge); color: var(--est-on-ink); }

/* ---- result ticket ---- */
.est-ticket,
.est-stub {
  position: relative;
  color: var(--est-paper-ink);
  filter: drop-shadow(0 16px 22px rgba(12, 44, 60, .16)) drop-shadow(0 2px 3px rgba(12, 44, 60, .12));
}
.est-ticket__main,
.est-ticket__stub {
  position: relative;
  background: var(--est-paper);
  padding: clamp(1.1rem, 5.5cqi, 1.9rem);
}
.est-ticket__main { border-radius: var(--est-radius) var(--est-radius) 0 0; }
.est-ticket__stub {
  border-radius: 0 0 var(--est-radius) var(--est-radius);
  padding-top: .6rem;
  border-top: 2px dashed var(--est-paper-line);
}

.est-ticket__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: .9rem;
}
.est-ticket__eyebrow {
  margin: 0;
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 4cqi, 2.1rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.est-ticket__title {
  margin: 0;
  font-family: var(--est-font-label);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--est-paper-soft);
}
.est-ticket__route { margin: 0; }
.est-ticket__order {
  margin: -.2rem 0 .9rem;
  color: var(--est-paper-soft);
  font-size: .92rem;
  line-height: 1.35;
}

.est-empty {
  display: flex; align-items: flex-start; gap: .8rem;
  margin: 0 0 1.1rem;
  padding: .9rem 1rem;
  border: 2px dashed var(--est-paper-line);
  border-radius: var(--est-radius-sm);
}
.est-empty__icon { width: 1.9rem; height: 1.9rem; margin-top: .1rem; color: var(--est-mark); stroke-width: 1.7; }
.est-empty__title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.est-empty__text { margin: .2rem 0 0; color: var(--est-paper-soft); font-size: .95rem; }

.est-hours {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.3;
}
.est-hours__n {
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: 1.45em;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* plans */
.est-plans { margin: 0; padding: 0; border: 0; min-width: 0; }
.est-plans__legend {
  float: left; width: 100%;
  margin: 0 0 .5rem; padding: 0;
  font-family: var(--est-font-label);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--est-paper-soft);
}
.est-plans__grid { clear: both; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem 1rem; padding-top: .35rem; }
@container est-ticket (min-width: 24rem) {
  .est-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.est-plan { display: contents; cursor: pointer; }
/* each card spans six rows of the plans grid (subgrid), so side-by-side cards line up row for row */
.est-plan__box {
  container: est-plan / inline-size;
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  cursor: pointer;
  padding: .95rem 1rem 1rem;
  border: 2px solid var(--est-plan-edge);
  border-radius: var(--est-radius-sm);
  background: var(--est-plan);
  color: var(--est-paper-ink);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.est-plan:hover .est-plan__box { border-color: var(--est-plan-on-edge); }
.est-vh:checked + .est-plan__box {
  background: var(--est-plan-on);
  border-color: var(--est-plan-on-edge);
  box-shadow: inset 0 0 0 1px var(--est-plan-on-edge);
}
.est-plan__top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem .5rem;
}
.est-plan__mark { width: 1.45rem; height: 1.45rem; }
.est-plan__mark .est-ico { width: .9rem; height: .9rem; }
.est-plan__name {
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.est-plan__rate {
  margin-left: auto;
  font-family: var(--est-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}
.est-plan__per { font-size: .78em; font-weight: 600; opacity: .8; }
.est-plan__hint {
  display: block;
  margin-top: .4rem;
  color: var(--est-paper-soft);
  font-size: .86rem;
  line-height: 1.3;
}
.est-plan__cost {
  display: block;
  margin: .7rem 0 .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--est-paper-line);
  color: var(--est-total-ink);
  line-height: 1.05;
}
.est-plan__amt {
  font-family: var(--est-font-total);
  font-weight: var(--est-total-weight);
  font-size: calc(clamp(1.45rem, 11.5cqi, 2.2rem) * var(--est-total-scale));
  font-variant-numeric: tabular-nums;
  letter-spacing: .005em;
}
.est-plan__cur {
  font-family: var(--est-font-label);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--est-paper-soft);
  white-space: nowrap;
}
.est-plan__facts { display: contents; }
.est-plan__fact { display: block; }
.est-plan__fact + .est-plan__fact { margin-top: .6rem; }
.est-plan__k {
  display: block;
  font-family: var(--est-font-label);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--est-paper-soft);
}
.est-plan__v { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.est-plan__sub { display: block; color: var(--est-paper-soft); font-size: .84rem; line-height: 1.3; }
.est-plan__sooner {
  display: flex; align-items: flex-start; gap: .35rem;
  margin-top: .75rem;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;
}
.est-plan__sooner .est-ico { width: .95rem; height: .95rem; margin-top: .12rem; }

.est-badge {
  position: absolute; top: 0; right: .85rem;
  transform: translateY(-55%);
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .55rem .2rem .45rem;
  border-radius: 999px;
  background: var(--est-badge);
  color: var(--est-badge-ink);
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.est-badge .est-ico { width: .8rem; height: .8rem; }

.est-fine {
  margin: 1rem 0 0;
  color: var(--est-paper-soft);
  font-size: .88rem;
  line-height: 1.35;
}

@supports not (grid-template-rows: subgrid) {
  .est-plan { display: block; }
  .est-plan__box { display: flex; flex-direction: column; height: 100%; }
  .est-plan__facts { display: block; margin-top: auto; }
}
/* before a platform is picked, the plans show just their rate and promise */
.estimator.is-empty .est-plan__cost,
.estimator.is-empty .est-plan__fact,
.estimator.is-empty .est-plan__sooner { display: none; }

/* the math */
.est-math { margin: 0; }
.est-math__summary {
  display: flex; align-items: center; gap: .55rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  border-radius: 6px;
}
.est-math__summary::-webkit-details-marker { display: none; }
.est-math__summary::marker { content: ''; }
.est-math__summary:focus-visible { outline: 3px solid var(--est-focus); outline-offset: 2px; }
.est-math__chev {
  width: .55rem; height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.est-math[open] .est-math__chev { transform: rotate(45deg) translate(-2px, -2px); }
.est-math__hide,
.est-math[open] .est-math__show { display: none; }
.est-math[open] .est-math__hide { display: inline; }
.est-math__body { padding: .25rem 0 .5rem; }
.est-lines { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.est-lines li {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .18rem 0;
}
.est-lines__k { min-width: 0; }
.est-lines__dots {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  border-bottom: 2px dotted var(--est-paper-line);
  transform: translateY(-.28em);
}
.est-lines__v { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.est-lines--totals { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--est-paper-line); }
.est-lines__sum { font-weight: 700; }
.est-lines__rate.is-chosen { font-weight: 700; }
.est-lines__pick {
  display: inline-block;
  margin-left: .2rem;
  padding: 0 .35rem;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .1em;
}
@container est-ticket (max-width: 22rem) {
  .est-lines__rate { flex-wrap: wrap; }
  .est-lines__rate .est-lines__dots { display: none; }
  .est-lines__rate .est-lines__v { width: 100%; text-align: right; }
}

/* send */
.est-send {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%;
  min-height: 3.35rem;
  margin: 1.1rem 0 0;
  padding: .8rem 1.25rem;
  border: 2px solid var(--est-btn-edge);
  border-radius: 999px;
  background: var(--est-btn);
  color: var(--est-btn-ink);
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--est-btn-edge);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.est-send__icon { width: 1.2rem; height: 1.2rem; stroke-width: 2.4; transition: transform .2s ease; }
.est-send:hover { filter: brightness(1.06); }
.est-send:hover .est-send__icon { transform: translateX(3px); }
.est-send:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--est-btn-edge); }
.est-send:focus-visible { outline: 3px solid var(--est-focus); outline-offset: 4px; }
.est-send__note {
  margin: .7rem 0 0;
  text-align: center;
  color: var(--est-paper-soft);
  font-size: .88rem;
}

/* notes */
.est-notes { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--est-paper-line); }
.est-notes__title {
  margin: 0 0 .35rem;
  font-family: var(--est-font-label);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--est-paper-soft);
}
.est-notes__list {
  margin: 0; padding: 0 0 0 1rem;
  color: var(--est-paper-soft);
  font-size: .8rem;
  line-height: 1.4;
}
.est-notes__list li + li { margin-top: .2rem; }

.est-fallback { margin: 0; padding: 1rem; border: 2px dashed currentColor; border-radius: 10px; }

/* ---- phone peek bar (on <body>, shown by JS only while the options scroll in the stacked layout) ---- */
.est-peek {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .75rem;
  width: min(calc(100% - 1.5rem), 34rem);
  min-height: 3.4rem;
  margin: 0;
  padding: .5rem .6rem .5rem 1rem;
  border: 2px solid var(--est-btn-edge);
  border-radius: 16px;
  background: var(--est-paper);
  color: var(--est-paper-ink);
  font-family: var(--est-font-body);
  font-size: .95rem;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(12, 44, 60, .55), 0 3px 0 var(--est-btn-edge);
  transform: translate(-50%, calc(100% + 2rem));
  visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
  -webkit-tap-highlight-color: transparent;
}
.est-peek.is-shown {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.est-peek:focus-visible { outline: 3px solid var(--est-focus); outline-offset: 3px; }
/* While the bar is up (estimator.js toggles the class), focus scrolling stops above it. */
html.est-peek-on { scroll-padding-bottom: calc(3.4rem + 1.5rem + env(safe-area-inset-bottom)); }
.est-peek__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; min-width: 0; flex: 1; }
.est-peek__label {
  font-family: var(--est-font-label);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--est-paper-soft);
}
.est-peek__amt { font-family: var(--est-font-display); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.est-peek__when { width: 100%; font-size: .82rem; color: var(--est-paper-soft); }
.est-peek__go {
  display: inline-flex; align-items: center; gap: .3rem;
  flex: none;
  min-height: 2.5rem;
  padding: .4rem .8rem;
  border-radius: 10px;
  background: var(--est-btn);
  color: var(--est-btn-ink);
  font-family: var(--est-font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.est-peek__go .est-ico { width: 1rem; height: 1rem; stroke-width: 2.4; }

/* ==========================================================================
   4. Theme skins
   ========================================================================== */

/* ---- diner: an order pad and a pale-green guest check ---------------------- */
:root[data-theme="diner"] .estimator,
:root[data-theme="diner"] .est-peek {
  --est-ink: #0C2C3C;
  --est-ink-soft: #4A5A61;
  --est-sheet: #FFFBF1;
  --est-sheet-edge: rgba(12, 44, 60, .14);
  --est-tile: #FFFEFA;
  --est-tile-hover: #F2FAF8;
  --est-tile-edge: #A9B4B9;
  --est-on: #C9EDE7;
  --est-on-ink: #0C2C3C;
  --est-on-soft: #2B4A52;
  --est-on-edge: #2A9F95;
  --est-mark: #C8202F;
  --est-mark-ink: #FFFFFF;
  --est-num: #C8202F;
  --est-num-ink: #FFF6E4;
  --est-radius: 18px;
  --est-radius-sm: 14px;
  --est-paper: #EEF4E3;
  --est-paper-ink: #0C2C3C;
  --est-paper-soft: #3E554A;
  --est-paper-line: rgba(38, 112, 88, .3);
  --est-plan: rgba(255, 255, 250, .72);
  --est-plan-edge: rgba(38, 112, 88, .38);
  --est-plan-on: #FFFFFB;
  --est-plan-on-edge: #0C2C3C;
  --est-total-ink: #1D3E7C;
  --est-font-total: 'Yellowtail', 'Brush Script MT', cursive;
  --est-total-weight: 400;
  --est-total-scale: 1.08;
  --est-badge: #F2B43A;
  --est-badge-ink: #0C2C3C;
  --est-btn: #C8202F;
  --est-btn-ink: #FFF8EC;
  --est-btn-edge: #0C2C3C;
  --est-chrome: linear-gradient(180deg, #FFFFFF 0%, #C7CFD3 30%, #F4F6F7 50%, #9AA5AB 78%, #DCE1E4 100%);
}

/* the order pad: cream card with a checkerboard strip along the top */
:root[data-theme="diner"] .est__options {
  padding-top: calc(clamp(1.1rem, 4.5cqi, 2.25rem) + 14px);
  overflow: clip;
  background:
    repeating-conic-gradient(#0C2C3C 0 25%, #FFFDF6 0 50%) 0 0 / 14px 14px repeat-x,
    var(--est-sheet);
}
:root[data-theme="diner"] .est__options::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 14px;
  height: 3px;
  background: #C8202F;
}
:root[data-theme="diner"] .est-q__legend { letter-spacing: .03em; text-shadow: 2px 2px 0 rgba(200, 32, 47, .18); }

/* chrome-edged toggles */
:root[data-theme="diner"] .est-tile__box,
:root[data-theme="diner"] .est-chip__box,
:root[data-theme="diner"] .est-pill__box,
:root[data-theme="diner"] .est-seg {
  border-color: transparent;
  background: linear-gradient(var(--est-tile), var(--est-tile)) padding-box, var(--est-chrome) border-box;
  box-shadow: 0 2px 0 rgba(12, 44, 60, .1), inset 0 1px 0 #FFFFFF;
}
:root[data-theme="diner"] .est-tile:hover .est-tile__box,
:root[data-theme="diner"] .est-chip:hover .est-chip__box,
:root[data-theme="diner"] .est-pill:hover .est-pill__box {
  background: linear-gradient(var(--est-tile-hover), var(--est-tile-hover)) padding-box, var(--est-chrome) border-box;
}
:root[data-theme="diner"] .est-vh:checked + .est-tile__box,
:root[data-theme="diner"] .est-vh:checked + .est-chip__box,
:root[data-theme="diner"] .est-vh:checked + .est-pill__box {
  background: linear-gradient(var(--est-on), var(--est-on)) padding-box, linear-gradient(180deg, #5FD0C5, #1F8C83) border-box;
  box-shadow: 0 2px 0 rgba(12, 44, 60, .14), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
:root[data-theme="diner"] .est-vh:checked + .est-chip__box { background: linear-gradient(#0C2C3C, #0C2C3C) padding-box, linear-gradient(180deg, #5FD0C5, #1F8C83) border-box; color: #FFF8EC; }
:root[data-theme="diner"] .est-seg__opt + .est-seg__opt .est-seg__box { border-left-color: #C3CBCF; }
:root[data-theme="diner"] .est-vh:checked + .est-seg__box { background: #0C2C3C; color: #FFF8EC; }
:root[data-theme="diner"] .est-vh:checked + .est-seg__box .est-seg__hint { color: #CFE6E2; }
:root[data-theme="diner"] .est-tile__icon { color: #C8202F; }
:root[data-theme="diner"] .est-vh:checked + .est-tile__box .est-tile__icon { color: #0C2C3C; }
@container est-opts (max-width: 30rem) {
  :root[data-theme="diner"] .est-seg__opt + .est-seg__opt .est-seg__box { border-top-color: #C3CBCF; }
}

/* the guest check: ruled pale-green paper, red header rule, torn bottom edge */
:root[data-theme="diner"] .est-ticket,
:root[data-theme="diner"] .est-stub {
  filter: drop-shadow(0 16px 18px rgba(12, 44, 60, .16)) drop-shadow(0 2px 2px rgba(12, 44, 60, .14));
}
:root[data-theme="diner"] .est-ticket__main,
:root[data-theme="diner"] .est-ticket__stub {
  background-color: var(--est-paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.9rem - 1px), rgba(38, 112, 88, .2) calc(1.9rem - 1px) 1.9rem);
  background-position: 0 3.9rem;
}
:root[data-theme="diner"] .est-ticket__main { border-radius: 6px 6px 0 0; }
:root[data-theme="diner"] .est-ticket__stub {
  --zz: 9px;
  border-radius: 0;
  border-top: 2px dashed rgba(38, 112, 88, .45);
  padding-bottom: calc(clamp(1.1rem, 5.5cqi, 1.9rem) + var(--zz));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
}
:root[data-theme="diner"] .est-ticket__head {
  position: relative;
  padding-bottom: .7rem;
  margin-bottom: 1rem;
  border-bottom: 3px solid #C8202F;
}
:root[data-theme="diner"] .est-ticket__head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px;
  border-bottom: 1px solid #C8202F;
}
:root[data-theme="diner"] .est-ticket__eyebrow { color: #C8202F; letter-spacing: .1em; }
:root[data-theme="diner"] .est-ticket__title { color: #0C2C3C; }
:root[data-theme="diner"] .est-hours__n {
  font-family: 'Yellowtail', cursive;
  font-weight: 400;
  font-size: 1.75em;
  color: #1D3E7C;
  letter-spacing: 0;
}
:root[data-theme="diner"] .est-plan__amt { line-height: 1.15; }
/* the chosen plan gets circled in red pen */
:root[data-theme="diner"] .est-vh:checked + .est-plan__box { box-shadow: none; }
:root[data-theme="diner"] .est-vh:checked + .est-plan__box::after {
  content: "";
  position: absolute; inset: -7px -6px -6px -7px;
  border: 2.5px solid #C8202F;
  border-radius: 255px 22px 225px 18px / 18px 225px 22px 255px;
  transform: rotate(-.8deg);
  pointer-events: none;
}
:root[data-theme="diner"] .est-plan__name { color: #0C2C3C; }
:root[data-theme="diner"] .est-plan--priority .est-plan__sooner { color: #A3141F; }
:root[data-theme="diner"] .est-badge { box-shadow: 0 0 0 2px #0C2C3C; }
:root[data-theme="diner"] .est-send {
  border: 3px solid transparent;
  background: linear-gradient(#C8202F, #B01A28) padding-box, var(--est-chrome) border-box;
  box-shadow: 0 4px 0 #0C2C3C, 0 10px 18px -10px rgba(12, 44, 60, .6);
}
:root[data-theme="diner"] .est-send:active { box-shadow: 0 1px 0 #0C2C3C; }
:root[data-theme="diner"] .est-notes__list li::marker { color: #C8202F; }
:root[data-theme="diner"] .est-peek { border-color: #0C2C3C; }

/* ---- forest: a ranger's field logbook and park fee sheet --------------------- */
:root[data-theme="forest"] .estimator,
:root[data-theme="forest"] .est-peek {
  --est-ink: #1F2A1B;
  --est-ink-soft: #4B4A36;
  --est-sheet: #F4EBD3;
  --est-sheet-edge: rgba(62, 42, 20, .28);
  --est-tile: #FBF6E8;
  --est-tile-hover: #EEF0DF;
  --est-tile-edge: #9A8661;
  --est-on: #1F4424;
  --est-on-ink: #F8F0DC;
  --est-on-soft: #D3DEC4;
  --est-on-edge: #1F4424;
  --est-mark: #C4502A;
  --est-mark-ink: #FFF7E8;
  --est-num: #1F4424;
  --est-num-ink: #F4EBD3;
  --est-radius: 8px;
  --est-radius-sm: 6px;
  --est-paper: #DCC7A1;
  --est-paper-ink: #251C12;
  --est-paper-soft: #54432D;
  --est-paper-line: rgba(84, 60, 30, .38);
  --est-plan: rgba(249, 242, 225, .78);
  --est-plan-edge: rgba(84, 60, 30, .45);
  --est-plan-on: #FBF6E8;
  --est-plan-on-edge: #1F4424;
  --est-total-ink: #1F4424;
  --est-font-total: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --est-total-weight: 800;
  --est-total-scale: 1.1;
  --est-badge: #1F4424;
  --est-badge-ink: #F4EBD3;
  --est-btn: #6B4A2B;
  --est-btn-ink: #F6CD5E;
  --est-btn-edge: #3A2714;
  --est-shadow: 0 1px 0 rgba(62, 42, 20, .08), 0 18px 36px -22px rgba(31, 42, 27, .55);
}
/* field guide page: cream with faint topographic contours */
:root[data-theme="forest"] .est__options {
  background:
    repeating-radial-gradient(ellipse at 88% 8%, transparent 0 22px, rgba(31, 68, 36, .07) 22px 23.5px),
    repeating-radial-gradient(ellipse at 6% 96%, transparent 0 26px, rgba(107, 74, 43, .06) 26px 27.5px),
    var(--est-sheet);
  border: 2px solid #1F4424;
  box-shadow: 0 0 0 4px var(--est-sheet), 0 0 0 5px rgba(31, 68, 36, .45), var(--est-shadow);
  margin: 5px;
}
:root[data-theme="forest"] .est-q__legend { color: #1F4424; letter-spacing: .05em; }
:root[data-theme="forest"] .est-q__num { box-shadow: 0 0 0 2px var(--est-sheet), 0 0 0 3.5px #1F4424; margin: 0 .1em; }
:root[data-theme="forest"] .est-tile__icon { color: #1F4424; }
:root[data-theme="forest"] .est-vh:checked + .est-tile__box .est-tile__icon { color: #F6CD5E; }
:root[data-theme="forest"] .est-tile__label,
:root[data-theme="forest"] .est-seg__label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.18rem; letter-spacing: .02em; }
:root[data-theme="forest"] .est-chip__box { border-radius: 6px; }
:root[data-theme="forest"] .est-check { border-radius: 50%; }
/* checked marks look like a rubber stamp */
:root[data-theme="forest"] .est-vh:checked + * .est-check { transform: rotate(-10deg); box-shadow: 0 0 0 2px var(--est-on), 0 0 0 3px #C4502A; }

/* the fee sheet: kraft paper with grain, a pine header band, logbook rules */
:root[data-theme="forest"] .est-ticket,
:root[data-theme="forest"] .est-stub { filter: drop-shadow(0 16px 20px rgba(31, 42, 27, .25)) drop-shadow(0 2px 2px rgba(31, 42, 27, .2)); }
:root[data-theme="forest"] .est-ticket__main,
:root[data-theme="forest"] .est-ticket__stub {
  background-color: var(--est-paper);
  background-image:
    radial-gradient(rgba(90, 60, 25, .16) .8px, transparent 1.3px),
    radial-gradient(rgba(255, 250, 235, .22) .8px, transparent 1.4px),
    linear-gradient(90deg, transparent 0 5px, rgba(166, 60, 30, .38) 5px 6px, transparent 6px 9px, rgba(166, 60, 30, .38) 9px 10px, transparent 10px);
  background-size: 7px 7px, 11px 11px, 100% 100%;
  background-position: 0 0, 4px 6px, 0 0;
}
:root[data-theme="forest"] .est-ticket__main { border-radius: 4px 4px 0 0; padding-top: 0; }
:root[data-theme="forest"] .est-ticket__stub { border-radius: 0 0 4px 4px; border-top: 2px dashed rgba(84, 60, 30, .5); }
:root[data-theme="forest"] .est-ticket__head {
  margin: 0 calc(-1 * clamp(1.1rem, 5.5cqi, 1.9rem)) 1rem;
  padding: .85rem clamp(1.1rem, 5.5cqi, 1.9rem) .75rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 0, 0, .06) 18px 19px),
    #1F4424;
  border-bottom: 4px solid #C4502A;
  border-radius: 4px 4px 0 0;
}
:root[data-theme="forest"] .est-ticket__eyebrow { color: #F4EBD3; letter-spacing: .08em; }
:root[data-theme="forest"] .est-ticket__title { color: #CFDDBE; }
:root[data-theme="forest"] .est-hours__n { color: #1F4424; font-size: 1.6em; }
:root[data-theme="forest"] .est-plan__box { border-style: solid; }
:root[data-theme="forest"] .est-plan__name { color: #1F4424; }
:root[data-theme="forest"] .est-vh:checked + .est-plan__box { box-shadow: inset 0 0 0 2px #1F4424, 3px 3px 0 rgba(31, 68, 36, .35); }
:root[data-theme="forest"] .est-plan__mark { border-radius: 50%; }
:root[data-theme="forest"] .est-badge {
  border-radius: 3px;
  color: #1F4424;
  background: #F4EBD3;
  box-shadow: inset 0 0 0 2px #1F4424;
  transform: translateY(-55%) rotate(-4deg);
  padding: .26rem .5rem .22rem .42rem;
}
:root[data-theme="forest"] .est-plan--priority .est-plan__sooner { color: #1F4424; }
/* a routed wooden park sign */
:root[data-theme="forest"] .est-send {
  border-radius: 8px;
  border-width: 3px;
  background:
    repeating-linear-gradient(178deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #6F4B2C, #573B21);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 230, 160, .2);
  box-shadow: 0 4px 0 #3A2714, inset 0 0 0 2px rgba(246, 205, 94, .35);
}
:root[data-theme="forest"] .est-send:active { box-shadow: 0 1px 0 #3A2714, inset 0 0 0 2px rgba(246, 205, 94, .35); }
:root[data-theme="forest"] .est-lines__dots { border-bottom-color: rgba(84, 60, 30, .45); }
:root[data-theme="forest"] .est-peek { border-radius: 8px; }
:root[data-theme="forest"] .est-peek__go { border-radius: 6px; }

/* ---- airfield: a flight manifest and boarding pass ---------------------------- */
:root[data-theme="airfield"] .estimator,
:root[data-theme="airfield"] .est-peek {
  --est-ink: #0C2C3C;
  --est-ink-soft: #3E5561;
  --est-sheet: #F6EFDD;
  --est-sheet-edge: rgba(12, 44, 60, .22);
  --est-tile: #FFFBF1;
  --est-tile-hover: #EEF3F2;
  --est-tile-edge: #6E8591;
  --est-on: #0C2C3C;
  --est-on-ink: #F6EFDD;
  --est-on-soft: #C3D3DA;
  --est-on-edge: #0C2C3C;
  --est-mark: #C4452A;
  --est-mark-ink: #FFFFFF;
  --est-num: #C4452A;
  --est-num-ink: #FFFFFF;
  --est-radius: 6px;
  --est-radius-sm: 4px;
  --est-font-label: 'Space Mono', ui-monospace, 'Consolas', monospace;
  --est-paper: #FAF4E4;
  --est-paper-ink: #0C2C3C;
  --est-paper-soft: #3E5561;
  --est-paper-line: rgba(12, 44, 60, .3);
  --est-plan: #FFFCF3;
  --est-plan-edge: rgba(12, 44, 60, .35);
  --est-plan-on: #FFFFFF;
  --est-plan-on-edge: #0C2C3C;
  --est-total-ink: #0C2C3C;
  --est-font-total: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --est-total-weight: 800;
  --est-total-scale: 1.1;
  --est-badge: #FFFCF3;
  --est-badge-ink: #A63A20;
  --est-btn: #B53F24;
  --est-btn-ink: #FFF8EE;
  --est-btn-edge: #0C2C3C;
}
/* booking sheet: livery stripes along the top */
:root[data-theme="airfield"] .est__options {
  padding-top: calc(clamp(1.1rem, 4.5cqi, 2.25rem) + 12px);
  overflow: clip;
  background:
    linear-gradient(180deg, #0C2C3C 0 6px, transparent 6px 8px, #C4452A 8px 11px, transparent 11px) 0 0 / 100% 12px no-repeat,
    var(--est-sheet);
}
:root[data-theme="airfield"] .est-q__legend { font-weight: 700; letter-spacing: .04em; }
:root[data-theme="airfield"] .est-q__num {
  display: inline-flex;
  width: auto; height: auto;
  padding: .28em .45em .22em;
  border-radius: 3px;
  background: #0C2C3C;
  color: #F6EFDD;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: .55em;
  letter-spacing: .04em;
}
:root[data-theme="airfield"] .est-q__num::before { content: "0"; }
:root[data-theme="airfield"] .est-q__help { font-family: 'Space Mono', monospace; font-size: .8rem; letter-spacing: .01em; }
:root[data-theme="airfield"] .est-tile__icon { color: #2F6E8E; }
:root[data-theme="airfield"] .est-vh:checked + .est-tile__box .est-tile__icon { color: #F2B43A; }
:root[data-theme="airfield"] .est-tile__box,
:root[data-theme="airfield"] .est-pill__box,
:root[data-theme="airfield"] .est-seg { border-width: 1.5px; }
:root[data-theme="airfield"] .est-chip__box { border-width: 1.5px; border-radius: 4px; }
:root[data-theme="airfield"] .est-check { border-width: 1.5px; }
:root[data-theme="airfield"] .est-seg__label,
:root[data-theme="airfield"] .est-tile__label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme="airfield"] .est-seg__hint,
:root[data-theme="airfield"] .est-tile__hint { font-size: .84rem; }

/* the boarding pass: navy header band, perforated tear line with notches, barcode */
:root[data-theme="airfield"] .est-ticket,
:root[data-theme="airfield"] .est-stub { filter: drop-shadow(0 16px 22px rgba(12, 44, 60, .22)) drop-shadow(0 2px 2px rgba(12, 44, 60, .16)); }
:root[data-theme="airfield"] .est-ticket__main {
  padding-top: 0;
  border-radius: 10px 10px 0 0;
  -webkit-mask: radial-gradient(circle 13px at 0 100%, #0000 97%, #000) top left / 51% 100% no-repeat,
                radial-gradient(circle 13px at 100% 100%, #0000 97%, #000) top right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 100%, #0000 97%, #000) top left / 51% 100% no-repeat,
        radial-gradient(circle 13px at 100% 100%, #0000 97%, #000) top right / 51% 100% no-repeat;
}
:root[data-theme="airfield"] .est-ticket__stub {
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding-top: 1rem;
  -webkit-mask: radial-gradient(circle 13px at 0 0, #0000 97%, #000) top left / 51% 100% no-repeat,
                radial-gradient(circle 13px at 100% 0, #0000 97%, #000) top right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 0, #0000 97%, #000) top left / 51% 100% no-repeat,
        radial-gradient(circle 13px at 100% 0, #0000 97%, #000) top right / 51% 100% no-repeat;
}
:root[data-theme="airfield"] .est-ticket__stub::before {
  content: "";
  position: absolute; top: 0; left: 20px; right: 20px;
  border-top: 2px dashed rgba(12, 44, 60, .38);
}
:root[data-theme="airfield"] .est-ticket__stub::after {
  content: "";
  display: block;
  height: 2.3rem;
  margin-top: 1.1rem;
  opacity: .85;
  background: repeating-linear-gradient(90deg,
    #0C2C3C 0 2px, transparent 2px 4px, #0C2C3C 4px 5px, transparent 5px 8px,
    #0C2C3C 8px 11px, transparent 11px 12px, #0C2C3C 12px 13px, transparent 13px 16px,
    #0C2C3C 16px 17px, transparent 17px 19px, #0C2C3C 19px 22px, transparent 22px 25px);
}
:root[data-theme="airfield"] .est-ticket__head {
  margin: 0 calc(-1 * clamp(1.1rem, 5.5cqi, 1.9rem)) 1.1rem;
  padding: .9rem clamp(1.1rem, 5.5cqi, 1.9rem) .8rem;
  background: #0C2C3C;
  border-bottom: 4px solid #C4452A;
  box-shadow: 0 3px 0 #F2B43A;
  align-items: center;
}
:root[data-theme="airfield"] .est-ticket__eyebrow { color: #F6EFDD; font-weight: 700; letter-spacing: .1em; }
:root[data-theme="airfield"] .est-ticket__title { color: #BFD0D8; order: 3; width: 100%; }
:root[data-theme="airfield"] .est-ticket__route {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #F2B43A;
  font-family: 'Space Mono', monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
:root[data-theme="airfield"] .est-ticket__route .est-ico { width: 1rem; height: 1rem; color: #F6EFDD; }
:root[data-theme="airfield"] .est-hours { font-family: 'Space Mono', monospace; font-size: .88rem; }
:root[data-theme="airfield"] .est-hours__n { font-family: 'Barlow Condensed', sans-serif; font-size: 1.9em; }
:root[data-theme="airfield"] .est-plan__box { border-width: 1.5px; }
:root[data-theme="airfield"] .est-vh:checked + .est-plan__box { box-shadow: inset 0 0 0 1.5px #0C2C3C, 4px 4px 0 rgba(12, 44, 60, .18); }
/* the chosen fare gets an orange ink stamp */
:root[data-theme="airfield"] .est-vh:checked + .est-plan__box::after {
  content: "Selected";
  content: "Selected" / "";
  position: absolute; left: .9rem; bottom: 0;
  translate: 0 55%;
  padding: .2rem .45rem .15rem;
  background: #FFFFFF;
  border: 2px solid #A63A20;
  border-radius: 3px;
  color: #A63A20;
  font-family: 'Space Mono', monospace;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: .85;
  pointer-events: none;
}
:root[data-theme="airfield"] .est-badge {
  border-radius: 3px;
  padding: .24rem .45rem .2rem .38rem;
  box-shadow: inset 0 0 0 2px #A63A20;
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  transform: translateY(-55%) rotate(-3deg);
}
:root[data-theme="airfield"] .est-plan--priority .est-plan__sooner { color: #A63A20; font-family: 'Space Mono', monospace; font-size: .76rem; font-weight: 700; }
:root[data-theme="airfield"] .est-plan__v { font-family: 'Space Mono', monospace; font-size: .86rem; font-weight: 700; }
:root[data-theme="airfield"] .est-plan__sub { font-family: 'Space Mono', monospace; font-size: .74rem; }
:root[data-theme="airfield"] .est-lines { font-family: 'Space Mono', monospace; font-size: .8rem; }
:root[data-theme="airfield"] .est-math__summary { font-family: 'Space Mono', monospace; font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme="airfield"] .est-send { border-radius: 6px; }
:root[data-theme="airfield"] .est-peek { border-radius: 8px; }
:root[data-theme="airfield"] .est-peek__go { border-radius: 4px; }

/* ---- motion + forced colours ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .estimator *,
  .estimator *::before,
  .estimator *::after,
  .est-peek,
  .est-peek * { transition: none !important; animation: none !important; }
  .est-peek { transform: translate(-50%, 0); }
  .est-peek:not(.is-shown) { display: none; }
}
@media (forced-colors: active) {
  .est-vh:checked + .est-tile__box,
  .est-vh:checked + .est-chip__box,
  .est-vh:checked + .est-pill__box,
  .est-vh:checked + .est-seg__box,
  .est-vh:checked + .est-plan__box { outline: 3px solid Highlight; outline-offset: -3px; }
  .est-vh:checked + * .est-check { background: Highlight; border-color: Highlight; }
  .est-vh:checked + * .est-check .est-ico { color: HighlightText; }
}
