/* Each page links the fonts in its <head>, so they load alongside this file rather
   than after it.

   Brand palette from the identity sheet: cream background, Ink for type, Voltage as
   the lead colour, the other vivids as accents. Tints are for status chips and
   panels so the vivids stay sharp. Headings use Inter Tight at a medium weight, the
   quiet neo-grotesque look of Stripe, Ramp and Revolut; the brand face, Bricolage
   Grotesque, is kept for the "money badger" wordmark. */
:root {
  --cream: #FBF4E6; --cream-2: #F5EBD7; --cream-3: #EEE2C9; --ink: #1C1B29; --ink-2: #5D5B6E; --ink-3: #76727A; --voltage: #3A47F0; --punch: #FF3B5C;
  --zest: #FFB800; --sprout: #00C48C; --grape: #8B3DFF;
  --card: #FFFFFF; --text: #2E2C3D; --muted: #6A6779; --faint: #9C98A6;
  --line: #EAE0CD; --line-strong: #D9CDB6;
  --voltage-hover: #2B37D9; --voltage-tint: #EEF0FE; --voltage-dark: #2530B8;
  --sprout-tint: #E3F7F0; --sprout-dark: #00785A;
  --zest-tint: #FFF4D9; --zest-dark: #8A5B00;
  --punch-tint: #FFEBEE; --punch-dark: #C21A3A;
  --grey-tint: #F0ECE4;
  --radius: 20px; --radius-sm: 12px;
  /* Cards are flat. Only things that float (dialogs, toasts, product shots) get a shadow, tinted with Ink. */
  --shadow: none;
  --shadow-sm: 0 1px 2px rgba(28, 27, 41, .06), 0 8px 20px -8px rgba(28, 27, 41, .16);
  --shadow-lg: 0 1px 2px rgba(28, 27, 41, .06), 0 12px 24px -12px rgba(28, 27, 41, .14), 0 40px 80px -32px rgba(28, 27, 41, .24);
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --wordmark: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cream); color: var(--text);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
a { color: var(--voltage); text-underline-offset: 2px; }
a:hover { color: var(--voltage-hover); }
/* the iOS preview keeps its own native styling */
b:not(.ios *), strong:not(.ios *) { font-weight: 600; color: var(--ink); }
.mono { font-family: var(--mono); font-size: .92em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 20px/1 var(--wordmark); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand.plain { font: 600 19px/1 var(--display); } /* the wordmark font only has the letters of "money badger" */
.brand img { width: 28px; height: 28px; }
.beta { font: 600 11px/1 var(--sans); color: var(--voltage-dark); background: var(--voltage-tint); padding: 4px 8px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* buttons: primary is Voltage, the default is a quiet outlined button, ghost is text only */
.btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  font: 500 15px/1.2 var(--sans); padding: 11px 20px; border-radius: 999px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { background: #FFFCF6; border-color: #C9BEA8; color: var(--ink); }
.btn.primary { background: var(--voltage); border-color: var(--voltage); color: #fff; }
.btn:active:not([disabled]) { transform: scale(.98); }
.btn.primary:hover { background: var(--voltage-hover); border-color: var(--voltage-hover); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn.ghost:hover { background: rgba(28, 27, 41, .05); color: var(--ink); }
.btn.danger { background: transparent; color: var(--punch-dark); border-color: #F5C2CC; }
.btn.danger:hover { background: var(--punch-tint); color: var(--punch-dark); }
.btn.small { padding: 7px 14px; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--voltage); outline-offset: 2px; }
@media (pointer: coarse) { .btn { min-height: 44px; } .btn.small { min-height: 38px; } }

/* cards & layout */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.card + .card { margin-top: 20px; }
.grid > .card + .card { margin-top: 0; }
.grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .card { padding: 22px 20px; } }
h1, h2, h3 { color: var(--ink); line-height: 1.1; margin: 0 0 12px; }
h1:not(.ios *), h2:not(.ios *) { text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; }
h1:not(.ios *), h2:not(.ios *) { font-weight: 500; letter-spacing: -.02em; }
h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
h1:not(.ios *) { letter-spacing: -.03em; }
h2 { font-size: 24px; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 600 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--voltage); flex: none; }
details > summary { cursor: pointer; }
article.card h2 { font-size: 20px; margin-top: 32px; }
article.card h2 + p { margin-top: 0; }
details > summary { padding: 4px 0; }
details > summary::marker { color: var(--muted); }

/* forms */
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
label:not(.ios *) { font-weight: 500; color: var(--ink); }
.field { margin-bottom: 16px; }
.fields { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
.field > .fields.two { grid-template-columns: 1fr 1fr; } /* hours and minutes stay side by side */
@media (min-width: 560px) { .fields.two { grid-template-columns: 1fr 1fr; } .fields.three { grid-template-columns: 1fr 1fr 1fr; } }
input, select, textarea {
  width: 100%; font: 16px/1.4 var(--sans); color: var(--ink);
  padding: 11px 14px; border: 1px solid #9A907E; border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #767280; }
input:not(.ios *):hover, select:not(.ios *):hover, textarea:hover { border-color: #7D7464; }
input:not(.ios *):focus, select:not(.ios *):focus, textarea:focus { outline: 2px solid transparent; outline-offset: 1px; border-color: var(--voltage); box-shadow: 0 0 0 3px rgba(58, 71, 240, .16); }
input.code { text-transform: uppercase; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
input.code::placeholder { letter-spacing: .04em; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text); }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--voltage); }
.check input:focus-visible { outline: 2px solid var(--voltage); outline-offset: 2px; box-shadow: none; }

/* segmented control */
.seg { display: inline-flex; gap: 2px; flex-wrap: wrap; padding: 3px; background: var(--grey-tint); border: 1px solid var(--line); border-radius: 12px; }
.seg label { margin: 0; font-weight: 500; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; padding: 7px 16px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted); transition: background-color .15s, color .15s; }
.seg span:hover { color: var(--ink); }
.seg input:checked + span { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(28, 27, 41, .10), 0 0 0 1px rgba(28, 27, 41, .04); }
.seg input:focus-visible + span { outline: 2px solid var(--voltage); outline-offset: 1px; }

/* results */
.result { border-radius: 14px; padding: 20px 22px; border: 1px solid; margin-top: 18px; }
.result h3 { margin-bottom: 8px; }
.result.eligible { background: var(--sprout-tint); border-color: #BDEBDB; }
.result.eligible h3 { color: var(--sprout-dark); }
.result.unlikely { background: var(--zest-tint); border-color: #F6DFA3; }
.result.unlikely h3 { color: var(--zest-dark); }
.result.not_eligible { background: var(--punch-tint); border-color: #F7CBD3; }
.result.not_eligible h3 { color: var(--punch-dark); }
.result.needs_info { background: var(--voltage-tint); border-color: #D3D7FC; }
.result.needs_info h3 { color: var(--voltage-dark); }
.amount { font: 500 44px/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.result ul { margin: 10px 0 0; padding-left: 18px; color: var(--text); }
.result li + li { margin-top: 4px; }

/* status chips */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--sans); padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--grey-tint); color: var(--muted); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.new, .pill.needs_info { background: var(--voltage-tint); color: var(--voltage-dark); }
.pill.submitted { background: var(--voltage-tint); color: var(--voltage-dark); }
.pill.airline_replied, .pill.escalated, .pill.unlikely { background: var(--zest-tint); color: var(--zest-dark); }
.pill.eligible { background: var(--sprout-tint); color: var(--sprout-dark); }
.pill.paid { background: var(--sprout-dark); color: #fff; }
.pill.not_eligible { background: var(--punch-tint); color: var(--punch-dark); }
.pill.rejected, .pill.withdrawn { background: var(--grey-tint); color: var(--muted); }

/* lists */
.flight { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.flight .airline-logo { width: 40px; height: 40px; border-radius: 10px; flex: none; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.flight:first-child { border-top: 0; }
.flight .route { font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.flight .meta { color: var(--muted); font-size: 14px; }
.timeline { list-style: none; padding: 0; margin: 18px 0 0 5px; border-left: 2px solid var(--line); }
.timeline li { padding: 0 0 16px 20px; position: relative; color: var(--text); }
.timeline li:last-child { padding-bottom: 4px; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--voltage); box-shadow: 0 0 0 3px #fff; }
.timeline time { font-size: 12px; color: var(--muted); display: block; font-variant-numeric: tabular-nums; margin-bottom: 1px; }

/* misc */
.banner { padding: 14px 18px; border-radius: 12px; border: 1px solid #F6DFA3; background: var(--zest-tint); color: #5C3D00; margin-bottom: 20px; font-weight: 500; }
.banner a { color: inherit; font-weight: 600; }
.banner.info { background: var(--voltage-tint); border-color: #D3D7FC; color: #232C9E; }
.banner.ok { background: var(--sprout-tint); border-color: #BDEBDB; color: #005C45; }
.banner b { color: inherit; }
.error { color: var(--punch-dark); font-weight: 500; font-size: 14px; margin-top: 8px; }
.error:empty { margin: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 500; font-size: 15px; z-index: 50; max-width: calc(100% - 32px); box-shadow: var(--shadow-lg); }
pre.letter { white-space: pre-wrap; font: 14px/1.65 var(--sans); background: #FFFDF8; border: 1px solid var(--line); border-radius: 12px; padding: 16px; max-height: 420px; overflow: auto; color: var(--text); }
dialog { border: 0; border-radius: 20px; padding: 28px; max-width: 560px; width: calc(100% - 32px); box-shadow: var(--shadow-lg); background: var(--card); color: var(--text); }
dialog::backdrop { background: rgba(28, 27, 41, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@media (max-width: 560px) { dialog { padding: 22px 20px; } }
footer { padding: 32px 0 48px; margin-top: 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom-color: var(--line-strong); }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #FFFBF3; }
tr.clickable:focus-visible { outline: 2px solid var(--voltage); outline-offset: -2px; }
td.mono { font-size: 13px; }
.stat { font: 500 28px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }

/* stats */
.stats { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.tile span { display: flex; align-items: center; gap: 8px; font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.tile b { display: block; font: 500 34px/1.15 var(--display); letter-spacing: -.025em; margin-top: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile.paid.has-paid b { color: var(--sprout-dark); }
.tile.paid span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sprout); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; gap: 12px; } .stats .tile.paid { grid-column: 1 / -1; } .tile { padding: 14px 16px; } .tile b { font-size: 24px; } }

/* demo mode */
label.switch { display: inline-flex; align-items: center; gap: 8px; margin: 0 6px; font-weight: 500; font-size: 14px; cursor: pointer; color: var(--text); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 36px; height: 20px; border-radius: 999px; background: #8E8879; position: relative; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(28, 27, 41, .25); transition: transform .15s; }
.switch input:checked + span { background: var(--voltage); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--voltage); outline-offset: 2px; }
html:has(.demobar) { scroll-padding-top: 64px; }
.demobar { background: var(--voltage); color: #fff; padding: 8px 0; font-size: 14px; position: sticky; top: 0; z-index: 40; }
.demobar .row { gap: 10px; }
.demotag { font: 600 11px/1 var(--sans); background: rgba(255, 255, 255, .14); color: #fff; padding: 5px 9px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; }
.demobar .btn { background: #fff; border-color: #fff; color: var(--voltage-dark); padding: 6px 14px; }
.demobar .btn:hover { background: var(--voltage-tint); border-color: var(--voltage-tint); }
.demobar .btn:focus-visible { outline-color: #fff; }
@media (max-width: 560px) { .demotext { display: none; } }
.top > .nav { margin-left: auto; }
@media (min-width: 561px) and (max-width: 900px) { .flight > .row { flex: 1 0 100%; justify-content: flex-end; } }
@media (max-width: 560px) {
  .flight { column-gap: 12px; row-gap: 10px; }
  .flight > .airline-logo + div { min-width: calc(100% - 52px) !important; } /* beats the inline min-width */
  .flight > .airline-logo ~ .pill, .flight > .airline-logo ~ .row { margin-left: 52px; }
  .flight .row { gap: 8px; }
  .flight .row > .btn.ghost:first-child { margin-left: -14px; }
  .row > h2 + .spacer + .btn.ghost.small { margin-left: -14px; } /* card header actions that wrap under the title */
}
@media (max-width: 480px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .nav { width: 100%; }
  .top > #logout { order: 1; }
  .top > .nav { order: 2; }
  .top .nav .switch { margin: 0 2px; }
  .top .btn.ghost.small { padding-inline: 10px; }
  #accountBtn { margin-left: auto; }
  .flight .row { flex: 1 1 100%; }
  .flight > .airline-logo ~ .row { flex-basis: calc(100% - 52px); }
}

.viewseg span { padding: 5px 12px; font-size: 13px; }