/* ============================================================
   SaanToll — PH toll calculator (formerly Lakbay)
   Design system: SaanToll brand guide V1 (Aug 2026), toll-plaza kit.
   Every element is furniture from a highway town: green destination
   signs, white km marker posts, plaza canopies, concrete sheets.

   ONE LOOK ONLY. There is deliberately no prefers-color-scheme dark
   variant — the brand ships a single palette (concrete sheet on
   canvas, green boards) and a dark inversion would break the
   load-bearing wallet colours and the sign construction. Do not
   re-add dark-mode overrides.
   ============================================================ */

/* ------------------------------------------------------------------ *
 * Design tokens — adopted verbatim from .claude/skills/saantoll-design
 * /tokens/*.css. Reference by custom property, never by hex.
 * Webfonts (tokens/fonts.css) load from index.html instead of an
 * @import here so they stay non-render-blocking.
 * ------------------------------------------------------------------ */

:root {
  /* --- colors.css --- */
  /* Greens — the road itself */
  --green-expressway: #0B7B3E;
  --green-deep: #064D27;
  --green-sage: #7FB596;
  --green-mint: #BFE0CD;
  --green-pale: #C7E5D3;
  --green-tint: #DCEDE3;

  /* Accents — used sparingly, one per screen */
  --orange-sunrise: #FF7A1A;
  --orange-sunrise-press: #E96A0D;
  --yellow-jeepney: #FFC72C;

  /* Neutrals — concrete, gravel, asphalt */
  --concrete: #F7F5F0;
  --canvas: #E8E4DB;
  --white: #FFFFFF;
  --gravel: #D8D3C8;
  --gravel-edge: #C3BDB0;
  --line-concrete: #D3CDC0;
  --line-concrete-soft: #E6E1D6;
  --ink-asphalt: #1A1A1A;
  --ink-body: #34302A;
  --ink-muted: #6B675E;
  --ink-faint: #8A857A;

  /* Reserved: RFID wallet identity. Never decorative. */
  --easytrip-blue: #1D5FBF;
  --easytrip-tint: #C9DCF6;
  --autosweep-red: #E04E1B;
  --autosweep-tint: #FBD7C8;

  /* --- typography.css --- */
  --font-display: Overpass, system-ui, sans-serif;
  --font-body: Karla, system-ui, sans-serif;

  --fw-sign: 700;        /* labels, arrow glyph */
  --fw-sign-bold: 800;   /* sign text, wordmark, section numbers */
  --fw-sign-black: 900;  /* totals, badges, all-caps micro labels */
  --fw-body: 400;
  --fw-body-medium: 500;
  --fw-body-bold: 700;

  --size-total-hero: 88px;
  --size-total-card: 70px;
  --size-total-inline: 38px;
  --size-total-row: 24px;

  --size-display-xl: 96px;
  --size-display-l: 62px;
  --size-display-m: 44px;
  --size-display-s: 26px;

  --size-body-l: 17px;
  --size-body: 16px;
  --size-body-s: 15px;
  --size-body-xs: 14px;

  --size-label: 13px;
  --size-label-s: 11px;
  --size-label-xs: 10px;
  --size-label-xxs: 9px;

  --track-caps-tight: 0.06em;
  --track-caps: 0.14em;
  --track-caps-wide: 0.2em;
  --track-caps-widest: 0.24em;
  --track-display-tight: -0.02em;

  --lh-total: 0.9;
  --lh-display: 1.12;
  --lh-body: 1.6;
  --lh-body-loose: 1.65;

  --numeric-toll: tabular-nums;

  /* --- spacing.css --- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-12: 26px;
  --space-14: 30px;
  --space-16: 34px;
  --space-20: 44px;
  --space-24: 56px;
  --space-28: 64px;

  --sign-frame: 9px;     /* green board padding around the white inset border */
  --sign-frame-s: 5px;
  --sign-border: 4px;    /* white inset border weight, large boards */
  --sign-border-s: 2px;
  --marker-border: 3px;  /* km marker post outline */
  --divider-weight: 3px; /* dashed lane divider */

  --screen-pad: 20px;    /* mobile screen gutter */
  --page-pad: 64px;

  /* --- radius.css --- */
  --radius-sheet: 26px;
  --radius-card: 20px;
  --radius-board-l: 18px;
  --radius-board: 12px;
  --radius-board-s: 11px;
  --radius-inset-l: 11px;
  --radius-inset: 8px;
  --radius-inset-s: 6px;
  --radius-cta: 14px;
  --radius-pill: 8px;
  --radius-badge: 8px;
  --radius-badge-s: 6px;
  --radius-icon-128: 28px;
  --radius-icon-48: 11px;
  --radius-marker: 5px 5px 2px 2px;
  --radius-lane: 3px 3px 0 0;

  /* --- elevation.css --- */
  --shadow-card: 0 1px 0 rgba(26, 26, 26, 0.12), 0 24px 60px -30px rgba(26, 26, 26, 0.4);
  --shadow-sheet: 0 1px 0 rgba(26, 26, 26, 0.14), 0 18px 44px -26px rgba(26, 26, 26, 0.5);
  --shadow-sheet-tall: 0 1px 0 rgba(26, 26, 26, 0.12), 0 30px 70px -34px rgba(26, 26, 26, 0.55);
  --shadow-board-green: 0 18px 40px -22px rgba(6, 77, 39, 0.9);
  --shadow-none: none;

  /* --- texture.css — one hatch, green fields only, never concrete --- */
  --texture-hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
  --texture-hatch-cover: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, rgba(0, 0, 0, 0) 2px 6px);
  --divider-dashed-light: 3px dashed var(--line-concrete);
  --divider-dashed-green: 3px dashed var(--green-sage);
  --divider-dashed-onGreen: 2px dashed rgba(255, 255, 255, 0.16);

  /* --- semantic.css --- */
  --surface-page: var(--concrete);
  --surface-canvas: var(--canvas);
  --surface-card: var(--white);
  --surface-sheet: var(--concrete);
  --surface-sign: var(--green-expressway);
  --surface-sign-deep: var(--green-deep);
  --surface-inverse: var(--ink-asphalt);

  --text-body: var(--ink-body);
  --text-heading: var(--ink-asphalt);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --text-onSign: var(--white);
  --text-onSign-muted: var(--green-mint);
  --text-onSign-label: var(--green-sage);
  --text-onDeep: var(--green-tint);

  --action-primary: var(--orange-sunrise);
  --action-primary-hover: var(--orange-sunrise-press);
  --action-primary-text: var(--white);
  --action-secondary-text: var(--green-sage);
  --action-flag: var(--yellow-jeepney);
  --action-flag-text: var(--ink-asphalt);

  --total-figure: var(--white);
  --total-symbol: var(--yellow-jeepney);
  --total-onLight: var(--orange-sunrise);

  --border-sign: var(--white);
  --border-marker: var(--ink-asphalt);
  --border-card: var(--line-concrete);
  --border-card-soft: var(--line-concrete-soft);
  --divider-lane: var(--line-concrete);

  --wallet-easytrip: var(--easytrip-blue);
  --wallet-easytrip-sub: var(--easytrip-tint);
  --wallet-autosweep: var(--autosweep-red);
  --wallet-autosweep-sub: var(--autosweep-tint);

  /* Motion: the brand does not bounce. Short, flat, functional. */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  color-scheme: light;
}

/* ------------------------------------------------------------------ *
 * Reset
 * ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* author `display` declarations otherwise beat the UA rule for [hidden] */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, ol, fieldset, legend, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; }

/* Focus is always the jeepney-yellow ring — visible on green and concrete. */
:focus-visible { outline: 2px solid var(--yellow-jeepney); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * Sheet — one 390px column on the canvas, centred on wider viewports
 * ------------------------------------------------------------------ */

.shell {
  width: min(390px, 100%);
  margin: 0 auto;
  background: var(--surface-sheet);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet-tall);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 430px) {
  body { padding: var(--space-14) var(--space-9) var(--space-20); }
}

/* ------------------------------------------------------------------ *
 * Plaza canopy header
 * ------------------------------------------------------------------ */

.canopy {
  background: var(--surface-sign-deep);
  padding: var(--space-8) var(--screen-pad) 0;
}

.canopy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wordmark-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-sign-bold);
  color: var(--white);
  letter-spacing: -0.01em;
}

.wordmark-arrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-sign);
  color: var(--yellow-jeepney);
}

.canopy-label {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--green-sage);
}

/* --- language toggle: sign furniture, left of the screen label -------- */

.canopy-end {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.lang {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.lang-btn {
  position: relative;
  padding: 3px var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-badge-s);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps);
  color: var(--green-sage);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

/* The chip stays canopy-sized; an invisible box carries the 44px target. */
.lang-btn::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: var(--space-20);
  transform: translateY(-50%);
}

.lang-btn.is-on {
  background: var(--yellow-jeepney);
  color: var(--ink-asphalt);
}

@media (hover: hover) {
  .lang-btn:not(.is-on):hover { color: var(--white); }
}

/* the ring sits outside the chip so it reads on the deep-green field */
.lang-btn:focus-visible { outline: 2px solid var(--yellow-jeepney); outline-offset: 2px; }

.lang-sep {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign);
  color: var(--green-sage);
}

.lanes {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-7);
}

.lanes span {
  flex: 1;
  height: 12px;
  background: var(--surface-sign);
  border-radius: var(--radius-lane);
}

/* ------------------------------------------------------------------ *
 * Green input block
 * ------------------------------------------------------------------ */

.panel {
  background: var(--surface-sign);
  background-image: var(--texture-hatch);
  padding: var(--space-10) var(--screen-pad) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.panel-head {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: var(--fw-body-bold);
  line-height: 1.25;
  color: var(--white);
}

/* The spec puts sage labels on the deep-green field; these group labels sit on
   the lighter #0B7B3E panel, so they step up to mint to clear 4.5:1. */
.group-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-label-xxs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--green-mint);
  margin-bottom: var(--space-3);
}

/* --- MULA / PATUNGO fields ------------------------------------------ */

.picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-20);
  gap: var(--space-3);
}

#field-from { grid-column: 1; grid-row: 1; }
#field-to { grid-column: 1; grid-row: 2; }

.field {
  position: relative;
  background: var(--surface-sign-deep);
  border-radius: var(--radius-board);
}

.field-label {
  position: absolute;
  top: 13px;
  left: 15px;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: var(--size-label-xxs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--green-sage);
}

.field-input {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 30px 42px 13px 15px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-board);
  font-family: var(--font-display);
  /* 16px+ keeps iOS Safari from zooming the page on focus */
  font-size: 17px;
  font-weight: var(--fw-sign-bold);
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--white);
  appearance: none;
  transition: background var(--dur-fast) var(--ease-standard);
}

.field-input::placeholder {
  color: var(--green-sage);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-tight);
}

.field-input:focus { outline: none; }
.field-input:focus-visible { outline: 2px solid var(--yellow-jeepney); outline-offset: -2px; }
.field:focus-within { background: var(--surface-sign-deep); }

.field-glyph {
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: 4px;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-sign);
  line-height: 1;
}

.field-glyph--from { color: var(--green-sage); }
.field-glyph--to { color: var(--yellow-jeepney); }

/* --- swap: a type glyph on a small board, never a circle ------------- */

.swap {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: var(--space-20);
  height: var(--space-20);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-sign);
  color: var(--green-sage);
  background: var(--surface-sign-deep);
  border: var(--sign-border-s) solid var(--green-sage);
  border-radius: var(--radius-badge);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

@media (hover: hover) {
  .swap:hover { color: var(--white); border-color: var(--white); }
}

/* --- dropdown: a concrete list ---------------------------------------- */

.options {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  /* sized for 60+ places without swallowing the viewport on a phone */
  max-height: min(52vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-padding-block: 4px;
  background: var(--concrete);
  border: var(--sign-border-s) solid var(--border-card);
  border-radius: var(--radius-board);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--space-20);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-inset);
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  font-weight: var(--fw-body-medium);
  color: var(--ink-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.option + .option { border-top: var(--divider-dashed-light); }

.option.is-active { background: var(--green-tint); }

@media (hover: hover) {
  .option:hover { background: var(--green-tint); }
  .option--empty:hover { background: transparent; }
}

.option[aria-selected="true"] { font-weight: var(--fw-body-bold); }

.option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* optional `province` on a place — secondary, never competes with the name */
.option-prov {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-faint);
}

.option-tick {
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--fw-sign-black);
  color: var(--green-expressway);
}

.option--empty {
  color: var(--text-muted);
  cursor: default;
  min-height: 40px;
}

/* a gate row carries a mini green sign board with the white inset */
.option-road {
  flex: none;
  margin-left: auto;
  background: var(--surface-sign);
  border-radius: var(--radius-inset);
  padding: 3px;
  white-space: nowrap;
}

.option-road-inner {
  display: block;
  border: var(--sign-border-s) solid var(--border-sign);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-tight);
  color: var(--text-onSign);
}

/* --- vehicle class row ------------------------------------------------ */

.seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.seg-item { position: relative; display: block; }

.seg-item input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.seg-face {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: var(--space-20);
  padding: 9px 4px;
  text-align: center;
  border: var(--sign-border-s) solid var(--green-sage);
  border-radius: var(--radius-badge);
  color: var(--green-mint);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.seg-name {
  font-family: var(--font-display);
  font-size: var(--size-label-s);
  font-weight: var(--fw-sign-black);
  letter-spacing: 0.12em;
  line-height: 1;
}

.seg-hint {
  font-family: var(--font-body);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-body);
  line-height: 1.2;
  color: var(--green-mint);
}

.seg-item input:checked + .seg-face {
  background: var(--yellow-jeepney);
  border-color: var(--yellow-jeepney);
  color: var(--ink-asphalt);
}

.seg-item input:checked + .seg-face .seg-hint { color: var(--ink-asphalt); opacity: 0.72; }

.seg-item input:focus-visible + .seg-face { outline: 2px solid var(--yellow-jeepney); outline-offset: 2px; }

/* --- one way / balikan ------------------------------------------------ */

.toggle {
  display: flex;
  gap: var(--space-2);
  background: var(--surface-sign-deep);
  padding: var(--sign-frame-s);
  border-radius: var(--radius-board);
}

.toggle-item { position: relative; flex: 1; display: block; }

.toggle-item input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.toggle-face {
  display: flex;
  align-items: center;
  justify-content: center;
  /* spec padding is 10px 0; the 44px minimum touch target wins */
  min-height: var(--space-20);
  padding: 10px 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  color: var(--action-secondary-text);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.toggle-item input:checked + .toggle-face {
  background: var(--action-primary);
  color: var(--action-primary-text);
}

.toggle-item input:focus-visible + .toggle-face { outline: 2px solid var(--yellow-jeepney); outline-offset: 2px; }

/* --- manual toll gates switch ----------------------------------------- */

.switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--space-24);
  padding-top: var(--space-7);
  border-top: var(--divider-dashed-onGreen);
  cursor: pointer;
}

.switch-text { flex: 1; display: block; }

.switch-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-label-s);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps);
  color: var(--white);
}

.switch-hint {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--green-mint);
}

.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* A board with a word on it, not a pill with a sliding knob:
   the system has no circles and motion is colour-swap only. */
.switch {
  flex: none;
  width: 64px;
  min-height: var(--space-20);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--sign-border-s) solid var(--green-sage);
  border-radius: var(--radius-badge);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.switch::after {
  content: "OFF";
  font-family: var(--font-display);
  font-size: var(--size-label-s);
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  color: var(--green-mint);
}

.switch-row input:checked + .switch {
  background: var(--yellow-jeepney);
  border-color: var(--yellow-jeepney);
}

.switch-row input:checked + .switch::after { content: "ON"; color: var(--ink-asphalt); }

.switch-row input:focus-visible + .switch { outline: 2px solid var(--yellow-jeepney); outline-offset: 2px; }

/* --- manual toll gates panel ------------------------------------------ */

.custom { display: flex; flex-direction: column; gap: var(--space-4); }

.leg {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding: var(--space-5) 0;
  border-top: var(--divider-dashed-onGreen);
}

.leg:first-child { border-top: 0; padding-top: 0; }

/* km marker post — the brand's numbered step */
.leg-count {
  grid-row: span 2;
  align-self: start;
  width: 30px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: var(--marker-border) solid var(--border-marker);
  border-radius: var(--radius-marker);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-sign-black);
  color: var(--green-expressway);
}

.gate-select {
  width: 100%;
  min-height: var(--space-20);
  padding: 11px 34px 11px 14px;
  font-family: var(--font-display);
  /* 16px+ keeps iOS Safari from zooming the page on focus */
  font-size: var(--size-body);
  font-weight: var(--fw-sign-bold);
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--surface-sign-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237FB596' stroke-width='2'/%3E%3C/svg%3E")
    no-repeat right 13px center;
  border: 0;
  border-radius: var(--radius-board);
  appearance: none;
  cursor: pointer;
}

.gate-select:disabled { opacity: 0.4; cursor: not-allowed; }

.leg-gates {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}

.leg-arrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-sign);
  color: var(--green-sage);
}

.leg-remove {
  grid-column: 3;
  grid-row: 1;
  width: var(--space-20);
  height: var(--space-20);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-sign-black);
  color: var(--green-mint);
  background: none;
  border: var(--sign-border-s) solid var(--green-sage);
  border-radius: var(--radius-badge);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

@media (hover: hover) {
  .leg-remove:hover { color: var(--white); border-color: var(--white); }
}

.add-leg {
  width: 100%;
  min-height: var(--space-20);
  padding: 13px var(--space-8);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  color: var(--green-mint);
  background: transparent;
  border: var(--sign-border-s) solid var(--green-sage);
  border-radius: var(--radius-cta);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

@media (hover: hover) {
  .add-leg:hover { color: var(--white); border-color: var(--white); }
}

/* ------------------------------------------------------------------ *
 * Results — concrete
 * ------------------------------------------------------------------ */

.results {
  padding: var(--space-10) var(--screen-pad) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.route-head { animation: fade var(--dur-base) var(--ease-standard) both; }

.route-head-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-tight);
  color: var(--text-heading);
}

.route-head-arrow { color: var(--green-expressway); }

.route-head-meta {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--text-faint);
}

/* --- option card ------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: fade var(--dur-base) var(--ease-standard) both;
}

/* Multi-option comparison: the IBANG RUTA pattern. Green boards nest
   inside the white card; the inset border on each board is kept. */
.card--compare {
  background: var(--surface-card);
  border: var(--sign-border-s) solid var(--border-card);
  border-radius: var(--radius-board);
  padding: var(--space-6);
  /* 88px hero would overflow a nested card; the card scale is 70px */
  --total-shrink: 0.8;
}

.card--compare.card--muted {
  border-color: var(--border-card-soft);
  opacity: 0.72;
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.card-tag {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps-wide);
  color: var(--text-faint);
}

.card-flag {
  background: var(--action-flag);
  color: var(--action-flag-text);
  border-radius: var(--radius-badge-s);
  padding: 6px var(--space-4);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-sign-black);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* a second yellow flag would fight the MAS MURA DITO one */
.card-flag--adjusted {
  background: var(--surface-sign);
  color: var(--text-onSign);
  font-size: var(--size-label-s);
}

/* --- hero total ------------------------------------------------------- */

.hero {
  background: var(--surface-sign);
  background-image: var(--texture-hatch);
  border-radius: var(--radius-board-l);
  padding: var(--space-10) var(--screen-pad) var(--space-12);
  box-shadow: var(--shadow-board-green);
}

.hero-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-onSign-muted);
}

.total {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-3);
  white-space: nowrap;
}

.total-symbol {
  font-family: var(--font-display);
  font-size: calc(var(--size-display-m) * var(--total-shrink, 1));
  font-weight: var(--fw-sign-bold);
  line-height: 1;
  padding-top: calc(12px * var(--total-shrink, 1));
  color: var(--total-symbol);
}

.total-amount {
  font-family: var(--font-display);
  /* --total-size is set per card in app.js from the digit count so a
     5+ digit or centavo total never wraps and never overflows. */
  font-size: calc(var(--total-size, var(--size-total-hero)) * var(--total-shrink, 1));
  font-weight: var(--fw-sign-black);
  line-height: var(--lh-total);
  letter-spacing: var(--track-display-tight);
  font-variant-numeric: var(--numeric-toll);
  color: var(--total-figure);
}

.total-sub {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--size-label-s);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  line-height: 1.4;
  color: var(--text-onSign-muted);
}

@media (max-width: 399px) {
  .card { --total-shrink: 0.8; }
}

/* --- comparison copy -------------------------------------------------- */

.card-save,
.card-diff {
  font-family: var(--font-body);
  font-size: var(--size-body-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.card-save { color: var(--text-body); font-weight: var(--fw-body-medium); }

/* --- segment stack ---------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack-label {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--text-faint);
}

.segments {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The board: green field, white inset border. The inset border IS the
   sign — never drop it, never gradient the field. */
.segment {
  background: var(--surface-sign);
  border-radius: var(--radius-board);
  padding: var(--space-2);
}

.segment-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border: var(--sign-border-s) solid var(--border-sign);
  border-radius: var(--radius-inset);
  padding: var(--space-5) var(--space-6);
}

.segment-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.segment-road {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-tight);
  line-height: 1;
  color: var(--text-onSign);
}

.segment-path {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign);
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-onSign-muted);
}

.segment-amount {
  font-family: var(--font-display);
  font-size: var(--size-total-row);
  font-weight: var(--fw-sign-black);
  line-height: 1;
  font-variant-numeric: var(--numeric-toll);
  white-space: nowrap;
  color: var(--text-onSign);
}

.segment-amount.is-unverified {
  text-decoration: underline dotted var(--yellow-jeepney);
  text-underline-offset: 4px;
}

.seg-foot {
  font-family: var(--font-body);
  font-size: var(--size-body-xs);
  color: var(--text-muted);
}

/* --- gate adjustment -------------------------------------------------- */

.adjust-btn {
  width: 100%;
  min-height: var(--space-20);
  padding: 13px var(--space-8);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  color: var(--text-heading);
  background: transparent;
  border: var(--sign-border-s) solid var(--border-card);
  border-radius: var(--radius-cta);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

@media (hover: hover) {
  .adjust-btn:hover { border-color: var(--green-expressway); color: var(--green-expressway); }
}

.adjust {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--concrete);
  border: var(--sign-border-s) solid var(--border-card);
  border-radius: var(--radius-board);
}

.adjust-row {
  display: grid;
  gap: var(--space-2);
}

.adjust-label {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.adjust-error {
  font-family: var(--font-body);
  font-size: var(--size-body-xs);
  line-height: 1.5;
  color: var(--text-heading);
}

.adjust-reset {
  justify-self: start;
  min-height: var(--space-20);
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--size-label-s);
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
  background: none;
  border: var(--sign-border-s) solid var(--border-card);
  border-radius: var(--radius-badge);
  cursor: pointer;
}

/* --- RFID pair — the two reserved colours, wallets only --------------- */

.wallets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.badge {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-radius: var(--radius-board);
  padding: 13px var(--space-6);
  min-width: 0;
}

.badge--easytrip { background: var(--wallet-easytrip); }
.badge--easytrip .badge-roads { color: var(--wallet-easytrip-sub); }
.badge--autosweep { background: var(--wallet-autosweep); }
.badge--autosweep .badge-roads { color: var(--wallet-autosweep-sub); }

.badge-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* the one circle the system allows */
.badge-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}

.badge-name {
  font-family: var(--font-display);
  font-size: var(--size-label-s);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps);
  color: var(--white);
}

.badge-amount {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: var(--fw-sign-black);
  line-height: 1;
  letter-spacing: var(--track-display-tight);
  font-variant-numeric: var(--numeric-toll);
  color: var(--white);
}

.badge-roads {
  font-family: var(--font-body);
  font-size: var(--size-label-s);
  font-weight: var(--fw-body);
  line-height: 1.35;
}

/* --- unverified note --------------------------------------------------- */

.unverified {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: var(--text-muted);
}

.unverified-flag {
  flex: none;
  background: var(--action-flag);
  color: var(--action-flag-text);
  border-radius: var(--radius-badge-s);
  padding: 4px var(--space-3);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Notes / empty states — Karla body copy on concrete
 * ------------------------------------------------------------------ */

.note {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: fade var(--dur-base) var(--ease-standard) both;
}

.note-flag {
  align-self: flex-start;
  background: var(--action-flag);
  color: var(--action-flag-text);
  border-radius: var(--radius-badge-s);
  padding: 5px var(--space-3);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
}

.note--hint .note-flag {
  background: transparent;
  color: var(--text-faint);
  padding: 0;
}

.note-title {
  font-family: var(--font-body);
  font-size: var(--size-body-l);
  font-weight: var(--fw-body-bold);
  line-height: 1.35;
  color: var(--text-heading);
}

.note-title + .note-body { margin-top: calc(var(--space-4) * -1 + var(--space-1)); }

.note-body {
  font-family: var(--font-body);
  font-size: var(--size-body-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- welcome sign board ------------------------------------------------ */

.welcome {
  background: var(--surface-sign);
  border-radius: var(--radius-board-s);
  padding: var(--sign-frame-s);
  box-shadow: var(--shadow-board-green);
}

.welcome-inner {
  border: var(--sign-border-s) solid var(--border-sign);
  border-radius: var(--radius-inset-s);
  padding: 11px 13px;
}

.welcome-label {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--text-onSign-muted);
}

.welcome-title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-sign-bold);
  line-height: 1.15;
  color: var(--text-onSign);
}

/* --- popular trips — small tappable sign boards ------------------------ */

.chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--divider-dashed-light);
}

.chips-label {
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--text-faint);
}

.chips-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.chip {
  display: block;
  width: 100%;
  min-height: var(--space-20);
  background: var(--surface-sign);
  border: 0;
  border-radius: var(--radius-board-s);
  padding: var(--space-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

@media (hover: hover) {
  .chip:hover { background: var(--green-deep); }
}

.chip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--sign-border-s) solid var(--border-sign);
  border-radius: var(--radius-inset-s);
  padding: 9px var(--space-4);
  min-height: 36px;
}

.chip-place {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-sign-bold);
  letter-spacing: 0.04em;
  color: var(--text-onSign);
}

.chip-arrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-sign);
  color: var(--green-sage);
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.footer {
  margin-top: var(--space-9);
  padding: var(--space-6) var(--screen-pad) var(--space-12);
  border-top: var(--divider-dashed-light);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

.footer-rates {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 5px var(--space-4);
  border: var(--sign-border-s) solid var(--border-card);
  border-radius: var(--radius-badge-s);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-black);
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}

.footer-mark {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--size-label-xs);
  font-weight: var(--fw-sign-bold);
  letter-spacing: var(--track-caps-wide);
  color: var(--text-faint);
}

.footer-tag {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-body-bold);
  color: var(--text-heading);
}

/* ------------------------------------------------------------------ *
 * Motion — fades and colour swaps only. No transform, no bounce.
 * ------------------------------------------------------------------ */

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}