/* Full-bleed bars — the top row, the nav board, the footer — keep their
     background edge to edge but must not keep their *content* there: on a wide
     monitor the logo sat 32px from the glass while the page below it started
     664px in, and the bar read as belonging to a different site. This padding
     lands their content on the same line as .wrapper's, and collapses to a
     plain 32px once the viewport is narrower than the shell. Changing the
     shell width means changing it here and in .wrapper, and nowhere else. */
  :root { --shell-pad: max(32px, calc((100% - 1280px) / 2 + 24px)); }

  /* ── Dark mode (default) ── */
  :root {
    --red: #FF4438;
    --red-dark: #D6001C;
    --red-glow: rgba(255,68,56,0.15);
    --brand-tld:   #9A918F;
    --raised:      #1A1A1A;
    --cal-weekend: #201D1C;
    --success:     #2E8B57;
    /* Cabin identity — fixed across themes so a fare reads the same everywhere */
    --cab-economy: #E8E2DA;
    --cab-premium: #4A9EFF;
    --cab-upper:   #FF4438;
    --cab-saver:   #C9A84C;
    /* Origin identity, used by the route map and origin pickers */
    --orig-lhr:    #FF4438;
    --orig-man:    #4A9EFF;
    --orig-edi:    #FFA03A;
    --gold: #C9A84C;
    --bg:          #0D0D0D;
    --mid:         #1A1A1A;
    --card:        #161616;
    --border:      rgba(255,255,255,0.07);
    --text:        #E8E2DA;
    --cream:       #F5F0EA;
    --muted:       #6B6560;
    --bg-grad-1:   rgba(214,0,28,0.12);
    --bg-grad-2:   rgba(201,168,76,0.04);
    --input-bg:    rgba(255,255,255,0.04);
    --input-focus: rgba(214,0,28,0.05);
    --hover-bg:    rgba(255,255,255,0.04);
    --stat-bg:     #161616;
    /* Top bar, two-tier board */
    --row-bg:        #161616;
    --band-bg:       #0D0D0D;
    --band-top:      rgba(255,255,255,0.06);
    --band-bottom:   rgba(255,255,255,0.07);
    --band-divider:  rgba(255,255,255,0.05);
    --band-hover:    rgba(255,255,255,0.03);
    --band-inset:    none;
  }
  /* ── Light mode ── */
  html.light {
    --red:         #D6001C;
    --red-dark:    #A8001A;
    --red-glow:    rgba(214,0,28,0.10);
    --brand-tld:   #8A8482;
    --raised:      #E8E3DC;
    --cal-weekend: #F3EEE7;
    --success:     #2E8B57;
    --cab-economy: #6B6560;
    --bg:          #F4F1ED;
    --mid:         #E8E3DC;
    --card:        #FFFFFF;
    --border:      rgba(0,0,0,0.09);
    --text:        #1A1714;
    --cream:       #1A1714;
    --muted:       #8A837C;
    --bg-grad-1:   rgba(214,0,28,0.06);
    --bg-grad-2:   rgba(201,168,76,0.05);
    --input-bg:    rgba(0,0,0,0.04);
    --input-focus: rgba(214,0,28,0.04);
    --hover-bg:    rgba(0,0,0,0.03);
    --stat-bg:     #FFFFFF;
    /* Top bar, two-tier board */
    --row-bg:        #FFFFFF;
    --band-bg:       #F7F4F0;
    --band-top:      rgba(0,0,0,0.10);
    --band-bottom:   rgba(0,0,0,0.09);
    --band-divider:  rgba(0,0,0,0.06);
    --band-hover:    rgba(0,0,0,0.03);
    --band-inset:    inset 0 3px 6px -3px rgba(0,0,0,0.08);

  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.25s, color 0.25s;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 50% -20%, var(--bg-grad-1) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 90% 80%, var(--bg-grad-2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    transition: background 0.25s;
  }

  .wrapper { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

  header {
    padding: 28px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  /* ── PointsRadar lockup ── */
  .logo { display: flex; align-items: center; gap: 10px; }
  .brand-mark { width: 52px; height: 52px; display: block; flex-shrink: 0; }
  .brand-lockup { display: flex; flex-direction: column; line-height: 1.05; }
  .brand-name { font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; color: var(--cream); }
  .brand-accent { color: var(--red); }
  .brand-tld { font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.28em; color: var(--brand-tld); margin-top: 4px; }
  .brand-mark.light-only { display: none; }
  html.light .brand-mark.dark-only { display: none; }
  html.light .brand-mark.light-only { display: block; }

  .header-right { display: flex; align-items: center; gap: 10px; }

  .status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--muted);
    transition: background 0.25s;
  }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background 0.3s; }
  .status-dot.live { background: #3DBA78; box-shadow: 0 0 6px #3DBA78; }

  .theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 14px 6px 8px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--muted);
    transition: all 0.2s;
    user-select: none;
  }
  .theme-toggle:hover { border-color: var(--red); color: var(--text); }
  .toggle-track { width: 30px; height: 16px; background: var(--border); border-radius: 100px; position: relative; transition: background 0.25s; flex-shrink: 0; }
  .toggle-track.on { background: var(--red); }
  .toggle-thumb { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
  .toggle-track.on .toggle-thumb { transform: translateX(14px); }

  /* :not([class]) deliberately — every nav here carries a class and sets its
     own layout, and this rule's padding and border have leaked into three of
     them. It stays only for a bare <nav>, which nothing currently is. */
  nav:not([class]) { display: flex; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--border); }
  .nav-btn { background: none; border: none; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
  .nav-btn:hover { color: var(--text); background: var(--hover-bg); }
  .nav-btn.active { color: var(--red); background: var(--red-glow); }

  .panel { display: none; padding: 32px 0; }
  .panel.active { display: block; }

  .section-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.08em; color: var(--cream); margin-bottom: 6px; }
  .section-sub { font-size: 0.8rem; color: var(--muted); font-weight: 300; margin-bottom: 28px; }

  .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: background 0.25s, border-color 0.25s; }
  .card + .card { margin-top: 16px; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

  .field { display: flex; flex-direction: column; gap: 7px; }
  label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }

  input, select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
  }
  input:focus, select:focus { border-color: var(--red); background: var(--input-focus); }
  input::placeholder { color: var(--muted); }
  select option { background: var(--card); color: var(--text); }
  select optgroup { background: var(--mid); color: var(--muted); font-size: 0.72rem; font-style: normal; letter-spacing: 0.08em; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; border: none; border-radius: 8px; padding: 11px 22px; cursor: pointer; transition: all 0.2s; }
  .btn-primary { background: var(--red); color: #fff; }
  .btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(214,0,28,0.3); }
  .btn-secondary { background: var(--hover-bg); color: var(--text); border: 1px solid var(--border); }
  .btn-secondary:hover { background: var(--mid); }
  .btn-ghost { background: none; color: var(--muted); padding: 6px 10px; font-size: 0.75rem; }
  .btn-ghost:hover { color: var(--red); }

  .stat-card { background: var(--stat-bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; transition: background 0.25s; }
  .stat-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .stat-value { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; color: var(--cream); line-height: 1; }
  .stat-value.red { color: var(--red); }

  .flight-combo {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
    cursor: pointer;
    margin-bottom: 10px;
    position: relative;
  }
  .flight-combo:hover { border-color: rgba(214,0,28,0.3); transform: translateY(-1px); }
  .flight-combo.best-value { border-color: var(--gold); }
  .flight-combo.best-value::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -10px; left: 20px;
    background: var(--gold);
    color: #0D0D0D;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 3px 10px;
    border-radius: 100px;
  }
  .leg-block { }
  .leg-route { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em; color: var(--cream); margin-bottom: 3px; }
  .leg-date { font-size: 0.78rem; color: var(--muted); font-weight: 300; }
  .leg-time { font-size: 0.82rem; color: var(--text); margin-top: 2px; }
  .trip-days-badge { background: var(--hover-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; text-align: center; }
  .trip-days-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--text); line-height: 1; }
  .trip-days-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; }
  .price-block { text-align: right; }
  .points-value { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--red); letter-spacing: 0.05em; line-height: 1; }
  .points-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; }

  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-header { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 8px 0; }
  .cal-day {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    background: var(--hover-bg);
    padding: 8px 6px;
    min-height: 100px;
  }
  .cal-day:hover { border-color: var(--border); background: var(--mid); }
  .cal-day.has-data { background: rgba(214,0,28,0.08); border-color: rgba(214,0,28,0.2); }
  .cal-day.selected { border-color: var(--red); background: var(--red-glow); }
  .cal-day.empty { pointer-events: none; opacity: 0; }
  .cal-day-num { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }

  /* ── Cabin colours: Grey=Economy, Blue=Premium, Red=Upper Class ── */
  .cab-economy { color: #9E9E9E; }
  .cab-premium { color: #5B9BD5; }
  .cab-upper   { color: var(--red); }
  .cal-day-cabin { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 0.82rem; font-weight: 700; line-height: 1.25; width: 100%; padding: 2px 4px; border-radius: 4px; }
  .cal-cabin-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; line-height: 1; }
  .dot-economy { background: #9E9E9E; }
  .dot-premium { background: #5B9BD5; }
  .dot-upper   { background: var(--red); }
  .cal-no-seats { font-size: 0.62rem; font-weight: 500; color: var(--muted); text-align: center; line-height: 1.3; margin-top: 2px; opacity: 0.8; }

  .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .cal-month-picker { position: relative; display: inline-flex; align-items: center; }
  .cal-month {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.1em; color: var(--cream);
    cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px;
  }
  .cal-month:hover { color: var(--red); }
  .cal-month-caret { font-size: 0.65rem; font-family: 'DM Sans', sans-serif; color: var(--muted); transition: transform 0.2s; }
  .cal-month-picker.open .cal-month-caret { transform: rotate(180deg); }
  .cal-month-dropdown {
    display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 6px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    max-height: 320px; overflow-y: auto; min-width: 180px;
  }
  .cal-month-picker.open .cal-month-dropdown { display: block; }
  .cal-month-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-radius: 7px; font-size: 0.82rem;
    color: var(--text); cursor: pointer; gap: 10px;
  }
  .cal-month-option:hover { background: var(--hover-bg); }
  .cal-month-option.active { color: var(--red); font-weight: 600; }
  .cal-month-option .has-data-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0;
  }
  .cal-legend { display: flex; gap: 20px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
  .cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--muted); }
  .legend-dot { width: 9px; height: 9px; border-radius: 50%; }

  .alert-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; }
  .alert-card.triggered { border-color: rgba(61,186,120,0.4); background: rgba(61,186,120,0.05); }
  .alert-route { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em; color: var(--cream); }
  .alert-max { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
  .alert-badge { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; background: var(--hover-bg); color: var(--muted); }
  .alert-badge.triggered { background: rgba(61,186,120,0.15); color: #3DBA78; }

  .search-chip { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }

  /* ── Holiday alerts ── */
  .alert-subhead { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 0.08em; color: var(--cream); margin-bottom: 4px; }
  .hol-group-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #DA0530; margin: 20px 0 10px; }
  .hol-group-label:first-of-type { margin-top: 0; }
  .hol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }

  /* Destination picker */
  .hol-dest-box { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--input-bg); max-height: 260px; overflow-y: auto; }
  .hol-dest-region { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 12px 0 7px; }
  .hol-dest-region:first-child { margin-top: 0; }
  .hol-dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px 12px; }
  .hol-dest-item { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.82rem; color: var(--text); user-select: none; padding: 3px 0; }
  .hol-dest-item input { display: none; }
  .hol-dest-tick { width: 15px; height: 15px; border-radius: 4px; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .hol-dest-tick::after { content: '✓'; font-size: 0.65rem; font-weight: 900; color: #fff; opacity: 0; }
  .hol-dest-item input:checked + .hol-dest-tick { background: var(--red); border-color: var(--red); }
  .hol-dest-item input:checked + .hol-dest-tick::after { opacity: 1; }
  .hol-dest-item:hover .hol-dest-tick { border-color: var(--red); }

  /* Cabin + points rows */
  .hol-cabin-row { display: grid; grid-template-columns: 165px 1fr 1fr; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .hol-cabin-row:last-child { border-bottom: none; }
  .hol-cabin-row.off .field { opacity: 0.4; }
  .hol-cabin-row .cal-cb-label { padding-bottom: 11px; }
  @media (max-width: 600px) { .hol-cabin-row { grid-template-columns: 1fr; align-items: stretch; } .hol-cabin-row .cal-cb-label { padding-bottom: 0; } }

  /* Date + flex row */
  .hol-leg-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  @media (max-width: 600px) { .hol-leg-row { grid-template-columns: 1fr 1fr; } .hol-leg-row .field:first-child { grid-column: 1 / -1; } }

  /* Holiday alert list card */
  .hol-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; margin-bottom: 12px; }
  .hol-card.triggered { border-color: rgba(61,186,120,0.4); background: rgba(61,186,120,0.05); }
  .hol-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .hol-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 0.08em; color: var(--cream); line-height: 1.1; }
  .hol-card-route { font-size: 0.85rem; color: var(--text); margin-top: 4px; }
  .hol-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--hover-bg); border: 1px solid var(--border); border-radius: 100px; padding: 3px 11px; font-size: 0.72rem; color: var(--muted); }
  .hol-chip.found { background: rgba(61,186,120,0.12); border-color: rgba(61,186,120,0.3); color: #3DBA78; }
  .hol-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
  .hol-flex-note { color: var(--gold); font-weight: 600; }

  .scrape-run { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s; }
  .scrape-run.success { border-left: 3px solid #3DBA78; }
  .scrape-run.partial { border-left: 3px solid #C9A84C; }
  .scrape-run.error   { border-left: 3px solid var(--red); }
  .scrape-run.cancelled { border-left: 3px solid #888; }
  .scrape-run-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; user-select: none; }
  .scrape-run-header:hover { background: var(--hover-bg); }
  .scrape-run-left { display: flex; align-items: center; gap: 14px; }
  .scrape-status-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
  .scrape-status-icon.success { background: rgba(61,186,120,0.15); }
  .scrape-status-icon.partial { background: rgba(201,168,76,0.15); }
  .scrape-status-icon.error   { background: rgba(214,0,28,0.12); }
  .scrape-status-icon.cancelled { background: rgba(136,136,136,0.15); }
  .scrape-run-title { font-weight: 500; font-size: 0.88rem; color: var(--text); }
  .scrape-run-meta  { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
  .scrape-run-right { display: flex; align-items: center; gap: 16px; }
  .scrape-flights-badge { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--cream); letter-spacing: 0.05em; line-height: 1; }
  .scrape-flights-label { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; text-align: right; }
  .scrape-chevron { color: var(--muted); font-size: 0.7rem; transition: transform 0.2s; }
  .scrape-run.open .scrape-chevron { transform: rotate(180deg); }
  .scrape-run-detail { display: none; border-top: 1px solid var(--border); padding: 14px 20px; gap: 8px; }
  .scrape-run.open .scrape-run-detail { display: flex; flex-direction: column; }
  .scrape-route-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 8px; background: var(--hover-bg); }
  .scrape-route-name { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.1em; color: var(--cream); }
  .scrape-route-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
  .scrape-route-status { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
  .scrape-route-status.success { background: rgba(61,186,120,0.12); color: #3DBA78; }
  .scrape-route-status.error   { background: rgba(214,0,28,0.12); color: #ff6b6b; }
  .scrape-error-msg { font-size: 0.72rem; color: #ff6b6b; margin-top: 4px; font-family: monospace; }
  .trigger-badge { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; background: var(--hover-bg); color: var(--muted); }
  .trigger-badge.manual { background: rgba(214,0,28,0.1); color: var(--red); }

  @keyframes scrape-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(214,0,28,0.5); } 50% { opacity:0.85; box-shadow:0 0 0 5px rgba(214,0,28,0); } }
  .scrape-live-dot { width:10px; height:10px; border-radius:50%; background:var(--red); flex-shrink:0; animation:scrape-pulse 1.5s ease-in-out infinite; }
  .scrape-idle-dot { width:10px; height:10px; border-radius:50%; background:var(--muted); flex-shrink:0; }
  .scrape-progress-track { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:10px; }
  .scrape-progress-fill  { height:100%; background:var(--red); border-radius:2px; transition:width 0.6s ease; }

  .filter-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; transition: background 0.25s; }
  .filter-bar .field { min-width: 0; }

  /* ── User pill ── */
  .user-pill {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--border);
    padding: 6px 12px 6px 8px; border-radius: 100px;
    font-size: 0.75rem; color: var(--text); transition: background 0.25s;
  }
  .user-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--red); color: #fff;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .user-name { font-weight: 500; white-space: nowrap; }
  .user-role-badge {
    font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; background: rgba(214,0,28,0.12);
    color: var(--red); padding: 2px 7px; border-radius: 100px;
  }
  /* ── User dropdown ── */
  .user-pill { cursor: pointer; position: relative; user-select: none; }
  .user-pill:hover { background: var(--hover-bg); }
  .user-dropdown-caret {
    font-size: 0.6rem; color: var(--muted); margin-left: 2px; transition: transform 0.2s;
  }
  .user-pill.open .user-dropdown-caret { transform: rotate(180deg); }
  .user-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 160px; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px; z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  .user-pill.open .user-dropdown-menu { display: block; }
  .user-dropdown-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: 7px; font-size: 0.8rem;
    color: var(--text); cursor: pointer; background: none; border: none;
    width: 100%; text-align: left; font-family: 'DM Sans', sans-serif;
    transition: background 0.15s, color 0.15s;
  }
  .user-dropdown-item:hover { background: var(--hover-bg); }
  .user-dropdown-item.danger { color: var(--red); }
  .user-dropdown-item.danger:hover { background: rgba(214,0,28,0.08); }
  .user-dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }

  .btn-logout {
    background: none; border: none; color: var(--muted);
    font-family: 'DM Sans', sans-serif; font-size: 0.72rem;
    font-weight: 500; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; transition: color 0.2s; margin-left: 2px;
  }
  .btn-logout:hover { color: var(--red); }

  /* ── Search form — grouped rows layout ── */
  .search-form { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; transition: background 0.25s; }
  .search-form-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 14px 0; }
  .search-form-group:not(:last-child) { border-bottom: 1px solid var(--border); }
  .search-form-group-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #DA0530; margin-bottom: 2px; }
  .search-form-btn { width: 100%; margin-top: 16px; padding: 13px; font-size: 0.9rem; letter-spacing: 0.12em; }

  .shimmer { background: linear-gradient(90deg, var(--card) 25%, var(--mid) 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 10px; height: 72px; margin-bottom: 10px; }
  @keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

  .flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .text-muted { color: var(--muted); font-size: 0.82rem; }
  .text-red { color: var(--red); }
  .mt-16 { margin-top: 16px; }
  .divider { height: 1px; background: var(--border); margin: 24px 0; }
  .last-scrape-info { font-size: 0.72rem; color: var(--muted); text-align: right; margin-top: 8px; }
  .results-count { font-size: 0.75rem; color: var(--muted); margin-bottom: 16px; font-weight: 300; }

  .empty { text-align: center; padding: 60px 20px; color: var(--muted); }
  .empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
  .empty-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 0.1em; color: var(--text); margin-bottom: 6px; }
  .empty-sub { font-size: 0.82rem; font-weight: 300; }

  #toast { position: fixed; bottom: 28px; right: 28px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; font-size: 0.82rem; color: var(--text); transform: translateY(80px); opacity: 0; transition: all 0.3s; z-index: 1000; max-width: 320px; }
  #toast.show { transform: translateY(0); opacity: 1; }
  #toast.success { border-color: rgba(61,186,120,0.4); }
  #toast.error   { border-color: rgba(214,0,28,0.4); }

  /* ── Coverage panel ── */
  .cov-table-wrap { overflow-x: auto; }
  .cov-table { border-collapse: collapse; width: 100%; font-size: 0.72rem; }
  .cov-table th, .cov-table td { padding: 0; }
  .cov-route-cell {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--cream);
    padding: 5px 12px 5px 0;
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 1;
    min-width: 110px;
  }
  .cov-month-head {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding: 6px 3px;
    white-space: nowrap;
    min-width: 46px;
  }
  .cov-cell {
    text-align: center;
    padding: 3px;
  }
  .cov-pip {
    width: 38px;
    height: 22px;
    border-radius: 4px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: transform 0.1s;
    cursor: default;
  }
  .cov-pip.has  { background: rgba(61,186,120,0.18); color: #3DBA78; border: 1px solid rgba(61,186,120,0.3); }
  .cov-pip.none { background: rgba(255,255,255,0.03); color: var(--muted); border: 1px solid var(--border); }
  .cov-pip.has:hover { transform: scale(1.15); }
  .cov-row:hover .cov-route-cell { color: var(--red); }
  .cov-row:hover .cov-pip.has { background: rgba(61,186,120,0.28); }
  .cov-group-head td {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 0 4px;
    border-bottom: 1px solid var(--border);
  }
  .cov-legend { display: flex; gap: 20px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
  .cov-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; color: var(--muted); }
  .cov-legend-pip { width: 14px; height: 14px; border-radius: 3px; }

  /* ── Calendar flip button ── */
  .cal-flip-btn {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted); font-size: 1rem;
    transition: color 0.2s, border-color 0.2s, transform 0.25s;
    margin-bottom: 1px; /* align with bottom of selects */
    align-self: flex-end;
  }
  .cal-flip-btn:hover { color: var(--red); border-color: var(--red); transform: rotate(180deg); }

  /* ── Calendar cabin checkboxes ── */
  .cal-cb-label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    user-select: none;
    white-space: nowrap;
  }
  .cal-cb-label input[type="checkbox"] { display: none; }
  .cal-cb-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    position: relative;
  }
  .cal-cb-box::after {
    content: '✓';
    font-size: 0.7rem;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .cal-cb-label input:checked + .cal-cb-box::after { opacity: 1; }
  .cal-cb-label.economy { color: #9E9E9E; }
  .cal-cb-label.economy .cal-cb-box { border-color: #9E9E9E; background: rgba(158,158,158,0.08); color: #9E9E9E; }
  .cal-cb-label input:checked ~ .cal-cb-label.economy,
  .cal-cb-label.economy input:checked + .cal-cb-box { background: rgba(158,158,158,0.22); }
  .cal-cb-label.premium { color: #5B9BD5; }
  .cal-cb-label.premium .cal-cb-box { border-color: #5B9BD5; background: rgba(91,155,213,0.08); color: #5B9BD5; }
  .cal-cb-label.premium input:checked + .cal-cb-box { background: rgba(91,155,213,0.22); }
  .cal-cb-label.upper { color: var(--red); }
  .cal-cb-label.upper .cal-cb-box { border-color: var(--red); background: rgba(214,0,28,0.08); color: var(--red); }
  .cal-cb-label.upper input:checked + .cal-cb-box { background: rgba(214,0,28,0.18); }

  /* ── Saver seat badge ── */
  .saver-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #DA0530;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px 3px 7px;
    border-radius: 3px 6px 6px 3px;
    clip-path: polygon(8px 0%, 100% 0%, 100% 100%, 8px 100%, 0% 50%);
    padding-left: 12px;
    flex-shrink: 0;
  }
  .saver-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #DA0530;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 6px 2px 9px;
    border-radius: 2px 4px 4px 2px;
    clip-path: polygon(7px 0%, 100% 0%, 100% 100%, 7px 100%, 0% 50%);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .saver-badge-cal {
    display: inline-flex;
    align-items: center;
    background: #DA0530;
    color: #fff;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 5px 1px 7px;
    border-radius: 2px 3px 3px 2px;
    clip-path: polygon(6px 0%, 100% 0%, 100% 100%, 6px 100%, 0% 50%);
    flex-shrink: 0;
    margin-left: 3px;
  }

  /* ── Nav alert badge ── */
  .nav-btn { position: relative; }
  .nav-alert-badge {
    position: absolute; top: -7px; right: -9px;
    background: var(--red); color: #fff;
    font-size: 0.72rem; font-weight: 700;
    min-width: 20px; height: 20px;
    border-radius: 100px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
    border: 2px solid var(--bg);
    transition: transform 0.2s;
  }
  .nav-alert-badge.pop { animation: badgePop 0.3s ease; }
  @keyframes badgePop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  /* ── User management table ── */
  .user-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .user-table th {
    text-align: left; padding: 10px 14px;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .user-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .user-table tr:last-child td { border-bottom: none; }
  .user-table tr:hover td { background: var(--hover-bg); }
  .user-table tr.current-user td { background: rgba(201,168,76,0.04); }
  .role-badge {
    display: inline-block; padding: 2px 8px; border-radius: 100px;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .role-badge.admin { background: rgba(214,0,28,0.12); color: var(--red); }
  .role-badge.user  { background: var(--hover-bg); color: var(--muted); }
  .verified-badge { font-size: 0.75rem; }
  .user-action-btn {
    background: none; border: 1px solid var(--border); color: var(--muted);
    font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500;
    padding: 4px 10px; border-radius: 6px; cursor: pointer;
    transition: all 0.2s; margin-right: 4px;
  }
  .user-action-btn:hover { border-color: var(--red); color: var(--red); }
  .user-action-btn.danger:hover { background: rgba(214,0,28,0.1); }
  .user-action-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .user-filter {
    background: var(--input-bg); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
    padding: 9px 12px; outline: none; width: 100%; max-width: 300px;
    transition: border-color 0.2s;
  }
  .user-filter:focus { border-color: var(--red); }

  /* ── Three-box combo result card ── */
  .combo-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    margin-top: 4px;
    overflow: visible;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
  }
  .combo-card:hover { border-color: rgba(214,0,28,0.3); transform: translateY(-1px); }
  .combo-card.best-value { border-color: var(--gold); }
  .combo-card.best-value::before {
    content: 'BEST VALUE';
    position: absolute; top: -10px; left: 20px;
    background: var(--gold); color: #0D0D0D;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em;
    padding: 3px 10px; border-radius: 100px;
  }
  .combo-card-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
  }
  .combo-leg {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .combo-leg-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #DA0530;
  }
  .combo-leg-route {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    color: var(--cream);
    line-height: 1;
  }
  .combo-leg-date {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
  }
  .combo-leg-cabin {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .combo-leg-points {
    margin-top: auto;
    display: inline-block;
    border-radius: 8px;
    padding: 10px 16px;
    text-align: center;
    align-self: flex-start;
  }
  .combo-leg-pts-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .combo-leg-pts-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
  }
  .combo-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: var(--hover-bg);
    min-width: 80px;
    gap: 6px;
  }
  .combo-days-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    color: var(--cream);
    line-height: 1;
  }
  .combo-days-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .combo-total-row {
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    background: var(--hover-bg);
  }
  .combo-total-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .combo-total-pts {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .combo-total-sublabel {
    font-size: 0.62rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  @media (max-width: 600px) {
    .combo-card-row { grid-template-columns: 1fr; }
    .combo-middle { flex-direction: row; border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 20px; }
  }

  /* ── Mobile responsive — all rules below only apply at ≤768px ── */
  /* Desktop (>768px) is completely unaffected by everything in this block */

  @media (max-width: 768px) {

    /* Wrapper padding */
    .wrapper { padding: 0 14px; }

    /* ── Header ── */
    header {
      flex-wrap: wrap;
      gap: 10px;
      padding: 16px 0 12px;
    }
    .brand-name { font-size: 1.5rem; }
    .brand-mark { width: 40px; height: 40px; }

    /* Hide the text label on theme toggle — keep just the track */
    #themeLabel { display: none; }
    .theme-toggle { padding: 6px 10px; }

    /* Status pill — hide the text, keep dot only */
    #statusText { display: none; }
    #statusScrapeIndicator { display: none !important; }
    .status-pill { padding: 6px 10px; }

    /* User pill — hide name and role badge on small screens, keep initials + logout */
    .user-name { display: none; }
    .user-role-badge { display: none !important; }
    .user-pill { padding: 5px 10px 5px 7px; gap: 6px; }

    /* Header right — tighten gap */
    .header-right { gap: 6px; }

    /* ── Nav ── */
    nav {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      gap: 2px;
      padding: 12px 0;
    }
    nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */
    .nav-btn {
      white-space: nowrap;
      flex-shrink: 0;
      padding: 8px 12px;
      font-size: 0.72rem;
    }

    /* ── Panels ── */
    .panel { padding: 20px 0; }
    .section-title { font-size: 1.3rem; }
    .section-sub { margin-bottom: 18px; }

    /* ── Search form ── */
    .search-form { padding: 14px; }
    .search-form-group { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0; }
    .search-form-btn { padding: 12px; }

    /* ── Search results — one-way flight card ── */
    .flight-combo { flex-direction: column; gap: 10px; }

    /* ── Return/multi-city combo cards ── */
    .combo-leg { padding: 14px 16px; }
    .combo-leg-route { font-size: 1.2rem; }
    .combo-total-row { padding: 10px 16px; }

    /* ── Alert cards ── */
    .alert-card { flex-direction: column; gap: 10px; }
    .alert-route { font-size: 1rem; }

    /* ── Stat cards (settings) ── */
    .grid-3 { grid-template-columns: 1fr; }

    /* ── Calendar ── */
    #calendarContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Coverage table ── */
    #coverageContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Cards ── */
    .card { padding: 16px; }

    /* ── Scrape history rows ── */
    .scrape-row { flex-wrap: wrap; }

    /* ── DB settings form ── */
    .search-form-group[id] { grid-template-columns: 1fr; }

    /* ── Dividers ── */
    .divider { margin: 16px 0; }

    /* ── User management table — horizontal scroll ── */
    #userTableContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .user-table { min-width: 560px; }
  }

  /* Extra small — iPhone SE (375px and below) */
  @media (max-width: 375px) {
    .brand-name { font-size: 1.25rem; }
    .brand-mark { width: 34px; height: 34px; }
    .nav-btn { padding: 7px 10px; font-size: 0.68rem; }
    .search-form { padding: 12px; }
    .search-form-group { grid-template-columns: 1fr; }
  }


/* ══ REDESIGN — Phase 1 shell ═══════════════════════════════════════════════
   Header lockup, primary nav, account menu and site footer.
   Values taken from the handoff pack sections 01 and 06. */

/* ══ TOP BAR — two-tier departure board (design handoff, option 2c) ═════════
   Tier 1 carries the lockup, the live stats cluster and the account avatar.
   Tier 2 is the board: four equal columns, the active one swapping its gate
   number for a pulsing radar blip and a red baseline pinned to the band. */

/* A legacy element-level `header { display:flex }` rule still lives further up
   the sheet; the two tiers must stack, so state it plainly here. */
.prt { display: block; position: sticky; top: 0; z-index: 250; padding: 0; border-bottom: none; }
/* space-between would park the stats in the dead centre of the row; the auto
   margin pushes them right so they read as a group with the avatar. */
.prt-row { display: flex; align-items: center; justify-content: flex-start; gap: 22px;
  padding: 14px var(--shell-pad); background: var(--row-bg); }
.prt-stats { margin-left: auto; }
.prt-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.prt-brand img { display: block; width: 44px; height: 44px; flex-shrink: 0; }
/* One mark per theme, wherever it appears. This used to name each container in
   turn, which meant every new use of these classes showed both marks until
   somebody spotted it — four times. The classes now simply mean what they say. */
/* !important is deliberate. These are utility classes whose whole job is to
   win: any container rule that sets display on its images — .pr-footer-app img
   and .prt-brand img both do — is more specific than a bare class and would
   otherwise show both marks at once. */
.light-only { display: none !important; }
html.light .dark-only  { display: none !important; }
html.light .light-only { display: block !important; }
.prt-lockup { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.prt-word { font: 700 21px 'Space Grotesk', sans-serif; color: var(--cream); line-height: 1.1; }
.prt-word .tld { font-size: 12px; color: var(--brand-tld); letter-spacing: .08em; font-weight: 500; }
.prt-strap { font: 500 12px 'DM Sans', sans-serif; color: var(--muted); margin-top: 1px; white-space: nowrap; }

.prt-stats { display: flex; align-items: center; gap: 26px; flex: none; }
.prt-stat { text-align: right; text-decoration: none; }
.prt-stat b { display: block; font: 700 16px 'Space Grotesk', sans-serif; color: var(--cream); line-height: 1; }
.prt-stat i { display: block; font: 500 9px 'DM Sans', sans-serif; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.prt-stat.red b { color: var(--red); }
a.prt-stat:hover b { color: var(--red); }
.prt-rule { width: 1px; height: 26px; background: var(--border); }
.prt-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Legacy element-level `nav` and `header` rules further up this sheet carry
   padding, gap and a border of their own — the same trap that had the two tiers
   side by side. Both tiers state their own box outright. */
.prt-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  padding: 0 var(--shell-pad);
  background: var(--band-bg); border-top: 1px solid var(--band-top);
  border-bottom: 1px solid var(--band-bottom); box-shadow: var(--band-inset); }
.prt-board a { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 13px 4px; text-decoration: none; cursor: pointer;
  transition: background .15s ease; }
.prt-board a + a { border-left: 1px solid var(--band-divider); }
.prt-board a:hover { background: var(--band-hover); }
.prt-label { font: 400 16px 'Bebas Neue', sans-serif; letter-spacing: .08em; color: var(--muted);
  transition: color .15s ease; white-space: nowrap; }
.prt-board a:hover .prt-label { color: var(--cream); }

/* One bullet per item: grey and still, turning red and pulsing on the active
   column. Replaces the 01/02/03 gate numbers. */
.prt-blip { display: block; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--muted); box-shadow: none; animation: none; transition: background .15s ease; }
.prt-board a:hover .prt-blip { background: var(--cream); }
.prt-board a.active .prt-blip { background: var(--red); box-shadow: 0 0 0 4px var(--red-glow);
  animation: prtPulse 1.6s ease-in-out infinite; }
.prt-board a.active .prt-label { color: var(--cream); }
.prt-board a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--red); }
@keyframes prtPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--red-glow); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) { .prt-blip { animation: none; } }

.prt-badge { background: var(--red); color: #fff; font: 700 10px 'DM Sans', sans-serif;
  padding: 1px 7px; border-radius: 999px; }
html.light .prt-badge { color: #fff; }

.pr-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff;
  border: none; display: grid; place-items: center; cursor: pointer;
  font: 700 11px 'DM Sans', sans-serif; letter-spacing: .02em; padding: 0;
}
.pr-account-wrap { position: relative; }

.pr-menu {
  position: absolute; top: 42px; right: 0; width: 280px; z-index: 200;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,.16); overflow: hidden; display: none;
}
html:not(.light) .pr-menu { background: var(--raised); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.pr-account-wrap.open .pr-menu { display: block; }
.pr-menu-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pr-menu-name { font: 700 14px 'DM Sans', sans-serif; color: var(--cream); display: flex; align-items: center; gap: 8px; }
.pr-menu-email { font: 400 12px 'DM Sans', sans-serif; color: var(--muted); margin-top: 3px; word-break: break-all; }
.pr-badge-admin { background: rgba(214,0,28,.08); color: var(--red);
  font: 700 8px 'DM Sans', sans-serif; letter-spacing: .12em; padding: 3px 7px; border-radius: 999px; }
html:not(.light) .pr-badge-admin { background: rgba(255,68,56,.14); }
.pr-badge-mut { background: rgba(0,0,0,.05); color: var(--muted);
  font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em; padding: 3px 7px; border-radius: 999px; }
html:not(.light) .pr-badge-mut { background: rgba(255,255,255,.07); }

.pr-menu-row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pr-menu-row .lbl { font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.pr-menu-row .sub { font: 400 11px 'DM Sans', sans-serif; margin-top: 2px; }

.pr-seg { display: flex; background: var(--hover-bg); border-radius: 999px; padding: 3px; gap: 2px; }
.pr-seg button {
  border: none; background: none; cursor: pointer; border-radius: 999px;
  font: 600 11px 'DM Sans', sans-serif; color: var(--muted); padding: 5px 11px;
  display: flex; align-items: center; gap: 4px;
}
.pr-seg button.on { background: var(--card); color: var(--cream); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html:not(.light) .pr-seg button.on { background: #2A2A2A; }

.pr-switch { width: 40px; height: 22px; border-radius: 999px; background: rgba(0,0,0,.18);
  border: none; cursor: pointer; position: relative; padding: 0; flex-shrink: 0; transition: background .18s; }
html:not(.light) .pr-switch { background: rgba(255,255,255,.18); }
.pr-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .18s; }
.pr-switch.on { background: var(--success); }
.pr-switch.on::after { transform: translateX(18px); }

.pr-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 16px; background: none; border: none; cursor: pointer;
  font: 500 13px 'DM Sans', sans-serif; color: var(--text); text-align: left;
  border-bottom: 1px solid var(--border); }
.pr-menu-item:last-child { border-bottom: none; }
.pr-menu-item:hover { background: var(--hover-bg); }
.pr-menu-item .ic { color: var(--muted); font-size: 13px; width: 14px; display: inline-block; }
.pr-menu-item.danger { color: var(--red); font-weight: 600; }
.pr-menu-item.danger .ic { color: var(--red); }

/* Site footer */
.pr-footer { border-top: 1px solid var(--border); background: var(--card);
  padding: 18px var(--shell-pad); margin-top: 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.pr-footer-brand { display: flex; align-items: center; gap: 10px; }
.pr-footer-brand img { width: 26px; height: 26px; display: block; }
.pr-footer-word { font: 700 13px 'Space Grotesk', sans-serif; color: var(--cream); }
.pr-footer-word .tld { font-size: 9px; color: var(--brand-tld); letter-spacing: .08em; }
.pr-footer-strap { font: 400 10px 'DM Sans', sans-serif; color: var(--muted); margin-top: 2px; }
.pr-footer-links { display: flex; gap: 22px; font: 500 12px 'DM Sans', sans-serif;
  justify-content: center; flex-wrap: wrap; }
.pr-footer-links a { color: var(--muted); text-decoration: none; }
.pr-footer-links a:hover { color: var(--red); }
/* Apple require the badge unmodified, at least 40px tall, with clear space of
   at least 10% of its height on every side. 40px tall with 6px of margin
   satisfies both; do not scale it down to fit a tighter footer. */
/* Sits left of the lockup. Apple require the badge unmodified, at least 40px
   tall, with clear space of at least 10% of its height on every side — 40px
   with 6px of margin satisfies both. Do not shrink it to tighten the footer. */
.pr-footer-app { display: flex; align-items: center; text-decoration: none;
  margin-right: 4px; }
.pr-footer-app img { height: 40px; width: auto; display: block; margin: 6px; }
.pr-footer-legal { text-align: right; }
.pr-footer-legal .c { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.pr-footer-legal .d { font: 400 10px 'DM Sans', sans-serif; color: var(--muted); opacity: .75; margin-top: 2px; }

@media (max-width: 768px) {
  /* One column on a phone: three across is unreadable, and flex-direction has
     no effect now the footer is a grid. */
  .pr-footer { padding: 16px; grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .pr-footer-links { justify-content: flex-start; }
  .pr-footer-legal { text-align: left; }
}

/* ══ REDESIGN — Phase 3 availability calendar ═══════════════════════════════
   Section 03 of the handoff pack. Day cells carry one row per selected cabin,
   so a whole month can be scanned for the cabin you actually want. */

.prc-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.prc-field {
  flex: 1 1 220px; min-width: 180px; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 18px;
}
.prc-field label { display: block; font: 700 9px 'DM Sans', sans-serif; letter-spacing: .14em; color: var(--muted); margin-bottom: 4px; }
.prc-field select {
  border: none; background: none; padding: 0; width: 100%;
  font: 700 16px 'Space Grotesk', sans-serif; color: var(--cream); cursor: pointer;
}
.prc-field select:focus { outline: none; }

.prc-swap {
  width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: var(--bg);
  border: none; font-size: 20px; display: grid; place-items: center; cursor: pointer;
  flex: none; box-shadow: 0 2px 10px rgba(255,68,56,.3); transition: transform .25s;
}
.prc-swap:hover { transform: rotate(180deg); }

.prc-cabins { display: flex; gap: 8px; flex-wrap: wrap; }
.prc-chip {
  display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font: 700 11px 'DM Sans', sans-serif; padding: 10px 14px; border-radius: 999px;
  background: var(--hover-bg); color: var(--muted);
  border: 1px solid var(--border); transition: all .15s;
}
.prc-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.prc-chip.on[data-cabin="economy"]     { background: rgba(232,226,218,.10); color: var(--cab-economy); border-color: rgba(232,226,218,.30); }
html.light .prc-chip.on[data-cabin="economy"] { background: rgba(107,101,96,.10); color: #6B6560; border-color: rgba(107,101,96,.30); }
.prc-chip.on[data-cabin="premium"]     { background: rgba(74,158,255,.12); color: var(--cab-premium); border-color: rgba(74,158,255,.35); }
.prc-chip.on[data-cabin="upper-class"] { background: rgba(255,68,56,.12); color: var(--cab-upper); border-color: rgba(255,68,56,.35); }

.prc-month { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.prc-mbtn {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 20px; font: 700 13px 'DM Sans', sans-serif; color: var(--text); cursor: pointer;
}
.prc-mbtn { white-space: nowrap; }
.prc-mbtn:hover { border-color: var(--red); color: var(--red); }
.prc-mbtn:disabled { opacity: .35; cursor: not-allowed; }
/* The month title is now the picker's trigger. Kept looking like a title, not a
   form control — the caret is the only thing that says it opens. Note the
   width/padding resets: the global `input, select` rule does not reach a button,
   but the app's own button styles do. */
.prc-mwrap { position: relative; }
.prc-mtitle { font: 400 40px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .02em;
  line-height: 1; background: none; border: 0; padding: 2px 6px; width: auto; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px; border-radius: 8px; }
.prc-mtitle:hover { color: var(--red); background: var(--hover-bg); }
.prc-mtitle i { font-style: normal; font-size: 16px; color: var(--muted); line-height: 1; }
.prc-mtitle:hover i { color: var(--red); }

.prc-mmenu { display: none; position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); z-index: 60; width: 216px; max-height: 320px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.prc-mwrap.open .prc-mmenu { display: block; }
.prc-mopt { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 8px 10px;
  border-radius: 8px; font: 500 0.86rem 'DM Sans', sans-serif; color: var(--text); }
.prc-mopt:hover { background: var(--hover-bg); color: var(--red); }
.prc-mopt.on { background: var(--red-glow); color: var(--red); font-weight: 700; }
/* Listed, not hidden: a month nobody has scraped is a real answer to "can I go
   there in March", and removing it would look like the month does not exist. */
.prc-mopt.empty span { color: var(--muted); }
.prc-mopt i { font-style: normal; font-size: 0.68rem; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; }

/* Full month names plus a year do not fit three-across on a phone at the desktop
   sizes — they wrapped mid-label. Shrunk to fit rather than abbreviated, so the
   labels read the same on every device. */
@media (max-width: 560px) {
  .prc-month { gap: 6px; }
  .prc-mbtn { padding: 8px 10px; font-size: 11px; }
  .prc-mtitle { font-size: 27px; white-space: nowrap; padding: 2px 4px; gap: 5px; }
  .prc-mtitle i { font-size: 12px; }
  .prc-mmenu { width: 190px; }
}

.prc-legend { text-align: right; font: 400 11px 'DM Sans', sans-serif; color: var(--muted);
  margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  justify-content: flex-end; }
/* When there are no lowest chips the legend is alone on the row and would sit
   left; pushed right so its position does not depend on the other half. */
.prc-abovegrid > .prc-legend:only-child { margin-left: auto; }
@media (max-width: 760px) {
  .prc-abovegrid { justify-content: center; }
  .prc-legend { justify-content: center; text-align: center; }
}
.prc-legend .k { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: -1px; margin: 0 4px 0 12px; }

.prc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px;
  font: 700 10px 'DM Sans', sans-serif; letter-spacing: .12em; color: var(--muted); text-align: center; }
.prc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.prc-day {
  min-height: 92px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--border); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .15s;
  /* Pin content to the top-left so the date sits identically whether or not the
     day has fares — otherwise empty cells centre theirs and the grid loses its
     alignment down the column. */
  align-items: flex-start; justify-content: flex-start; text-align: left;
}
.prc-day.we { background: var(--cal-weekend); }
.prc-day.pad { background: var(--raised); border-color: transparent; cursor: default; opacity: .5; }
.prc-day.pad.we { background: var(--raised); }
.prc-day.empty { cursor: default; }
.prc-day:not(.pad):hover { border-color: var(--red); }
.prc-day.sel { border-color: var(--cream); box-shadow: 0 0 0 1px var(--cream); }
.prc-dayhead { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.prc-daynum { font: 700 17px 'Space Grotesk', sans-serif; color: var(--cream); line-height: 1; }
.prc-dayname { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .1em;
               text-transform: uppercase; color: var(--muted); }
.prc-day.we .prc-dayname { color: var(--red); opacity: .8; }
.prc-day.pad .prc-daynum { color: var(--muted); opacity: .4; font-weight: 500; font-size: 13px; }
.prc-day.pad .prc-dayname { opacity: .3; }
.prc-fare { display: flex; align-items: center; gap: 6px; font: 700 11px 'Space Grotesk', sans-serif; }
.prc-fare .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.prc-fare .s { width: 6px; height: 6px; border-radius: 50%; background: var(--cab-saver); flex: none; }

/* ── Lowest-day highlighting ───────────────────────────────────────────────
   Three treatments that work together: the outline flags the day from across
   the room, the lit row says which cabin, and the strip above answers it
   without scanning the grid at all. */

/* 2px border with 1px less padding, so an outlined cell is exactly the same
   size as its neighbours and the grid does not shift as months change. */
.prc-day.low { border-width: 2px; padding: 7px 9px; }
.prc-day.low .prc-daynum { font-weight: 700; }
/* The hover rule would otherwise repaint the cabin outline red on hover. */
.prc-day.low:not(.pad):hover { border-color: inherit; filter: brightness(1.08); }

/* The winning cabin's row becomes a pill. Negative margin keeps the text
   aligned with the unlit rows above and below it. */
.prc-fare.lit { border-radius: 6px; padding: 2px 6px; margin: 0 -6px; }

/* One row above the grid: what is cheapest on the left, what the colours mean
   on the right, both baseline-aligned so they read as a single band. */
.prc-abovegrid { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.prc-lowbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.prc-lowlab { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
/* Not .prc-chip — that is already the cabin toggle above the grid, and reusing
   the name restyled those buttons as a side effect. */
.prc-lowchip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px; padding: 6px 13px; width: auto;
  font: 700 11px 'Space Grotesk', sans-serif; white-space: nowrap; }
.prc-lowchip:hover { filter: brightness(1.12); }
.prc-lowchip .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* What a chip does when clicked: points at its days. */
@keyframes prcFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30%      { box-shadow: 0 0 0 4px var(--red-glow), 0 0 18px var(--red-glow); }
}
.prc-day.flash { animation: prcFlash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .prc-day.flash { animation: none; outline: 2px dashed var(--red); } }

@media (max-width: 560px) {
  .prc-lowbar { gap: 6px; }
  .prc-lowchip { font-size: 10px; padding: 5px 10px; }
}

/* Selected-day drawer */
.prc-drawer { margin-top: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.prc-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.prc-drawer-date { font: 400 30px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .04em; line-height: 1; }
.prc-book {
  background: var(--red); color: #fff; text-decoration: none; border-radius: 999px;
  padding: 11px 20px; font: 700 12px 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: 7px;
}
.prc-book:hover { background: var(--red-dark); }
.prc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--border); }
.prc-row:last-child { border-bottom: none; }
.prc-row .lhs { display: flex; align-items: center; gap: 10px; font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.prc-row .d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Each cabin row now ends in its own Book now. */
.prc-book.row { flex: none; margin-left: 14px; padding: 7px 14px; font-size: 11px;
  background: var(--red); border-color: var(--red); color: #fff; }
.prc-book.row:hover { filter: brightness(1.08); }
.prc-row .saver { font: 500 11px 'DM Sans', sans-serif; color: var(--cab-saver); }
.prc-row .pts { font: 700 17px 'Space Grotesk', sans-serif; color: var(--cream); }
.prc-row .pts span { font: 500 10px 'DM Sans', sans-serif; color: var(--muted); margin-left: 3px; }

@media (max-width: 768px) {
  /* Stacked, with the swap centred between the two — the same shape the
     homepage card uses. Side by side, each field got about 160px and both
     placeholders came out as "Choose depart…" / "Choose destin…". */
  .prc-controls { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
  .prc-swap { justify-self: center; }
  .prc-field { min-width: 0; padding: 9px 12px; }
  .prc-field select { font-size: 15px; }
  .prc-cabins { grid-column: 1 / -1; }
  /* Grid items default to min-width:auto, so "24 MON" inside a cell was forcing
     each column wider than a seventh of the screen and pushing Sunday off. */
  .prc-day { min-width: 0; min-height: 62px; padding: 5px 5px; gap: 2px; }
  .prc-grid, .prc-dow { gap: 4px; }
  .prc-dayname { display: none; }          /* the header row already names the days */
  .prc-daynum { font-size: 13px; }
  .prc-day.pad .prc-daynum { font-size: 11px; }
  .prc-fare { font-size: 9px; gap: 3px; }
  .prc-fare .d { width: 5px; height: 5px; }
  .prc-fare .s { width: 5px; height: 5px; }
  .prc-dow { font-size: 9px; }
  .prc-mtitle { font-size: 26px; }
  .prc-swap { width: 40px; height: 40px; }
}

/* ══ REDESIGN — Phase 2 home & search ═══════════════════════════════════════
   Section 01 (home) and 02 (advanced search) of the handoff pack. */


.prh-searchrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; }
.prh-pill {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 13px 20px;
  font: 500 14px 'DM Sans', sans-serif; color: var(--text); min-width: 300px;
}
.prh-pill select { border: none; background: none; color: inherit; font: inherit; cursor: pointer; flex: 1; }
.prh-pill select:focus { outline: none; }

.prh-budget { display: flex; align-items: center; gap: 12px; font: 500 13px 'DM Sans', sans-serif; color: var(--muted); }
/* One range control for the whole app, so a slider is never left with the
   browser default. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 4px;
  border-radius: 999px; background: var(--border); outline: none; accent-color: var(--red); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--red); cursor: pointer; border: none; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); cursor: pointer; border: none; }
.prh-budget input[type=range] { width: 190px; }
.prh-budget .v { font: 700 14px 'Space Grotesk', sans-serif; color: var(--cream); min-width: 46px; }
.prh-adv { font: 700 13px 'DM Sans', sans-serif; color: var(--red); text-decoration: none; white-space: nowrap; }
.prh-adv:hover { text-decoration: underline; }

.prh-stats { display: inline-flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 13px 24px; margin-bottom: 34px; }
.prh-stat { display: flex; align-items: center; gap: 9px; font: 400 12px 'DM Sans', sans-serif; color: var(--muted); }
.prh-stat .ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,68,56,.10); color: var(--red); font-size: 11px; }
html.light .prh-stat .ic { background: rgba(214,0,28,.08); }
.prh-stat b { font: 700 14px 'Space Grotesk', sans-serif; color: var(--cream); }

.prh-drawhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
/* Was a two-word uppercase label; it now carries a full sentence, which needs
   sentence case and normal tracking to stay readable. */
/* No max-width: the sentence needs ~672px and there is 1232px of row, so
   capping it at 68ch (612px) was forcing a wrap for no reason. It still wraps
   naturally on narrow screens, which is what should happen. */
.prh-drawtitle { font: 500 13px 'DM Sans', sans-serif; letter-spacing: 0; color: var(--muted);
  line-height: 1.45; }
.prh-shuffle { background: none; border: none; cursor: pointer; flex: none; white-space: nowrap;
  font: 700 12px 'DM Sans', sans-serif; color: var(--red); text-decoration: none; }
.prh-shuffle:hover { text-decoration: underline; }

.prh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .prh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prh-grid { grid-template-columns: 1fr; } }

.prd-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-decoration: none; display: block; transition: transform .18s, border-color .18s; }
.prd-card:hover { transform: translateY(-2px); border-color: var(--red); }
.prd-photo { height: 118px; background: var(--raised); background-size: cover; background-position: center; display: block; }
/* Destinations outside the photo pack still get a branded card rather than a hole. */
.prd-photo.none { display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,68,56,.20), rgba(201,168,76,.12)); }
.prd-photo.none span { font: 700 26px 'Space Grotesk', sans-serif; color: var(--cream); opacity: .9; letter-spacing: .04em; }
/* The card is an <a> with <span> children so the whole tile is one link. Spans
   are inline by default, and padding on an inline box does not lay out — which
   is what left the text flush against the card edge. */
.prd-body { display: block; padding: 12px 14px 14px; }
.prd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.prd-city { font: 700 15px 'Space Grotesk', sans-serif; color: var(--cream); }
.prd-code { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.prd-sub { display: block; font: 400 12px 'DM Sans', sans-serif; color: var(--muted); margin-top: 3px; }
.prd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.prd-from { font: 700 14px 'Space Grotesk', sans-serif; color: var(--red); }
.prd-tag { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; }
.prd-tag.saver { background: rgba(201,168,76,.16); color: var(--gold); }
.prd-tag.rare  { background: rgba(255,68,56,.14); color: var(--red); }
html.light .prd-tag.rare { background: rgba(214,0,28,.10); }
.prd-cabins { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }

/* ── Advanced search: filter rail + combination results (section 02) ───────── */
.pra-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .pra-layout { grid-template-columns: 1fr; } }

.pra-rail { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.pra-title { font: 400 26px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .04em; margin-bottom: 16px; }
.pra-group { padding: 12px 0; border-bottom: 1px solid var(--border); }
.pra-group:last-of-type { border-bottom: none; }
.pra-lab { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pra-group select, .pra-group input[type=date], .pra-group input[type=number] {
  width: 100%; background: none; border: none; padding: 0;
  font: 500 14px 'DM Sans', sans-serif; color: var(--text); }
.pra-group select:focus, .pra-group input:focus { outline: none; }
.pra-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pra-pills { display: flex; gap: 6px; margin-bottom: 4px; }
.pra-pill { flex: 1; text-align: center; cursor: pointer; user-select: none;
  font: 600 11px 'DM Sans', sans-serif; padding: 7px 4px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: none; }
.pra-pill.on { background: rgba(214,0,28,.08); color: var(--red); border-color: var(--red); }
html:not(.light) .pra-pill.on { background: rgba(255,68,56,.12); }

.pra-cab { display: flex; gap: 6px; flex-wrap: wrap; }
.pra-cabchip { cursor: pointer; user-select: none; font: 600 10px 'DM Sans', sans-serif;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.pra-cabchip.on { border-color: var(--red); color: var(--red); background: rgba(214,0,28,.07); }
html:not(.light) .pra-cabchip.on { background: rgba(255,68,56,.12); }

.pra-rowline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pra-rowline .v { font: 700 13px 'Space Grotesk', sans-serif; color: var(--red); }
.pra-scan { width: 100%; margin-top: 16px; background: var(--red); color: #fff; border: none;
  border-radius: 999px; padding: 14px; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.pra-scan:hover { background: var(--red-dark); }
.pra-note { text-align: center; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 10px; }

.pra-reshead { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; flex-wrap: wrap; }
.pra-rescount { font: 700 11px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.pra-alertme { background: none; border: none; cursor: pointer; font: 700 12px 'DM Sans', sans-serif; color: var(--red); }
.pra-alertme:hover { text-decoration: underline; }

.pra-combo { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 12px; }
.pra-combo.top { border-color: rgba(201,168,76,.45); }
.pra-cotop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pra-badge { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .12em; padding: 4px 9px;
  border-radius: 999px; background: rgba(201,168,76,.16); color: var(--gold); }
.pra-total { text-align: right; white-space: nowrap; }
.pra-total b { font: 700 26px 'Space Grotesk', sans-serif; color: var(--red); }
.pra-total span { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); margin-left: 4px; }
.pra-leg { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); }
.pra-legdate { font: 400 21px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .04em;
  min-width: 74px; line-height: 1; }
.pra-legmain { flex: 1; font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.pra-legsaver { font: 500 11px 'DM Sans', sans-serif; color: var(--gold); margin-left: 6px; }
.pra-legpts { font: 700 15px 'Space Grotesk', sans-serif; color: var(--cream); white-space: nowrap; }
.pra-legpts span { font: 500 10px 'DM Sans', sans-serif; color: var(--muted); margin-left: 3px; }
.pra-cofoot { display: flex; justify-content: flex-end; margin-top: 14px; }
.pra-more { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; }
.pra-more .t { font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.pra-more .s { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 2px; }
.pra-more .p { font: 700 17px 'Space Grotesk', sans-serif; color: var(--cream); white-space: nowrap; }
.pra-more .p span { font: 500 10px 'DM Sans', sans-serif; color: var(--muted); margin-left: 3px; }

/* ══ REDESIGN — Phase 4 alerts ══════════════════════════════════════════════
   Section 04. Basic and holiday alerts share one list: what a user wants to
   know is what is being watched and what has been caught, not which of two
   internal shapes a row happens to be. */

.pral-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 26px 0 20px; }
.pral-title { font: 400 30px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .04em; line-height: 1; }
.pral-counts { display: flex; gap: 18px; margin-top: 8px; font: 500 12px 'DM Sans', sans-serif; color: var(--muted); }
.pral-counts .k { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 0; }
.pral-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pral-btn { border: none; cursor: pointer; border-radius: 999px; padding: 11px 18px;
  font: 700 12px 'DM Sans', sans-serif; }
.pral-btn.dark { background: var(--raised); color: var(--cream); border: 1px solid var(--border); }
html.light .pral-btn.dark { background: #1A1714; color: #fff; border-color: transparent; }
.pral-btn.red { background: var(--red); color: #fff; }
.pral-btn.red:hover { background: var(--red-dark); }

.pral-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 12px; overflow: hidden; }
.pral-card.triggered { border-color: rgba(46,139,87,.45); }
.pral-card.paused { border-style: dashed; opacity: .72; }
.pral-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.pral-row.nochev { cursor: default; }

.pral-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 700 10px 'DM Sans', sans-serif; letter-spacing: .06em; position: relative; overflow: hidden; }
.pral-icon.ok { background: rgba(46,139,87,.14); color: var(--success); font-size: 16px; }
.pral-icon.pause { background: var(--hover-bg); color: var(--muted); font-size: 14px; }
.pral-icon.scan { background: rgba(255,68,56,.10); color: var(--red); }
html.light .pral-icon.scan { background: rgba(214,0,28,.08); }
/* The sweep is the product's motif: a searching alert should look like it is
   actually looking. */
.pral-icon.scan::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,68,56,.45), transparent 80deg);
  animation: prSweep 3.4s linear infinite; }
.pral-icon.scan span { position: relative; z-index: 1; }
@keyframes prSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pral-icon.scan::before { animation: none; } }

.pral-main { flex: 1; min-width: 0; }
.pral-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font: 700 15px 'Space Grotesk', sans-serif; color: var(--cream); }
.pral-badge { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .13em; padding: 3px 8px; border-radius: 999px; }
.pral-badge.triggered { background: rgba(46,139,87,.16); color: var(--success); }
.pral-badge.searching { background: rgba(255,68,56,.12); color: var(--red); }
html.light .pral-badge.searching { background: rgba(214,0,28,.09); }
.pral-badge.paused { background: var(--hover-bg); color: var(--muted); }
.pral-sub { font: 400 12px 'DM Sans', sans-serif; color: var(--muted); margin-top: 4px; }
.pral-right { text-align: right; white-space: nowrap; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.pral-right b { display: block; font: 700 12px 'DM Sans', sans-serif; color: var(--success); }
.pral-chev { color: var(--muted); font-size: 10px; margin-left: 4px; transition: transform .2s; }
.pral-card.open .pral-chev { transform: rotate(180deg); }

.pral-body { display: none; border-top: 1px solid var(--border); }
.pral-card.open .pral-body { display: block; }
.pral-bodylab { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 12px 18px 6px; }
.pral-match { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-top: 1px solid var(--border); }
.pral-mdate { font: 400 19px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .04em;
  min-width: 66px; line-height: 1; }
.pral-mmain { flex: 1; min-width: 0; font: 500 12px 'DM Sans', sans-serif; color: var(--text); }
.pral-mfound { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 2px; }
.pral-mpts { font: 700 14px 'Space Grotesk', sans-serif; color: var(--cream); white-space: nowrap; }
.pral-mpts span { font: 500 10px 'DM Sans', sans-serif; color: var(--muted); margin-left: 3px; }
.pral-book { background: var(--red); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  border-radius: 999px;
  padding: 7px 13px; font: 700 11px 'DM Sans', sans-serif; white-space: nowrap; }
.pral-book:hover { background: var(--red-dark); }
.pral-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pral-footnote { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.pral-tools { display: flex; gap: 8px; }
.pral-tool { background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer;
  border-radius: 999px; padding: 6px 13px; font: 600 11px 'DM Sans', sans-serif; }
.pral-tool:hover { border-color: var(--red); color: var(--red); }
.pral-tool.go { border-color: var(--red); color: var(--red); }

/* ── Alert creation modals (section 04, options 5b and 5c) ────────────────── */
.prm-scrim { position: fixed; inset: 0; background: rgba(26,23,20,.45); z-index: 400;
  display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
.prm-scrim.open { display: flex; }
.prm { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.prm-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.prm-icon { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(255,68,56,.10); color: var(--red); font: 700 11px 'DM Sans', sans-serif; position: relative; overflow: hidden; }
html.light .prm-icon { background: rgba(214,0,28,.08); }
.prm-icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,68,56,.4), transparent 80deg);
  animation: prSweep 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .prm-icon::before { animation: none; } }
.prm-icon span { position: relative; z-index: 1; }
.prm-titles { flex: 1; min-width: 0; }
.prm-t { font: 700 16px 'Space Grotesk', sans-serif; color: var(--cream); }
.prm-s { font: 400 12px 'DM Sans', sans-serif; color: var(--muted); margin-top: 2px; }
.prm-x { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 2px; }
.prm-x:hover { color: var(--red); }
.prm-body { padding: 6px 22px 4px; }
.prm-grp { padding: 14px 0; border-bottom: 1px solid var(--border); }
.prm-grp:last-child { border-bottom: none; }
.prm-lab { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.prm-route { display: flex; align-items: center; gap: 12px; }
.prm-route .f { flex: 1; min-width: 0; background: var(--hover-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; }
.prm-route .f select { width: 100%; border: none; background: none; padding: 0;
  font: 700 14px 'Space Grotesk', sans-serif; color: var(--cream); cursor: pointer; }
.prm-route .f select:focus { outline: none; }
.prm-swap { width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff;
  border: none; font-size: 16px; cursor: pointer; flex: none; }
.prm-swap:hover { background: var(--red-dark); }
.prm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prm-two input, .prm-grp input[type=date], .prm-grp input[type=text], .prm-grp input[type=number] {
  width: 100%; background: var(--hover-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; color: var(--text); font: 500 13px 'DM Sans', sans-serif; }
.prm-grp input:focus { outline: none; border-color: var(--red); }
.prm-rowline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prm-val { font: 700 14px 'Space Grotesk', sans-serif; color: var(--red); }
.prm-foot { display: flex; gap: 10px; padding: 18px 22px; border-top: 1px solid var(--border); }
.prm-go { flex: 1; background: var(--red); color: #fff; border: none; border-radius: 999px;
  padding: 14px; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.prm-go:hover { background: var(--red-dark); }
.prm-cancel { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 999px;
  padding: 14px 22px; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; }
.prm-note { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); line-height: 1.5; margin-top: 8px; }

.cabin-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cabin-chip { background: var(--hover-bg); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 8px 15px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.cabin-chip:hover { color: var(--cream); border-color: var(--muted); }
.cabin-chip.on { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Destinations (section 05) ─────────────────────────────────────────────── */
.dest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dest-origin { display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 8px 8px 16px; font: 600 11px 'DM Sans', sans-serif; color: var(--muted); }
/* The global `input, select` rule adds 11px of padding and a border; inside the
   pill neither is wanted, and they were what made it two lines tall. */
.dest-origin select { background: none; border: none; color: var(--cream); width: auto; max-width: 15rem;
  font: 700 12px 'Space Grotesk', sans-serif; cursor: pointer; padding: 0 4px 0 0; }
.dest-origin select:focus { outline: none; }

.dest-map { position: relative; margin: 20px 0 28px; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.dest-map svg { display: block; width: 100%; height: auto; }
.dest-map .land   { fill: var(--raised); stroke: var(--border); stroke-width: .5px; }
.dest-map .sphere { fill: none; }
.dest-map .arc    { fill: none; stroke-width: 1px; opacity: .55; }
.dest-map .dot    { stroke: var(--card); stroke-width: 1px; cursor: pointer; }
.dest-map .dot:hover { stroke: var(--cream); stroke-width: 1.5px; }
.dest-map .hub    { stroke: var(--card); stroke-width: 1.5px; }
.dest-map-key { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap;
  font: 600 10px 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dest-map-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

.dest-region { margin-bottom: 26px; }
.dest-region-lab { font: 700 19px 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px; }
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.dest-card { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--raised); border: 1px solid var(--border); aspect-ratio: 16 / 11; }
.dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-card:hover img { transform: scale(1.04); }
.dest-card img { transition: transform .35s ease; }
.dest-card .scrim { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.dest-card .name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font: 700 14px 'Space Grotesk', sans-serif; color: #F5F0EA; }
.dest-card .iata { font: 600 10px 'DM Sans', sans-serif; letter-spacing: .1em; color: rgba(245,240,234,.55); }
.dest-card .from { font: 700 12px 'DM Sans', sans-serif; color: var(--red); margin-top: 2px; }
html.light .dest-card .from { color: #FF6B5E; }
.dest-card .rare { position: absolute; top: 10px; right: 10px; background: var(--gold); color: #1A1A1A;
  border-radius: 4px; padding: 2px 6px; font: 700 9px 'DM Sans', sans-serif; letter-spacing: .1em; }
.dest-card.nophoto { display: grid; place-items: center; }
.dest-card.nophoto .scrim { background: none; position: static; padding: 0; text-align: center; }
.dest-card.nophoto .name { display: block; color: var(--cream); }
.dest-more { margin-top: 9px; font: 400 12px 'DM Sans', sans-serif; color: var(--muted); }
.dest-more a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--border); }
.dest-more a:hover { color: var(--red); }

/* Detail page */
.dd-crumb { font: 500 12px 'DM Sans', sans-serif; color: var(--muted); margin-bottom: 14px; display: flex; gap: 6px; }
.dd-crumb a { color: var(--red); text-decoration: none; }
.dd-crumb a:hover { text-decoration: underline; }
.dd-hero { position: relative; border-radius: 16px; overflow: hidden; height: 240px; background: var(--raised); }
.dd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-hero .scrim { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 22px 24px; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.15)); }
.dd-hero h2 { font: 700 34px 'Space Grotesk', sans-serif; letter-spacing: .01em; color: #F5F0EA; margin: 0; }
.dd-hero .sub { font: 400 12px 'DM Sans', sans-serif; color: rgba(245,240,234,.75); margin-top: 4px; }
.dd-watch { background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 11px 20px;
  font: 700 12px 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.dd-watch:hover { background: var(--red-dark); }
.dd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.dd-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dd-stat b { display: block; font: 700 20px 'Space Grotesk', sans-serif; color: var(--cream); }
.dd-stat b.pts { color: var(--red); }
.dd-stat span { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.dd-cols { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 22px; align-items: start; }
.dd-lab { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; }
.dd-cabins { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dd-cabins div { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px;
  border-bottom: 1px solid var(--border); font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.dd-cabins div:last-child { border-bottom: none; }
.dd-cabins b { font: 700 14px 'Space Grotesk', sans-serif; color: var(--red); }
.dd-date { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.dd-date .d { min-width: 74px; }
.dd-date .d b { display: block; font: 700 17px 'Space Grotesk', sans-serif; color: var(--cream); text-transform: uppercase; }
.dd-date .d span { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.dd-date .m { flex: 1; min-width: 0; font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.dd-date .m span { display: block; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 2px; }
.dd-date .p { font: 700 15px 'Space Grotesk', sans-serif; color: var(--red); white-space: nowrap; }
.dd-date .p i { font: 400 10px 'DM Sans', sans-serif; font-style: normal; color: var(--muted); margin-left: 3px; }
.dd-saver { background: rgba(201,168,76,.15); color: var(--gold); border-radius: 4px; padding: 3px 7px;
  font: 700 9px 'DM Sans', sans-serif; letter-spacing: .1em; }
.dd-strip { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 20px; }
.dd-strip .bars { display: flex; gap: 4px; margin: 10px 0 8px; }
.dd-strip .bars i { flex: 1; height: 26px; border-radius: 3px; background: var(--red); }
.dd-strip .ends { display: flex; justify-content: space-between; font: 500 10px 'DM Sans', sans-serif; color: var(--muted); }
.dd-strip .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.dd-strip .foot a { color: var(--red); text-decoration: none; font-weight: 700; }
.dd-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  font: 400 12px 'DM Sans', sans-serif; color: var(--text); }
@media (max-width: 780px) { .dd-cols { grid-template-columns: 1fr; } .dd-hero { height: 190px; } .dd-hero h2 { font-size: 26px; } }

/* Long city names must not run under the IATA code. */
.dest-card .name .city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dest-card .name .iata { flex: none; }

/* ── Settings, user-facing (section 09) ───────────────────────────────────── */
.acct-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 18px; }
.acct-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 18px; }
.acct-card.danger { border-color: rgba(255,68,56,.28); }
.acct-lab { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.acct-lab.danger { color: var(--red); }
.acct-field { background: var(--hover-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; margin-bottom: 10px; }
.acct-field span { display: block; font: 700 9px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.acct-field b { font: 500 14px 'DM Sans', sans-serif; color: var(--cream); }
.acct-verified { color: var(--success); font: 600 11px 'DM Sans', sans-serif; margin-left: 7px; }
.acct-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.acct-row > span { font: 500 13px 'DM Sans', sans-serif; color: var(--text); }
.acct-note { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.pr-seg-3 button { padding: 6px 12px; }

.acct-notif { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border); }
.acct-notif:last-child { border-bottom: none; padding-bottom: 0; }
.acct-notif .t { font: 500 13px 'DM Sans', sans-serif; color: var(--cream); }
.acct-notif .s { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 3px; }
.acct-notif.soon .t, .acct-notif.soon .s { opacity: .55; }
.acct-switch { flex: none; width: 42px; height: 24px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--border); position: relative; transition: background .18s ease; }
.acct-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .18s ease; }
.acct-switch.on { background: var(--success); }
.acct-switch.on::after { transform: translateX(18px); }
.acct-switch:disabled { cursor: not-allowed; opacity: .4; }

/* Saved holidays. Same row rhythm as the notification list above it so the two
   cards read as one column rather than two designs. */
.acct-hol { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.acct-hol:last-child { border-bottom: none; padding-bottom: 0; }
.acct-hol .i { min-width: 0; }
.acct-hol .t { font: 500 13px 'DM Sans', sans-serif; color: var(--cream); }
.acct-hol .s { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 3px; }
.acct-hol .a { font: 600 10px 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); margin-top: 5px; }
.acct-hol .b { display: flex; gap: 6px; flex: none; }
.acct-hol-btn { background: var(--hover-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 11px; font: 500 11px 'DM Sans', sans-serif; color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s; }
.acct-hol-btn:hover { border-color: var(--muted); }
.acct-hol-btn.danger:hover { border-color: var(--red); color: var(--red); }

/* What a delete takes with it, stated before the button is pressed. */
.hol-del-warn { background: rgba(255,68,56,.08); border: 1px solid rgba(255,68,56,.28);
  border-radius: 10px; padding: 12px 14px; }
.hol-del-warn .t { font: 600 12px 'DM Sans', sans-serif; color: var(--red); }
.hol-del-warn .s { font: 400 11px 'DM Sans', sans-serif; color: var(--text); margin-top: 4px;
  line-height: 1.5; }
.hol-del-warn ul { margin: 9px 0 0; padding-left: 18px; }
.hol-del-warn li { font: 500 12px 'DM Sans', sans-serif; color: var(--cream); margin-top: 3px; }
.hol-del-warn em { font-style: normal; color: var(--muted); font-weight: 400; }
.btn-danger { background: none; border: 1px solid var(--red); color: var(--red);
  border-radius: 999px; padding: 10px 18px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.btn-danger:hover { background: var(--red); color: #fff; }
@media (max-width: 780px) { .acct-cols { grid-template-columns: 1fr; } }

/* ── Mobile (section 11) ───────────────────────────────────────────────────── */
/* The desktop nav is hidden below 768px, so this is the only way around the app
   on a phone. Fixed to the bottom, clear of the iPhone home indicator. */
.pr-tabs { display: none; }
@media (max-width: 768px) {
  .pr-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--card); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .pr-tabs a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 8px; text-decoration: none; color: var(--muted);
    font: 500 10px 'DM Sans', sans-serif; letter-spacing: .01em;
  }
  .pr-tabs a .ic { font-size: 16px; line-height: 1; }
  .pr-tabs a.active { color: var(--red); font-weight: 700; }

  /* Content must not end up underneath the bar. */
  .wrapper { padding-bottom: 84px; }
  .pr-footer { margin-bottom: 76px; }

  /* Top bar: condensed lockup, one headline stat, board scrolls sideways. */
  .prt-row { padding: 10px 16px; gap: 10px; }
  .prt-brand { gap: 9px; }
  .prt-brand img { width: 36px; height: 36px; }
  .prt-word { font-size: 17px; }
  .prt-word .tld { font-size: 10px; }
  /* The stats and the theme toggle both go on a phone. Between them they took
     more than half the bar and squeezed the name and strapline into an
     ellipsis; neither is why anyone opens the site. Theme is still on the
     settings page, and the numbers are on the pages that use them. */
  .prt-stats { display: none; }
  .prt-right .pr-seg.prThemeSeg { display: none; }
  .prt-strap { font-size: 10px; white-space: normal; line-height: 1.25; }

  /* No board on mobile: the bottom tab bar is the navigation here, and two nav
     systems on one phone screen is one too many. The board's markup stays in
     the DOM so its active-state sync keeps working. */
  .prt-board { display: none; }
  .prt-row { border-bottom: 1px solid var(--band-bottom); }
}
/* An SE or a mini is 375px, where the strapline wraps and leaves one word on a
   line of its own. A point smaller keeps it whole. */
@media (max-width: 389px) {
  .prt-strap { font-size: 9px; }
  .prt-word { font-size: 16px; }

  /* Home: the design keeps two destination cards per row at 390px. */
  .prh-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prh-hero { margin: 0 0 14px; }
  .prh-searchrow { gap: 12px; }
  .prd-photo { height: 92px; }
  .prd-city { font-size: 13px; }
  .prd-sub, .prd-cabins { font-size: 11px; }
  .prd-from { font-size: 13px; }
  .prd-body { padding: 9px 10px 11px; }
  .prd-tag { padding: 2px 6px; }

  /* Three stats stacked eats half the screen. Keep them on one line and let
     the strip scroll sideways instead. */
  .prh-stats { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    padding: 11px 16px; max-width: 100%; scrollbar-width: none; }
  .prh-stats::-webkit-scrollbar { display: none; }
  .prh-stat { white-space: nowrap; flex: none; }

  .prh-drawhead { gap: 10px; }
  .prh-drawtitle { font-size: 10px; letter-spacing: .1em; }
  .prh-shuffle { white-space: nowrap; font-size: 11px; }

  .section-title { font-size: 30px; }

  /* Alert rows: the right-hand "N catches live" column squeezed the route into
     three lines. Give the route the full width and drop the meta underneath. */
  .pral-row { flex-wrap: wrap; gap: 10px 12px; padding: 14px 14px; }
  .pral-main { flex: 1 1 100%; order: 2; }
  .pral-icon { order: 1; }
  .pral-right { order: 1; flex: 1; text-align: right; }
  .pral-chev { order: 1; }
  .pral-name { font-size: 15px; }
  .pral-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .pral-actions { display: flex; gap: 8px; }
  .pral-actions .pral-btn { flex: 1; }
  .pral-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pral-tools { flex-wrap: wrap; }
  .dest-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dest-card .name { font-size: 12px; }
  .dest-card .iata { font-size: 9px; }
  .dest-card .from { font-size: 11px; }
  .dest-card .scrim { padding: 20px 10px 9px; }
  .acct-cols, .dd-cols { gap: 14px; }

  /* Modals become sheets rather than floating cards. */
  .prm-scrim { padding: 0; align-items: flex-end; }
  .prm { max-width: 100% !important; border-radius: 18px 18px 0 0; }
  .prm-foot { flex-direction: column-reverse; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0)); }
  .prm-cancel, .prm-go { width: 100%; }
}
@media (max-width: 420px) {
  .prh-grid, .dest-grid { gap: 8px; }
  .pr-tabs a { font-size: 9px; }
}

/* ── Destinations page refinements ────────────────────────────────────────── */
/* Both the subtitle and the hint are .section-sub, which carries a 28px bottom
   margin — twice over, that was the gap above the map. */
#panel-destinations .section-sub { margin-bottom: 0; }
/* The count and the airport are the two things that change when the picker
   changes, so they carry the emphasis and the rest of the sentence does not. */
#destSub b { color: var(--red); font-weight: 600; }
/* Sits inside the map's top-left corner, over the ocean. Absolute so it
   cannot push the map down, and pointer-events off so it never blocks a
   click on a route dot underneath it. */
.dest-maplab { position: absolute; top: 12px; left: 14px; z-index: 2;
  font: 700 13px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream); pointer-events: none; }
/* The count scales with its label but stays quieter than it — the region is the
   heading, the number is a detail of it. */
.dest-region-n { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
  background: var(--hover-bg); color: var(--muted); font: 700 12px 'DM Sans', sans-serif;
  letter-spacing: 0; vertical-align: 2px; }

/* Key moves to the top right and now explains four region colours. */
.dest-map-key { position: absolute; top: 12px; right: 12px; left: auto; bottom: auto;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font: 600 9px 'DM Sans', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.dest-map-key span { display: flex; align-items: center; white-space: nowrap; }
.dest-map-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dest-map-key .hub { color: var(--cream); }
.dest-map-key .hub i { width: 10px; height: 10px; }
.dest-map-key .n { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--border);
  width: 100%; opacity: .8; letter-spacing: .04em; }
@media (max-width: 768px) {
  .dest-map-key { top: 8px; right: 8px; padding: 7px 9px; font-size: 8px; gap: 4px; }
  .dest-map-key i { width: 6px; height: 6px; margin-right: 4px; }
}

/* ══ HOMEPAGE — search hero + budget-dimming mosaic (handoff option 1d) ══════ */

/* The panel already contributes 32px of top padding; the hero adds none of its
   own, which halves the gap under the top bar. */
.prh-hero { font: 400 clamp(30px, 4.2vw, 42px) 'Bebas Neue', sans-serif; color: var(--cream);
  letter-spacing: .02em; line-height: 1; margin: 0 0 16px; text-transform: uppercase; }
.prh-herorow { margin-bottom: 16px; }

/* ── Search card ─────────────────────────────────────────────────────────── */
/* The bottom margin used to come from the note that sat under this card. That
   line is gone, so the card carries its own gap to whatever follows. */
.prs { background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.04); margin-bottom: 34px; }
.prs-row { display: flex; gap: 10px; align-items: center; }
.prs-row2 { margin-top: 12px; flex-wrap: wrap; }

.prs-trip { display: flex; background: var(--hover-bg); border-radius: 999px; padding: 3px; flex: none; }
.prs-trip button { border: none; background: none; cursor: pointer; border-radius: 999px;
  padding: 6px 14px; font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.prs-trip button.on { background: var(--card); color: var(--cream); font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
html:not(.light) .prs-trip button.on { background: #2A2A2A; }

/* FROM and TO hold full airport names, so they need a basis that does not
   truncate them the moment WHEN asks for room. */
.prs-field { flex: 1 1 175px; min-width: 0; background: var(--hover-bg); border-radius: 12px; padding: 8px 14px; }
.prs-lab { display: block; font: 700 8px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.prs-field select { width: 100%; border: none; background: none; padding: 0;
  font: 700 13px 'Space Grotesk', sans-serif; color: var(--cream); cursor: pointer; }
.prs-field select:focus { outline: none; }
.prs-swap { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff;
  border: none; font-size: 15px; cursor: pointer; flex: none; }
.prs-swap:hover { background: var(--red-dark); }
.prs-dates { display: flex; align-items: center; gap: 6px; }
.prs-dates input { border: none; background: none; padding: 0; min-width: 0; width: 100%;
  font: 500 12px 'DM Sans', sans-serif; color: var(--text); }
.prs-dates input:focus { outline: none; }
.prs-dash { color: var(--muted); flex: none; }

.prs-cabins { display: flex; gap: 6px; flex: none; }
/* Cabin identity, matching the calendar chips — a fare reads the same colour
   everywhere in the app, so the homepage must not invent its own red. */
.prs-cabins button { display: flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); background: none; border-radius: 999px; padding: 8px 13px;
  font: 500 11px 'DM Sans', sans-serif; color: var(--muted); transition: all .15s; }
.prs-cabins button .dot { width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none; opacity: .45; }
.prs-cabins button.on { font-weight: 700; }
.prs-cabins button.on .dot { opacity: 1; }
.prs-cabins button.on[data-cabin="economy"]     { background: rgba(232,226,218,.10); color: var(--cab-economy); border-color: rgba(232,226,218,.30); }
html.light .prs-cabins button.on[data-cabin="economy"] { background: rgba(107,101,96,.10); color: #6B6560; border-color: rgba(107,101,96,.30); }
.prs-cabins button.on[data-cabin="premium"]     { background: rgba(74,158,255,.12); color: var(--cab-premium); border-color: rgba(74,158,255,.35); }
.prs-cabins button.on[data-cabin="upper-class"] { background: rgba(255,68,56,.12); color: var(--cab-upper); border-color: rgba(255,68,56,.35); }
.prs-nights { display: flex; align-items: center; gap: 7px; flex: none;
  font: 500 11px 'DM Sans', sans-serif; color: var(--text); }
.prs-nights input { width: 52px; background: var(--hover-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 8px; color: var(--text); font: 500 12px 'DM Sans', sans-serif; }
.prs-budget { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 190px;
  font: 500 11px 'DM Sans', sans-serif; color: var(--text); }
.prs-budget input[type=range] { flex: 1; max-width: 180px; accent-color: var(--red); }
/* The readout is wider now that it spells the number out, so it is pinned
   rather than left to push the slider about as the value changes width. */
.prs-budget .v { color: var(--red); font-weight: 700; white-space: nowrap;
  min-width: 96px; }
.prs-saver { display: flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  font: 500 11px 'DM Sans', sans-serif; color: var(--text); }
.prs-saver input { position: absolute; opacity: 0; width: 0; height: 0; }
.prs-switch { width: 30px; height: 18px; border-radius: 999px; background: var(--border);
  position: relative; display: inline-block; transition: background .18s ease; }
.prs-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .18s ease; }
.prs-saver input:checked + .prs-switch { background: var(--success); }
.prs-saver input:checked + .prs-switch::after { transform: translateX(12px); }
.prs-go { background: var(--red); color: #fff; border: none; border-radius: 999px;
  padding: 11px 26px; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; flex: none; }
.prs-go:hover { background: var(--red-dark); }

/* ── Mosaic ──────────────────────────────────────────────────────────────── */
.prh-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; gap: 10px; }
.prm-tile { position: relative; border-radius: 16px; overflow: hidden; text-decoration: none;
  background: var(--raised); background-size: cover; background-position: center;
  display: block; transition: opacity .25s ease, transform .18s ease; }
.prm-tile:hover { transform: translateY(-2px); }
.prm-tile.feat { grid-column: span 2; grid-row: span 2; }
/* Over budget stays visible but recedes — the point is to see what you cannot
   afford yet, not to hide it. */
.prm-tile.over { opacity: .38; }
.prm-tile.nophoto { background: linear-gradient(135deg, rgba(255,68,56,.20), rgba(201,168,76,.12)); }
/* `display` matters as much as the rest of this rule. The modal scrim shares
   this class name and is `display: none` until it opens; scoping position,
   inset and background to .prm-tile left that inherited, so every tile's
   gradient has been zero-height and the white text has been sitting on bare
   photograph. Anything added here must reset what the modal sets. */
.prm-tile .prm-scrim { display: block; z-index: 0; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(13,13,13,.82) 96%); }
/* The featured tile is twice the height, so its gradient has to start lower to
   cover the same amount of photo behind the text. It also carries four lines
   rather than two, and they sit well above the bottom edge: with the dark only
   arriving at 96% the name and the fares were over bare photo, which a sunset
   beach or a snowfield wins every time. The ramp now reaches usable density by
   the time the text starts and keeps going underneath it. */
.prm-tile.feat .prm-scrim {
  background: linear-gradient(180deg, transparent 38%,
              rgba(13,13,13,.45) 62%, rgba(13,13,13,.9) 100%); }
.prm-tile.nophoto .prm-scrim { background: none; }
.prm-tile .prm-body { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; }
.prm-tile.feat .prm-body { left: 16px; right: 16px; bottom: 14px; }
.prm-name { display: block; font: 400 18px 'Bebas Neue', sans-serif; color: #fff;
  line-height: 1; letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.prm-tile.feat .prm-name { font-size: 26px; }
.prm-tile.nophoto .prm-name { color: var(--cream); }
.prm-sub { display: block; font: 500 10px 'DM Sans', sans-serif; color: rgba(255,255,255,.9);
  margin-top: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.prm-tile.nophoto .prm-sub { color: var(--muted); }
.prm-chip { position: absolute; right: 12px; bottom: 10px; background: #fff; color: #D6001C;
  font: 700 11px 'Space Grotesk', sans-serif; padding: 5px 10px; border-radius: 999px; }
.prm-tile.feat .prm-chip { right: 16px; bottom: 14px; font-size: 12px; padding: 6px 12px; }
.prm-over { position: absolute; right: 12px; bottom: 10px; left: 12px; text-align: right;
  font: 500 10px 'DM Sans', sans-serif; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.prm-tile.nophoto .prm-over { color: var(--muted); }

@media (max-width: 900px) {
  .prs-row { flex-wrap: wrap; }
  .prs-field { flex: 1 1 160px; }
}
@media (max-width: 768px) {
  .prh-mosaic { grid-template-columns: repeat(2, 1fr); }
  .prm-tile.feat { grid-column: span 2; grid-row: span 1; }
  .prs { padding: 14px 14px; }
  /* nowrap is load-bearing. The wider breakpoint sets flex-wrap: wrap, and a
     wrapping *column* flex stretches its items to the flex line's cross-size
     rather than the container's — every field came out 30px wider than the row
     and pushed the page sideways. */
  .prs-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  /* Once the row is a column, flex-basis is a *height*, so the 160px and 330px
     bases set at the wider breakpoint made every field that tall — a From box
     160px deep with a label and a select floating at the top of it. Fields size
     to their content when stacked. */
  .prs-field, .prs-when { flex: 0 0 auto; }
  .prs-trip, .prs-cabins { justify-content: center; flex-wrap: wrap; }
  .prs-trip { max-width: 100%; }
  .prs-trip button { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .prs-field, .prs-dates, .prs-flex { min-width: 0; }
  /* The date input has an intrinsic minimum width in Chrome, so the date, the
     tolerance and the nights box together were wider than the row and pushed
     the page sideways. They wrap on a phone instead of compressing. */
  .prs-dates { flex-wrap: wrap; row-gap: 8px; }
  .prs-dates > input[type="date"] { flex: 1 1 100%; }
  /* The date, the tolerance and the nights box share one line on a phone; the
     tolerance loses its divider so the three read as a row rather than a rule. */
  .prs-flex { border-left: 0; padding-left: 0; }
  .prs-swap { align-self: center; }
  .prs-row2 { flex-direction: column; align-items: stretch; }
  .prs-budget { min-width: 0; }
  .prs-budget input[type=range] { max-width: none; }
  .prs-go { width: 100%; }
}

/* Mosaic tiles carry their own stats now that they are independent of the
   search card above — they are a way in to the destination pages. */
.prm-from { display: block; font: 700 13px 'Space Grotesk', sans-serif; color: #fff;
  margin-top: 5px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.prm-tile.nophoto .prm-from { color: var(--red); text-shadow: none; }
/* The featured tile is four times the area of its neighbours, but everything
   under its name was still inheriting their sizes: 10px dates and 9px cabin
   chips beneath a 26px city. On a bright photo — a sunset beach, a snowfield —
   that supporting line is the first thing to disappear. Sized for the box it is
   actually in, and carrying enough weight and shadow to hold against the
   picture behind it. */
.prm-tile.feat .prm-from { font-size: 21px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.prm-tile.feat .prm-sub  { font-size: 13px; font-weight: 600; margin-top: 5px;
  color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.prm-tile.feat .prm-cabs { gap: 8px; margin-top: 11px; }
.prm-tile.feat .prm-cab  { font-size: 12px; padding: 5px 11px; gap: 6px;
  background: rgba(255,255,255,.22); }
.prm-tile.feat .prm-cab i { width: 7px; height: 7px; }
.prm-cabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.prm-cab { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(3px);
  font: 700 9px 'DM Sans', sans-serif; color: #fff; white-space: nowrap; }
.prm-cab i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.prm-cab[data-cabin="economy"] i     { background: var(--cab-economy); }
.prm-cab[data-cabin="premium"] i     { background: var(--cab-premium); }
.prm-cab[data-cabin="upper-class"] i { background: var(--cab-upper); }
.prm-tile.nophoto .prm-cab { background: var(--hover-bg); color: var(--text); }
.prm-badge { position: absolute; top: 10px; right: 10px; border-radius: 4px; padding: 2px 7px;
  font: 700 9px 'DM Sans', sans-serif; letter-spacing: .1em; }
.prm-badge.rare  { background: var(--gold); color: #1A1A1A; }
.prm-badge.saver { background: rgba(201,168,76,.9); color: #1A1A1A; }
/* The small tiles are 120px tall — only the featured one has room for cabins. */
.prm-tile:not(.feat) .prm-sub { display: none; }
@media (max-width: 768px) { .prm-cabs { display: none; } }

/* Advanced search sits opposite the hero. Deliberately NOT red: the red pill in
   the card below is the primary action, and two reds would compete. Inverting
   the surface makes it the highest-contrast thing on the page without taking
   the primary's colour. */
.prh-herorow { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.prh-herorow .prh-hero { margin-bottom: 0; }
.prh-advbtn { display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--cream); color: var(--bg); border-radius: 999px; padding: 11px 20px;
  font: 700 12px 'DM Sans', sans-serif; letter-spacing: .04em; text-decoration: none;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.prh-advbtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.prh-advbtn .ic { font-size: 18px; line-height: 1; color: var(--red); }
html.light .prh-advbtn { background: #1A1714; color: #F5F0EA; }

/* Nights belongs with the dates it qualifies, not adrift on the row below. */
/* The shared rule sets width:100% on date inputs, which made each one try to
   fill the row and pushed the group onto three lines. Inside WHEN they share
   the space instead. */
.prs-when .prs-dates { flex-wrap: nowrap; gap: 8px; }
.prs-when .prs-dates input[type=date] { width: auto; flex: 1 1 108px; min-width: 96px; }
.prs-when .prs-nights { display: inline-flex; align-items: center; gap: 5px; flex: none;
  margin-left: 2px; font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.prs-when .prs-nights input { width: 42px; background: var(--card); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 6px; color: var(--text); font: 700 12px 'DM Sans', sans-serif; }
.prs-dash { color: var(--muted); flex: none; font-size: 11px; }
/* The label is a sentence now, so it needs room to breathe. */
.prs-when { flex: 1.5 1 330px; }
/* …but only while the row is a row. Stacked, that 330px basis is a height, and
   the field came out 330px deep. Declared here rather than in the breakpoint
   above because this rule is later in the file and would otherwise win. */
@media (max-width: 768px) { .prs-when { flex: 0 0 auto; } }

/* ── Standout fares ───────────────────────────────────────────────────────── */
.prh-hlhead { margin-top: 34px; }
/* One column per cabin: the heading makes every price beneath it unambiguous,
   which a per-card cabin label did not. */
.prh-hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.prhl-col { display: flex; flex-direction: column; gap: 8px; }
.prhl-colhead { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px;
  font: 700 11px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.prhl-colhead i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.prhl-col[data-cabin="economy"]     .prhl-colhead { color: var(--cab-economy); }
html.light .prhl-col[data-cabin="economy"] .prhl-colhead { color: #6B6560; }
.prhl-col[data-cabin="economy"]     .prhl-colhead i { background: var(--cab-economy); }
html.light .prhl-col[data-cabin="economy"] .prhl-colhead i { background: #6B6560; }
.prhl-col[data-cabin="premium"]     .prhl-colhead { color: var(--cab-premium); }
.prhl-col[data-cabin="premium"]     .prhl-colhead i { background: var(--cab-premium); }
.prhl-col[data-cabin="upper-class"] .prhl-colhead { color: var(--cab-upper); }
.prhl-col[data-cabin="upper-class"] .prhl-colhead i { background: var(--cab-upper); }

.prhl { display: flex; align-items: stretch; text-decoration: none; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  transition: transform .18s ease, border-color .18s ease; }
.prhl:hover { transform: translateY(-2px); border-color: var(--red); }
.prhl-shot { width: 58px; flex: none; background: var(--raised) center/cover; }
.prhl-main { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.prhl-route { font: 700 11px 'Space Grotesk', sans-serif; color: var(--muted); letter-spacing: .04em; }
.prhl-route i { font-style: normal; color: var(--red); }
.prhl-city { font: 700 14px 'Space Grotesk', sans-serif; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prhl-when { font: 400 10px 'DM Sans', sans-serif; color: var(--muted); }
.prhl-right { flex: none; padding: 10px 12px; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; text-align: right; max-width: 44%; }
.prhl-pts { font: 700 17px 'Space Grotesk', sans-serif; color: var(--cab-upper); white-space: nowrap; }
/* The figure takes its column's cabin colour — red everywhere read as Upper
   Class even in the Economy column. Same overrides as the column heading. */
.prhl-col[data-cabin="economy"]     .prhl-pts { color: var(--cab-economy); }
.prhl-col[data-cabin="premium"]     .prhl-pts { color: var(--cab-premium); }
.prhl-col[data-cabin="upper-class"] .prhl-pts { color: var(--cab-upper); }
.prhl-pts i { font: 400 9px 'DM Sans', sans-serif; font-style: normal; color: var(--muted); margin-left: 3px; }
/* The reason is the point of the card — it says why this fare is unusual. */
.prhl-why { font: 500 9px 'DM Sans', sans-serif; color: var(--gold); line-height: 1.3; margin-top: 3px; }
/* Scarcity is its own line. Both are display:block so neither can wrap into
   the other and leave a stray word hanging. */
.prhl-why, .prhl-scarce { display: block; }
.prhl-scarce { font: 500 9px 'DM Sans', sans-serif; color: var(--muted); line-height: 1.3; margin-top: 1px; }
@media (max-width: 900px) { .prh-hl { grid-template-columns: 1fr; gap: 18px; } .prh-hlhead { margin-top: 26px; } }

/* ── Usage reports (admin) ─────────────────────────────────────────────────── */
.prr-range { display: inline-flex; gap: 0; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--card); }
.prr-range button { border: 0; background: none; padding: 8px 14px; cursor: pointer;
  font: 600 0.82rem 'DM Sans', sans-serif; color: var(--muted); width: auto; }
.prr-range button + button { border-left: 1px solid var(--border); }
.prr-range button.on { background: var(--red); color: #fff; }
.prr-actions .btn, #prrBody ~ .btn { text-decoration: none; }
#panel-reports a.btn { text-decoration: none; }
.prr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.prr-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.prr-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font: 700 0.86rem 'DM Sans', sans-serif; margin-bottom: 10px; }
.prr-cardhead span { font: 400 0.72rem 'DM Sans', sans-serif; color: var(--muted); text-align: right; }
/* A fixed label column, so every card's bars start and end in the same place
   and lengths can be compared across cards rather than only within one. Sizing
   it to the content made each card pick its own width — "JFK" gave a 276px bar
   and "Opened booking information" a 193px one, side by side.
   180px clears the longest label in use (175px). Anything longer wraps onto a
   second line rather than being cut, which is what the ellipsis used to do. */
.prr-bar { display: grid; grid-template-columns: 180px minmax(40px, 1fr) 44px;
  align-items: center; gap: 10px; padding: 3px 0; }
.prr-blabel { font: 500 0.8rem 'DM Sans', sans-serif; min-width: 0; }
@media (max-width: 1100px) { .prr-bar { grid-template-columns: 140px minmax(40px, 1fr) 44px; } }
@media (max-width: 700px)  { .prr-bar { grid-template-columns: 130px minmax(40px, 1fr) 44px; } }
.prr-btrack { background: var(--mid); border-radius: 4px; height: 8px; overflow: hidden; }
.prr-btrack i { display: block; height: 100%; background: var(--red); border-radius: 4px; }
/* Fixed and right-aligned, so the value column cannot shrink the bar beside it
   when a card's biggest number happens to be "1" rather than "248". */
.prr-bval { font: 700 0.78rem 'Space Grotesk', sans-serif; color: var(--muted); text-align: right; }
.prr-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prr-step { text-align: center; padding: 8px 4px; background: var(--mid); border-radius: 8px; }
.prr-stepv { font: 700 1.15rem 'Space Grotesk', sans-serif; }
.prr-stepl { font: 500 0.72rem 'DM Sans', sans-serif; }
.prr-stepp { font: 400 0.66rem 'DM Sans', sans-serif; color: var(--muted); margin-top: 2px; }
@media (max-width: 700px) { .prr-funnel { grid-template-columns: repeat(2, 1fr); } }

/* ── Points guide ──────────────────────────────────────────────────────────── */

/* Homepage preview — four cards, each a way into one section of the guide. */
.prg-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prg-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.prg-card:hover { border-color: var(--red); transform: translateY(-2px); }
.prg-icon { font-size: 15px; color: var(--red); line-height: 1; }
/* The plane glyph is drawn small inside its em box, so it reads as a size
   smaller than the other three. Sized up to match them optically. */
.prg-icon[data-icon="plane"] { font-size: 21px; }
.prg-h { font: 700 0.95rem 'DM Sans', sans-serif; }
.prg-p { font: 400 0.8rem 'DM Sans', sans-serif; color: var(--muted); line-height: 1.45; flex: 1; }
.prg-more { font: 600 0.72rem 'DM Sans', sans-serif; color: var(--red); letter-spacing: .02em; }
@media (max-width: 900px) { .prg-preview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prg-preview { grid-template-columns: 1fr; } }

/* The guide itself.
   Every section is a two-column spine: the heading sits in a fixed left rail,
   all content in the column beside it. That is what fills the page — capping
   prose at a reading measure while tables and cards ran the full 1232px left
   the right-hand 45% empty and read as broken. Now one column sets the width
   for prose, tables, boxes and callouts alike, and nothing is ragged. */
.prg-hero, .prg-sec {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px 44px;
  align-items: start; }
.prg-hero { margin: 26px 0 0; padding-bottom: 26px; }
/* On a page with a date line under the title, the lede drops to sit level with
   it rather than floating at the top of the column — the two are the same kind
   of secondary text and reading them on different lines looked accidental.
   Only pages that have that line: the guides put their section links here and
   would be pushed down for nothing. */
.prg-hero.dated .prg-herobody { align-self: end; }
/* The lede's own bottom margin is what kept the two baselines 18px apart once
   the column was bottom-aligned. Nothing follows it on these pages. */
.prg-hero.dated .prg-lede { margin-bottom: 0; }
.prg-herohead { grid-column: 1; }
.prg-herobody { grid-column: 2; }
/* Space Grotesk, not DM Sans: only 300/400/500 of DM Sans are loaded, so 700
   there is a synthesised faux-bold that never looks properly heavy. */
.prg-kicker { font: 700 1.05rem 'Space Grotesk', sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.prg-title { font: 700 2rem 'Space Grotesk', sans-serif; margin: 0; line-height: 1.1; }
.prg-lede { font: 400 1.02rem 'DM Sans', sans-serif; color: var(--muted); line-height: 1.6;
  margin: 0 0 18px; }
.prg-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.prg-toc a { font: 600 0.78rem 'DM Sans', sans-serif; text-decoration: none; color: var(--muted);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.prg-toc a:hover { color: var(--red); border-color: var(--red); }

.prg-sec { padding: 28px 0 6px; border-top: 1px solid var(--border); margin-top: 20px;
  scroll-margin-top: 96px; }   /* clears the sticky two-tier top bar */
.prg-sec > h2 { grid-column: 1; font: 700 1.35rem 'Space Grotesk', sans-serif; margin: 0;
  line-height: 1.25; }
.prg-sec > *:not(h2) { grid-column: 2; }
.prg-sec h3 { font: 700 0.98rem 'DM Sans', sans-serif; margin: 0 0 6px; }
/* No max-width anywhere below: the grid column is the measure. */
.prg-sec p { font: 400 0.95rem 'DM Sans', sans-serif; line-height: 1.65; margin: 0 0 12px; }
.prg-sec > p:last-of-type { margin-bottom: 4px; }
.prg-sec a:not(.btn) { color: var(--red); }
.prg-list { margin: 0 0 12px; padding-left: 20px; }
.prg-list li { font: 400 0.95rem 'DM Sans', sans-serif; line-height: 1.65; margin-bottom: 7px; }
.prg-note { font-size: 0.87rem !important; color: var(--muted); }

.prg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.prg-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; }
.prg-box p { margin: 0; font-size: 0.89rem; color: var(--muted); }

/* Wide content scrolls inside its own box rather than the page. The border and
   radius live on the wrapper because border-collapse defeats them on a table. */
.prg-tablewrap { overflow-x: auto; margin: 0 0 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; }
.prg-table { width: 100%; min-width: 520px; border-collapse: collapse; table-layout: fixed; }
.prg-table th, .prg-table td { text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border); font: 400 0.89rem 'DM Sans', sans-serif; }
.prg-table th:first-child, .prg-table td:first-child { width: 38%; color: var(--muted); }
/* Four-column comparison. Three tiers cannot shrink to a phone, so this one
   keeps its width and scrolls — with the benefit column pinned so you can
   always see what the row is about, and a hint above so the scroll is not a
   secret. Tier columns are equal width; without that the last one collapses. */
.prg-t4 { min-width: 660px; }
.prg-t4 th:first-child, .prg-t4 td:first-child { width: 28%;
  position: sticky; left: 0; background: var(--card); z-index: 1; }
.prg-t4 th:not(:first-child), .prg-t4 td:not(:first-child) { width: 24%; }
/* Tier headers take their tier's colour, matching the three cards above —
   all three in red read as if Red were the answer to every row. */
.prg-t4 thead th:first-child  { color: var(--muted); }
.prg-t4 thead th:nth-child(3) { color: #9AA0A6; }
.prg-t4 thead th:nth-child(4) { color: var(--gold); }
.prg-t4 td { vertical-align: top; }
.prg-scrollhint { display: none; font: 500 0.78rem 'DM Sans', sans-serif; color: var(--muted);
  margin: 0 0 6px; }
.prg-table thead th { font-weight: 700; color: var(--red); }
.prg-table tr:last-child td { border-bottom: 0; }

/* A warning, not a decoration — used where getting it wrong costs money. */
.prg-warn { background: var(--raised); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 4px 0 14px;
  font: 400 0.88rem 'DM Sans', sans-serif; line-height: 1.6; }

.prg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 14px; }
.prg-tier { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; border-top: 3px solid var(--border); }
.prg-tier[data-tier="red"]    { border-top-color: var(--red); }
.prg-tier[data-tier="silver"] { border-top-color: #9AA0A6; }
.prg-tier[data-tier="gold"]   { border-top-color: var(--gold); }
.prg-tname { font: 700 1.05rem 'Space Grotesk', sans-serif; }
.prg-treq { font: 600 0.74rem 'DM Sans', sans-serif; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 8px; }
.prg-tier p { margin: 0; font-size: 0.87rem; color: var(--muted); }

.prg-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; margin: 14px 0 6px; }
.prg-ctah { font: 700 1.02rem 'DM Sans', sans-serif; margin-bottom: 2px; }
.prg-cta p { margin: 0; font-size: 0.89rem; color: var(--muted); }
.prg-ctabtns { display: flex; gap: 10px; flex-wrap: wrap; }
.prg-ctabtns .btn { text-decoration: none; }
.prg-stamp { font: 400 0.8rem 'DM Sans', sans-serif; color: var(--muted); line-height: 1.6;
  margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }

/* Below this the rail has nowhere to go, so the spine collapses to one column.
   display:block, not grid-template-columns:1fr — the children carry explicit
   grid-column: 2, which would conjure an implicit second column and leave the
   heading crushed into a 111px rail. */
@media (max-width: 1080px) {
  .prg-hero, .prg-sec { display: block; }
  .prg-sec > h2 { margin-bottom: 12px; }
  .prg-herohead { margin-bottom: 12px; }
}
@media (max-width: 700px) {
  .prg-two, .prg-tiers { grid-template-columns: 1fr; }
  /* Let the table shrink rather than scroll. At phone width the min-width put
     the Reward+ column off-screen with nothing to show it was there, which
     hides half the comparison from anyone who does not think to swipe. */
  .prg-table { min-width: 0; }
  .prg-table th, .prg-table td { padding: 8px 9px; font-size: 0.8rem; }
  .prg-table th:first-child, .prg-table td:first-child { width: 34%; }
  /* The four-column table is the exception — it still scrolls. */
  .prg-t4 { min-width: 620px; }
  .prg-t4 th:first-child, .prg-t4 td:first-child { width: 34%; }
  .prg-scrollhint { display: block; }
  .prg-title { font-size: 1.6rem; }
  .prg-cta { flex-direction: column; align-items: flex-start; }
}

/* ── Signed-out mode ───────────────────────────────────────────────────────── */

.pr-signedout { display: flex; align-items: center; gap: 10px; }
.pr-signedout .pr-seg button { padding: 6px 9px; font-size: 0.82rem; }
.pr-signin, .pr-signup { font: 600 0.8rem 'DM Sans', sans-serif; text-decoration: none;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
.pr-signin { color: var(--muted); }
.pr-signin:hover { color: var(--red); }
.pr-signup { background: var(--red); color: #fff; }
.pr-signup:hover { background: var(--red-dark); }

/* Everything account-only disappears when signed out. One selector list, so
   there is a single place to look when something shows up that should not. */
html.signed-out #panel-alerts .pral-head,
html.signed-out #panel-alerts .pral-list,
html.signed-out #panel-alerts .pral-empty,
html.signed-out #prNav a[data-panel="alerts"] .prt-badge,
html.signed-out #prTabs a[data-panel="alerts"] .prt-badge { display: none; }
html:not(.signed-out) .pr-gate { display: none; }

.pr-gate { max-width: 560px; margin: 48px auto; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 28px; }
.pr-gate-icon { font-size: 26px; color: var(--red); margin-bottom: 10px; }
.pr-gate h2 { font: 700 1.4rem 'Space Grotesk', sans-serif; margin: 0 0 10px; }
.pr-gate p { font: 400 0.93rem 'DM Sans', sans-serif; color: var(--muted); line-height: 1.6;
  margin: 0 0 10px; }
.pr-gate-sub { font-size: 0.85rem !important; }
.pr-gate-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; }
.pr-gate-btns .btn { text-decoration: none; }
/* Links inside a gate had no colour of their own and fell back to the browser
   default, which is invisible on the dark card. */
.pr-gate a:not(.btn) { color: var(--red); font-weight: 600; }
@media (max-width: 560px) { .pr-signup { display: none; } }

/* ── Standalone guide pages ────────────────────────────────────────────────── */
/* These are server-rendered pages, not app panels, so they bring their own
   header and page frame. They reuse every .prg-* content rule above. */

.prg-page { background: var(--bg); color: var(--text); }
.prg-top { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 14px max(24px, calc((100% - 1232px) / 2));
  border-bottom: 1px solid var(--border); background: var(--card); }
.prg-toplogo { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--cream); font: 700 17px 'Space Grotesk', sans-serif; }
.prg-toplogo i { font-style: normal; font-size: 10px; color: var(--brand-tld);
  letter-spacing: .08em; }
.prg-topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prg-topnav a { font: 500 0.85rem 'DM Sans', sans-serif; color: var(--muted);
  text-decoration: none; padding: 8px 12px; border-radius: 8px; }
.prg-topnav a:hover { color: var(--red); }
.prg-topcta { background: var(--red); color: #fff !important; font-weight: 600 !important; }
.prg-topcta:hover { background: var(--red-dark); color: #fff !important; }
.prg-wrap { padding: 0 max(24px, calc((100% - 1232px) / 2)) 8px; }

/* The cluster links, and the hub's index of them. */
.prg-cluster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; }
.prg-cluster .prg-card { gap: 8px; }
.prg-cluster .prg-h { font-size: 0.98rem; line-height: 1.3; }

/* Section links double as the cluster nav on these pages. */
.prg-toc-link { font: 600 0.78rem 'DM Sans', sans-serif; text-decoration: none;
  color: var(--muted); padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); }
.prg-toc-link:hover { color: var(--red); border-color: var(--red); }
.prg-toc-link.on { color: var(--red); border-color: var(--red); background: var(--red-glow); }

.prg-faq { padding: 12px 0; border-top: 1px solid var(--border); }
.prg-faq:first-child { border-top: 0; padding-top: 0; }
.prg-faq h3 { margin-bottom: 4px; }
.prg-faq p { margin: 0; color: var(--muted); }

/* The h1 already says it; this is for screen readers and document outline. */
.prg-sronly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .prg-top { padding: 12px 16px; gap: 10px; }
  .prg-wrap { padding: 0 16px 8px; }
  .prg-topnav a { padding: 6px 9px; font-size: 0.8rem; }
}

/* Session state in the guide header. Mirrors the app's own controls so a
   signed-in reader sees the same thing here as everywhere else. */
.prg-auth { display: flex; align-items: center; gap: 4px; }
.prg-auth[hidden], .prg-user[hidden] { display: none; }
.prg-user { display: flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 5px 12px 5px 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); }
.prg-user:hover { border-color: var(--red); }
.prg-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--red);
  color: #fff; display: grid; place-items: center; flex: none;
  font: 700 11px 'DM Sans', sans-serif; letter-spacing: .02em; }
.prg-username { font: 600 0.82rem 'DM Sans', sans-serif; color: var(--text); }
@media (max-width: 700px) { .prg-username { display: none; } .prg-user { padding: 5px; } }

/* Legal and support pages. Same frame as the guides, but the content is one
   long document rather than a two-column spine, so it spans the content
   column and keeps the section rhythm. */
.prg-updated { font: 400 0.8rem 'DM Sans', sans-serif; color: var(--muted); margin-top: 8px; }
.prg-doc h2 { font: 700 1.15rem 'Space Grotesk', sans-serif; margin: 26px 0 10px; }
.prg-doc h2:first-child { margin-top: 0; }
.prg-doc h3 { font: 700 0.95rem 'DM Sans', sans-serif; margin: 16px 0 6px; }
.prg-doc p, .prg-doc li { font: 400 0.93rem 'DM Sans', sans-serif; line-height: 1.65; }
.prg-doc p { margin: 0 0 12px; }
.prg-doc ul, .prg-doc ol { margin: 0 0 12px; padding-left: 20px; }
.prg-doc li { margin-bottom: 7px; }
.prg-doc a { color: var(--red); }
.prg-doc table { width: 100%; border-collapse: collapse; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.prg-doc th, .prg-doc td { text-align: left; padding: 10px 14px; vertical-align: top;
  border-bottom: 1px solid var(--border); font: 400 0.88rem 'DM Sans', sans-serif; }
.prg-doc thead th { font-weight: 700; color: var(--red); }
.prg-doc tr:last-child td { border-bottom: 0; }
.prg-doc .note { background: var(--raised); border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 16px;
  font: 400 0.9rem 'DM Sans', sans-serif; line-height: 1.6; }
.prg-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em;
  background: var(--mid); padding: 1px 5px; border-radius: 4px; }
/* The rail stays empty and the whole document sits in the content column, so
   the measure matches the rest of the site. The h2 override matters: a guide
   section has one heading, which belongs in the rail, but this is one section
   with many, and leaving them in the rail put each heading on its own grid row
   beside the wrong paragraph. */
.prg-doc > h2 { grid-column: 2; }
@media (max-width: 700px) {
  .prg-doc table, .prg-doc thead, .prg-doc tbody, .prg-doc tr { display: block; }
  .prg-doc th { display: none; }
  .prg-doc td { display: block; border-bottom: 0; padding: 4px 14px; }
  .prg-doc td:first-child { padding-top: 12px; font-weight: 600; color: var(--text); }
  .prg-doc tr { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
}

/* Departure date tolerance, and the multi-city return leg. */
.prs-flex { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 8px;
  border-left: 1px solid var(--border); white-space: nowrap; }
.prs-flex .pm { font: 700 13px 'Space Grotesk', sans-serif; color: var(--muted); }
.prs-flex input { width: 44px; text-align: center; padding: 6px 4px; }
.prs-flex .u { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }

.prs-retrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.prs-retlab { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.prs-retarrow { color: var(--muted); font-size: 14px; }
@media (max-width: 700px) {
  .prs-retrow { gap: 8px; }
  .prs-retarrow { display: none; }
}

/* ── Boarding-pass result cards ────────────────────────────────────────────
   One card per result: [origin stub | legs | destination stub | totals].
   Design: "option 1d", Search Results handoff. */

.prb {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; margin-bottom: 12px;
  /* Cabin colours are scoped to the card. On white the shared tokens are too
     light to carry text, and the handoff specifies darker light-theme values —
     but the rest of the app reads fine as-is, so they are not changed globally. */
  --pb-upper: var(--cab-upper); --pb-premium: var(--cab-premium); --pb-economy: var(--cab-economy);
}
html.light .prb { --pb-upper: #D6001C; --pb-premium: #2B6FBF; --pb-economy: #6B6151; }

/* Photo stubs. No fade overlays — hard edges, per the spec. The tinted panel
   underneath is what shows when there is no photo, which is every UK origin. */
.prb-stub { position: relative; background: var(--mid); min-height: 100%; overflow: hidden; }
.prb-stub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Default is the no-photo state — a readable label on the tinted panel. The
   white-on-photo treatment is added only once an image actually loads, which
   the img reports itself rather than relying on :has(). */
.prb-city { position: absolute; top: 10px; z-index: 1; font: 400 16px 'Bebas Neue', sans-serif;
  letter-spacing: .02em; color: var(--muted); line-height: 1.05; }
.prb-stub.has-photo .prb-city { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.prb-origin .prb-city { left: 10px; right: 10px; }
.prb-dest   .prb-city { left: 10px; right: 10px; text-align: right; }

.prb-legs { display: flex; flex-direction: column; min-width: 0; }
.prb-leg { flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 24px; min-width: 0; }
.prb-leg[data-cabin="upper-class"] { background: color-mix(in srgb, var(--pb-upper) 6%, transparent); }
.prb-leg[data-cabin="premium"]     { background: color-mix(in srgb, var(--pb-premium) 7%, transparent); }
.prb-leg[data-cabin="economy"]     { background: color-mix(in srgb, var(--pb-economy) 7%, transparent); }
.prb-leg[data-cabin="upper-class"] .prb-when b { color: var(--pb-upper); }
.prb-leg[data-cabin="premium"]     .prb-when b { color: var(--pb-premium); }
.prb-leg[data-cabin="economy"]     .prb-when b { color: var(--pb-economy); }

.prb-end { min-width: 0; }
.prb-right { text-align: right; }
.prb-code { font: 400 30px 'Bebas Neue', sans-serif; color: var(--cream); line-height: 1; }
.prb-when { font: 700 14px 'DM Sans', sans-serif; color: var(--text); margin-top: 2px;
  white-space: nowrap; }
.prb-pts  { font: 700 15px 'Space Grotesk', sans-serif; color: var(--text); margin-top: 2px;
  white-space: nowrap; }
.prb-saver { background: rgba(201,168,76,.16); color: var(--gold); margin-left: 6px;
  font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em; padding: 2px 7px;
  border-radius: 999px; vertical-align: 2px; }
html.light .prb-saver { color: #9A7B2E; }

/* The route line always points forward — never mirrored on the return leg. */
.prb-route { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 40px; }
.prb-route i { flex: 1; border-top: 2px dashed var(--border); }
.prb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.prb-dot.hollow { background: none; border: 2px solid var(--red); }
.prb-plane { font-size: 14px; color: var(--red); line-height: 1; }

/* Perforation between the two halves, with notches punched out of the page. */
.prb-perf { position: relative; border-top: 2px dashed var(--border); }
.prb-notch { position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); }
.prb-notch.l { left: -10px;  border-right: 1px solid var(--border); }
.prb-notch.r { right: -10px; border-left: 1px solid var(--border); }

.prb-tot { padding: 14px 20px; border-left: 1px solid var(--border); display: flex;
  flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 10px; }
.prb-total { font: 700 20px 'Space Grotesk', sans-serif; color: var(--text); white-space: nowrap; }
.prb-total span { font-size: 10px; color: var(--muted); margin-left: 4px; }
.prb-nights { font: 700 14px 'DM Sans', sans-serif; color: var(--text); white-space: nowrap; }
.prb-cta { background: none; border: 1px solid var(--border); color: var(--text);
  font: 700 11px 'DM Sans', sans-serif; padding: 8px 16px; border-radius: 999px;
  text-decoration: none; white-space: nowrap; }
.prb-cta:hover { border-color: var(--red); color: var(--red); }

/* The cheapest result is the one worth acting on, so it alone gets the red. */
.prb.best .prb-tot { background: color-mix(in srgb, var(--red) 3%, transparent); }
.prb.best .prb-total { color: var(--red); }
.prb.best .prb-cta { background: var(--red); border-color: var(--red); color: #fff; }
.prb.best .prb-cta:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

@media (max-width: 640px) {
  /* Stubs become a strip across the top, totals a row along the bottom. Each
     cell is placed explicitly: in source order the destination stub follows the
     legs, so auto-placement dropped it below them instead of beside the origin. */
  .prb { grid-template-columns: 1fr 1fr; }
  .prb-stub { min-height: 64px; height: 64px; grid-row: 1; }
  .prb-origin { grid-column: 1; }
  .prb-dest   { grid-column: 2; }
  .prb-legs { grid-column: 1 / -1; grid-row: 2; }
  .prb-leg { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .prb-route { min-width: 100%; order: 3; }
  .prb-code { font-size: 24px; }
  .prb-when, .prb-pts { font-size: 12px; white-space: normal; }
  .prb-tot { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center;
    border-left: 0; border-top: 1px solid var(--border); padding: 12px 14px; }
  .prb-nights { order: 2; color: var(--muted); }
  .prb-cta { order: 3; }
}

/* ── Destination page ──────────────────────────────────────────────────────
   Hero, one-tap alert band, departure airports, standout flights per cabin,
   cheapest-by-month grid. Design: Destination Page, option 1a. */

.dd-hero { position: relative; height: 200px; border-radius: 16px; overflow: hidden;
  background: var(--mid); }
.dd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gradient from the left so the name always has something to sit on, whatever
   the photo happens to be doing. */
.dd-hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,13,.72) 15%, transparent 65%); }
.dd-heroin { position: absolute; left: 32px; bottom: 24px; z-index: 1; }
.dd-heroname { font: 400 52px 'Bebas Neue', sans-serif; color: #fff; line-height: 1; }
.dd-heroname span { font-size: 24px; color: rgba(255,255,255,.75); margin-left: 10px; }
.dd-herosub { font: 500 13px 'DM Sans', sans-serif; color: rgba(255,255,255,.85); margin-top: 2px; }
.dd-heropts { position: absolute; right: 24px; bottom: 20px; z-index: 1;
  background: rgba(255,255,255,.95); color: var(--red);
  font: 700 12px 'Space Grotesk', sans-serif; padding: 9px 16px; border-radius: 999px; }

/* Alert band. It is the one call to action on the page, so it stands apart from
   the cards around it — but through a tint rather than through a near-black slab
   that was the darkest thing on a light page by a distance. Colours are
   band-local so the contents follow the surface. */
.dd-band { margin-top: 20px; background: var(--raised); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  --band-text: var(--cream); --band-mut: var(--muted); --band-line: var(--border); }
html.light .dd-band { background: linear-gradient(180deg,
    color-mix(in srgb, var(--red) 5%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--red) 18%, var(--border)); }
.dd-radar { width: 44px; height: 44px; border-radius: 50%; background: var(--red-glow);
  display: grid; place-items: center; position: relative; overflow: hidden; flex: none; }
.dd-radar i { position: absolute; inset: 0;
  background: conic-gradient(from 0deg, rgba(255,68,56,.6), transparent 75deg);
  animation: ddSweep 3.5s linear infinite; }
@keyframes ddSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dd-radar i { animation: none; } }
.dd-radar span { font: 700 11px 'Space Grotesk', sans-serif; color: var(--red); z-index: 1; }
.dd-bandtext { flex: 1 1 220px; min-width: 0; }
.dd-bandtext .t { font: 700 15px 'Space Grotesk', sans-serif; color: var(--band-text); }
.dd-bandtext .s { font: 400 12px 'DM Sans', sans-serif; color: var(--band-mut); }
.dd-bandcabs { display: flex; gap: 6px; flex: none; }
.dd-bandcabs button { background: none; color: var(--band-mut); font: 500 11px 'DM Sans', sans-serif;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--band-line);
  cursor: pointer; width: auto; }
.dd-bandcabs button.on { background: var(--hover-bg); color: var(--band-text); font-weight: 700;
  border-color: var(--muted); }
/* The band's two pickers. Compact so all three controls and the button still
   sit on one line at desktop width. */
.dd-bandsel { display: flex; align-items: center; gap: 6px; flex: none;
  font: 700 9px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--band-mut); }
.dd-bandsel select { width: auto; background: var(--card); color: var(--band-text);
  border: 1px solid var(--band-line); border-radius: 999px; padding: 7px 10px;
  font: 500 11px 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none;
  cursor: pointer; max-width: 190px; }
.dd-bandgo { background: var(--red); color: #fff; font: 700 12px 'DM Sans', sans-serif;
  padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; flex: none; width: auto; }
.dd-bandgo:hover { background: var(--red-dark); }
.dd-bandgo:disabled { opacity: .6; cursor: default; }
.dd-bandnote { margin-top: 6px; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.dd-bandnote a { color: var(--red); font-weight: 700; text-decoration: none; }

.dd-sec { padding-top: 24px; }
.dd-seclab { font: 700 11px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 10px; }
.dd-sechead { display: flex; justify-content: space-between; align-items: baseline; }
.dd-sechead .dd-seclab { margin-bottom: 10px; }
.dd-sechead a { font: 700 11px 'DM Sans', sans-serif; color: var(--red); text-decoration: none; }

/* Departure airports. The left rule ranks them — the cheapest is red. */
.dd-origins { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dd-origin { display: flex; align-items: stretch; gap: 14px; background: var(--card);
  border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 14px;
  /* No padding: the photo runs to the card's own edges, and the text carries its
     own inset instead. overflow clips the photo to the rounded corner. */
  padding: 0; overflow: hidden; text-decoration: none; color: inherit; min-height: 86px; }
.dd-origin:hover { border-color: var(--red); }
/* Each airport carries its own colour from the origin pack (LHR red, MAN blue,
   EDI orange) rather than one assigned by rank — the colour identifies the
   airport, so it must not change when a cheaper one appears above it. */
.dd-origin { --o: var(--muted); border-left-color: var(--o); }
.dd-origin .c { font: 400 26px 'Bebas Neue', sans-serif; width: 56px; flex: none; color: var(--o); }
/* The photo fills the card's left end, top to bottom. Still beside the text
   rather than behind it — a full-bleed photo under this much small type would
   not stay readable. */
.dd-origin .ph { width: 104px; flex: none; align-self: stretch; background: var(--mid); }
.dd-origin .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-origin.has-photo .c { width: auto; }
/* Vertical centring and the inset the card's padding used to provide. */
.dd-origin .c, .dd-origin .m, .dd-origin .p { align-self: center; padding: 14px 0; }
.dd-origin .c { margin-left: 18px; }
.dd-origin .p { margin-right: 18px; }
/* Without a photo the code needs that inset itself. */
.dd-origin:not(.has-photo) .c { margin-left: 18px; }
.dd-origin .m { flex: 1; min-width: 0; }
.dd-origin .m b { display: block; font: 700 13px 'Space Grotesk', sans-serif; color: var(--text); }
.dd-origin .m i { font: 400 11px 'DM Sans', sans-serif; font-style: normal; color: var(--muted); }
.dd-origin .p { text-align: right; flex: none; }
.dd-origin .p b { display: block; font: 700 14px 'Space Grotesk', sans-serif; color: var(--text); }
.dd-origin[data-rank="0"] .p b { color: var(--red); }
.dd-origin .p i { font: 400 10px 'DM Sans', sans-serif; font-style: normal; color: var(--muted); }

.dd-cabgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dd-cabcard { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; border-top: 4px solid var(--border); }
.dd-cabcard[data-cabin="economy"]     { border-top-color: var(--cab-economy); }
.dd-cabcard[data-cabin="premium"]     { border-top-color: var(--cab-premium); }
.dd-cabcard[data-cabin="upper-class"] { border-top-color: var(--cab-upper); }
.dd-cabcard .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dd-cabcard .h > span:first-child { font: 700 12px 'DM Sans', sans-serif; letter-spacing: .04em; }
.dd-cabcard[data-cabin="economy"]     .h > span:first-child { color: var(--cab-economy); }
.dd-cabcard[data-cabin="premium"]     .h > span:first-child { color: var(--cab-premium); }
.dd-cabcard[data-cabin="upper-class"] .h > span:first-child { color: var(--cab-upper); }
.dd-cabcard .saver, .dd-cabcard .rare { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.dd-cabcard .saver { background: rgba(201,168,76,.16); color: var(--gold); }
.dd-cabcard .rare  { background: rgba(214,0,28,.08); color: var(--red); }
.dd-cabcard .p { font: 700 24px 'Space Grotesk', sans-serif; color: var(--text); margin: 8px 0 2px; }
.dd-cabcard .p span { font-size: 11px; color: var(--muted); margin-left: 4px; }
.dd-cabcard .w { font: 500 12px 'DM Sans', sans-serif; color: var(--text); }
.dd-cabcard .x { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 6px; }
.dd-cabcard .b { margin-top: 12px; width: 100%; border: 1px solid var(--border);
  background: none; color: var(--text); font: 700 11px 'DM Sans', sans-serif;
  padding: 7px 0; border-radius: 999px; cursor: pointer; }
.dd-cabcard .b:hover { border-color: var(--red); color: var(--red); }

.dd-months { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; }
.dd-mrow { display: grid; grid-template-columns: 110px repeat(var(--cols), 1fr);
  align-items: center; border-bottom: 1px solid var(--border); }
.dd-mrow:last-child { border-bottom: 0; }
.dd-mrow.head { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .12em; color: var(--muted); }
.dd-mrow.head > div { padding: 10px 4px; text-align: center; }
.dd-mrow.head .sm { display: none; }
.dd-mrow .lab { padding: 12px 18px; font: 700 11px 'DM Sans', sans-serif; }
.dd-mrow[data-cabin="economy"]     .lab { color: var(--cab-economy); }
.dd-mrow[data-cabin="premium"]     .lab { color: var(--cab-premium); }
.dd-mrow[data-cabin="upper-class"] .lab { color: var(--cab-upper); }
.dd-mrow .cell { padding: 12px 0; text-align: center; cursor: pointer; }
.dd-mrow .cell:hover { background: var(--hover-bg); }
.dd-mrow .cell b { font: 700 14px 'Space Grotesk', sans-serif; color: var(--text); }
.dd-mrow .cell i { font: 400 10px 'DM Sans', sans-serif; font-style: normal; color: var(--muted);
  margin-left: 4px; }
.dd-mrow .cell.empty { color: var(--muted); font: 400 11px 'DM Sans', sans-serif; cursor: default; }
.dd-mrow[data-cabin="economy"]     .cell.best { background: color-mix(in srgb, var(--cab-economy) 12%, transparent); }
.dd-mrow[data-cabin="premium"]     .cell.best { background: color-mix(in srgb, var(--cab-premium) 10%, transparent); }
.dd-mrow[data-cabin="upper-class"] .cell.best { background: color-mix(in srgb, var(--cab-upper) 9%, transparent); }
.dd-mfoot { margin-top: 8px; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }

@media (max-width: 820px) {
  .dd-origins, .dd-cabgrid { grid-template-columns: 1fr; }
  /* A 104px photo on a phone leaves the detail line wrapping to five lines. The
     photo still fills its end of the card, just less of it. */
  .dd-origin .ph { width: 72px; }
  .dd-origin .c { margin-left: 12px; width: 44px; font-size: 22px; }
  .dd-origin .p { margin-right: 12px; }
  .dd-origin .m i { font-size: 10px; }
  .dd-heroname { font-size: 38px; }
  .dd-heroin { left: 18px; bottom: 18px; }
  .dd-heropts { right: 14px; bottom: 14px; }
  .dd-band { gap: 12px; }
  .dd-bandcabs, .dd-bandsel, .dd-bandgo { flex: 1 1 100%; }
  .dd-bandsel select { flex: 1; max-width: none; }
  .dd-bandcabs button { flex: 1; }
  .dd-bandgo { width: 100%; }
  /* Six full month names do not fit a phone — they ran together into one
     unbroken string. The short form ships alongside and swaps in here. */
  .dd-mrow { grid-template-columns: 62px repeat(var(--cols), 1fr); }
  .dd-mrow.head .lg { display: none; }
  .dd-mrow.head .sm { display: inline; }
  .dd-mrow.head > div { padding: 8px 2px; font-size: 9px; letter-spacing: .04em; }
  .dd-mrow .lab { padding: 10px 8px; font-size: 8px; letter-spacing: .04em; }
  .dd-mrow .cell b { font-size: 11px; }
  .dd-mrow .cell i { display: block; margin: 2px 0 0; font-size: 9px; }
}

/* Tier badge and the alert quota line. */
.pr-badge-tier { margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--red-glow); color: var(--red); font: 700 8px 'DM Sans', sans-serif;
  letter-spacing: .1em; vertical-align: 1px; }
.pral-quota { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 4px; }
.pral-quota .full { color: var(--red); font-weight: 700; }
.pral-quota b { color: var(--text); font-weight: 600; }
/* A watch switched off by a plan limit, which is not the same as one the user
   paused — it needs to look like something to act on. */
.pral-icon.over { background: var(--red-glow); color: var(--red); }

/* ── Search hub ────────────────────────────────────────────────────────────── */

.shb-head { margin: 14px 0 4px; }
.shb-title { font: 400 36px 'Bebas Neue', sans-serif; color: var(--cream); line-height: 1; margin: 0; }
.shb-sub { font: 400 0.85rem 'DM Sans', sans-serif; color: var(--muted); margin: 6px 0 0; }
.shb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.shb-card { position: relative; height: 300px; border-radius: 18px; overflow: hidden;
  display: block; text-decoration: none; background: var(--mid); }
/* Photo, then a gradient dark at both ends so the kicker at the top and the
   buttons at the bottom both have something to sit on. */
.shb-card::before { content: ''; position: absolute; inset: 0; background-size: cover;
  background-position: center; }
/* The three photographs named in the Search Page handoff, self-hosted as WebP
   rather than pulled from the Unsplash CDN. */
.shb-card[data-card="holiday"]::before     { background-image: url('/brand/search/holiday.webp'); }
.shb-card[data-card="destination"]::before { background-image: url('/brand/search/destination.webp'); }
.shb-card[data-card="points"]::before      { background-image: url('/brand/search/points.webp'); }
.shb-card::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.45), transparent 30%,
              transparent 42%, rgba(13,13,13,.92)); }
.shb-card > * { position: relative; z-index: 1; }
.shb-kick { position: absolute; left: 18px; top: 16px; font: 700 12px 'DM Sans', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.shb-name { position: absolute; left: 18px; top: 34px; font: 400 34px 'Bebas Neue', sans-serif;
  color: #fff; line-height: 1; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.shb-btns { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex;
  flex-direction: column; gap: 5px; }
.shb-go { display: block; text-align: center; font: 700 14px 'DM Sans', sans-serif;
  padding: 10px 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.shb-go.primary { background: rgba(255,255,255,.92); color: #1A1714; border-color: transparent; }
.shb-go.red { background: var(--red); color: #fff; border-color: transparent; }
.shb-card:hover .shb-go.primary { background: #fff; }

.shb-direct { margin: 16px 0 26px; background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 20px; }
/* Sized up with the card headings above it — this is the section's own title
   now rather than a quiet label introducing an afterthought. */
.shb-dlab { font: 700 13px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 12px; }
.shb-mini { margin-bottom: 0; box-shadow: none; border: 0; padding: 0; background: none; }

/* ── Holiday search ────────────────────────────────────────────────────────── */

/* Shares the destination search's header shape and its .pds-back link, so the
   two search flows cannot drift apart. No top margin — the panel's own padding
   is the whole gap. */
.hol-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 14px; }
/* On the destination search the link sits above the mode toggle, so it lands at
   the top of the header. There is no toggle here, and flex-end alone would drop
   the lone link to the bottom — level with the subtitle rather than the title. */
.hol-head .pds-back { align-self: flex-start; }
.hol-title { font: 400 34px 'Bebas Neue', sans-serif; color: var(--cream); line-height: 1; margin: 0; }
.hol-sub { font: 400 0.8rem 'DM Sans', sans-serif; color: var(--muted); margin: 4px 0 0; }
.hol-step { font: 700 10px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 20px 0 10px; }

.hol-dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hol-datecard { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 13px 15px; cursor: pointer; }
.hol-datecard:hover { border-color: var(--red); }
/* The selected holiday is what section 2 searches, so it is worth a ring rather
   than a tint — it has to be obvious which one the button below applies to. */
.hol-datecard.on { border: 2px solid var(--red); padding: 12px 14px;
  box-shadow: 0 3px 12px var(--red-glow); }
.hol-datecard .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hol-datecard .n { font: 700 12px 'Space Grotesk', sans-serif; color: var(--text); }
.hol-datecard.on .n { color: var(--red); }
.hol-datecard .sel { font: 700 9px 'DM Sans', sans-serif; color: var(--red); }
.hol-datecard .d { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 4px;
  line-height: 1.5; }
.hol-datecard.on .d { color: var(--text); }
.hol-datecard .d b { color: var(--red); }
.hol-datecard .e { background: none; border: 0; padding: 0; margin-top: 5px; width: auto;
  font: 400 10px 'DM Sans', sans-serif; color: var(--muted); cursor: pointer; }
.hol-datecard .e:hover { color: var(--red); }
.hol-add { border: 1.5px dashed var(--border); border-radius: 14px; padding: 13px 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; cursor: pointer; width: 100%; }
.hol-add:hover { border-color: var(--red); }
.hol-add .p { font: 700 16px 'DM Sans', sans-serif; color: var(--red); }
.hol-add .t { font: 700 11px 'DM Sans', sans-serif; color: var(--muted); }
.hol-add .s { font: 400 9px 'DM Sans', sans-serif; color: var(--muted); text-align: center; }

.hol-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 16px 18px; }
.hol-row { display: flex; gap: 10px; align-items: center; }
.hol-row2 { margin-top: 12px; flex-wrap: wrap; }
.hol-field { background: var(--hover-bg); border-radius: 12px; padding: 8px 14px; min-width: 0; }
.hol-from { flex: none; }
.hol-dests { flex: 1; }
.hol-lab { display: block; font: 700 8px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.hol-field select { width: auto; border: 0; background: none; padding: 0;
  font: 700 13px 'Space Grotesk', sans-serif; color: var(--text); cursor: pointer; }
.hol-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; align-items: center; }
.hol-chip { background: var(--cream); color: var(--bg); border: 0; width: auto;
  font: 700 10px 'DM Sans', sans-serif; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.hol-chipadd { width: auto; border: 1px dashed var(--muted); background: none; color: var(--muted);
  font: 500 10px 'DM Sans', sans-serif; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.hol-any { font: 400 10px 'DM Sans', sans-serif; color: var(--red); }
.hol-cabins { display: flex; gap: 6px; flex: none; }
.hol-cabins button { display: flex; align-items: center; gap: 6px; width: auto; cursor: pointer;
  background: none; color: var(--muted); font: 500 11px 'DM Sans', sans-serif;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); }
.hol-cabins button .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hol-cabins button.on[data-c="economy"]     { color: var(--cab-economy); border-color: var(--cab-economy); font-weight: 700; }
.hol-cabins button.on[data-c="premium"]     { color: var(--cab-premium); border-color: var(--cab-premium); font-weight: 700; }
.hol-cabins button.on[data-c="upper-class"] { color: var(--cab-upper);   border-color: var(--cab-upper);   font-weight: 700; }
.hol-max { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px;
  font: 500 11px 'DM Sans', sans-serif; color: var(--text); }
.hol-max input[type=range] { flex: 1; max-width: 160px; accent-color: var(--red); }
.hol-max span { color: var(--red); font-weight: 700; white-space: nowrap; min-width: 96px; }
.hol-saver { display: flex; align-items: center; gap: 7px; flex: none;
  font: 500 11px 'DM Sans', sans-serif; color: var(--text); cursor: pointer; }
.hol-saver input { display: none; }
.hol-go { background: var(--red); color: #fff; border: 0; width: auto; cursor: pointer;
  font: 700 13px 'DM Sans', sans-serif; padding: 11px 26px; border-radius: 999px; flex: none; }
.hol-go:hover { background: var(--red-dark); }
.hol-note { margin: 8px 0 0; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }

/* Results */
.hol-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 10px; }
.hol-summary span { border-radius: 999px; padding: 8px 15px; font: 500 11px 'DM Sans', sans-serif;
  background: var(--card); border: 1px solid var(--border); color: var(--text); }
.hol-summary .s1 { background: var(--cream); color: var(--bg); font-weight: 700; border-color: transparent; }
.hol-count { font: 400 26px 'Bebas Neue', sans-serif; color: var(--cream); margin: 0 0 10px; }
.hol-group { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; margin-bottom: 12px; }
.hol-ghead { display: flex; align-items: center; gap: 14px; padding-right: 18px; }
.hol-ghead img, .hol-ghead .noimg { width: 120px; height: 64px; object-fit: cover; flex: none;
  background: var(--mid); display: block; }
.hol-ghead .c { flex: 1; font: 400 20px 'Bebas Neue', sans-serif; color: var(--cream); }
.hol-ghead .c i { font-style: normal; color: var(--muted); font-size: 15px; }
.hol-ghead .f { font: 700 14px 'Space Grotesk', sans-serif; color: var(--red); }
.hol-r { display: grid; grid-template-columns: 40px 180px 1fr 1fr 56px 92px 76px; gap: 12px;
  align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); }
.hol-r.head { padding: 5px 18px; background: var(--hover-bg); font: 700 8px 'DM Sans', sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hol-r.head span:nth-child(6) { text-align: right; }
.hol-r.best { background: color-mix(in srgb, var(--red) 3%, transparent); }
.hol-r .b { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em; text-align: center; }
.hol-r.best .b { background: var(--red); color: #fff; border-radius: 999px; padding: 3px 0; }
.hol-r .d { font: 700 12px 'Space Grotesk', sans-serif; color: var(--text); }
.hol-r .l { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.hol-r .l .c[data-cabin="economy"]     { color: var(--cab-economy); }
.hol-r .l .c[data-cabin="premium"]     { color: var(--cab-premium); }
.hol-r .l .c[data-cabin="upper-class"] { color: var(--cab-upper); }
.hol-r .l .p { color: var(--text); }
.hol-r .l .sv { background: rgba(201,168,76,.16); color: var(--gold); margin-left: 5px;
  font: 700 7px 'DM Sans', sans-serif; letter-spacing: .1em; padding: 1px 5px; border-radius: 999px; }
.hol-r .n { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.hol-r .t { font: 700 14px 'Space Grotesk', sans-serif; color: var(--text); text-align: right; }
.hol-r.best .t { color: var(--red); }
.hol-r .k { font: 700 10px 'DM Sans', sans-serif; padding: 7px 0; border-radius: 999px;
  text-align: center; text-decoration: none; border: 1px solid var(--border); color: var(--text); }
.hol-r.best .k { background: var(--red); border-color: var(--red); color: #fff; }
.hol-showmore { width: 100%; border: 0; border-top: 1px solid var(--border); background: none;
  padding: 10px; cursor: pointer; font: 700 11px 'DM Sans', sans-serif; color: var(--red); }
.hol-none { background: var(--card); border: 1px dashed var(--border); border-radius: 16px;
  padding: 12px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hol-none .n { font: 400 18px 'Bebas Neue', sans-serif; color: var(--muted); white-space: nowrap; }
.hol-none .m { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); flex: 1; }
.hol-alertband { margin: 12px 0 24px; background: var(--raised); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font: 500 12px 'DM Sans', sans-serif; color: var(--text); }
.hol-alertband button { background: var(--red); color: #fff; border: 0; width: auto; cursor: pointer;
  font: 700 11px 'DM Sans', sans-serif; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }

.hol-presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.hol-presets .l { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.hol-presets button { width: auto; background: var(--hover-bg); border: 1px solid var(--border);
  color: var(--text); font: 500 11px 'DM Sans', sans-serif; padding: 5px 11px; border-radius: 999px;
  cursor: pointer; }
.hol-presets button:hover { border-color: var(--red); color: var(--red); }
.hol-editrow { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

@media (max-width: 900px) {
  .shb-cards { grid-template-columns: 1fr; }
  .shb-card { height: 210px; }
  .hol-dates { grid-template-columns: 1fr 1fr; }
  .hol-r { grid-template-columns: 34px 1fr 1fr; row-gap: 6px; }
  .hol-r.head { display: none; }
  .hol-r .l, .hol-r .n, .hol-r .t, .hol-r .k { grid-column: span 1; }
  .hol-row { flex-direction: column; align-items: stretch; }
  .hol-field { width: 100%; }
  .hol-go { width: 100%; }
}
@media (max-width: 560px) { .hol-dates { grid-template-columns: 1fr; } }

/* ── Destination search ────────────────────────────────────────────────────── */

/* A bare `label {}` rule from the original stylesheet uppercases and letter-
   spaces every label on the site. This panel uses <label> as a form field
   wrapper, not as a caption, so it opts out once here rather than fighting the
   rule property by property in every class below. */
#panel-destsearch label { font-size: inherit; font-weight: inherit; letter-spacing: normal;
  text-transform: none; color: inherit; }

/* No top margin: the panel already brings 32px of padding, and adding to it
   pushed the title further from the nav than any other page's. */
.pds-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 14px; }
.pds-title { font: 400 34px 'Bebas Neue', sans-serif; color: var(--cream); line-height: 1;
  letter-spacing: .02em; }
.pds-sub { font: 400 12.5px 'DM Sans', sans-serif; color: var(--muted); margin-top: 3px; }
.pds-headright { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.pds-back { font: 700 11.5px 'DM Sans', sans-serif; color: var(--red); text-decoration: none; }
.pds-back:hover { text-decoration: underline; }

.pds-seg { display: flex; background: var(--hover-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; }
.pds-seg button { border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 7px 16px; font: 500 11.5px 'DM Sans', sans-serif; color: var(--muted); }
.pds-seg button.on { background: var(--card); color: var(--cream); font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* Not disabled — you can still open the mode and see what it does. A named
   plan says more than a padlock, and unlike an emoji it always has a glyph. */
.pds-seg button.locked::after { content: 'PLUS'; margin-left: 6px; padding: 1px 5px;
  border-radius: 999px; background: rgba(255,68,56,.14); color: var(--red);
  font: 700 8px 'DM Sans', sans-serif; letter-spacing: .08em; vertical-align: 1px; }

.pds-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 16px 18px; }

/* The route row. TO is wider and ringed — it is why you are on this page. */
.pds-route { display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap; }
.pds-field { flex: 1; min-width: 0; background: var(--hover-bg); border: 1px solid transparent;
  border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; }
.pds-field.anchor { flex: 2; background: rgba(255,68,56,.05); border-color: rgba(255,68,56,.32); }
html.light .pds-field.anchor { background: rgba(214,0,28,.04); border-color: rgba(214,0,28,.3); }
.pds-lab { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); }
.pds-field.anchor > .pds-lab { color: var(--red); }
.pds-field select, .pds-field input[type="date"] {
  width: 100%; min-width: 0; border: 0; background: none; padding: 0; color: var(--cream);
  font: 700 13px 'Space Grotesk', sans-serif; cursor: pointer; }
.pds-field.anchor select { font-size: 15px; }
.pds-field input[type="date"] { font: 500 13px 'DM Sans', sans-serif; }
.pds-field select:focus, .pds-field input:focus { outline: none; }

.pds-swap { flex: none; align-self: center; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--red); color: #fff; font-size: 15px; cursor: pointer;
  display: grid; place-items: center; }

.pds-daterow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pds-flex, .pds-nights { display: flex; align-items: center; gap: 3px; flex: none;
  font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.pds-flex .pm { color: var(--muted); }
.pds-flex input, .pds-nights input { width: 34px; border: 0; background: none; padding: 0;
  color: var(--red); font: 700 12px 'DM Sans', sans-serif; text-align: center; }
.pds-nights input { color: var(--cream); }
.pds-flex input:focus, .pds-nights input:focus { outline: none; }

/* Cabin per direction. */
.pds-cabrow { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.pds-cabrow > .pds-lab { width: 120px; flex: none; }
.pds-cabs { display: flex; gap: 5px; flex-wrap: wrap; }
.pds-cabs button { display: flex; align-items: center; gap: 5px; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 11px;
  font: 500 10.5px 'DM Sans', sans-serif; color: var(--muted); }
.pds-cabs button .dot { width: 6px; height: 6px; border-radius: 50%; opacity: .35; }
.pds-cabs button[data-cabin="economy"]     .dot { background: var(--cab-economy); }
.pds-cabs button[data-cabin="premium"]     .dot { background: var(--cab-premium); }
.pds-cabs button[data-cabin="upper-class"] .dot { background: var(--cab-upper); }
.pds-cabs button.on { font-weight: 700; }
.pds-cabs button.on .dot { opacity: 1; }
.pds-cabs button.on[data-cabin="economy"]     { background: rgba(232,226,218,.10); color: var(--cab-economy); border-color: rgba(232,226,218,.30); }
html.light .pds-cabs button.on[data-cabin="economy"] { background: rgba(107,101,96,.10); color: #6B6560; border-color: rgba(107,101,96,.30); }
.pds-cabs button.on[data-cabin="premium"]     { background: rgba(74,158,255,.12); color: var(--cab-premium); border-color: rgba(74,158,255,.35); }
.pds-cabs button.on[data-cabin="upper-class"] { background: rgba(255,68,56,.12); color: var(--cab-upper); border-color: rgba(255,68,56,.35); }
.pds-any { font: 400 10.5px 'DM Sans', sans-serif; color: var(--muted); }

/* Multi-city leg builder. */
.pds-legheads, .pds-leg { display: grid; grid-template-columns: 28px 1fr 1fr 168px 250px;
  gap: 10px; align-items: center; }
.pds-legheads { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 6px; }
.pds-leg { padding: 5px 0; }
.pds-legno { width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff;
  font: 700 11px 'DM Sans', sans-serif; display: grid; place-items: center; }
.pds-cell { min-width: 0; background: var(--hover-bg); border: 1px solid transparent;
  border-radius: 10px; padding: 7px 12px; display: flex; flex-direction: column; gap: 2px; }
.pds-cell.anchor { background: rgba(255,68,56,.05); border-color: rgba(255,68,56,.32); }
html.light .pds-cell.anchor { background: rgba(214,0,28,.04); border-color: rgba(214,0,28,.3); }
.pds-cell select, .pds-cell input[type="date"] { width: 100%; min-width: 0; border: 0;
  background: none; padding: 0; color: var(--cream); font: 700 12px 'Space Grotesk', sans-serif;
  cursor: pointer; }
.pds-cell input[type="date"] { font: 500 12px 'DM Sans', sans-serif; }
.pds-cell select:focus, .pds-cell input:focus { outline: none; }
/* The cabin cell is chips, not a field — it should not look like an input. */
.pds-leg .pds-cell:last-child { background: none; border: 0; padding: 0; }
.pds-mob { display: none; }                     /* column headers do this job on desktop */
.pds-legnote { background: rgba(255,68,56,.05); border-radius: 10px; padding: 9px 13px;
  margin-top: 10px; font: 400 11px/1.5 'DM Sans', sans-serif; color: var(--muted); }
html.light .pds-legnote { background: rgba(214,0,28,.04); }
.pds-legnote b { color: var(--cream); font-weight: 700; }

/* Shared footer. */
.pds-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.pds-budget { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 240px;
  font: 500 11.5px 'DM Sans', sans-serif; color: var(--cream); }
.pds-budget input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--red); }
.pds-budget .v { color: var(--red); font-weight: 700; white-space: nowrap; }
.pds-saver { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: none;
  font: 500 11.5px 'DM Sans', sans-serif; color: var(--cream); }
.pds-saver input { display: none; }
.pds-go { flex: none; background: var(--red); color: #fff; border: 0; border-radius: 999px;
  padding: 11px 28px; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.pds-go:hover { filter: brightness(1.08); }

/* The destination strip. */
.pds-strip { position: relative; height: 88px; border-radius: 14px; overflow: hidden;
  margin-top: 12px; background: var(--raised) center/cover; display: flex; align-items: center; }
.pds-strip::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,13,.78) 25%, transparent 70%); }
.pds-strip.nophoto::before { background: linear-gradient(90deg, rgba(255,68,56,.18), transparent 70%); }
.pds-strip-in { position: relative; padding-left: 16px; }
.pds-strip-name { font: 400 20px 'Bebas Neue', sans-serif; color: #fff; line-height: 1;
  letter-spacing: .03em; }
.pds-strip-name span { font: 500 11px ui-monospace, monospace; color: rgba(255,255,255,.65);
  letter-spacing: 0; margin-left: 4px; }
.pds-strip-facts { font: 500 10.5px 'DM Sans', sans-serif; color: rgba(255,255,255,.82);
  margin-top: 3px; }
.pds-strip-go { position: absolute; right: 12px; bottom: 10px; background: rgba(255,255,255,.95);
  color: #D6001C; font: 700 10px 'DM Sans', sans-serif; padding: 6px 12px; border-radius: 999px;
  text-decoration: none; }

/* Results. */
.pds-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }
.pds-chip { background: var(--card); border: 1px solid var(--border); color: var(--cream);
  font: 500 11px 'DM Sans', sans-serif; padding: 8px 15px; border-radius: 999px; }
.pds-chip.route { background: var(--cream); color: var(--bg, #0D0D0D); font-weight: 700; border-color: transparent; }
html.light .pds-chip.route { background: #1A1714; color: #F5F0EA; }
.pds-chip.saver { color: var(--success); font-weight: 700; }
.pds-chip.change { margin-left: auto; border-color: rgba(255,68,56,.35); color: var(--red);
  font-weight: 700; cursor: pointer; }
.pds-chip b.cab-economy     { color: var(--cab-economy); }
.pds-chip b.cab-premium     { color: var(--cab-premium); }
.pds-chip b.cab-upper-class { color: var(--cab-upper); }
.pds-found { font: 400 26px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .03em;
  margin: 16px 0 10px; }

.pds-table { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; margin-top: 10px; }
.pds-thead, .pds-trow { display: grid; grid-template-columns: 175px 1fr 1fr 62px 100px 78px;
  gap: 12px; align-items: center; padding: 10px 18px; }
.pds-thead { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--hover-bg); padding: 8px 18px; }
.pds-trow { border-top: 1px solid var(--border); }
.pds-trow .d { font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); }
.pds-trow .l { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.pds-trow .l .pts { color: var(--cream); }
.pds-trow .l b.cab-economy     { color: var(--cab-economy); }
.pds-trow .l b.cab-premium     { color: var(--cab-premium); }
.pds-trow .l b.cab-upper-class { color: var(--cab-upper); }
.pds-trow .n { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.pds-trow .t { font: 700 14px 'Space Grotesk', sans-serif; color: var(--cream); text-align: right; }
.pds-trow .b { border: 1px solid var(--border); border-radius: 999px; padding: 7px 0;
  text-align: center; font: 700 10px 'DM Sans', sans-serif; color: var(--cream);
  text-decoration: none; }
.pds-trow .b:hover { border-color: var(--red); color: var(--red); }
.pds-thead .t { text-align: right; }

.pds-alertbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--raised); border-radius: 14px; padding: 13px 18px; margin: 14px 0 24px; }
html.light .pds-alertbar { background: #1A1714; }
.pds-alertbar span { font: 500 12px 'DM Sans', sans-serif; color: #F5F0EA; }
.pds-alertbar button { flex: none; background: var(--red); color: #fff; border: 0;
  border-radius: 999px; padding: 8px 16px; font: 700 11px 'DM Sans', sans-serif; cursor: pointer; }

@media (max-width: 900px) {
  .pds-route { flex-wrap: wrap; }
  .pds-field, .pds-field.anchor { flex: 1 1 100%; }
  .pds-swap { align-self: flex-start; }
  .pds-cabrow { flex-wrap: wrap; }
  .pds-cabrow > .pds-lab { width: 100%; }
  /* The leg grid becomes a stack of labelled fields — five columns cannot
     survive a phone, and the column headers go with them. */
  .pds-legheads { display: none; }
  .pds-leg { grid-template-columns: 1fr; gap: 8px; padding: 12px 0;
    border-bottom: 1px solid var(--border); }
  .pds-leg .pds-cell:last-child { padding-top: 2px; }
  .pds-mob { display: block; }
  .pds-legno { margin-bottom: 2px; }
  .pds-thead { display: none; }
  .pds-trow { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .pds-trow .d { grid-column: 1; }
  .pds-trow .t { grid-column: 2; grid-row: 1; }
  .pds-trow .l { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; }
  .pds-trow .l::before { content: attr(data-leg); flex: none; min-width: 34px;
    font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); }
  .pds-trow .n::before { content: 'Nights: '; }
  .pds-trow .b { grid-column: 1 / -1; }
  .pds-alertbar { flex-direction: column; align-items: stretch; text-align: center; }
  .pds-chip.change { margin-left: 0; }
}

/* ── Points balance ────────────────────────────────────────────────────────── */

/* Same reason as the destination search: <label> is a field wrapper here, not a
   caption, so this panel opts out of the stylesheet's bare `label {}` rule. */
#panel-pointsearch label { font-size: inherit; font-weight: inherit; letter-spacing: normal;
  text-transform: none; color: inherit; }

.pb-top { display: flex; gap: 12px; align-items: stretch; }
.pb-fields { flex: 2; min-width: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; }
.pb-fields .pds-field { min-width: 0; }

/* The balance is the whole question, so it gets the weight — a red-wash panel
   with the number itself as the input. */
.pb-points { flex: 1.3; min-width: 0; background: rgba(255,68,56,.05);
  border: 1.5px solid rgba(255,68,56,.3); border-radius: 14px; padding: 14px 18px;
  text-align: center; }
html.light .pb-points { background: rgba(214,0,28,.04); border-color: rgba(214,0,28,.3); }
.pb-pointslab { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); }
/* The balance and the party size sit on one line in the same hand, because
   they are one sentence: this many points, for this many people. */
.pb-pointsline { display: flex; align-items: baseline; justify-content: center;
  gap: 4px 10px; flex-wrap: wrap; margin-top: 2px; }
.pb-pgroup { display: inline-flex; align-items: baseline; gap: 6px; }
/* Wide enough for "500,000" — the largest quick-pick — so the number never
   spills over the "pts" beside it. */
.pb-pointsval { width: 7.4ch; border: 0; border-bottom: 2px dashed rgba(255,68,56,.35);
  background: none; padding: 0 0 2px; text-align: center; color: var(--red);
  font: 700 34px 'Space Grotesk', sans-serif; line-height: 1.2; }
.pb-pointsval.small { width: 1.6ch; }
html.light .pb-pointsval { border-bottom-color: rgba(214,0,28,.35); }
.pb-pointsval:focus { outline: none; border-bottom-style: solid; }
.pb-pointsline .u { font: 500 12px 'DM Sans', sans-serif; color: var(--muted); }
.pb-for { font: 500 13px 'DM Sans', sans-serif; color: var(--muted); margin: 0 2px; }
.pb-quick { display: flex; justify-content: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.pb-quick button { border: 1px solid transparent; background: var(--hover-bg); color: var(--muted);
  font: 700 10px 'DM Sans', sans-serif; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.pb-quick button.on { background: rgba(255,68,56,.1); color: var(--red); border-color: rgba(255,68,56,.3); }

#panel-pointsearch .pds-field select { font: 500 13px 'DM Sans', sans-serif; }
#panel-pointsearch .pds-field:first-child select { font: 700 13px 'Space Grotesk', sans-serif; }

.pb-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.pb-foot .pds-cabs { flex: 1; }
.pb-note { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin: 8px 0 0; }

/* ── The board's filter row ── */
.pb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pb-fchip { display: flex; align-items: baseline; gap: 7px; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; }
.pb-fchip > span { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.pb-fchip select { border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--cream); font: 500 11.5px 'DM Sans', sans-serif; max-width: 190px; }
.pb-fchip select:focus { outline: none; }
.pb-fchip.dark { background: var(--cream); border-color: transparent; }
.pb-fchip.dark > span { color: rgba(0,0,0,.45); }
.pb-fchip.dark select { color: #1A1714; font-weight: 700; }
html.light .pb-fchip.dark { background: #1A1714; }
html.light .pb-fchip.dark > span { color: rgba(255,255,255,.5); }
html.light .pb-fchip.dark select { color: #F5F0EA; }
.pb-fsaver { margin-left: auto; }
.pb-viewseg { display: flex; background: var(--hover-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px; }
.pb-viewseg button { border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 5px 12px; font: 500 10.5px 'DM Sans', sans-serif; color: var(--muted); }
.pb-viewseg button.on { background: var(--card); color: var(--cream); font-weight: 700; }

/* ── Results ── */
.pb-found { font: 400 26px 'Bebas Neue', sans-serif; color: var(--cream); letter-spacing: .03em;
  margin: 16px 0 2px; }
.pb-foundsub { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-bottom: 10px; }

.pb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.pb-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; }
.pb-card.best { border: 1.5px solid rgba(255,68,56,.4); box-shadow: 0 3px 14px rgba(255,68,56,.08); }
.pb-card.empty-card { justify-content: center; min-height: 120px; opacity: .55; }
.pb-cardphoto { height: 88px; background: var(--raised) center/cover; position: relative; }
.pb-badge { position: absolute; left: 10px; top: 8px; background: var(--red); color: #fff;
  font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; }
.pb-cardbody { padding: 12px 15px; }
.pb-cardname { font: 400 20px 'Bebas Neue', sans-serif; color: var(--cream); line-height: 1;
  letter-spacing: .03em; }
.pb-card[data-cabin="economy"]     .pb-cardname .c { color: var(--cab-economy); }
.pb-card[data-cabin="premium"]     .pb-cardname .c { color: var(--cab-premium); }
.pb-card[data-cabin="upper-class"] .pb-cardname .c { color: var(--cab-upper); }
.pb-cardsub { font: 400 10.5px 'DM Sans', sans-serif; color: var(--muted); margin: 3px 0 8px; }
.pb-bar { height: 5px; background: var(--hover-bg); border-radius: 3px; overflow: hidden; }
.pb-bar i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.pb-card[data-cabin="economy"]     .pb-bar i { background: var(--cab-economy); }
.pb-card[data-cabin="premium"]     .pb-bar i { background: var(--cab-premium); }
.pb-card[data-cabin="upper-class"] .pb-bar i { background: var(--cab-upper); }
.pb-barrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 5px; }
.pb-barrow .t { font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); }
.pb-barrow .u { font: 400 9.5px 'DM Sans', sans-serif; color: var(--muted); }
/* Each card's button wears its own cabin, so the three read as three classes
   rather than one offer and two also-rans. */
.pb-see { display: block; width: 100%; margin-top: 10px; border: 1px solid transparent; cursor: pointer;
  font: 700 11px 'DM Sans', sans-serif; padding: 8px 0; border-radius: 999px; cursor: pointer;
  background: var(--raised); color: var(--cream); }
.pb-see:hover { filter: brightness(1.12); }
.pb-card[data-cabin="upper-class"] .pb-see { background: var(--cab-upper); color: #fff; }
.pb-card[data-cabin="premium"]     .pb-see { background: var(--cab-premium); color: #0D0D0D; }
html.light .pb-card[data-cabin="premium"] .pb-see { color: #fff; }
/* Economy's own token is near-white in dark and near-black in light, neither of
   which is a button — so the grey is set here for each theme instead. */
.pb-card[data-cabin="economy"]     .pb-see { background: #3A3A38; color: var(--cream); }
html.light .pb-card[data-cabin="economy"] .pb-see { background: #6B6560; color: #fff; }

.pb-table { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; }
.pb-thead, .pb-trow { display: grid; grid-template-columns: 150px 150px 1fr 1fr 100px 95px 84px;
  gap: 10px; align-items: center; padding: 9px 18px; }
.pb-thead { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--hover-bg); padding: 8px 18px; }
.pb-trow { border-top: 1px solid var(--border); }
.pb-trow .d { font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); }
.pb-trow .d em { font: 500 10px ui-monospace, monospace; color: var(--muted); font-style: normal; }
.pb-trow .w { font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); }
.pb-trow .l { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.pb-trow .l .pts { color: var(--cream); }
.pb-trow .t, .pb-thead .t { font: 700 13px 'Space Grotesk', sans-serif; color: var(--cream);
  text-align: right; }
.pb-thead .t, .pb-thead .u { text-align: right; font-size: 8px; }
.pb-trow .u { font: 500 10.5px 'DM Sans', sans-serif; color: var(--success); text-align: right; }
.pb-trow .b { border: 1px solid var(--border); background: none; border-radius: 999px;
  padding: 6px 0; font: 700 10px 'DM Sans', sans-serif; color: var(--cream); cursor: pointer; }
.pb-trow .b:hover { border-color: var(--red); color: var(--red); }
/* The row's action is a booking, so it looks like one. */
.pb-trow .b.book { background: var(--red); border-color: var(--red); color: #fff; }
.pb-trow .b.book:hover { color: #fff; filter: brightness(1.08); }
.pb-showall { display: block; width: 100%; border: 0; border-top: 1px solid var(--border);
  background: none; padding: 9px 0; font: 700 11px 'DM Sans', sans-serif; color: var(--red);
  cursor: pointer; }
.pb-showall.wide { border: 0; margin-top: 8px; }

.cab-economy     { color: var(--cab-economy); }
.cab-premium     { color: var(--cab-premium); }
.cab-upper-class { color: var(--cab-upper); }

/* ── The lowest-points board ── */
/* Destination is fixed and points take the slack, as the handoff has it —
   letting the name column stretch leaves a lake of empty between it and the
   date. */
.pb-lhead, .pb-lrow { display: grid; grid-template-columns: 240px 130px 110px 1fr 78px;
  gap: 12px; align-items: center; padding: 9px 18px; }
.pb-lhead { font: 700 8px 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--hover-bg); padding: 8px 18px; }
.pb-lhead .p { text-align: right; }
.pb-lrow { border-top: 1px solid var(--border); }
.pb-lrow .d { display: flex; align-items: center; gap: 10px; min-width: 0;
  font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); }
.pb-lrow .d em { font: 500 10px ui-monospace, monospace; color: var(--muted); font-style: normal; }
.pb-thumb { width: 40px; height: 28px; border-radius: 6px; flex: none;
  background: var(--raised) center/cover; }
.pb-lrow .w { font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); }
.pb-lrow .c { font: 700 11px 'DM Sans', sans-serif; }
/* The saver pill gets a slot of its own whether or not there is one to show,
   so the points column reads as a column of numbers rather than shuffling left
   and right depending on the fare. */
.pb-lrow .p { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.pb-lrow .p b { font: 700 13px 'Space Grotesk', sans-serif; }
.pb-lrow .p .sv { flex: none; width: 52px; font-style: normal; }
.pb-lhead .p { padding-right: 60px; }        /* line the heading up with the numbers */
.pb-lrow .b { border: 1px solid var(--border); border-radius: 999px; padding: 7px 0;
  text-align: center; font: 700 10px 'DM Sans', sans-serif; color: var(--cream);
  text-decoration: none; }
.pb-lrow .b:hover { border-color: var(--red); color: var(--red); }

/* One column per cabin — "what is cheapest in my cabin" at a glance. */
.pb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pb-col { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; }
.pb-colhead { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  font: 700 10px 'DM Sans', sans-serif; letter-spacing: .12em; }
.pb-colhead .dot { width: 7px; height: 7px; border-radius: 50%; }
.pb-col[data-cabin="economy"]     .pb-colhead { background: rgba(232,226,218,.08); color: var(--cab-economy); }
html.light .pb-col[data-cabin="economy"] .pb-colhead { background: rgba(107,101,96,.1); color: #6B6151; }
.pb-col[data-cabin="economy"]     .pb-colhead .dot { background: var(--cab-economy); }
.pb-col[data-cabin="premium"]     .pb-colhead { background: rgba(74,158,255,.1); color: var(--cab-premium); }
.pb-col[data-cabin="premium"]     .pb-colhead .dot { background: var(--cab-premium); }
.pb-col[data-cabin="upper-class"] .pb-colhead { background: rgba(255,68,56,.08); color: var(--cab-upper); }
.pb-col[data-cabin="upper-class"] .pb-colhead .dot { background: var(--cab-upper); }
.pb-crow { display: grid; grid-template-columns: 1fr 86px 84px; gap: 8px; align-items: center;
  padding: 9px 12px; border-top: 1px solid var(--border); }
.pb-crow .n b { display: block; font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream);
  line-height: 1.15; }
.pb-crow .n em { font: 500 9px ui-monospace, monospace; color: var(--muted); font-style: normal; }
.pb-crow .w { font: 700 12.5px 'DM Sans', sans-serif; color: var(--cream); text-align: center; }
.pb-crow .p { font: 700 12.5px 'Space Grotesk', sans-serif; text-align: right; }
.pb-col[data-cabin="economy"]     .pb-crow .p { color: var(--cab-economy); }
.pb-col[data-cabin="premium"]     .pb-crow .p { color: var(--cab-premium); }
.pb-col[data-cabin="upper-class"] .pb-crow .p { color: var(--cab-upper); }
.pb-crow .p .prb-saver { display: block; margin-top: 2px; }
.pb-colempty { padding: 14px 12px; font: 400 11px 'DM Sans', sans-serif; color: var(--muted);
  border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .pb-top { flex-direction: column; }
  .pb-fields { grid-template-columns: 1fr; }
  .pb-cards { grid-template-columns: 1fr; }
  .pb-foot { flex-wrap: wrap; }
  .pb-fsaver { margin-left: 0; }
  .pb-filters .pb-fchip, .pb-filters .pds-cabs { width: 100%; }
  /* The submit is the point of the form; on a phone it takes the full width
     rather than sitting narrow next to a toggle. */
  .pb-foot .pds-go { width: 100%; }
  .pb-fchip select { max-width: none; flex: 1; }
  /* Both tables become stacks of labelled cards; the column headers go. */
  .pb-thead, .pb-lhead { display: none; }
  .pb-trow { grid-template-columns: 1fr auto; gap: 5px 12px; }
  .pb-trow .d { grid-column: 1; }
  .pb-trow .t { grid-column: 2; grid-row: 1; }
  .pb-trow .w { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
  .pb-trow .l { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; }
  .pb-trow .l::before { content: attr(data-leg); flex: none; min-width: 34px;
    font: 700 8px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); }
  .pb-trow .u { grid-column: 1 / -1; text-align: left; }
  .pb-trow .b { grid-column: 1 / -1; }
  .pb-lrow { grid-template-columns: 1fr auto; gap: 5px 12px; }
  .pb-lrow .d { grid-column: 1; }
  .pb-lrow .p { grid-column: 2; grid-row: 1; }
  .pb-lrow .w, .pb-lrow .c { grid-row: 2; }
  .pb-lrow .w { grid-column: 1; font-size: 11px; }
  .pb-lrow .c { grid-column: 2; text-align: right; }
  .pb-lrow .b { grid-column: 1 / -1; }
}

/* ── Booking information ───────────────────────────────────────────────────── */
/*
   The one panel that has to be read while someone is on the phone, so it is
   the loudest thing on the site: a red header, the points large, and the
   number to ring sitting in the footer where a submit button would be.
*/
.bk .prm-head { background: linear-gradient(135deg, rgba(255,68,56,.16), rgba(255,68,56,.04));
  border-bottom-color: rgba(255,68,56,.28); }
html.light .bk .prm-head { background: linear-gradient(135deg, rgba(214,0,28,.10), rgba(214,0,28,.03));
  border-bottom-color: rgba(214,0,28,.22); }
.bk .prm-head .prm-t { color: var(--red); }
.bk-icon { background: var(--red) !important; color: #fff !important; font-size: 16px !important; }
.bk-icon::before { display: none; }

.bk-legs { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.bk-leg { display: flex; align-items: center; gap: 12px; background: rgba(255,68,56,.05);
  border: 1px solid rgba(255,68,56,.22); border-radius: 12px; padding: 12px 14px; }
html.light .bk-leg { background: rgba(214,0,28,.035); border-color: rgba(214,0,28,.18); }
.bk-legno { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--red);
  color: #fff; font: 700 10px 'DM Sans', sans-serif; display: grid; place-items: center; }
.bk-legmain { flex: 1; min-width: 0; }
.bk-route { font: 700 17px 'Space Grotesk', sans-serif; color: var(--cream); line-height: 1.1; }
.bk-route b { color: var(--red); }
.bk-city { display: block; font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 3px; }
.bk-when { font: 500 12.5px 'DM Sans', sans-serif; color: var(--text); margin-top: 5px; }
.bk-legpts { text-align: right; flex: none; }
.bk-legpts .p { font: 700 20px 'Space Grotesk', sans-serif; color: var(--cream); line-height: 1; }
.bk-legpts .p span { font-size: 10px; color: var(--muted); margin-left: 3px; }
.bk-legpts .c { font: 700 11px 'DM Sans', sans-serif; margin-top: 4px; color: var(--muted); }

.bk-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 10px 14px; border: 1px dashed rgba(255,68,56,.3); border-radius: 12px; }
html.light .bk-total { border-color: rgba(214,0,28,.28); }
.bk-total span { font: 500 12px 'DM Sans', sans-serif; color: var(--muted); }
.bk-total b { font: 700 17px 'Space Grotesk', sans-serif; color: var(--red); }

.bk-how { margin: 14px 0 4px; }
.bk-howlab { font: 700 9px 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; }
.bk-how p { font: 400 12px/1.55 'DM Sans', sans-serif; color: var(--text); margin: 0 0 8px; }
.bk-how p:last-child { margin-bottom: 0; }
.bk-warn { color: var(--muted) !important; }

.bk-foot { align-items: center; flex-wrap: wrap; }
.bk-call { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none;
  background: var(--red); color: #fff; border-radius: 999px; padding: 11px 18px; }
.bk-call:hover { filter: brightness(1.08); }
.bk-call span { font-size: 14px; }
.bk-call b { font: 700 14px 'Space Grotesk', sans-serif; white-space: nowrap; }
.bk-site { flex: none; font: 700 12px 'DM Sans', sans-serif; color: var(--red);
  text-decoration: none; padding: 11px 4px; }
.bk-site:hover { text-decoration: underline; }
.bk-email { flex: 1; min-width: 170px; background: none; border: 1px solid var(--border);
  color: var(--cream); border-radius: 999px; padding: 11px 14px;
  font: 700 12px 'DM Sans', sans-serif; cursor: pointer; }
.bk-email:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.bk-email:disabled { opacity: .4; cursor: not-allowed; }
.bk-emailnote { padding: 0 22px 16px; font: 400 11px 'DM Sans', sans-serif; color: var(--text); }
.bk-emailnote.muted { color: var(--muted); }

@media (max-width: 560px) {
  .bk-leg { flex-wrap: wrap; }
  .bk-legpts { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 10px; }
  .bk-legpts .c { margin-top: 0; }
  .bk-foot { flex-direction: column; align-items: stretch; }
  .bk-call { justify-content: center; }
  .bk-site { text-align: center; }
}

/* ── Mobile: things you tap ────────────────────────────────────────────────── */
/*
   Chips and pills are sized for a mouse across the site — 25 to 27px tall,
   which is a fiddly target on a phone. They keep their look and gain height,
   which costs a little vertical space and saves a lot of mis-taps.
*/
@media (max-width: 768px) {
  .prs-trip button, .prs-cabins button,
  .pds-seg button, .pds-cabs button, .pb-seg button, .pb-viewseg button,
  .pb-quick button, .prc-chip, .pra-pill, .pra-cabchip, .hol-cabins button,
  .hol-chip, .hol-chipadd, .acct-hol-btn, .dd-cab, .pr-seg button, .hol-datecard .e {
    min-height: 38px; padding-top: 0; padding-bottom: 0;
    display: inline-flex; align-items: center; justify-content: center; }

  /* Text links that act as navigation want a tappable band, not just their
     own line height. */
  .pds-back, .prh-adv, .prh-shuffle, .pb-showall { display: inline-block; padding: 8px 0; }

  /* A select inside a padded field is tapped through its wrapper, but the bare
     ones on the calendar and destinations rows are the target themselves. */
  .prc-field select, .dest-head select, .filter-group select { min-height: 34px; }
}

/* The one figure on the reports page that is current state rather than history,
   so it carries its own explanation underneath. */
.stat-sub { font: 400 11px 'DM Sans', sans-serif; color: var(--muted); margin-top: 6px; }
/* Four headline tiles rather than three, and they wrap instead of squeezing. */
/* Auto-fit rather than a fixed count: the tiles spread across whatever room
   there is instead of leaving one stranded on a row of its own. */
.prr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

/* Tile icons sit on the label line, at its colour and size, so they read as
   part of the caption rather than as decoration above it. */
/* Marked explicitly rather than with :last-child — a lone leading icon IS the
   last element child, because the label text beside it is a text node, so the
   trailing rule was stealing its gap. */
.stat-label .stat-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 7px; }
.stat-label .stat-ic.end { margin-right: 0; margin-left: 5px; }
/* The cabin split under the booking routes — a footnote to the bars above it,
   not another set of bars competing with them. */
.prr-split { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border); font: 400 11px 'DM Sans', sans-serif; color: var(--muted); }
.prr-split b { font: 700 12px 'Space Grotesk', sans-serif; color: var(--cream); margin-right: 2px; }
/* Flags sit at a fixed inline width so the codes beside them still line up in a
   column, whether or not the platform has a flag font to draw. */
.prr-fl { display: inline-block; width: 1.35em; margin-right: 2px; }

/* Booking value: figures in a list rather than bars, because they are amounts
   rather than a ranking, and a bar implies a comparison that is not there. */
.prr-money > div { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.prr-money > div:last-child { border-bottom: none; }
.prr-money span { font: 500 0.8rem 'DM Sans', sans-serif; color: var(--text); }
.prr-money b { font: 700 0.95rem 'Space Grotesk', sans-serif; color: var(--cream); white-space: nowrap; }
.prr-cabmoney { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.prr-cabrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 3px 0; font: 500 0.76rem 'DM Sans', sans-serif; color: var(--muted); }
.prr-cabrow .n { font-weight: 700; }
.prr-cabrow.cab-economy .n     { color: var(--cab-economy); }
.prr-cabrow.cab-premium .n     { color: var(--cab-premium); }
.prr-cabrow.cab-upper-class .n { color: var(--cab-upper); }
.prr-cabrow .p { font: 700 0.76rem 'Space Grotesk', sans-serif; color: var(--cream); }

/* ── Runner-up results ─────────────────────────────────────────────────────── */
/*
   Everything after the leading boarding pass. Same information, none of the
   furniture: no photo stubs, no perforation, no plane line — those earn their
   place once, at the top, and become noise repeated twenty-five times.
*/
.prbc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.prbc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px;
  align-items: center; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px; }
.prbc-legs { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Fixed columns with the cabin taking the slack. A fractional date column
   collapsed under the pass above it and wrapped "Wed, 30 Sept" onto three
   lines, which then ran into the leg beneath. */
.prbc-l { display: grid; grid-template-columns: 104px 132px minmax(0, 1fr) 118px; gap: 12px;
  align-items: baseline; min-width: 0; }
.prbc-l .r { font: 400 19px 'Bebas Neue', sans-serif; letter-spacing: .04em; color: var(--cream);
  white-space: nowrap; }
.prbc-l .d { font: 500 12.5px 'DM Sans', sans-serif; color: var(--text); white-space: nowrap; }
.prbc-l .c { font: 700 11.5px 'DM Sans', sans-serif; }
.prbc-l[data-cabin="upper-class"] .c { color: var(--cab-upper); }
.prbc-l[data-cabin="premium"]     .c { color: var(--cab-premium); }
.prbc-l[data-cabin="economy"]     .c { color: var(--cab-economy); }
html.light .prbc-l[data-cabin="economy"] .c { color: #6B6560; }
.prbc-l .p { font: 700 13px 'Space Grotesk', sans-serif; color: var(--cream);
  text-align: right; white-space: nowrap; }
.prbc-l .p i { font-style: normal; font-size: 9px; color: var(--muted); margin-left: 3px; }
.prbc-tot { text-align: right; flex: none; }
.prbc-tot .t { display: block; font: 700 17px 'Space Grotesk', sans-serif; color: var(--cream);
  white-space: nowrap; }
.prbc-tot .t i { font-style: normal; font-size: 9px; color: var(--muted); margin-left: 4px; }
.prbc-tot .n { font: 500 11px 'DM Sans', sans-serif; color: var(--muted); }
.prbc-book { flex: none; background: none; border: 1px solid var(--border); color: var(--cream);
  border-radius: 999px; padding: 9px 14px; font: 700 11px 'DM Sans', sans-serif;
  cursor: pointer; white-space: nowrap; }
.prbc-book:hover { border-color: var(--red); color: var(--red); }

@media (max-width: 820px) {
  .prbc-row { grid-template-columns: 1fr auto; gap: 10px 12px; }
  .prbc-legs { grid-column: 1 / -1; }
  .prbc-l { grid-template-columns: 92px 1fr auto; row-gap: 2px; }
  .prbc-l .c { grid-column: 2; font-size: 10.5px; }
  .prbc-book { grid-column: 1 / -1; }
}

/* ── Booking panel, expanded ───────────────────────────────────────────────── */
/*
   The leg is a small boarding pass now: the origin and destination photographs
   either side of the route, the way the results cards show them. Someone
   checking they clicked the right flight recognises a picture faster than a
   three-letter code.
*/
.bk-leg { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 0;
  align-items: stretch; padding: 0; overflow: hidden; }
.bk-leg .prb-stub { min-height: 118px; }
.bk-leg .prb-city { font-size: 13px; }
.bk-legmid { padding: 14px 16px; min-width: 0; }
.bk-legno { display: inline-block; font: 700 8px 'DM Sans', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bk-route { font: 400 30px 'Bebas Neue', sans-serif; color: var(--cream); line-height: 1;
  letter-spacing: .03em; }
.bk-route b { color: var(--red); font-weight: 400; }
.bk-route i { font-style: normal; color: var(--muted); font-size: 20px; margin: 0 4px; }
.bk-leg .bk-city { display: block; font: 400 11.5px 'DM Sans', sans-serif; color: var(--muted);
  margin-top: 4px; }
.bk-leg .bk-when { font: 700 13px 'DM Sans', sans-serif; color: var(--text); margin-top: 6px; }
.bk-legpts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.bk-legpts .p { font: 700 22px 'Space Grotesk', sans-serif; color: var(--cream); line-height: 1; }
.bk-legpts .p span { font-size: 10px; color: var(--muted); margin-left: 3px; }
.bk-legpts .c { font: 700 12px 'DM Sans', sans-serif; }
.bk-legpts .c.cab-economy     { color: var(--cab-economy); }
html.light .bk-legpts .c.cab-economy { color: #6B6560; }
.bk-legpts .c.cab-premium     { color: var(--cab-premium); }
.bk-legpts .c.cab-upper-class { color: var(--cab-upper); }

@media (max-width: 560px) {
  /* One photo rather than two: the destination is the one worth the space. */
  .bk-leg { grid-template-columns: minmax(0, 1fr) 84px; }
  .bk-leg .prb-origin { display: none; }
  .bk-leg .prb-stub { min-height: 100%; }
  .bk-legmid { order: -1; }
}