/* components.css — cards, controls, gauge, affiliate, ad slot, share, embed, FAQ, hub */

/* ---- Generic card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: var(--s-5); }

.muted { color: var(--muted); }
.caption { font-size: var(--t-caption); color: var(--muted); line-height: 1.5; }
.lead { color: var(--muted); font-size: 1.0625rem; margin-top: var(--s-2); max-width: 62ch; }

/* =========================================================
   HUB HOME
   ========================================================= */
.hero { margin-bottom: var(--s-6); }
.hero h1 { max-width: 18ch; }
.hero .lead { max-width: 52ch; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  color: var(--muted);
  font-size: var(--t-label);
}
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; }

/* Inline mini-tool teaser on the hub hero */
.teaser {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--s-5);
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.tool-card[disabled] { cursor: not-allowed; opacity: .55; }
.tool-card:hover[disabled] { transform: none; border-color: var(--line); }
.tool-card__top { display: flex; align-items: center; justify-content: space-between; }
.tool-card__icon { font-size: 1.7rem; }
.tool-card__title { font-size: var(--t-h3); font-weight: 600; }
.tool-card__sub { color: var(--muted); font-size: var(--t-label); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { counter-increment: step; padding-left: var(--s-7); position: relative; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-pill); font-weight: 600;
}

.section-head { margin: var(--s-7) 0 var(--s-2); }

/* =========================================================
   CONTROLS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--t-label); font-weight: 500; }
.field .hint { font-size: var(--t-caption); color: var(--muted); }

.controls-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}

select, input[type="text"], input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  min-height: 44px;
}
select:hover, input:hover { border-color: var(--muted); }

/* Stepper: − [field] + */
.stepper { display: flex; align-items: stretch; gap: 0; max-width: 200px; }
.stepper button {
  width: 44px; min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stepper button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.stepper button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.stepper input {
  width: 64px;
  text-align: center;
  border-radius: 0;
  border-left: 0; border-right: 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.slider-row { display: flex; align-items: center; gap: var(--s-4); }
input[type="range"] { flex: 1; accent-color: var(--accent); height: 44px; }
.slider-val { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 12px 18px; min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: none; }
.btn--sm { padding: 8px 12px; min-height: 38px; font-size: var(--t-label); }

/* =========================================================
   RESULT + GAUGE  (dimensions reserved up-front → zero CLS)
   ========================================================= */
.result {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: var(--s-5);
  min-height: 188px;            /* reserve space before any value */
}
.result--ok { border-color: var(--ok); background: var(--ok-soft); }
.result--warn { border-color: var(--warn); background: var(--warn-soft); }
.result--bad { border-color: var(--bad); background: var(--bad-soft); }
.result--empty { display: grid; place-items: center; text-align: center; color: var(--muted); }

.verdict { display: flex; align-items: center; gap: var(--s-3); }
.verdict__icon { font-size: 2rem; line-height: 1; }
.verdict__text h3 { font-size: 1.25rem; }
.verdict__text p { margin: 2px 0 0; color: var(--muted); font-size: var(--t-label); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--t-caption); font-weight: 600;
}
.chip--ok { background: var(--ok-soft); color: var(--ok); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--bad { background: var(--bad-soft); color: var(--bad); }

.gauge { margin-top: var(--s-4); }
.gauge__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gauge__num { font-variant-numeric: tabular-nums; font-weight: 600; }
.gauge__track {
  height: 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  overflow: hidden;
}
.gauge__fill {
  height: 100%; width: 0;
  border-radius: var(--radius-pill);
  background: var(--ok);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gauge__fill--ok { background: var(--ok); }
.gauge__fill--warn { background: var(--warn); }
.gauge__fill--bad { background: var(--bad); }

.result-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-label); }
.result-meta b { font-variant-numeric: tabular-nums; }

/* =========================================================
   AFFILIATE (native, contextual)  +  AD SLOT
   ========================================================= */
.affiliate {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-top: var(--s-4);
}
.affiliate__body { flex: 1; min-width: 0; }
.affiliate__body strong { display: block; }
.affiliate__body span { color: var(--muted); font-size: var(--t-label); }
.affiliate__cta { white-space: nowrap; }
.affiliate__label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.gear-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.gear-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s-3); background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.gear-item__emoji { font-size: 1.5rem; }
.gear-item__name { font-size: var(--t-label); font-weight: 600; }
.gear-item__why { font-size: var(--t-caption); color: var(--muted); }

.ad-slot {
  width: 336px; height: 280px;     /* fixed → zero layout shift */
  max-width: 100%;
  margin: var(--s-6) auto 0;
  display: grid; place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--t-caption);
}

/* =========================================================
   SHARE  +  EMBED  +  FAQ  +  CROSS-TOOL RAIL
   ========================================================= */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.share-row .label { font-size: var(--t-label); color: var(--muted); margin-right: var(--s-2); }

.embed-block { margin-top: var(--s-5); }
.embed-block summary {
  cursor: pointer; font-weight: 600; padding: var(--s-3) 0;
  list-style: none; display: flex; align-items: center; gap: var(--s-2);
}
.embed-block summary::-webkit-details-marker { display: none; }
.embed-block summary::before { content: "🔗"; }
.embed-code {
  width: 100%; min-height: 116px;
  margin-top: var(--s-2); padding: var(--s-3);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--t-caption); resize: vertical; white-space: pre;
}

.faq { margin-top: var(--s-6); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
}
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: var(--s-3) 0 0; color: var(--muted); }

.next-rail { margin-top: var(--s-6); }
.next-rail__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.next-rail .tool-card { padding: var(--s-4); }

.disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--t-caption);
  color: var(--ink);
}

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

.toast {
  position: fixed; bottom: var(--s-5); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: var(--t-label); box-shadow: var(--shadow-2); z-index: 60;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.toast.show { opacity: 1; }

/* =========================================================
   BAGGAGE — info cells
   ========================================================= */
.bag-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.bag-cell strong { font-size: 1.0625rem; }

/* =========================================================
   SEAT PICKER — layout strip + best/worst lists
   ========================================================= */
.seat-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s-4); padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.seat-cell {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px;
  font-size: var(--t-label); font-weight: 600; color: var(--muted);
}
.seat-cell--pick {
  background: var(--ok-soft); border-color: var(--ok); color: var(--ok);
}
.seat-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.seat-list li { position: relative; padding-left: var(--s-5); font-size: var(--t-label); line-height: 1.45; }
.seat-list li::before { position: absolute; left: 0; top: 0; }
.seat-list--ok li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.seat-list--bad li::before { content: "✕"; color: var(--bad); font-weight: 700; }
.seat-list--note li::before { content: "•"; color: var(--muted); }

/* =========================================================
   COST SPLITTER — editable rows + settle-up list
   ========================================================= */
.split-rows { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.split-row { display: flex; gap: var(--s-2); align-items: center; }
.split-row > input,
.split-row > select { margin: 0; }
.split-row--expense {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(120px, 1.6fr) minmax(72px, 96px) auto;
  gap: var(--s-2);
}
.split-row .btn--ghost { width: 44px; padding: 0; color: var(--muted); }
.split-row .btn--ghost:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }

.settle-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.settle-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.settle-from { font-weight: 600; }
.settle-arrow { color: var(--accent); font-weight: 700; }
.settle-to { font-weight: 600; }
.settle-amt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.bal-pos { color: var(--ok); }
.bal-neg { color: var(--bad); }

@media (max-width: 560px) {
  .split-row--expense { grid-template-columns: 1fr 1fr; }
  .split-row--expense > select { grid-column: 1 / 2; }
  .split-row--expense > input[data-exp-amt] { grid-column: 1 / 2; }
}

/* =========================================================
   STOPOVER ROUTE FINDER — carrier cards + inline-SVG map
   ========================================================= */
.stop-card { margin-top: var(--s-5); }
.stop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.stop-title { font-size: var(--t-h3); margin: 2px 0; }
.stop-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-label); font-weight: 600;
}
.stop-why { color: var(--muted); font-size: var(--t-label); line-height: 1.55; margin-top: var(--s-3); }
.stop-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.stop-cta .affiliate__cta { flex: 1; min-width: 200px; }

.route-map {
  display: block; width: 100%; height: auto;
  aspect-ratio: 520 / 280;          /* reserve space before paint → zero CLS */
  margin-top: var(--s-4);
}
.map-bg { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
/* Landmass backdrop — subtle, theme-derived so continents read without fighting the route. */
.map-land {
  fill: color-mix(in srgb, var(--ink) 7%, var(--surface-2));
  stroke: color-mix(in srgb, var(--ink) 16%, var(--surface-2));
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}
.map-leg { fill: none; stroke-width: 2; }
.map-leg--in { stroke: var(--muted); stroke-dasharray: 5 5; }
.map-leg--out { stroke: var(--accent); }
.map-dot { stroke: var(--surface); stroke-width: 2; }
.map-dot--origin { fill: var(--ink); }
.map-dot--hub { fill: var(--accent); stroke: var(--surface); }
.map-dot--dest { fill: var(--ok); }
.map-star { fill: var(--accent-ink); font-size: 11px; font-weight: 700; pointer-events: none; }
.map-label {
  fill: var(--ink); font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round;
}