/* Fare Drop components in the Ice style (reference for the mockups; adapt freely).
   Needs ice-theme.css first. CSP-safe: no inline styles needed anywhere. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ice-bg);color:var(--ice-text);font:var(--ice-fw-regular) var(--ice-fs-body)/var(--ice-lh-body) var(--ice-font-ui);letter-spacing:var(--ice-tracking)}
a{color:var(--ice-accent);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--ice-accent-strong)}
:focus-visible{outline:var(--ice-focus-width) solid var(--ice-focus-ring);outline-offset:var(--ice-focus-offset)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Buttons: one filled primary per view; everything else outline */
.ice-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ice-space-2);min-height:var(--ice-target);padding:0 var(--ice-space-5);border-radius:var(--ice-radius-control);border:var(--ice-control-border) solid var(--ice-border-strong);background:transparent;color:var(--ice-text);font:var(--ice-fw-semibold) var(--ice-fs-body)/1 var(--ice-font-ui);letter-spacing:var(--ice-tracking);text-decoration:none;cursor:pointer;transition:background-color var(--ice-dur-fast) var(--ice-ease-standard),border-color var(--ice-dur-fast) var(--ice-ease-standard)}
.ice-btn:hover{border-color:var(--ice-text-secondary)}
.ice-btn.primary{background:var(--ice-accent-fill);border-color:var(--ice-accent-fill);color:var(--ice-on-accent)}
.ice-btn.primary:hover{background:var(--ice-accent-strong);border-color:var(--ice-accent-strong)}
.ice-btn.primary:active{background:var(--ice-accent-strong)}

/* Icons: Lucide-style outline, 24 px, 2 px stroke, round joins */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--ice-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:20px;height:20px}

/* Card: opaque, hairline, flat */
.fare{background:var(--ice-surface);border:var(--ice-hairline) solid var(--ice-border-subtle);border-radius:var(--ice-radius-card);box-shadow:var(--ice-shadow-card);padding:var(--ice-space-5)}
.fare-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ice-space-3)}
.route{display:flex;align-items:center;gap:var(--ice-space-2);font-size:var(--ice-fs-title);line-height:var(--ice-lh-title);font-weight:var(--ice-fw-bold);letter-spacing:0}
.route .ic{color:var(--ice-text-muted)}
.trip{margin:var(--ice-space-1) 0 0;color:var(--ice-text-secondary);font-size:var(--ice-fs-small);line-height:var(--ice-lh-small)}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--ice-space-3);border:var(--ice-hairline) solid var(--ice-border-strong);border-radius:var(--ice-radius-pill);font-size:var(--ice-fs-caption);color:var(--ice-text-secondary);white-space:nowrap}

/* Status: icon + words, never colour alone */
.status{display:flex;align-items:center;gap:var(--ice-space-2);margin:var(--ice-space-4) 0 0;font-weight:var(--ice-fw-semibold)}
.status .ic{color:var(--ice-accent)}
.status.up .ic,.status.flat .ic{color:var(--ice-text-muted)}
.status.up,.status.flat{font-weight:var(--ice-fw-regular);color:var(--ice-text-secondary)}

/* The price */
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--ice-space-1) var(--ice-space-4);margin:var(--ice-space-2) 0 0}
.price-now{font-size:var(--ice-fs-display);line-height:var(--ice-lh-display);font-weight:var(--ice-fw-bold);letter-spacing:-0.01em;font-variant-numeric:tabular-nums lining-nums}
.price-was{color:var(--ice-text-muted);font-size:var(--ice-fs-lead);font-variant-numeric:tabular-nums lining-nums}
.price-was s{text-decoration-thickness:1.5px}
.save{margin:var(--ice-space-1) 0 0;color:var(--ice-accent);font-weight:var(--ice-fw-semibold);font-size:var(--ice-fs-lead);line-height:var(--ice-lh-lead)}
.save-sub{margin:0;color:var(--ice-text-secondary);font-size:var(--ice-fs-small)}

/* Sparkline: quiet history, the drop point marked */
.spark{margin:var(--ice-space-5) 0 0;padding:var(--ice-space-3) var(--ice-space-3) var(--ice-space-2);background:var(--ice-surface-raised);border-radius:var(--ice-radius-control)}
.spark svg{display:block;width:100%;height:64px;overflow:visible}
.spark .line{fill:none;stroke:var(--ice-text-muted);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .paid{stroke:var(--ice-border-strong);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.spark .drop{fill:var(--ice-accent);stroke:var(--ice-surface-raised);stroke-width:2}
.spark .drop-seg{fill:none;stroke:var(--ice-accent);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark-legend{display:flex;justify-content:space-between;gap:var(--ice-space-3);margin-top:var(--ice-space-2);font-size:var(--ice-fs-caption);line-height:var(--ice-lh-caption);color:var(--ice-text-secondary)}
.spark-legend b{color:var(--ice-text);font-weight:var(--ice-fw-semibold)}

.meta{margin:var(--ice-space-3) 0 0;font-size:var(--ice-fs-caption);color:var(--ice-text-muted)}
.actions{display:flex;flex-wrap:nowrap;gap:var(--ice-space-3);margin-top:var(--ice-space-5)}
.actions .ice-btn.primary{flex:1 1 auto}

/* Other trips: compact rows */
.list{margin-top:var(--ice-space-4);background:var(--ice-surface);border:var(--ice-hairline) solid var(--ice-border-subtle);border-radius:var(--ice-radius-card);box-shadow:var(--ice-shadow-card)}
.trip-row{display:flex;align-items:center;gap:var(--ice-space-3);min-height:64px;padding:var(--ice-space-3) var(--ice-space-4)}
.trip-row+.trip-row{border-top:var(--ice-hairline) solid var(--ice-border-subtle)}
.trip-row .what{flex:1;min-width:0}
.trip-row .what b{display:block;font-weight:var(--ice-fw-semibold)}
.trip-row .what span{font-size:var(--ice-fs-caption);color:var(--ice-text-secondary)}
.trip-row .p{font-weight:var(--ice-fw-semibold);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.trip-row .p small{display:block;font-weight:var(--ice-fw-regular);font-size:var(--ice-fs-caption);color:var(--ice-text-secondary)}
.trip-row .ic{color:var(--ice-text-muted)}
.trip-row.dropped .ic{color:var(--ice-accent)}

/* Mock page frame */
.page{max-width:520px;margin:0 auto;padding:var(--ice-space-5) var(--ice-space-4) var(--ice-space-6)}
.top{display:flex;align-items:center;gap:var(--ice-space-3);padding-bottom:var(--ice-space-4);margin-bottom:var(--ice-space-4);border-bottom:var(--ice-hairline) solid var(--ice-border-subtle)}
.top .mark{width:32px;height:32px;color:var(--ice-accent)}
.top .name{font-size:var(--ice-fs-lead);font-weight:var(--ice-fw-bold);letter-spacing:0}
.top .theme{margin-left:auto;font-size:var(--ice-fs-caption);color:var(--ice-text-muted)}
.h2{font-size:var(--ice-fs-small);font-weight:var(--ice-fw-semibold);color:var(--ice-text-secondary);margin:var(--ice-space-5) 0 0}
.foot{margin-top:var(--ice-space-5);font-size:var(--ice-fs-caption);color:var(--ice-text-muted);text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){.ice-btn{transition:none}}

/* App integration. This file loads last, so these beat overlapping mock rules.
   Form rows keep .row. Compact trip lists use .trip-row. */
body{max-width:640px;margin:0 auto}
.top{position:sticky;top:0;z-index:5;justify-content:space-between;gap:12px;margin:0;padding:14px 16px;background:var(--ice-bg);border-bottom:1px solid var(--ice-border-subtle);backdrop-filter:none;-webkit-backdrop-filter:none}
.spark{display:block}
.stamp{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--ice-radius-pill);font-size:15px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.stamp.pending{border:1.5px dashed var(--ice-border-strong);color:var(--ice-text-secondary)}
.stamp.done{border:1.5px solid var(--ice-success);color:var(--ice-success)}
.stamp .ic{width:16px;height:16px}
.why{margin-top:12px}
.why-math{margin:8px 0 0;padding-left:18px;color:var(--ice-text-secondary);font-size:16px;line-height:1.45}
.why-math b{color:var(--ice-text)}
.status.soft{font-weight:400;color:var(--ice-text-secondary)}
.status.soft .ic{color:var(--ice-text-muted)}
.card.upgrade,.fare.upgrade{background:var(--ice-surface-raised);box-shadow:inset 3px 0 0 var(--ice-plum)}
.upgrade-label{color:var(--ice-plum);font-weight:600;font-size:15px;line-height:1.4}
.theme-toggle{min-height:44px}

/* One button system. .btn aliases .ice-btn, then the spec rules win. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ice-space-2);border:var(--ice-control-border) solid var(--ice-border-strong);background:transparent;color:var(--ice-text);letter-spacing:var(--ice-tracking);text-decoration:none;cursor:pointer;appearance:none}
.btn[hidden]{display:none}
.btn.primary{background:var(--ice-accent-fill);border-color:var(--ice-accent-fill);color:var(--ice-on-accent)}
.btn.primary:hover{background:var(--ice-accent-strong);border-color:var(--ice-accent-strong)}
.btn,.ice-btn{min-height:48px;padding:0 20px;border-radius:var(--ice-radius-control);font:var(--ice-fw-semibold) var(--ice-fs-body)/1 var(--ice-font-ui)}
.btn.text{border:0;background:none;color:var(--ice-accent);padding:0 8px;min-height:44px}
.btn.text.danger,.btn.danger{color:var(--bad,#FF8F66);background:none}
.btn.small{min-height:44px;padding:0 12px}
.actions{display:flex;align-items:center;justify-content:space-between;gap:var(--ice-space-3);margin-top:var(--ice-space-5)}
.actions .btn.primary{flex:1 1 auto}          /* only one exists */
.actions .btn:not(.primary){flex:0 0 auto}    /* never stretch secondary buttons */
.actions .btn.text{margin-left:auto}
.icon-btn.add{width:44px;height:44px;border-radius:50%;background:var(--ice-accent-fill);color:var(--ice-on-accent);padding:0;border:0;display:inline-flex;align-items:center;justify-content:center}
.seg{display:flex;border:var(--ice-hairline) solid var(--ice-border-strong);border-radius:var(--ice-radius-control);padding:3px;gap:3px}
.seg button{flex:1;min-height:44px;border:0;border-radius:calc(var(--ice-radius-control) - 3px);background:none;font-weight:600;color:var(--ice-text-secondary);font:var(--ice-fw-semibold) var(--ice-fs-small)/1 var(--ice-font-ui);cursor:pointer}
.seg button[hidden]{display:none}
.seg button[aria-selected=true]{background:var(--ice-surface-raised);color:var(--ice-text)}
@media (prefers-reduced-motion:no-preference){dialog.sheet[open]{animation:sheet-in var(--ice-dur-base,250ms) var(--ice-ease-standard)}}
@media (prefers-reduced-motion:reduce){dialog.sheet[open]{animation:sheet-fade 150ms linear}}
@keyframes sheet-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}

nav.seg{margin:8px 16px 16px}
#viewHelp textarea,#viewHelp select,#viewAdmin textarea,#viewAdmin select{width:100%;box-sizing:border-box}
#viewHelp textarea,#viewAdmin textarea{min-height:7rem}
#viewHelp .help-actions{display:flex;flex-direction:column;gap:8px}
#viewHelp .help-actions .btn{min-height:44px;justify-content:flex-start}
.saved-total{margin:2px 0 0;color:var(--ice-text-secondary);font-size:var(--ice-fs-small);line-height:1.4;font-weight:500}
.card,.fare{padding:20px}
.fare .status{margin-top:8px}
.fare .route{font-size:var(--ice-fs-title)}
.fare .trip,.fare .status,.fare .meta,.fare .spark-legend,.fare .check,.fare details,.fare .hist,.fare .stamp{font-size:var(--ice-fs-small);line-height:1.4}
.sheet .col{align-items:flex-start}
.sheet .btn.text{justify-content:flex-start}
.appearance{border:0;margin:0 0 12px;padding:0}
.appearance legend{font-weight:600;color:var(--ice-text);padding:0}
.past-list{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.details-label{margin:12px 0 0;color:var(--ice-text-secondary);font-weight:600}
@media (max-width:720px){
  nav.seg{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:3px 8px env(safe-area-inset-bottom);background:var(--ice-bg)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
}
.wallet-block{margin-top:var(--ice-space-4)}
.wallet-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ice-space-2) var(--ice-space-3);flex-wrap:wrap}
.wallet-next{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ice-space-2);min-height:44px}
.wallet-opens{margin:0;color:var(--ice-text-secondary);font-size:var(--ice-fs-small);line-height:1.4}
.wallet-leave{margin:0 0 var(--ice-space-2);color:var(--ice-text-secondary);font-size:var(--ice-fs-small);line-height:1.4}
.wallet-leave a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.btn.text.wallet-quiet,.btn.text.get-app{color:var(--ice-text-secondary)}
.wallet-row .wallet-quiet{margin-left:auto}
.wallet-row .btn{min-height:44px}
.rewards-line{margin:var(--ice-space-1) 0 0;color:var(--ice-text-secondary);font-size:var(--ice-fs-small);line-height:1.4}
.get-app{min-height:44px}
.alerts .check-row{min-height:44px}
.ext{font-size:0.85em}
a.btn[hidden],button.btn[hidden]{display:none}

/* Dialogs are centered cards. inset:0 from the browser stylesheet stretches the
   hit target across the whole viewport, so a click on the backdrop never lands
   on the backdrop and the bottom Close button scrolls off a tall window. */
dialog{
  position:fixed;inset:auto;top:50%;left:50%;right:auto;bottom:auto;
  translate:-50% -50%;margin:0;height:fit-content;
  max-height:calc(100vh - 32px);overflow:auto
}
.dlg-bar{
  position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  margin:0 -18px 8px;padding:12px 8px 8px 18px;background:var(--ice-surface,var(--card))
}
.dlg-bar h2{margin:0;flex:1}
.dlg-x{width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--ice-text,var(--text));display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.scan-bar{height:4px;border-radius:999px;background:var(--ice-border-subtle,var(--line));overflow:hidden;margin:8px 0}
.scan-bar[hidden]{display:none}
.scan-bar i{display:block;height:100%;width:40%;background:var(--ice-accent,var(--primary));animation:scan-slide 1s ease-in-out infinite}
.scan-flights{margin:8px 0 0;padding-left:18px}
@keyframes scan-slide{from{transform:translateX(-120%)}to{transform:translateX(280%)}}
@media (prefers-reduced-motion:reduce){.scan-bar i{animation:none;width:100%;opacity:.7}}
/* Phones: the sheet sits on the bottom edge. One rule, after the general dialog rule, so it
   wins on every property the centred card sets (inset, translate, margin, height). */
@media (max-width:720px){
  dialog.sheet{position:fixed;inset:auto 0 0 0;top:auto;translate:none;width:100%;max-width:none;margin:0;border-radius:16px 16px 0 0;height:auto;max-height:85vh;padding-bottom:env(safe-area-inset-bottom)}
}

/* The agent's one answer per trip: an honest rating chip, one finding, promo codes behind a tap. */
.insight{margin:var(--ice-space-2,8px) 0 0}
.insight .rating{margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--ice-fs-small);color:var(--ice-text-secondary)}
.rating-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-weight:700;font-size:var(--ice-fs-small);color:var(--ice-text);background:var(--ice-surface-raised,rgba(127,127,127,.12))}
.rating-chip.great{background:rgba(22,163,74,.18)}
.rating-chip.good{background:rgba(37,99,235,.16)}
.rating-chip.fair{background:rgba(234,179,8,.18)}
.rating-chip.pricey{background:rgba(220,38,38,.16)}
.insight .finding{margin:0 0 4px;font-weight:600;line-height:1.4}
.insight .promos{margin:4px 0 0;font-size:var(--ice-fs-small)}
.insight .promos summary{cursor:pointer;color:var(--ice-text-secondary);min-height:32px;display:flex;align-items:center}
.insight .promos ul{margin:4px 0;padding-left:18px}
.insight .promos code{font-weight:700}
.promo-check{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.promo-check input{flex:1 1 120px;min-width:0;min-height:40px}

/* One answer per trip: everything else folds under Details. */
.card-more{margin-top:var(--ice-space-2,8px)}
.card-more>summary{cursor:pointer;color:var(--ice-text-secondary);font-size:var(--ice-fs-small);min-height:36px;display:flex;align-items:center;list-style:none}
.card-more>summary::-webkit-details-marker{display:none}
.card-more>summary::before{content:"\25B8";margin-right:6px;display:inline-block;transition:transform .15s}
.card-more[open]>summary::before{transform:rotate(90deg)}
.card-more .status{margin-top:4px}
.claim-steps{padding-left:20px;line-height:1.5}
#claimRequest{width:100%;font:inherit;font-size:var(--ice-fs-small);line-height:1.4}

/* Flight path wordmark. Ink and the dip follow Ice text and accent tokens. */
.wordmark,
.top h1.wordmark,
.top .wordmark,
.launch h1.wordmark,
p.brand-name.wordmark{
  display:flex;
  align-items:baseline;
  gap:0;
  margin:0;
  color:var(--ice-text,var(--text));
  font-family:Syne,system-ui,sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:-0.03em;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
}
.wordmark-gap{position:relative;width:26px;height:1em;margin:0 1px;flex:none}
.wordmark-gap svg{position:absolute;left:0;right:0;top:58%;width:26px;height:14px;overflow:visible}
.wordmark-gap path{fill:none;stroke:var(--ice-accent,var(--primary));stroke-width:2.2;stroke-linecap:round}
.wordmark-lg,
.launch h1.wordmark-lg{font-size:46px}
.wordmark-lg .wordmark-gap{width:42px}
.wordmark-lg .wordmark-gap svg{width:42px;height:22px}
.wordmark-lg .wordmark-gap path{stroke-width:2.6}