/* ============================================================
   Qantas homepage experiment — HP experiments, node 7:19305
   https://www.figma.com/design/S2f3YMjrNFY9amHGnLrZ70/HP-experimkents?node-id=7-19305

   Tokens below are the RWY Core 3.0 variables reported by
   get_variable_defs on node 4:5112. Anything that is a convention
   rather than a token is commented as such.
   ============================================================ */
:root{
  /* colour — text */
  --text-neutral-primary:#323232;
  --text-neutral-secondary:#666564;
  --text-neutral-inverse:#ffffff;
  --text-neutral-disabled:rgba(0,0,0,0.4);
  /* "static" = mode-invariant by definition */
  --icon-neutral-static-white:#ffffff;
  --text-brand-primary:#df0000;
  --text-brand-secondary:#bc0b07;
  --utility-text:#323232;
  --palette-grey-100:#1d1c1f;

  /* colour — surfaces */
  --background-neutral-standard:#ffffff;
  --background-neutral-subtle:#f3f2f1;
  --background-neutral-strong:#e5e3e1;
  --background-neutral-standard-inverse:#323232;
  /* The header band on a card — background/neutral/strong per the design. */
  --card-head:var(--background-neutral-strong);
  --background-neutral-strong-inverse:#666564;
  --background-brand-standard:#df0000;
  --background-brand-strong:#bc0b07;
  --opacity-neutral-xx-light:rgba(0,0,0,0.05);
  --opacity-neutral-x-light:rgba(0,0,0,0.1);

  /* colour — border, icon, button */
  --border-neutral-subtle:#e5e3e1;
  --border-neutral-standard:#b2b1af;
  /* border/neutral/solid-inverse — the hairline along the top of the FSW. */
  --border-neutral-solid-inverse:#ffffff;
  --border-brand-standard:#df0000;
  --icon-neutral-primary:#323232;
  --icon-neutral-secondary:#666564;
  --icon-brand-primary:#df0000;
  --icon-brand-secondary:#bc0b07;
  /* the teal in the pictograms */
  --icon-accent-pictogram:#8de2e0;
  --utility-icon:#323232;
  --button-primary-background-enabled:#df0000;
  --button-primary-text:#ffffff;
  /* Foreground on a mode-invariant fill: the sale gradient, a red map pin, a
     selected seat. Those fills stay Qantas red in both themes, so this stays
     white in both — it is deliberately NOT tied to button/primary/text, which
     does change in dark. */
  --text-on-brand:#ffffff;
  --button-secondary-background-enabled:rgba(255,255,255,0.05);
  --button-secondary-text:#df0000;
  --button-secondary-border:#df0000;
  --button-muted-background-enabled:rgba(255,255,255,0.05);
  --button-muted-text:#323232;

  /* colour — accent, RWY Core 2.0 (the deals page) */
  --accent-x-light:#bff4f3;
  --accent-x-dark:#237271;
  --accent-xx-dark:#135655;

  /* colour — status */
  --success-standard-background:#e0f8d9;
  --success-standard-link:#176300;
  --info-standard-background:#e4eefc;
  --info-standard-link:#0a4e9b;
  --warning-standard-background:#fdeedb;
  --warning-standard-link:#8a4b00;
  /* one-off surfaces the design pins by hand */
  --card-wash:rgba(255,255,255,0.7);
  --datechip-border:rgba(0,0,0,0.45);
  --map-ocean:#cfe7f5;

  /* colour — QFF status gradient, node 7:18004 */
  --qff-gold:#c3a56e;
  --qff-gold-secondary:#ab9158;
  /* qff/tier-tones/gold/x-light — the signed-in bar and hero wash. */
  --qff-gold-x-light:#f0ebdf;
  --qff-bronze:#df0000;
  --qff-bronze-secondary:#ef2929;
  --button-onmedia-background-enabled:#ffffff;
  --button-onmedia-text:#323232;
  --opacity-black-30:rgba(0,0,0,0.3);

  /* dimensions */
  --dimensions-2:2px;  --dimensions-4:4px;  --dimensions-6:6px;
  --dimensions-8:8px;  --dimensions-10:10px;--dimensions-12:12px;
  --dimensions-14:14px;--dimensions-16:16px;--dimensions-20:20px;
  --dimensions-22:22px;--dimensions-24:24px;--dimensions-28:28px;
  --dimensions-32:32px;--dimensions-48:48px;--dimensions-64:64px;

  /* radius */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-3xl:48px;
  --radius-round:9999px;

  /* margin / padding */
  --fixed-margin-2xs:4px;
  --fixed-margin-xs:8px;
  --fixed-margin-sm:12px;
  --fixed-margin-md:16px;
  --fixed-margin-lg:24px;
  --fixed-margin-2xl:48px;
  --fixed-padding-3xs:2px;
  --fixed-padding-2xs:4px;
  --fixed-padding-xs:8px;
  --fixed-padding-sm:12px;
  --fixed-padding-md:16px;
  --fixed-padding-lg:24px;
  --fixed-padding-2xl:48px;
  --fixed-padding-3xl:64px;
  --responsive-padding-xs:24px;
  --responsive-margin-md:24px;
  --responsive-padding-xl:64px;

  /* layout — the 1920 frame has 320px side padding, so the content
     column is 1280px. Below 1920 the gutter shrinks and the column
     is what is left. */
  --fsw-wash:#f3f2f1;             /* page/neutral/subtle */
  --content-max:1280px;
  /* the footer spans the full 1920 less its 64px padding */
  --footer-max:1792px;
  --gutter:var(--responsive-padding-xl);
  --nav-h:88px;

  /* effects — RWY Core 3.0. --box-shadow-lg was already referenced by the
     date picker and the search dropdown but never defined, so both were
     rendering flat. */
  --box-shadow-sm:0 1px 2px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.06);
  --box-shadow-md:0 2px 6px -2px rgba(0,0,0,0.08), 0 4px 8px -4px rgba(0,0,0,0.04);
  --box-shadow-lg:0 4px 8px -2px rgba(0,0,0,0.04), 0 8px 16px -4px rgba(0,0,0,0.08);

  /* motion — the file specifies none, so these are conventions:
     a decelerating curve in, a quicker accelerating one out */
  --motion-enter:240ms cubic-bezier(0.2,0,0,1);
  --motion-exit:160ms cubic-bezier(0.4,0,1,1);

  /* focus ring — matched to the qantas-search-rwy3 prototype */
  --focus-standard:var(--accent-x-dark);
  --focus-opacity:rgba(35,114,113,0.1);
  --focus-gap:#ffffff;
  --focus-ring:0 0 0 2px var(--focus-gap), 0 0 0 5px var(--focus-standard), 0 0 0 9px var(--focus-opacity);
}

/* ============================================================
   Dark theme — :root[data-theme="dark"], toggled from the nav.

   The attribute is on <html>, not <body> like every other state in this
   prototype: theme.js runs from <head> and sets it before the first paint,
   so the page never flashes light before switching.

   Every colour token the Figma frames actually resolve was swept with
   get_variable_defs (nodes 48:70375, 8:19613, 7:18004) and each one is given
   a value below, classified by the role it plays rather than by its name —
   a button label is judged against its own fill, not against the page.

   The Web Library publishes no dark mode, so the values come from three
   grounded sources, in this order of preference:

   1. Published hexes. The surface ladder is the App UI Kit's authored
      qf-app-dark ladder verbatim — neutral 90/85/80 = #191919 / #262626 /
      #323232 — and #323232 is already a Web Library value (text/neutral/
      primary), so the darkest surfaces are not invented.
   2. The Web Library's own neutral ramp, which runs warm and in the same
      steps the app kit uses: 10 #e5e3e1, 20 #cccac8, 30 #b2b1af, 40 #999796,
      50 #7f7e7d, 60 #666564, 70 #4c4c4b, 80 #323232. Dark values are picked
      off this ramp, not mixed by hand.
   3. The mapping rules the app kit's dark mode established: text and icon
      primary flip to white and secondary to neutral/30; border neutrals
      invert (10 -> 60, 20 -> 50); inverse tokens flip; and the red ramp runs
      OPPOSITE to light, so deeper emphasis is a LIGHTER step and "secondary"
      red ends up lighter than "primary".

   The two reds are the only derived values, and they are Adam's call rather
   than the app kit's. Continuing the published web ramp (#df0000 red/60,
   #ef2929 red/50) lands on the app kit's red/30 #ff7b7b, which clears AA on
   every surface but desaturates into salmon. Instead these keep the hue and
   saturation of #df0000 exactly and raise only lightness — #ff5c5c at L68
   and #ff7070 at L72 — so the red still reads as Qantas red on a dark
   surface. The trade is one shortfall: small red text on the lightest
   #323232 surface gets 4.24 against AA's 4.5. It clears on the page (5.81)
   and on cards (5.00), and every red border and icon clears the 3:1 that
   applies to marks. Accepted knowingly.

   Red FILLS keep full-strength Qantas red — white on #df0000 is 5.08 — so
   the Search button, the sale banner and the promoted map pin are unchanged.

   Still needs design sign-off: the ladder and the rules are published, the
   two reds are an extrapolation from published neighbours. */
:root[data-theme="dark"]{
  /* text — primary to white, secondary to neutral/30 */
  --text-neutral-primary:#ffffff;
  --text-neutral-secondary:#b2b1af;
  --text-neutral-inverse:#191919;
  --text-neutral-disabled:rgba(255,255,255,0.38);
  --text-brand-primary:#ff5c5c;                 /* Qantas hue lightened to L68 */
  --text-brand-secondary:#ff7070;               /* one step lighter again — in dark the
                                                   red ramp runs opposite to light, so
                                                   "secondary" is the lighter step */
  --utility-text:#ffffff;
  --palette-grey-100:#e5e3e1;

  /* icon — follows text, one step brighter for the neutral primary so line
     art holds up at 24px */
  --icon-neutral-primary:#e5e3e1;
  --icon-neutral-secondary:#b2b1af;
  --icon-brand-primary:#ff5c5c;
  --icon-brand-secondary:#ff7070;
  --utility-icon:#e5e3e1;
  /* the pictogram teal is already a light accent and reads on either
     surface, so it is mode-invariant */

  /* surfaces — the app kit's authored dark ladder. Raised surfaces are
     LIGHTER than the page, mirroring light mode where they are darker. */
  --background-neutral-standard:#191919;
  --background-neutral-subtle:#262626;
  --background-neutral-strong:#323232;
  --background-neutral-standard-inverse:#f3f2f1;
  --background-neutral-strong-inverse:#b2b1af;
  --opacity-neutral-xx-light:rgba(255,255,255,0.06);
  --opacity-neutral-x-light:rgba(255,255,255,0.12);
  /* the gold tier tone is a light cream surface carrying dark text, so in
     dark it becomes the warm end of the surface ladder rather than staying
     put — a cream bar would leave the white nav text unreadable. */
  --qff-gold-x-light:#2a251c;
  /* In light a card is a 70% white film, lifting to nearly page-white on the
     grey panel. A 5% film cannot carry that on dark, so the card takes a solid
     step up the ladder instead. */
  --card-wash:var(--background-neutral-strong);
  /* The band lifts off the card rather than sinking into it — 10% white over
     the card reads as #464646, a clear step above it. */
  --card-head:rgba(255,255,255,0.10);

  /* borders — inverted across the ramp. Subtle stays a quiet divider, so it
     sits close to the surface; standard and strong have to stay visible. */
  --border-neutral-subtle:#4c4c4b;              /* 10 -> 70 */
  --border-neutral-standard:#666564;            /* 30 -> 60 */
  --border-neutral-solid-inverse:#191919;
  --border-brand-standard:#ff5c5c;
  --datechip-border:rgba(255,255,255,0.45);

  /* text/neutral/inverse flips because it means "on an inverted surface",
     and in dark that surface is light. Anything sitting on a fill that does
     NOT flip — the sale gradient, the promoted map pin, a selected seat —
     uses --text-on-brand instead, which stays white. Getting this wrong is
     what turned the sale banner's copy dark red on red. */

  /* buttons — the primary fill was the one element that ignored dark mode
     entirely, so the Search pill sat at full #df0000 against a near-black
     page while every other red had moved. It now takes the same lightened
     red as the rest of the ramp, which forces the label dark: white on
     #ff5c5c is only 3.03, while #191919 on it is 5.81. */
  --button-primary-background-enabled:#ff5c5c;
  --button-primary-text:#191919;
  --button-secondary-text:#ff5c5c;
  --button-secondary-border:#ff5c5c;
  /* button/secondary/background/enabled is a white 5% wash. Over a dark
     surface it lightens the fill to #3b3b3b and the red label lands at
     4.45 — under AA. The wash is decorative on an outline button, so it
     comes off here and the label keeps the full 5.11 / 7.01. */
  --button-secondary-background-enabled:transparent;
  /* A white 5% wash is meaningless on a dark surface — it neither reads as a
     chip nor stays invisible. What light mode actually gives a muted button is
     a surface one step off the page (#f3f2f1 on white, 1.12), so dark takes
     the same relationship off the ladder: subtle on the page. Buttons sitting
     on a subtle surface already get the next step up — see the overrides. */
  --button-muted-background-enabled:var(--background-neutral-subtle);
  --button-muted-text:#ffffff;
  --button-muted-icon:#e5e3e1;
  /* button/primary/* and button/on-media/* are invariant: the first sits on
     its own red fill, the second on photography */

  /* status — the tinted backgrounds invert to the dark end of their own hue
     and the label takes the light end, the pair swapping rather than both
     sliding */
  --success-standard-background:#14330a;
  --success-standard-link:#8ee070;
  --info-standard-background:#0f2a4d;
  --info-standard-link:#b8d4ff;
  --warning-standard-background:#3d2a0a;
  --warning-standard-link:#ffd699;
  --accent-x-light:#135655;                     /* the badge pair swaps ends */
  --accent-xx-dark:#bff4f3;                     /* 7.01:1 against x-light */

  /* focus — the teal x-dark disappears against #191919, so the ring takes
     the published pictogram teal (11.79:1) and the inner gap becomes the
     surface it is cut out of */
  --focus-standard:#8de2e0;
  --focus-opacity:rgba(141,226,224,0.16);
  --focus-gap:#191919;

  /* one-offs */
  --fsw-wash:#262626;
  --map-ocean:#0d2430;

  /* Black shadows do nothing on a dark surface — lean on a deeper alpha. */
  --box-shadow-sm:0 1px 2px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
  --box-shadow-md:0 2px 6px -2px rgba(0,0,0,0.5), 0 4px 8px -4px rgba(0,0,0,0.4);
  --box-shadow-lg:0 4px 8px -2px rgba(0,0,0,0.4), 0 8px 16px -4px rgba(0,0,0,0.55);

  color-scheme:dark;
}

/* ============================================================
   Type styles — the bound styles reported on the nodes
   ============================================================ */
.t-heading-md          {font-family:"Qantas Sans";font-size:32px;line-height:40px;font-weight:500}
.t-heading-xs          {font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:500}
.t-heading-xxs         {font-family:"Qantas Sans";font-size:18px;line-height:24px;font-weight:500}
.t-body-strong-lg      {font-size:18px;line-height:28px;font-weight:500}
.t-body-lg             {font-size:18px;line-height:28px;font-weight:400}
.t-body-strong-md      {font-size:16px;line-height:24px;font-weight:500}
.t-body-md             {font-size:16px;line-height:24px;font-weight:400}
.t-body-strong-sm      {font-size:14px;line-height:20px;font-weight:500}
.t-utility-strong-lg   {font-size:16px;line-height:22px;font-weight:500}
.t-utility-strong-md   {font-size:14px;line-height:20px;font-weight:500}
.t-utility-md          {font-size:14px;line-height:20px;font-weight:400}
.t-utility-sm          {font-size:12px;line-height:18px;font-weight:400}
.t-muted               {color:var(--text-neutral-secondary)}
.t-center              {text-align:center}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--text-neutral-primary);
  background:var(--background-neutral-standard);
}
h1,h2,h3,h4,h5,h6,p{margin:0}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* The ring follows whatever radius the element already has — forcing one
   here made pills and 16px fields render a 4px focus outline. */
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Only elements with no radius of their own need one for the ring. */
a:focus-visible,kbd:focus-visible{border-radius:var(--radius-xs)}

/* Inputs sit inside a rounded wrapper that already carries the focus
   treatment, so the ring belongs on the wrapper — drawn on the input it
   would be a sharp rectangle inside a 16px box. */
.field__input:focus-visible,.input__control:focus-visible{box-shadow:none}
.field:has(.field__input:focus-visible){box-shadow:var(--focus-ring)}
.input:has(.input__control:focus-visible){box-shadow:var(--focus-ring)}

/* The headline's focus is shown by its own red caret and the hint line, so
   it does not take a ring around 80px type. */
.hero__ask:focus-visible{box-shadow:none}

/* Icon-only buttons have no radius of their own, so their ring would be a
   sharp rectangle around a round glyph. */
.nav__icon,.nav__locale{border-radius:var(--radius-sm)}
.hero__go,.ref__copy{border-radius:var(--radius-round)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--fixed-margin-md);top:-100px;z-index:100;
  padding:var(--fixed-padding-sm) var(--fixed-padding-md);
  background:var(--background-neutral-standard);
  border-radius:var(--radius-sm);
  font-size:16px;font-weight:500;
  transition:top var(--motion-enter);
}
.skip-link:focus-visible{top:var(--fixed-margin-md)}

/* The content column, shared by every section */
.shell{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
}

/* ============================================================
   Buttons — node 4:8690
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--dimensions-8);
  border-radius:var(--radius-round);
  font-size:18px;line-height:28px;font-weight:500;
  text-align:center;white-space:nowrap;
  transition:background var(--motion-exit), color var(--motion-exit), border-color var(--motion-exit);
}
.btn img{width:24px;height:24px;flex:none}

.btn--primary{
  padding:var(--dimensions-14) var(--dimensions-24) var(--dimensions-14) var(--dimensions-28);
  background:var(--button-primary-background-enabled);
  color:var(--button-primary-text);
}
.btn--primary img{filter:brightness(0) invert(1)}
.btn--primary:hover{background:var(--text-brand-secondary)}

.btn--secondary{
  padding:calc(var(--dimensions-14) - 2px) calc(var(--dimensions-28) - 2px);
  background:var(--button-secondary-background-enabled);
  border:2px solid var(--border-brand-standard);
  color:var(--button-secondary-text);
}
.btn--secondary:hover{background:var(--border-brand-standard);color:#fff}
.btn--secondary:hover img{filter:brightness(0) invert(1)}

/* Muted — the trip option pills, node 43:69324. 48px tall on body/strong/md
   in secondary grey. Figma pads trailing-icon buttons 24/20 and leading-icon
   ones 20/24, hence the --lead modifier. */
.btn--muted{
  padding:var(--dimensions-12) var(--dimensions-20) var(--dimensions-12) var(--dimensions-24);
  background:var(--button-muted-background-enabled);
  color:var(--text-neutral-secondary);
  font-size:16px;line-height:24px;
}
.btn--lead{
  padding:var(--dimensions-12) var(--dimensions-24) var(--dimensions-12) var(--dimensions-20);
}
/* No hover token for this variant, so this is a convention. */
.btn--muted:hover{background:var(--opacity-neutral-xx-light)}

/* Small secondary — the card CTAs, node 7:18350 */
.btn--sm{
  width:100%;min-height:32px;
  gap:var(--dimensions-4);
  padding:calc(var(--dimensions-6) - 2px) calc(var(--dimensions-12) - 2px);
  font-size:14px;line-height:20px;
}
.btn--sm img{width:16px;height:16px}

/* On-media — a white button over the promo gradient, node 3096:12348 */
.btn--onmedia{
  padding:var(--dimensions-14) var(--dimensions-28);
  background:var(--button-onmedia-background-enabled);
  color:var(--button-onmedia-text);
}
.btn--onmedia:hover{background:var(--background-neutral-strong)}

/* QFF gold pill — node 7:18004 */
.btn--qff{
  padding:var(--dimensions-14) var(--dimensions-28) var(--dimensions-14) var(--dimensions-24);
  background:linear-gradient(180deg,var(--qff-gold),var(--qff-gold-secondary));
  /* the label sits on the QFF gradient, which is mode-invariant, so it takes
     the on-brand white rather than the primary button label */
  color:var(--text-on-brand);
}
.btn--qff img{width:24px;height:24px;border-radius:var(--radius-round);object-fit:cover}

/* ============================================================
   Navigation bar — node 4:10708
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--background-neutral-standard);
  /* Inset rather than a border: the Figma bar is exactly 88 tall with the
     divider drawn inside it, and a border would make the row 89. */
  box-shadow:inset 0 -1px 0 var(--border-neutral-subtle);
}
/* Signed in, the whole bar and the hero wash take the gold tier tone —
   nodes 58:79919 and 48:78629. The divider goes to the heavier
   opacity/neutral/x-light with it. */
body[data-auth="in"] .nav{
  background:var(--qff-gold-x-light);
  box-shadow:inset 0 -1px 0 var(--opacity-neutral-x-light);
}
body[data-auth="in"] .fsw{--fsw-wash:var(--qff-gold-x-light)}

.nav__inner{
  display:flex;align-items:center;gap:20px;
  height:var(--nav-h);
  padding-inline:var(--gutter);
}
/* The masterbrand lockup is two layers with their own insets in the
   162 x 32 box — node 7:19373 — so it is positioned, not laid out. */
/* The two layers are placed as fractions of the 162 x 32 box, so the box
   must keep that exact ratio at every size — otherwise the tail stops
   registering with the wordmark's Q. Set the width only; the ratio
   derives the height. */
.nav__logo{position:relative;width:162px;aspect-ratio:162/32;flex:none}
.nav__logo-tail{position:absolute;left:0;top:0;height:100%;width:auto}
.nav__logo-type{position:absolute;left:23.29%;top:34.11%;width:76.71%;height:auto}
/* The oneworld mark is a square image (31.5 x 31.5) inside a 31.5 x 36
   frame in Figma — the frame is taller only for vertical alignment, so
   sizing to the frame stretches the logo. */
.nav__oneworld{width:32px;height:32px;flex:none}

.nav__menu{display:flex;align-items:center;gap:var(--fixed-padding-sm);flex:1;min-width:0;padding:4px 0 0 12px}
.nav__item{
  padding:var(--fixed-padding-xs) var(--fixed-padding-sm);
  border-radius:var(--radius-md);
  font-size:18px;line-height:28px;font-weight:500;
  white-space:nowrap;
  transition:background var(--motion-exit);
}
/* opacity/neutral/xx-light, not the subtle surface — an alpha, so it reads
   the same on the white bar and on the signed-in gold one. */
.nav__item:hover{background:var(--opacity-neutral-xx-light)}
/* On state — the page you are currently on. */
.nav__item[aria-current="page"]{background:var(--opacity-neutral-xx-light)}

/* pr-16 on the group is what sets the 36px run to the Log in button —
   node 48:70403. */
.nav__utils{display:flex;align-items:center;gap:var(--dimensions-24);flex:none;padding:4px 16px 0 0}
/* Dark-mode switch — prototype scaffolding. Floating, so the nav matches the
   design exactly; styled off the same inverse pair as the flow helper so the
   two demo controls read as a set. */
.themeswitch{
  position:fixed;left:16px;bottom:16px;z-index:90;
  display:flex;align-items:center;gap:var(--fixed-margin-xs);
  padding:var(--fixed-padding-xs) var(--fixed-padding-md);
  border-radius:var(--radius-round);
  background:var(--background-neutral-standard-inverse);
  color:var(--text-neutral-inverse);
  font-size:14px;line-height:20px;font-weight:500;
  box-shadow:var(--box-shadow-md);
}
.themeswitch .switch{width:32px;height:20px;margin:0;--knob-travel:12px}
.themeswitch .switch__knob{width:16px;height:16px}

.nav__icon{display:grid;place-items:center;width:24px;height:24px}
.nav__icon img{width:24px;height:24px}
.nav__help{font-size:16px;line-height:24px;font-weight:500;color:var(--text-neutral-secondary)}
.nav__help:hover{color:var(--text-neutral-primary)}

.nav__locale{display:flex;align-items:center;gap:var(--dimensions-8);font-size:16px;line-height:24px;font-weight:500}
.nav__flag{width:24px;height:24px;border-radius:var(--radius-round);border:0.5px solid var(--border-neutral-subtle)}
.nav__locale-rule{width:1px;height:20px;background:var(--border-neutral-subtle)}
.nav__caret{width:16px;height:16px;margin-left:-4px}

.nav__login,.nav__points{flex:none}
body[data-auth="out"] .nav__points{display:none}
body[data-auth="in"]  .nav__login {display:none}

/* Burger — not in the 1920 frame; needed once the menu no longer fits */
.nav__burger{display:none;flex:none;width:44px;height:44px;padding:10px;flex-direction:column;justify-content:center;gap:var(--dimensions-4)}
.nav__burger span{display:block;height:2px;background:var(--icon-neutral-primary);border-radius:2px}

/* ============================================================
   Flight search widget — node 4:5115
   ============================================================ */
.fsw{
  /* 1px of border/neutral/solid-inverse along the top — node 48:78551. Figma
     draws the stroke inside the frame, so the 64px top padding gives the
     pixel back and the section stays 502 tall with the hero still at 64. */
  border-top:1px solid var(--border-neutral-solid-inverse);
  padding:calc(var(--fixed-padding-3xl) - 1px) var(--gutter) var(--fixed-padding-3xl);
  /* page/neutral/subtle -> page/neutral/standard, both at full strength now
     the design states them as stops. */
  background:linear-gradient(180deg,var(--fsw-wash),var(--background-neutral-standard));
}
.fsw .shell{display:flex;flex-direction:column;gap:var(--fixed-margin-2xl)}

/* Personalised headline — node 4:10311.
   The frame is called "GenerativeAI" and draws a cursor before the arrow, so
   the headline is an editable field: the rotating prompts are a placeholder
   and you can type your own question over them. */
.hero{position:relative;min-height:176px}
.hero__line{
  margin:0;
  font-family:"Qantas Sans";
  font-weight:300;               /* Qantas Sans Light */
  font-size:80px;
  /* 80/80 with -3.2px of tracking — node 52:79496. The line-height used to be
     88 and the tracking -2.4; Adam tightened both, so the two lines now set
     solid. */
  line-height:1;
  letter-spacing:-0.04em;        /* -3.2px at 80px */
  color:var(--utility-text);
  /* Each frame sizes its own text box to force a two-line break, so the
     break travels with the copy as a newline and is honoured here. */
  white-space:pre-wrap;
  /* Two lines are always reserved, so the page never reflows as the prompt
     types itself in. Exactly 2em now the leading is solid. */
  min-height:2em;
}

.hero__ask{
  outline:none;
  /* The red cursor, node 4:10356. A border rather than its own element: an
     inline-block here would add a line-break opportunity and the wrap would
     shift as the cursor travelled through the text. */
  border-right:var(--dimensions-4) solid var(--icon-brand-primary);
  caret-color:var(--icon-brand-primary);
}
/* Flash whenever the field is waiting — including before the first prompt
   types in, which is the cue that you can type here yourself. Solid while
   characters are actually landing. */
.hero:not(.is-typing):not(.is-focused) .hero__ask{
  animation:caret-blink 1s steps(1,end) infinite;
}
/* Focused: the browser's own caret takes over, coloured to match. */
.hero.is-focused .hero__ask{border-right-color:transparent}
@keyframes caret-blink{50%{border-right-color:transparent}}

/* The arrow appears once there is something to ask — node 6:11160 */
.hero__go{
  display:inline-grid;place-items:center;
  width:1em;height:1em;margin-left:0.15em;
  vertical-align:-0.16em;
  opacity:0;transform:translateX(-8px);
  transition:opacity var(--motion-enter),transform var(--motion-enter);
  pointer-events:none;
}
.hero.is-done .hero__go{opacity:1;transform:none;pointer-events:auto}
.hero__go img{width:100%;height:100%}
.hero__go:hover img{transform:translateX(4px);transition:transform var(--motion-enter)}

/* Sits in the 48px gap below the headline rather than adding height, so the
   FSW keeps the spacing the design specifies and nothing shifts. */
.hero__hint{
  position:absolute;left:0;top:100%;
  margin-top:var(--fixed-margin-2xs);
  font-size:16px;line-height:24px;font-weight:400;
  color:var(--text-neutral-secondary);
  opacity:0;
  transition:opacity var(--motion-enter);
}
.hero:hover .hero__hint,
.hero.is-focused .hero__hint{opacity:1}
.hero__hint kbd{
  font:inherit;
  padding:0 var(--fixed-padding-2xs);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-xs);
  background:var(--background-neutral-standard);
}

/* Tab bar — node 4:10221 */
.searchwidget{position:relative;display:flex;flex-direction:column;gap:var(--fixed-margin-md)}
/* Figma butts the tabs together (gap 0) and relies on their 20px padding;
   a small gap separates the selected pill a little more clearly. */
/* The row is 48 tall and the tabs overflow it — the selected pill is 56 and
   the rest 52, both centred on the 48, exactly as node 48:71199 draws them.
   Hugging the tallest tab instead would push the fields 8px down. */
.tabbar{display:flex;align-items:center;gap:var(--dimensions-4);height:48px}
.tabbar__tab{
  display:flex;align-items:center;gap:0;
  /* 10/18 + the 2px border = the 12/20 padding Figma draws, and keeps the
     selected pill at its 56px frame height instead of 60. */
  padding:10px 18px;
  border:2px solid transparent;
  border-radius:100px;
  font-family:"Qantas Sans";
  font-size:20px;line-height:28px;font-weight:500;
  white-space:nowrap;
  transition:border-color var(--motion-exit),color var(--motion-exit);
}
.tabbar__tab.is-selected{
  border-color:var(--border-brand-standard);
  color:var(--text-brand-primary);
}
/* The tail flies in when Flights is selected and out when it is not. The
   wrapper animates its own width — 32 for the glyph plus the 4px gap — so the
   pill contracts and expands with it rather than the label jumping. The tab
   gap is 0 for the same reason: the spacing belongs to the wrapper, so it can
   collapse. */
.tabbar__pic{
  flex:none;display:block;overflow:hidden;
  width:36px;height:32px;
  transition:width var(--motion-enter), opacity var(--motion-enter), transform var(--motion-enter);
}
.tabbar__pic img{width:32px;height:32px;display:block}
.tabbar__tab:not(.is-selected) .tabbar__pic{
  width:0;opacity:0;
  transform:translateX(-10px) scale(0.6);
}
@media (prefers-reduced-motion:reduce){
  /* the fade still carries the state; the flight is the part that moves */
  .tabbar__pic{transition:opacity var(--motion-exit)}
  .tabbar__tab:not(.is-selected) .tabbar__pic{transform:none}
}
/* node 48:71252 — 52 tall against its 48-tall siblings, because the switch
   inside it is 28. */
.fswopts__rewards{padding-block:var(--dimensions-12)}
/* Node 48:71203 carries an extra 8px on its leading edge. */
.tabbar__tab[data-search="hotels"]{padding-left:26px}
.tabbar__tab:not(.is-selected):hover{color:var(--text-brand-primary)}

/* Trip options row — node 12:22546 */
/* Hidden at Adam's request. The row is still in the markup and app.js still
   toggles it with the tab, so putting the display back is the one line —
   restore `display:flex` here. Note the FSW loses the row's 52px and the 16px
   above it, so the section is 502 tall rather than the 570 Figma draws. */
.fswopts{display:none;align-items:center;gap:var(--fixed-margin-2xs)}
/* A class-level display beats the hidden attribute's UA display:none. */
.fswopts[hidden]{display:none}
/* Rewards sits on the same 16px as the other pills. Figma has this one at
   body/strong/lg; 16px is what Adam wants. */

/* Switch — node 12:22689. The export only carries the off state (a #666564
   track with a 20px white knob), so the on colour is a convention. */
.switch{
  position:relative;flex:none;
  /* The track is 38x24 — node 12:22622. The component box is 28 because the
     design wraps it in 2px of padding, and that is what makes the Rewards
     pill 52 tall where its siblings are 48. --knob-travel is the width less
     the knob and its 2px inset at each end; the knob inherits it, so one
     transform rule serves every size. */
  width:38px;height:24px;margin-block:2px;
  --knob-travel:14px;
  background:var(--text-neutral-secondary);
  border-radius:var(--radius-round);
  transition:background var(--motion-exit);
}
.switch__knob{
  position:absolute;top:2px;left:2px;
  width:20px;height:20px;
  /* static-white, not the page surface: the knob is the thing that moves
     against the track and has to stay light in either theme. */
  background:var(--icon-neutral-static-white);
  border-radius:var(--radius-round);
  transition:transform var(--motion-exit);
}
.switch[aria-checked="true"],
[aria-checked="true"] > .switch{background:var(--button-primary-background-enabled)}
.switch[aria-checked="true"] .switch__knob,
[aria-checked="true"] > .switch > .switch__knob{transform:translateX(var(--knob-travel))}

/* Search fields — node 4:10245 */
.fields{display:flex;align-items:stretch;gap:var(--dimensions-16)}
/* A class-level display beats the hidden attribute's UA display:none, so the
   inactive tab panels need this to actually hide. */
.fields[hidden]{display:none}
.fields__route{position:relative;display:flex;flex:1;min-width:0;gap:var(--fixed-margin-xs)}

.field{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:var(--dimensions-4);
  min-width:0;
  /* 11/23 + the 1px border = Figma's 12/24, holding the field at 86px. */
  padding:11px 23px;
  /* Alphas rather than the flat subtle/subtle pair — node 48:78649. This is
     what lets the fields tint with whatever is behind them: on the signed-in
     gold wash they pick up the cream, and in dark they lift off the surface,
     where #f3f2f1 would have stayed a grey patch in both. */
  background:var(--opacity-neutral-xx-light);
  border:1px solid var(--opacity-neutral-x-light);
  border-radius:var(--radius-lg);
  transition:background var(--motion-exit),border-color var(--motion-exit);
}
/* Scoped to the text input, not :focus-within — the swap button lives inside
   the From field, and focusing it must not put the whole field in its active
   state. Keep the 1px so the box does not shift, but make it invisible,
   otherwise it reads as a grey line inside the focus ring. */
.field:has(.field__input:focus){background:var(--background-neutral-standard);border-color:transparent}

/* From and To are two separate rounded fields with an 8px gap — node 4:10247.
   From is a fixed 434px and To takes the rest, so it can shrink below 434 on
   a narrow column but never grows past it. */
.fields__route .field:first-of-type{
  position:relative;
  flex:0 1 434px;
  max-width:434px;
}
.fields__route .field--to{
  flex:1 1 auto;
  padding-inline:var(--dimensions-48);
}

.field__label{font-size:16px;line-height:22px;font-weight:500;color:var(--text-neutral-secondary)}
.field--when .field__value{align-items:flex-start}
.field--when .field__input{font-size:18px;line-height:24px}
.field__value{display:flex;align-items:center;gap:var(--dimensions-8);min-width:0}
/* From and To lead with a plane icon on a 12px gap — nodes 22:23469 and
   22:23474. In Figma the city and code are one text run separated by a single
   space, not a gap, so the row gap is space-width and the icon makes up the
   rest of its 12px. */
/* 4px gap + the 2px caret allowance on the input reads as the ~6px space the
   design uses; the icon makes its 12px up with a margin. */
.fields__route .field__value{gap:var(--dimensions-4)}
.fields__route .field__lead{margin-right:var(--dimensions-8)}
.field__lead{width:24px;height:24px;flex:none}
/* The input is sized to its content — in the design the airport code sits
   right beside the city name, not out at the edge of the field. app.js
   keeps the size attribute in step with the value. */
.field__input{
  min-width:0;flex:0 1 auto;width:auto;max-width:100%;
  padding:0;background:none;border:0;outline:none;
  font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:400;
  color:var(--text-neutral-secondary);
  text-overflow:ellipsis;
}
.field__code{
  flex:none;
  font-family:"Qantas Sans";font-size:24px;line-height:36px;font-weight:500;
  color:var(--text-brand-secondary);
}
.field__icon{width:24px;height:24px;flex:none}
/* Date fields are driven by the picker, so they read as a control, not a
   text box you type into. */
.field__input[data-picker]{cursor:pointer}
.field:has(.field__input[data-picker]){cursor:pointer}
.field--when{flex:none;width:218px}
/* The dummy tab panels share the leftover width between their text fields
   rather than using the Flights joined-pill treatment. */
.field--grow{flex:1;min-width:0}

/* Swap — node 4:10276. Centred on the 8px gap: it hangs off the From field's
   trailing edge, so it follows From's real width rather than a midpoint. */
.swap{
  position:absolute;left:calc(100% + 1px);top:50%;   /* +1px steps over the border */
  transform:translate(calc(-50% + var(--fixed-margin-2xs)),-50%);z-index:2;
  display:grid;place-items:center;
  width:46px;height:46px;
  background:var(--background-neutral-standard);
  border:1px solid var(--background-neutral-strong);
  border-radius:100px;
  transition:transform var(--motion-exit),border-color var(--motion-exit);
}
.swap img{width:24px;height:24px}
.swap:hover{border-color:var(--border-brand-standard)}
.swap.is-spun{transform:translate(calc(-50% + var(--fixed-margin-2xs)),-50%) rotate(180deg)}

/* 20px rather than the body/lg 18px — set on this instance in the design. */
.btn--search{flex:none;padding-block:var(--dimensions-14);font-size:20px}

/* ============================================================
   Date picker — not in the Figma frame. Built from the same tokens so it
   reads as part of the system: two months side by side like qantas.com,
   one on a phone.
   ============================================================ */
.datepicker{
  position:absolute;z-index:30;
  padding:var(--fixed-padding-lg);
  background:var(--background-neutral-standard);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--box-shadow-lg);
}
.datepicker[hidden]{display:none}

.dp__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--fixed-margin-md);
  margin-bottom:var(--fixed-margin-md);
}
.dp__nav{
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:var(--radius-round);
  transition:background var(--motion-exit);
}
.dp__nav:hover{background:var(--background-neutral-subtle)}
.dp__nav[disabled]{opacity:0.3;cursor:default}
.dp__nav img{width:16px;height:16px}
/* The asset points right, so it is the prev button that flips. */
.dp__nav--prev img{transform:rotate(180deg)}
.dp__hint{font-size:14px;line-height:20px;font-weight:500;color:var(--text-neutral-secondary)}

.dp__months{display:flex;gap:var(--fixed-margin-2xl)}
.dp__month{width:266px}
.dp__title{
  margin-bottom:var(--fixed-margin-xs);
  font-family:"Qantas Sans";
  font-size:18px;line-height:24px;font-weight:500;
  text-align:center;
}
.dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--dimensions-2)}
.dp__dow{
  font-size:12px;line-height:18px;font-weight:500;
  color:var(--text-neutral-secondary);
  text-align:center;
  padding-bottom:var(--fixed-padding-2xs);
}
.dp__day{
  aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:var(--radius-sm);
  font-size:14px;line-height:20px;font-weight:500;
  transition:background var(--motion-exit),color var(--motion-exit);
}
.dp__day:hover:not([disabled]){background:var(--background-neutral-subtle)}
.dp__day[disabled]{color:var(--text-neutral-disabled,rgba(0,0,0,0.4));cursor:default}
.dp__day--empty{visibility:hidden}
/* No token exists for the in-between range fill, so this is a convention. */
.dp__day--in-range{background:var(--background-neutral-strong);border-radius:0}
.dp__day--start,.dp__day--end{
  background:var(--button-primary-background-enabled);
  color:var(--button-primary-text);
}
.dp__day--start{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.dp__day--end{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.dp__day--start.dp__day--end{border-radius:var(--radius-sm)}
.dp__day--start:hover,.dp__day--end:hover{background:var(--text-brand-secondary)}
.dp__today{box-shadow:inset 0 0 0 1px var(--border-neutral-standard,#b2b1af)}

.dp__foot{
  display:flex;align-items:center;justify-content:flex-end;
  gap:var(--fixed-margin-sm);
  margin-top:var(--fixed-margin-md);
  padding-top:var(--fixed-padding-md);
  border-top:1px solid var(--border-neutral-subtle);
}

@media (max-width:720px){
  .datepicker{padding:var(--fixed-padding-md)}
  .dp__months{gap:var(--fixed-margin-lg)}
  /* One month at a time on a phone. */
  .dp__month:nth-child(2){display:none}
  .dp__month{width:100%}
}

/* ============================================================
   Quick links + drawer — node 6:11718
   ============================================================ */
/* No top padding — node 48:70511 puts the tile row flush against the FSW
   and carries all 64 of its spacing underneath the drawer. */
.quicklinks{padding:0 var(--gutter) var(--fixed-padding-3xl)}

/* Row of five — node 6:13992. justify-between at 1280, per the frame. */
.qlbar__row{
  display:flex;align-items:stretch;justify-content:space-between;
  padding-inline:var(--responsive-padding-xl);
}
.ql{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--dimensions-4);
  padding:var(--fixed-padding-md) var(--dimensions-20);
  min-height:120px;
  /* Top corners only: both hover and the selected state run flush into the
     drawer below, so a bottom radius would break the join. */
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  font-size:16px;line-height:24px;font-weight:500;
  text-align:center;
  transition:background var(--motion-exit);
}
.ql img{width:48px;height:48px}
.ql:hover{background:var(--opacity-neutral-xx-light)}

/* The selected item tabs into the drawer below it — node 6:14013 */
.ql[aria-selected="true"]{
  background:var(--background-neutral-subtle);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.ql[aria-selected="true"]:hover{background:var(--background-neutral-subtle)}

/* Drawer — node 6:11927 / 7:18290 */
.drawer{
  background:var(--background-neutral-subtle);
  border-radius:var(--radius-md);
  padding:var(--fixed-padding-2xl) var(--responsive-padding-xl);
}
/* The trip panel is inset 48 where the sign-in panel is 64 — node 7:18291
   sits at x=48 in the 1280 drawer, which is what makes its four cards 258
   wide rather than 251. */
.drawer:has(.drawer__panel--trip:not([hidden])){padding-inline:var(--fixed-padding-2xl)}
body[data-drawer="closed"] .drawer{display:none}

.drawer__panel[hidden]{display:none}
.drawer__panel{animation:rise var(--motion-enter) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ---------- Two-column panel — node 6:11927 ---------- */
.drawer__panel--signin,
.drawer__cols{display:flex;align-items:flex-start;gap:var(--dimensions-32)}

/* The dummy panels that need a row of cards under the two columns */
.drawer__panel--stack{display:flex;flex-direction:column;gap:var(--dimensions-32)}
.section{display:flex;flex-direction:column;gap:var(--fixed-margin-md)}
.section__title{font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:500}
.cards{display:grid;gap:var(--dimensions-24)}
.cards--3{grid-template-columns:repeat(3,1fr)}

/* Popular topics list — Help & support panel */
.topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%}
.topics a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-md);
  padding:var(--fixed-padding-sm) 0;
  border-bottom:1px solid var(--border-neutral-subtle);
  font-size:16px;line-height:24px;font-weight:500;
}
.topics li:last-child a{border-bottom:0}
.topics a img{width:16px;height:16px;flex:none}
.topics a:hover{color:var(--text-brand-primary)}
.promo,.retrieve{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--dimensions-20);align-items:flex-start}
/* heading/md — 32/40 Qantas Sans Medium */
.promo__title{font-family:"Qantas Sans";font-size:32px;line-height:40px;font-weight:500}
.promo__body{font-size:18px;line-height:28px;font-weight:400;color:var(--text-neutral-secondary)}
.promo__body strong{font-weight:700}
.retrieve__title{font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:500}
.retrieve__fields{display:flex;gap:var(--dimensions-20);width:100%}

/* Input field — node 6:11933. The design shows only the resting label,
   so the label doubles as the floating label once there is a value. */
.input{
  flex:1;min-width:0;position:relative;
  background:var(--background-neutral-standard);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-md);
  transition:border-color var(--motion-exit);
}
.input:focus-within{border-color:transparent}
.input__label{
  position:absolute;left:var(--fixed-padding-md);top:var(--fixed-padding-md);
  font-size:16px;line-height:24px;font-weight:500;
  color:var(--text-neutral-primary);
  pointer-events:none;
  transition:transform var(--motion-exit),font-size var(--motion-exit),color var(--motion-exit);
  transform-origin:left top;
}
.input:focus-within .input__label,
.input.is-filled .input__label{
  transform:translateY(-8px) scale(0.75);
  color:var(--text-neutral-secondary);
}
.input__control{
  width:100%;
  padding:24px var(--fixed-padding-md) 8px;
  background:none;border:0;outline:none;
  font-size:16px;line-height:24px;font-weight:500;
}
.input__control::placeholder{color:transparent}
.input:focus-within .input__control::placeholder{color:var(--text-neutral-secondary)}

/* ---------- Logged-in panel — node 7:18290 ---------- */
.drawer__panel--trip{display:flex;flex-direction:column;gap:var(--dimensions-32)}

.trip__head{display:flex;flex-direction:column;gap:var(--fixed-margin-xs)}
.trip__title{font-family:"Qantas Sans";font-size:32px;line-height:40px;font-weight:500}
.trip__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-md);flex-wrap:wrap}
.trip__pax{font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:500}
.trip__pax span{margin-right:var(--fixed-margin-xs)}
.trip__refs{
  display:flex;align-items:center;gap:var(--fixed-margin-lg);flex-wrap:wrap;
  padding:var(--fixed-padding-xs) var(--fixed-padding-md);
  background:var(--opacity-neutral-xx-light);
  border-radius:var(--radius-sm);
}
.ref{display:inline-flex;align-items:center;gap:var(--fixed-margin-xs);font-size:16px;line-height:24px;font-weight:400}
.ref b{font-family:"Qantas Sans";font-size:18px;line-height:24px;font-weight:500}
.ref__copy{display:grid;place-items:center;width:24px;height:24px;margin-left:-4px}
.ref__copy img{width:24px;height:24px}

/* Four cards — node 7:18309 */
/* Node 7:18309 — four 258x313 cards on a 50px gutter. The height is fixed in
   the design and the card body is space-between, so each button sits 24 off
   the bottom however little content is above it. */
.trip__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:50px}
.trip__cards .card{height:313px}
.cards--3 .card__head{gap:var(--dimensions-8)}
.card{
  display:flex;flex-direction:column;
  background:var(--card-wash);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.card__head{
  display:flex;align-items:center;gap:10px;
  /* 44 tall — nodes 7:18311, 7:18352, 7:18377, 7:18412. 10px of padding
     against the 24px icon, not 12, or the row comes out 48. */
  min-height:44px;
  padding:var(--dimensions-10) var(--fixed-padding-lg);
  background:var(--card-head);
  font-size:16px;line-height:24px;font-weight:500;
}
.card__head img{width:24px;height:24px;flex:none}
.card__body{
  flex:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--fixed-margin-sm);
  padding:var(--fixed-padding-lg) var(--fixed-padding-md);
}
.card__content{display:flex;flex-direction:column;gap:var(--dimensions-12)}

/* Flight details — node 7:18310 */
.flight__when{display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-xs)}
.badge{
  padding:var(--fixed-padding-3xs) var(--fixed-padding-xs);
  border-radius:var(--radius-xs);
  font-size:12px;line-height:18px;font-weight:400;
}
.badge--success{background:var(--success-standard-background);color:var(--success-standard-link)}
/* Only the success badge appears in the design. These two follow the same
   shape for the dummy flight-status content and are conventions, not tokens. */
.badge--info{background:var(--info-standard-background);color:var(--info-standard-link)}
.badge--warning{background:var(--warning-standard-background);color:var(--warning-standard-link)}

.tieline{display:flex;align-items:center;gap:var(--dimensions-4);padding-inline:var(--fixed-padding-md)}
.tieline__dot{width:4px;height:4px;flex:none}
.tieline__line{flex:1;min-width:0;height:2px;border-radius:1px;background:var(--border-neutral-standard)}

.flight__ends{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fixed-margin-md)}
.flight__end--arrive{text-align:right}

.flight__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-xs)}
.flight__no{display:inline-flex;align-items:center;gap:2px;font-size:14px;line-height:20px;font-weight:500;color:var(--palette-grey-100)}
.flight__no img{width:21px;height:22px;flex:none}
.flight__dur{font-size:14px;line-height:20px;font-weight:400;white-space:nowrap}
.flight__dur b{font-weight:500}

/* Baggage and Meal stat groups — nodes 7:18356, 7:18418 */
.stats{flex-direction:row;align-items:center;justify-content:center;gap:var(--fixed-margin-md);flex:1}
.stat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--dimensions-8);text-align:center}
.stat img{width:48px;height:48px}
.stat--muted{opacity:0.25}

/* Seat map — node 7:18384. Seats are the Seat Button / Base Economy
   component (node 12:20992) exported per variant, so each one is artwork
   rather than a styled box, and the row butts together with no gap. */
.seatmap-wrap{align-items:center;justify-content:center;gap:11px;flex:1}
.seatmap{display:flex;align-items:center}
.seat__box{
  position:relative;
  width:48px;height:48px;
  border-radius:var(--radius-xs);
}
.seat__box[aria-disabled="true"]{cursor:default}
.seat__art{width:48px;height:48px}
/* The left-hand seat's artwork carries an armrest that sits 3px outside the
   48px box — node 12:21001, inset -6.25%. */
/* The row's outer seats carry an extra 3px armrest on their outside edge —
   nodes 7:18387 and 7:18404 export at 51x48 where the inner two are 48. */
.seat__art--left{width:51px;height:48px;margin-left:-3px}
.seat__art--right{width:51px;height:48px;margin-right:-3px}
/* "33D" over the selected seat — node 12:21760, centred in the 48px box. */
.seat__number{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:14px;line-height:20px;font-weight:500;
  color:var(--text-on-brand);
}


/* ============================================================
   Responsive — the Figma has only the 1920 frame, so everything
   below 1440 is a design decision made here, not read from the file.
   Breakpoints are set where the 1280 desktop layout actually breaks.
   ============================================================ */

/* 1440 and down — shrink the gutter before anything else gives way */
@media (max-width:1439px){
  :root{--gutter:40px}
  .qlbar__row{padding-inline:var(--dimensions-24)}
  .drawer{padding-inline:var(--fixed-padding-2xl)}
  .trip__cards{gap:var(--dimensions-24)}
}

/* 1180 and down — the nav menu no longer fits beside the utilities,
   so it collapses behind the burger. */
@media (max-width:1180px){
  .nav__burger{display:flex}
  .nav__menu{
    position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;align-items:stretch;gap:var(--dimensions-4);
    padding:var(--fixed-padding-md);
    background:var(--background-neutral-standard);
    border-bottom:1px solid var(--border-neutral-subtle);
    box-shadow:0 8px 16px -8px rgba(0,0,0,0.12);
  }
  .nav__menu:not(.is-open){display:none}
  .nav__item{font-size:20px;line-height:32px}
  .nav__inner{gap:var(--dimensions-12)}
  /* The menu is out of flow now, so the utilities take over as the spacer.
     The burger is ordered last so it sits hard right against the gutter. */
  .nav__utils{margin-left:auto}
  .nav__burger{order:9}
  .nav__oneworld{display:none}
  .hero__line{font-size:64px}
  .hero{min-height:0}
}

/* 1024 and down — the four trip cards go to two columns, and the
   logged-out drawer stops being two columns. */
@media (max-width:1024px){
  /* The bar has no room for both the lockup and a usable field, so the logo
     stands down while you search. The burger stays — it carries the flex
     spacer that holds the utilities, and hiding it made the icon jump. */
  body[data-search="open"] .nav__logo{display:none}
  .trip__cards{grid-template-columns:repeat(2,1fr);gap:var(--dimensions-24)}
  /* The break baked into the copy is placed for 80px on a 1280 column, so
     below this let the headline reflow. white-space:normal collapses the
     newline to a space. */
  .hero__line{white-space:normal}
  .promo__title{font-size:28px;line-height:36px}
  .drawer__panel--signin,.drawer__cols{flex-direction:column;gap:var(--dimensions-32)}
  .promo,.retrieve{width:100%}
  .nav__help{display:none}
  /* Five quick links stop fitting — let the row scroll rather than wrap,
     so the selected tab stays visually joined to the drawer. */
  .qlbar__row{
    justify-content:flex-start;gap:var(--dimensions-4);
    padding-inline:var(--dimensions-8);
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .qlbar__row::-webkit-scrollbar{display:none}
  .ql{flex:none;width:132px;scroll-snap-align:center}
}

/* 860 and down — the search fields stack. From/To become a stacked
   pair with the swap button on the seam, which is how qantas.com
   handles the same widget on a phone. */
/* The four fields plus the button only fit a row down to about 1200px now
   that the values read "Sydney, Australia" and carry a leading icon. Below
   that they squeezed hard enough to truncate, so they stack here instead. */
@media (max-width:1200px){
  .fields{flex-direction:column;align-items:stretch}
  /* Stacked, still two separate rounded fields with the same 8px gap. */
  .fields__route{flex-direction:column}
  .fields__route .field:first-of-type{flex:1 1 auto;max-width:none}
  .fields__route .field--to{padding-inline:var(--dimensions-24)}
  /* The gap is horizontal now, so the swap rides From's bottom edge. */
  .swap{
    left:auto;right:var(--dimensions-16);top:calc(100% + 1px);
    transform:translate(0,calc(-50% + var(--fixed-margin-2xs))) rotate(90deg);
  }
  .swap.is-spun{transform:translate(0,calc(-50% + var(--fixed-margin-2xs))) rotate(270deg)}
  .field--when{width:auto}
  .btn--search{width:100%}
  .tabbar{
    /* Scrolling reintroduces vertical clipping, so the row goes back to
       hugging its tallest tab here. */
    height:auto;
    overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
  }
  .tabbar::-webkit-scrollbar{display:none}
}

@media (max-width:860px){
  /* The 20px tab and field type is sized for the 1280 column; step it down
     on a narrow one. Labels drop too, so the value still reads as primary. */
  .tabbar__tab{font-size:16px;line-height:24px;padding:var(--fixed-padding-xs) var(--fixed-padding-md)}
  .tabbar__pic{width:28px;height:24px}
  .tabbar__pic img{width:24px;height:24px}
  .field__label{font-size:14px;line-height:20px}
  .field__input{font-size:16px;line-height:24px}
  .field__code{font-size:18px;line-height:24px}
  .field--when .field__input{font-size:16px;line-height:24px}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  /* 620px of pills will not fit a narrow column, so let the row wrap. */
  .fswopts{flex-wrap:wrap;gap:var(--dimensions-4)}
}

/* 720 and down — phone. One card column, tighter gutters, and the
   headline drops to a size that still fits two words per line. */
@media (max-width:720px){
  :root{--gutter:20px;--nav-h:64px}
  .fsw{padding-block:var(--dimensions-32) var(--dimensions-24)}
  .fsw .shell{gap:var(--dimensions-32)}
  .hero__line{font-size:clamp(34px,9vw,48px)}
  .hero__ask{border-right-width:3px}
  /* The 1920 nav has five menu items, Help, a locale picker and a button
     side by side. On a phone only the logo, search and the account button
     survive in the bar; the menu and locale move behind the burger. */
  .nav__inner{gap:var(--dimensions-8)}
  /* The switch stays in the bar on a phone — it is the only way to reach the
     theme — but the utilities close up and the track drops a size so the
     signed-in points pill still fits inside 390px. */
  .nav__logo{width:104px}
  .nav__burger{width:40px;height:40px;padding:9px;gap:3px}
  /* The 16px right pad is a 1920 detail — the phone bar has no run to the
     account button. */
  .nav__utils{gap:var(--dimensions-12);padding-right:0}
  .nav__locale{display:none}
  .nav__login,.nav__points{min-width:0}
  .nav__points span{overflow:hidden;text-overflow:ellipsis}
  .btn--secondary,.btn--qff{padding:8px 14px;font-size:16px;line-height:24px}
  .btn--muted{padding:8px 16px;font-size:16px;line-height:24px}
  .btn--lead{padding:8px 16px}
  .btn--muted img{width:20px;height:20px}
  .btn--qff img{width:20px;height:20px}

  .quicklinks{padding-bottom:var(--dimensions-32)}
  .qlbar__row{
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
  }
  .ql{width:112px;min-height:104px;padding-inline:var(--dimensions-8);font-size:14px;line-height:20px}
  .ql img{width:40px;height:40px}

  .drawer{padding:var(--dimensions-24) var(--dimensions-20)}
  .promo__title{font-size:24px;line-height:32px}
  .trip__title{font-size:24px;line-height:32px}
  .promo__body{font-size:16px;line-height:24px}
  .retrieve__fields{flex-direction:column}
  .trip__cards,.cards--3{grid-template-columns:1fr}
  .trip__cards .card{height:auto}
  .section__title{font-size:18px;line-height:24px}
  .trip__meta{flex-direction:column;align-items:flex-start}
  .trip__refs{flex-direction:column;align-items:flex-start;gap:var(--dimensions-4);width:100%}
}

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

/* ============================================================
   Promotion banner — node 28:69022
   ============================================================ */
body[data-view="results"] .salebanner{display:none}
/* Figma 28:69022 — the banner sits flush under the Quick Link Container
   (drawer bottom 1058 -> row top 1122), so the 64px gap is the quicklinks
   bottom padding alone. Only the banner's own 64px bottom padding here. */
.salebanner{padding:0 var(--gutter) var(--fixed-padding-3xl)}
/* Figma draws this row 1298 wide inside a 1280 column, so the cards overhang
   the gutter by 18. Keeping the row in the column but giving the content its
   real 498 is what matters: at 491 the 48px "Queensland Sale" wrapped to two
   lines and pushed the card 56px taller than the design. */
.salebanner__row{display:grid;grid-template-columns:498px minmax(0,1fr);gap:var(--fixed-margin-md)}

.sale__content{
  display:flex;flex-direction:column;justify-content:center;
  gap:10px;
  padding:var(--dimensions-64,64px);
  background:linear-gradient(180deg,var(--qff-bronze),var(--qff-bronze-secondary));
  /* the 48px corner is the motif that ties the card to the fare grid */
  border-radius:var(--radius-lg) var(--radius-3xl) var(--radius-lg) var(--radius-lg);
  overflow:hidden;
}
.sale__card{display:flex;flex-direction:column;gap:var(--responsive-margin-md,24px);align-items:flex-start}

.sale__badge{
  display:inline-flex;align-items:center;gap:var(--dimensions-6);
  margin:0;
  padding:var(--fixed-padding-2xs) var(--fixed-padding-sm) var(--fixed-padding-2xs) var(--fixed-padding-xs);
  /* This chip sits on the sale panel's red, which is mode-invariant, so the
     chip is too: charcoal on white in both themes. The on-media pair is
     exactly that role — its "light/dark" refers to the media underneath, not
     the theme — where background/neutral/standard and utility/text would have
     flipped it to white-on-near-black over the red. */
  background:var(--button-onmedia-background-enabled);
  border-radius:var(--radius-xs);
  font-size:16px;line-height:22px;font-weight:400;
  color:var(--button-onmedia-text);
}
.sale__badge img{width:20px;height:20px;flex:none}

/* display/sm — 48/56 Qantas Sans Light */
/* The description and the timer share one slot on a 16px gap where the rest
   of the card is 24 apart — node I48:70586;9474:29737. */
.sale__slot{display:flex;flex-direction:column;gap:var(--fixed-margin-md)}
.sale__title{
  margin:0;
  font-family:"Qantas Sans";font-size:48px;line-height:56px;font-weight:300;
  color:var(--text-on-brand);
}
.sale__body{
  margin:0;
  font-size:16px;line-height:24px;font-weight:400;
  color:var(--text-on-brand);
}
.sale__actions{display:flex;flex-wrap:wrap;gap:var(--dimensions-16)}
.sale__terms{
  margin:0;padding-block:var(--fixed-padding-md);
  font-size:14px;line-height:20px;font-weight:500;
  color:var(--text-on-brand);
}

/* Countdown Timer — node 41826:1024 */
.countdown{display:flex;align-items:flex-start}
.countdown__seg{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dimensions-4);
  padding-inline:var(--dimensions-8);
}
.countdown__seg:first-child{padding-left:0}
.countdown__seg:last-child{padding-right:0}
.countdown__seg b{
  display:grid;place-items:center;
  width:48px;height:46px;
  background:var(--opacity-black-30);
  border-radius:var(--dimensions-6);
  font-family:"Qantas Sans";font-size:24px;line-height:36px;font-weight:500;
  color:var(--text-on-brand);
  /* lining, tabular figures so the seconds do not jitter as they count */
  font-variant-numeric:lining-nums tabular-nums;
}
.countdown__seg small{
  font-size:16px;line-height:22px;font-weight:400;
  color:var(--text-on-brand);
}
.countdown__sep{
  width:6px;height:44px;
  display:grid;place-items:center;
  font-family:"Qantas Sans";font-size:24px;line-height:36px;font-weight:500;
  color:var(--text-on-brand);
}

/* Fare cards — node 28:69032. Each card turns one corner up to 48px; which
   corner rotates around the grid, which is why the radii differ per card. */
.sale__cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--fixed-margin-md);
  padding-top:var(--fixed-padding-2xl);
  align-content:start;
}
.farecard{
  position:relative;
  display:flex;flex-direction:column;gap:var(--fixed-margin-md);
  padding-bottom:var(--fixed-padding-md);
  background:var(--background-neutral-standard);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--motion-enter),box-shadow var(--motion-enter);
}
/* Lifts on hover. z-index so the scaled card sits over its neighbours —
   1.02 on a ~380px card grows ~4px a side, inside the 16px grid gap. */
.farecard:hover{
  transform:scale(1.02);
  box-shadow:var(--box-shadow-md);
  z-index:1;
}
@media (prefers-reduced-motion:reduce){
  /* the shadow still reads the state; the scale is the part that moves */
  .farecard:hover{transform:none}
}
.farecard--tl{border-top-left-radius:var(--radius-3xl)}
.farecard--br{border-bottom-right-radius:var(--radius-3xl)}
/* node 28:69062 carries 12px here where its siblings carry 16 */
.farecard--br-md{border-bottom-right-radius:var(--radius-md)}
.farecard__img{width:100%;height:auto;aspect-ratio:240/120;object-fit:cover}
/* node 48:70592 — route and info are one 44px block, then 8 to the price
   and 4 to the end date. A flat 8px gap everywhere made the card 12 taller. */
.farecard__body{display:flex;flex-direction:column;padding-inline:var(--fixed-padding-md)}
.farecard__route{
  /* 4px each side of the arrow — node 47:69769. Tightened from 10. */
  display:flex;align-items:center;gap:var(--fixed-margin-2xs);margin:0;
  font-family:"Qantas Sans";font-size:18px;line-height:24px;font-weight:500;
}
.farecard__route img{width:24px;height:24px;flex:none}
.farecard__fare{margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--text-neutral-secondary)}
.farecard__price{display:flex;align-items:flex-start;gap:var(--dimensions-4);margin:var(--fixed-margin-xs) 0 0}
.farecard__price b{
  font-family:"Qantas Sans";font-size:32px;line-height:40px;font-weight:500;
  color:var(--text-brand-primary);
}
.farecard__price sup{
  top:0;font-size:12px;line-height:18px;font-weight:400;
  color:var(--text-neutral-primary);
}
.farecard__ends{margin:var(--fixed-margin-2xs) 0 0;font-size:12px;line-height:18px;font-weight:400;color:var(--text-neutral-secondary)}

@media (max-width:1024px){
  /* The gradient card stops holding its own beside the grid, so it goes full
     width and the fares sit under it. */
  .salebanner__row{grid-template-columns:1fr}
  .sale__content{padding:var(--dimensions-32)}
  .sale__title{font-size:32px;line-height:40px}
  .sale__cards{padding-top:0}
}
@media (max-width:720px){
  .salebanner{padding-block:0 var(--dimensions-32)}
  .sale__cards{grid-template-columns:1fr}
  .sale__content{padding:var(--dimensions-24)}
  .sale__title{font-size:28px;line-height:36px}
  .countdown__seg{padding-inline:var(--dimensions-4)}
  .countdown__seg b{width:44px}
}

/* ============================================================
   Search — ported from the RWY 3.0 Search prototype (Search MVP,
   node 23122:84). Rebuilt on this prototype's tokens rather than
   copied, so the two share a look without sharing a stylesheet.
   ============================================================ */
/* The field sits immediately before the utilities in the bar, so it ends at
   the search icon and unfurls leftward from it. Only the menu stands down to
   make room — the icon and everything right of it stay put. */
.navsearch{display:none;align-items:center;justify-content:flex-end;gap:var(--fixed-margin-sm);flex:1;min-width:0}
body[data-search="open"] .navsearch{display:flex}
body[data-search="open"] .nav__menu{display:none}
/* The field slides out over the icon, so the icon itself stands down and the
   field's trailing edge takes its place. */
body[data-search="open"] .nav__icon{display:none}
/* The slide: starts shifted right, sitting on the icon, then unfurls left.
   app.js adds is-in on the next frame so the transition actually runs. */
.navsearch .searchmvp{
  transform:translateX(var(--dimensions-32));
  opacity:0;
  transition:transform var(--motion-enter),opacity var(--motion-enter);
}
.navsearch.is-in .searchmvp{transform:none;opacity:1}
/* Always reachable while open: it clears the text, or closes if empty. */
body[data-search="open"] .searchmvp__clear{display:block}
.navsearch__back{display:none;flex:none;width:40px;height:40px;padding:8px;border-radius:var(--radius-round)}
.navsearch__back img{width:24px;height:24px}
.navsearch__back:hover{background:var(--background-neutral-subtle)}

/* Capped so the field does not travel the whole bar when it opens. */
.searchmvp{position:relative;flex:1;min-width:220px;max-width:400px}
.searchmvp__field{
  display:flex;align-items:center;gap:var(--fixed-margin-sm);
  padding:var(--fixed-padding-sm) var(--fixed-padding-md);
  background:var(--background-neutral-subtle);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-round);
  transition:border-color var(--motion-exit),background var(--motion-exit);
}
/* The subtle fill stays behind the input when focused — the field is only
   ever shown focused, so turning it white left it with no fill at all. */
.searchmvp__field:focus-within{border-color:transparent}
.searchmvp__field > img{width:24px;height:24px;flex:none}
.searchmvp__input{
  flex:1;min-width:0;
  padding:0;background:none;border:0;outline:none;
  font-size:18px;line-height:28px;font-weight:400;
}
.searchmvp__input::placeholder{color:var(--text-neutral-secondary)}
.searchmvp__input:focus-visible{box-shadow:none}
.searchmvp__clear{display:none;flex:none;width:24px;height:24px;border-radius:var(--radius-round)}
.searchmvp__clear img{width:24px;height:24px}
.searchmvp.is-filled .searchmvp__clear{display:block}

/* Typeahead — recent searches above popular ones. */
.searchmvp__dropdown,
.airport-dd{
  display:none;
  position:absolute;left:0;right:0;top:calc(100% + var(--fixed-margin-xs));z-index:50;
  margin:0;padding:var(--fixed-padding-xs) 0;
  list-style:none;
  background:var(--background-neutral-standard);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--box-shadow-lg);
  max-height:min(60vh,420px);overflow-y:auto;
}
.searchmvp.is-open .searchmvp__dropdown{display:block}
.searchmvp__group{
  padding:var(--fixed-padding-xs) var(--fixed-padding-md) var(--fixed-padding-2xs);
  color:var(--text-neutral-secondary);
}
.ta-row{display:flex;align-items:center}
.ta-option{
  flex:1;min-width:0;
  padding:var(--fixed-padding-sm) var(--fixed-padding-md);
  text-align:left;
  font-size:16px;line-height:24px;font-weight:400;
  transition:background var(--motion-exit);
}
.ta-option mark{background:none;font-weight:700;color:inherit}
.ta-option:hover,.ta-option[aria-selected="true"]{background:var(--background-neutral-subtle)}
.ta-action{color:var(--link-default,var(--text-brand-primary));font-weight:500}
.ta-remove{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;margin-right:var(--fixed-margin-xs);
  border-radius:var(--radius-round);
}
.ta-remove img{width:16px;height:16px}
.ta-remove:hover{background:var(--background-neutral-strong)}

/* Search-assist dropdown of airports behind From and To. Same popover and
   row treatment as the site-search typeahead above. */
.airport-dd{margin:0;list-style:none;z-index:40}
.field.is-picking .airport-dd{display:block}
.airport{
  display:flex;flex-direction:column;gap:2px;
  width:100%;
  padding:var(--fixed-padding-sm) var(--fixed-padding-md);
  text-align:left;
  transition:background var(--motion-exit);
}
.airport:hover,.airport[aria-selected="true"]{background:var(--background-neutral-subtle)}
.airport__city{
  display:flex;align-items:baseline;gap:var(--fixed-margin-xs);
  font-family:"Qantas Sans";font-size:18px;line-height:24px;font-weight:500;
}
.airport__city mark{background:none;font-weight:700;color:inherit}
.airport__city b{font-weight:500;color:var(--text-brand-secondary)}
.airport__name{font-size:14px;line-height:20px;font-weight:400;color:var(--text-neutral-secondary)}
.airport-dd__none{padding:var(--fixed-padding-sm) var(--fixed-padding-md);color:var(--text-neutral-secondary)}

/* ============================================================
   Search results — page presentation
   ============================================================ */
body[data-view="results"] .fsw,
body[data-view="results"] .quicklinks{display:none}
.results[hidden]{display:none}
.results{padding:var(--fixed-padding-2xl) var(--gutter) var(--fixed-padding-3xl)}
.results .shell{display:flex;flex-direction:column;gap:var(--fixed-margin-lg)}
/* The shell is on a 24px rhythm; the button sits 16 above the crumbs and the
   crumbs 8 above the title, so the three read as one block. */
.results__back{margin-bottom:calc(var(--fixed-margin-lg) * -1 + var(--fixed-margin-md))}
.results .crumbs{margin-bottom:calc(var(--fixed-margin-lg) * -1 + var(--dimensions-8))}
.results__title{font-family:"Qantas Sans";font-size:32px;line-height:40px;font-weight:500}

/* Breadcrumb and back link out of the results */
.crumbs{display:flex;align-items:center;gap:var(--fixed-margin-xs);font-size:14px;line-height:20px;font-weight:400}
.crumbs a{color:var(--text-neutral-secondary);text-decoration:underline}
.crumbs a:hover{color:var(--text-neutral-primary)}
.crumbs img{width:16px;height:16px;flex:none}
.crumbs__current{font-weight:500;color:var(--text-neutral-primary)}
/* One step down from the nav's Log in: 16/24 on a 20px inset, the 2px border
   taken out of the padding so the pill stays 44 tall. */
.results__backbtn{
  padding:calc(var(--dimensions-10) - 2px) calc(var(--dimensions-20) - 2px);
  gap:var(--fixed-margin-xs);
  font-size:16px;line-height:24px;
}
/* The only left-pointing red arrow in the set is the right one turned round. */
.results__backbtn img{width:16px;height:16px;transform:rotate(180deg)}
.results__backbtn:hover img{filter:brightness(0) invert(1)}

/* Tab strip — node 20504:5568 */
.tabmenu{border-bottom:1px solid var(--border-neutral-subtle)}
.tabmenu__strip{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.tabmenu__strip::-webkit-scrollbar{display:none}
.tab{
  flex:none;
  padding:var(--fixed-padding-sm) var(--fixed-padding-md);
  border-bottom:2px solid transparent;
  font-size:18px;line-height:28px;font-weight:400;
  white-space:nowrap;
  transition:color var(--motion-exit),border-color var(--motion-exit);
}
.tab[aria-selected="true"]{border-bottom-color:var(--border-brand-standard);font-weight:500}
.tab:hover{color:var(--text-brand-primary)}
.tab[aria-disabled="true"]{color:var(--text-neutral-secondary)}
.tab__count{margin-left:var(--fixed-margin-2xs);color:var(--text-neutral-secondary)}

.results__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-md);flex-wrap:wrap}
.results__range{margin:0}
.sort{display:flex;align-items:center;gap:var(--fixed-margin-sm)}
.picker{position:relative;display:flex;align-items:center}
.picker select{
  appearance:none;
  padding:var(--fixed-padding-xs) var(--dimensions-32) var(--fixed-padding-xs) var(--fixed-padding-sm);
  background:var(--background-neutral-standard);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-sm);
  font-size:16px;line-height:24px;font-weight:400;
}
.picker__chevron{position:absolute;right:var(--fixed-padding-sm);width:16px;height:16px;pointer-events:none}

#results-panel{display:flex;flex-direction:column;gap:var(--fixed-margin-2xl)}
.result{display:flex;flex-direction:column;gap:var(--fixed-margin-xs);max-width:768px}
.result__heading{margin:0;font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:500}
.result__link{color:var(--link-default,var(--text-brand-primary))}
.result__link:hover{text-decoration:underline}
.result__date{margin:0;color:var(--text-neutral-secondary)}
.result__teaser{margin:0}
/* Matched terms are bolded in teasers only — the heading is already the match. */
.result__teaser mark{background:none;font-weight:700;color:inherit}
.related{display:flex;align-items:center;gap:var(--fixed-margin-xs);flex-wrap:wrap;margin-top:var(--fixed-margin-2xs)}
.related__label{color:var(--text-neutral-secondary)}
.chip{
  padding:var(--fixed-padding-2xs) var(--fixed-padding-sm);
  background:var(--background-neutral-subtle);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-round);
  font-size:14px;line-height:20px;font-weight:500;
  transition:background var(--motion-exit);
}
.chip:hover{background:var(--background-neutral-strong)}

.noresults{display:flex;flex-direction:column;gap:var(--fixed-margin-md);align-items:flex-start;max-width:768px}
.noresults h2{margin:0;font-family:"Qantas Sans";font-size:24px;line-height:32px;font-weight:500}
.noresults p{margin:0;color:var(--text-neutral-secondary)}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-md);flex-wrap:wrap}
.pagination:empty{display:none}
.pagination__controls{display:flex;align-items:center;gap:var(--fixed-margin-2xs)}
.control{
  display:grid;place-items:center;
  min-width:40px;height:40px;padding-inline:var(--fixed-padding-xs);
  border-radius:var(--radius-round);
  font-size:16px;line-height:24px;font-weight:400;
  transition:background var(--motion-exit);
}
.control:hover:not([disabled]){background:var(--background-neutral-subtle)}
.control[disabled]{opacity:0.3;cursor:default}
.control[aria-current="page"]{background:var(--background-neutral-standard-inverse,#323232);color:var(--text-neutral-inverse);font-weight:500}
.control img{width:16px;height:16px}
.control img.flip{transform:rotate(180deg)}
.pagination__range{margin:0;color:var(--text-neutral-secondary);font-size:16px;line-height:24px}

@media (max-width:720px){
  /* Full-screen takeover, the pattern the Search prototype uses on a phone —
     here the whole bar does stand down. */
  body[data-search="open"] .nav__utils,
  body[data-search="open"] .nav__login,
  body[data-search="open"] .nav__points,
  body[data-search="open"] .nav__burger,
  body[data-search="open"] .nav__oneworld{display:none}
  body[data-search="open"] .navsearch{
    position:fixed;inset:0;z-index:60;
    align-items:flex-start;
    padding:var(--fixed-padding-md);
    background:var(--background-neutral-standard);
  }
  .navsearch__back{display:grid;place-items:center}
  body[data-search="open"] .nav__logo{display:none}
  .navsearch{justify-content:flex-start}
  .searchmvp{max-width:none}
  .searchmvp__dropdown{
    position:static;top:auto;
    margin-top:var(--fixed-margin-md);
    border:0;box-shadow:none;border-radius:0;
    max-height:none;
  }
  .searchmvp.is-open .searchmvp__dropdown{display:block}
  .results{padding-block:var(--dimensions-24) var(--dimensions-32)}
  .results__title{font-size:24px;line-height:32px}
  #results-panel{gap:var(--dimensions-32)}
}

/* ============================================================
   Flight deals page — node 8:19613 (deals.html)
   This screen is drawn on RWY Core 2.0 tokens rather than 3.0, so a few
   values here are one-offs rather than the shared tokens above; they are
   commented where they differ.
   ============================================================ */
.page-deals{background:var(--background-neutral-standard)}

/* Map hero — node 26:25721. Only the cartography is an image; the pins and
   the panel are elements, so the copy is real text and the controls work. */
.mapsec{
  position:relative;
  aspect-ratio:1920/600;
  min-height:420px;
  overflow:hidden;
  background:var(--map-ocean);     /* behind the map while it loads */
  display:flex;align-items:center;
  padding-inline:var(--gutter);
}
/* The frame crops a tall map: 197.36% of the band, offset -35.37%. */
.mapsec__bg{
  position:absolute;left:0;top:-35.37%;
  width:100%;height:197.36%;
  object-fit:cover;
  pointer-events:none;
}
.mapsec__shell{position:relative;z-index:2}

/* Map Tooltip — node 26:25743. Placed as a fraction of the 1920x600 frame. */
.mappin{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--dimensions-4)}
.mappin__pill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--fixed-padding-xs) var(--fixed-padding-lg);
  background:var(--background-neutral-standard);
  border-radius:100px;
  white-space:nowrap;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,0.04)) drop-shadow(0 2px 3px rgba(0,0,0,0.08));
  transition:transform var(--motion-exit);
}
.mappin__pill:hover{transform:translateY(-2px)}
.mappin__place{
  font-family:"Qantas Sans";font-size:18px;line-height:24px;font-weight:500;
  color:var(--text-brand-primary);
}
.mappin__count{
  font-family:"Qantas Sans";font-size:16px;font-weight:500;
  color:var(--text-neutral-primary);
}
/* the pointer tucks 6px up under the pill, as the design overlaps it */
.mappin__dot{width:16px;height:16px}
/* Asia is the promoted one — node 28:66823 */
.mappin--brand .mappin__pill{background:var(--background-brand-standard)}
.mappin--brand .mappin__place,
.mappin--brand .mappin__count{color:var(--text-on-brand)}

/* Deals Container — node 26:25757 */
.mappanel{
  width:394px;max-width:100%;
  display:flex;flex-direction:column;gap:var(--fixed-margin-md);
  padding:var(--dimensions-32);
  background:var(--background-neutral-standard);
  border-radius:var(--radius-sm) var(--radius-sm) var(--radius-3xl) var(--radius-sm);
  filter:drop-shadow(0 8px 8px rgba(0,0,0,0.08)) drop-shadow(0 4px 4px rgba(0,0,0,0.04));
}
.mappanel__intro{display:flex;flex-direction:column;gap:var(--fixed-margin-xs)}
/* heading/lg */
.mappanel__title{
  margin:0;
  font-family:"Qantas Sans";font-size:40px;line-height:56px;font-weight:500;
  color:var(--text-neutral-primary);
}
.mappanel__body{margin:0;font-size:16px;line-height:24px;font-weight:400;color:var(--text-neutral-secondary)}
.mappanel__fields{display:flex;flex-direction:column;gap:var(--fixed-margin-sm)}

/* Text Field — node 28:66875 */
.mapfield{position:relative;display:flex;align-items:center}
.mapfield select{
  appearance:none;
  width:100%;height:48px;
  padding:var(--dimensions-12) var(--dimensions-48) var(--dimensions-12) var(--dimensions-16);
  /* background/neutral/strong — nodes 28:40847, 28:67153, 28:67169. These read
     one step stronger than the subtle fill they used to carry. */
  background:var(--background-neutral-strong);
  border:0;border-radius:var(--dimensions-12);
  font-size:16px;line-height:24px;font-weight:400;
  color:var(--text-neutral-secondary);
}
.mapfield img{position:absolute;right:var(--dimensions-12);width:24px;height:24px;pointer-events:none}

.mappanel__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--fixed-margin-sm)}
/* Terms — muted, 16px, with a trailing info icon */
.mappanel__terms{
  padding:var(--dimensions-8) var(--dimensions-12) var(--dimensions-8) var(--dimensions-16);
  gap:var(--dimensions-6);
  font-size:16px;line-height:24px;
}
.mappanel__terms img{width:20px;height:20px}
.mappanel__find{padding:var(--dimensions-12) var(--dimensions-24);font-size:16px;line-height:24px}

.deals{
  padding:var(--fixed-padding-2xl) var(--gutter) var(--fixed-padding-3xl);
  background:var(--background-neutral-subtle);
}
.deals .shell{display:flex;flex-direction:column;gap:var(--dimensions-32)}

/* Filters level 3 — node 28:39080 */
.dealfilters{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--fixed-margin-md);flex-wrap:wrap}
.dealfilters__field{display:flex;flex-direction:column;gap:var(--fixed-margin-xs);width:192px}
.dealfilters__field--sort{width:216px}
.dealfilters__field label{font-size:16px;line-height:24px;font-weight:400;color:var(--text-neutral-primary)}
/* 48px field on the 2.0 border colour */
.picker--lg select{
  width:100%;height:48px;
  padding:var(--fixed-padding-sm) var(--dimensions-48) var(--fixed-padding-sm) var(--fixed-padding-md);
  border:1px solid var(--border-neutral-standard);
  border-radius:var(--radius-sm);
  font-size:16px;line-height:24px;
}
.picker--lg{width:100%}
.picker--lg .picker__chevron{right:var(--fixed-padding-sm);width:24px;height:24px}

.deals__list{display:flex;flex-direction:column;gap:var(--fixed-margin-lg)}

/* Deal card — node 28:39106. 2.0 divider colour and an 8px radius, with the
   64px "feature" corner on the image. */
.dealcard{
  display:flex;gap:var(--dimensions-32);align-items:stretch;
  background:var(--background-neutral-standard);
  border:1px solid var(--border-neutral-subtle);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.dealcard--featured{flex-direction:column;gap:0}
.dealcard__top{display:flex;gap:var(--dimensions-32);align-items:stretch}
.dealcard__media{flex:none;width:288px;padding:1px}
.dealcard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:7px 7px 64px 7px;
}
.dealcard--featured .dealcard__media img{border-radius:7px 7px 64px 7px}
.dealcard__body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:var(--dimensions-20);
  padding:var(--fixed-padding-lg) var(--dimensions-32);
}
.dealcard__route{
  margin:0;
  font-family:"Qantas Sans";font-size:20px;line-height:28px;font-weight:500;
  color:var(--text-neutral-primary);
}
/* the arrow is Primary/60 in 2.0, a touch brighter than 3.0's brand red */
.dealcard__route span[aria-hidden]{color:var(--text-brand-primary);padding-inline:2px}

.dealcard__grid{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fixed-margin-lg);flex-wrap:wrap}
.dealcard__sale{display:flex;flex-direction:column;gap:var(--dimensions-4)}
.dealcard__sale p{margin:0}
.dealcard__salename{font-size:16px;line-height:24px;font-weight:400;color:var(--text-neutral-primary)}
.dealcard__ends{font-size:14px;line-height:20px;font-weight:400;color:var(--text-neutral-secondary)}
.dealcard__rules{
  font-size:14px;line-height:20px;font-weight:400;
  color:var(--text-neutral-secondary);
  text-decoration:underline;
}
.dealcard__rules:hover{color:var(--text-neutral-primary)}

/* Badge / Sale — teal 10 on teal 80, node 28:39133 */
.badge--sale{
  margin:0;
  padding:var(--fixed-padding-2xs) var(--fixed-padding-sm);
  background:var(--accent-x-light);
  color:var(--accent-xx-dark);
  font-size:14px;line-height:20px;font-weight:400;
  border-radius:var(--radius-xs);
}

.dealcard__fare{display:flex;flex-direction:column}
.dealcard__fare p{margin:0}
.dealcard__from{font-size:16px;line-height:24px;font-weight:400;color:var(--text-neutral-primary)}
.dealcard__price{display:flex;align-items:flex-start;gap:var(--dimensions-4)}
.dealcard__price b{
  font-family:"Qantas Sans";font-size:32px;line-height:40px;font-weight:500;
  letter-spacing:-0.5px;
  color:var(--text-brand-primary);
}
.dealcard__price sup{top:0;font-size:11px;line-height:20px;font-weight:400;color:var(--text-neutral-primary)}
.dealcard__conditions{font-size:14px;line-height:20px;font-weight:400;color:var(--text-neutral-secondary)}
.dealcard__cta{flex:none;align-self:flex-start}

/* Tertiary — text-only red button with a trailing arrow, node 23031:50830 */
.btn--tertiary{
  min-height:48px;
  padding:var(--fixed-padding-2xs) 0;
  background:none;
  color:var(--text-brand-primary);
  font-size:16px;line-height:24px;font-weight:700;
}
.btn--tertiary img{width:24px;height:24px}
.btn--tertiary:hover{color:var(--text-brand-secondary)}

/* Depart between — node 23031:50781 */
.dealcard__depart{
  display:flex;flex-direction:column;gap:var(--fixed-margin-md);
  padding:var(--fixed-padding-sm) var(--dimensions-32) var(--fixed-padding-lg);
}
.dealcard__departlabel{margin:0;font-size:16px;line-height:24px;font-weight:400;color:var(--text-neutral-primary)}
.datechips{display:flex;gap:var(--fixed-padding-sm);flex-wrap:wrap}
.datechip{
  flex:1 1 104px;min-width:104px;
  padding:var(--fixed-padding-sm) var(--fixed-padding-md);
  border:2px solid var(--datechip-border);
  border-radius:800px;
  font-size:16px;line-height:24px;font-weight:500;
  color:var(--text-neutral-primary);
  transition:background var(--motion-exit),color var(--motion-exit),border-color var(--motion-exit);
}
.datechip:hover{background:var(--background-neutral-subtle)}
.datechip.is-on{
  background:var(--background-neutral-standard-inverse,#323232);
  border-color:var(--background-neutral-standard-inverse,#323232);
  color:var(--text-neutral-inverse);
}

.deals__pagination{padding-top:var(--fixed-padding-md)}
.backtotop{margin:0;padding-top:var(--fixed-padding-md);text-align:center}
.backtotop a{
  font-size:16px;line-height:24px;font-weight:500;
  color:var(--text-brand-primary);text-decoration:underline;
}

@media (max-width:1024px){
  /* The pins are placed against a 1920-wide map; below this they collide with
     each other and with the panel, so the map becomes a plain banner and the
     panel sits under it. */
  .mapsec{display:block;aspect-ratio:auto;min-height:0;padding-inline:0}
  .mapsec__bg{position:relative;top:0;height:auto;aspect-ratio:1920/460;object-fit:cover}
  .mappin{display:none}
  .mapsec__shell{margin-top:calc(var(--dimensions-32) * -1);padding:0 var(--gutter) var(--dimensions-24)}
  .mappanel{width:100%}
  .mappanel__title{font-size:32px;line-height:40px}

  /* The 288px image and a four-column detail row stop fitting, so the card
     becomes a stack. */
  .dealcard,.dealcard__top{flex-direction:column;gap:0}
  .dealcard__media{width:100%;padding:0}
  .dealcard__media img{height:200px;border-radius:0}
  .dealcard__grid{gap:var(--fixed-margin-md)}
}
@media (max-width:720px){
  .deals{padding-block:var(--dimensions-24) var(--dimensions-32)}
  .dealcard__body{padding:var(--dimensions-20)}
  .dealcard__depart{padding:0 var(--dimensions-20) var(--dimensions-20)}
  .dealfilters__field,.dealfilters__field--sort{width:100%}
  .mappanel{padding:var(--dimensions-20)}
  .mappanel__title{font-size:28px;line-height:36px}
  .mappanel__actions{flex-wrap:wrap}
  .dealcard__route{font-size:18px;line-height:24px}
  .datechip{flex:1 1 100%}
}

/* ============================================================
   Flow helper — prototype scaffolding, not part of the design
   ============================================================ */
.flow{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.flow__toggle{
  padding:8px 16px;border-radius:9999px;
  /* the inverse pair, so it flips with the theme instead of going
     white-on-white */
  background:var(--background-neutral-standard-inverse);
  color:var(--text-neutral-inverse);
  font-size:14px;font-weight:500;
}
.flow__panel{
  display:none;width:240px;padding:12px;
  background:var(--background-neutral-standard);border:1px solid var(--border-neutral-subtle);border-radius:12px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.2);
}
.flow.is-open .flow__panel{display:block}
.flow__panel h3{margin:8px 0 4px;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-neutral-secondary)}
.flow__panel h3:first-child{margin-top:0}
.flow__panel button{display:block;width:100%;text-align:left;padding:6px 8px;border-radius:8px;font-size:13px}
.flow__panel button:hover{background:var(--background-neutral-subtle)}
.flow__panel button[aria-current="true"]{background:var(--background-neutral-strong);font-weight:500}
.flow__vw{font-size:12px;color:var(--text-neutral-secondary);padding:6px 8px}


/* ============================================================
   Dark theme — component overrides
   Everything that could be reached by a token already has been. What is left
   is the handful of places the design pins a literal colour, plus the icon
   artwork: an SVG in an <img> cannot inherit currentColor, so each neutral
   icon has a recoloured twin generated from the same Figma paths and swapped
   in with `content`. Brand red and the pictogram teals are untouched — they
   are mode-invariant.
   ============================================================ */

/* Brand red holds at #df0000 for FILLS, but as a mark on a dark surface it
   only reaches 3.46:1, so the red icons take the same lightened step the
   red text tokens do — otherwise the swap and calendar glyphs all but
   vanish inside their fields. */
:root[data-theme="dark"] img[src$="hero-caret.svg"]{content:url(assets/hero-caret-dark.svg)}
:root[data-theme="dark"] img[src$="icon-arrow-right.svg"]{content:url(assets/icon-arrow-right-dark.svg)}
:root[data-theme="dark"] img[src$="icon-arrow-right-sm.svg"]{content:url(assets/icon-arrow-right-sm-dark.svg)}
:root[data-theme="dark"] img[src$="icon-boarding-pass.svg"]{content:url(assets/icon-boarding-pass-dark.svg)}
:root[data-theme="dark"] img[src$="icon-plane-tail.svg"]{content:url(assets/icon-plane-tail-dark.svg)}
:root[data-theme="dark"] img[src$="icon-plus-circle.svg"]{content:url(assets/icon-plus-circle-dark.svg)}
:root[data-theme="dark"] img[src$="icon-ribbon-star.svg"]{content:url(assets/icon-ribbon-star-dark.svg)}
:root[data-theme="dark"] img[src$="icon-calendar.svg"]{content:url(assets/icon-calendar-dark.svg)}
:root[data-theme="dark"] img[src$="icon-swap.svg"]{content:url(assets/icon-swap-dark.svg)}

:root[data-theme="dark"] img[src$="icon-baggage.svg"]{content:url(assets/icon-baggage-dark.svg)}
:root[data-theme="dark"] img[src$="icon-chevron-down-sm.svg"]{content:url(assets/icon-chevron-down-sm-dark.svg)}
:root[data-theme="dark"] img[src$="icon-chevron-right-sm.svg"]{content:url(assets/icon-chevron-right-sm-dark.svg)}
:root[data-theme="dark"] img[src$="icon-chevron-small-down.svg"]{content:url(assets/icon-chevron-small-down-dark.svg)}
:root[data-theme="dark"] img[src$="icon-copy.svg"]{content:url(assets/icon-copy-dark.svg)}
:root[data-theme="dark"] img[src$="icon-cross.svg"]{content:url(assets/icon-cross-dark.svg)}
:root[data-theme="dark"] img[src$="icon-cutlery.svg"]{content:url(assets/icon-cutlery-dark.svg)}
:root[data-theme="dark"] img[src$="icon-info.svg"]{content:url(assets/icon-info-dark.svg)}
:root[data-theme="dark"] img[src$="icon-info-sm.svg"]{content:url(assets/icon-info-sm-dark.svg)}
:root[data-theme="dark"] img[src$="icon-money-circle.svg"]{content:url(assets/icon-money-circle-dark.svg)}
:root[data-theme="dark"] img[src$="icon-page-next.svg"]{content:url(assets/icon-page-next-dark.svg)}
:root[data-theme="dark"] img[src$="icon-page-prev.svg"]{content:url(assets/icon-page-prev-dark.svg)}
:root[data-theme="dark"] img[src$="icon-person-solid.svg"]{content:url(assets/icon-person-solid-dark.svg)}
:root[data-theme="dark"] img[src$="icon-plane-arrival.svg"]{content:url(assets/icon-plane-arrival-dark.svg)}
:root[data-theme="dark"] img[src$="icon-plane-departure.svg"]{content:url(assets/icon-plane-departure-dark.svg)}
:root[data-theme="dark"] img[src$="icon-plane-horizontal.svg"]{content:url(assets/icon-plane-horizontal-dark.svg)}
:root[data-theme="dark"] img[src$="icon-search.svg"]{content:url(assets/icon-search-dark.svg)}
:root[data-theme="dark"] img[src$="icon-seat.svg"]{content:url(assets/icon-seat-dark.svg)}
:root[data-theme="dark"] img[src$="logo-qantas-type.svg"]{content:url(assets/logo-qantas-type-dark.svg)}
:root[data-theme="dark"] img[src$="logo-fs-type.svg"]{content:url(assets/logo-fs-type-dark.svg)}
:root[data-theme="dark"] img[src$="icon-facebook.svg"]{content:url(assets/icon-facebook-dark.svg)}
:root[data-theme="dark"] img[src$="icon-instagram.svg"]{content:url(assets/icon-instagram-dark.svg)}
:root[data-theme="dark"] img[src$="icon-linkedin.svg"]{content:url(assets/icon-linkedin-dark.svg)}
:root[data-theme="dark"] img[src$="icon-tiktok.svg"]{content:url(assets/icon-tiktok-dark.svg)}
:root[data-theme="dark"] img[src$="icon-youtube.svg"]{content:url(assets/icon-youtube-dark.svg)}
:root[data-theme="dark"] img[src$="pict-carry-on.svg"]{content:url(assets/pict-carry-on-dark.svg)}
:root[data-theme="dark"] img[src$="pict-check-in.svg"]{content:url(assets/pict-check-in-dark.svg)}
:root[data-theme="dark"] img[src$="pict-checked-bag.svg"]{content:url(assets/pict-checked-bag-dark.svg)}
:root[data-theme="dark"] img[src$="pict-extra-bag.svg"]{content:url(assets/pict-extra-bag-dark.svg)}
:root[data-theme="dark"] img[src$="pict-flight-credit.svg"]{content:url(assets/pict-flight-credit-dark.svg)}
:root[data-theme="dark"] img[src$="pict-flight-status.svg"]{content:url(assets/pict-flight-status-dark.svg)}
:root[data-theme="dark"] img[src$="pict-help.svg"]{content:url(assets/pict-help-dark.svg)}
:root[data-theme="dark"] img[src$="pict-manage-booking.svg"]{content:url(assets/pict-manage-booking-dark.svg)}
:root[data-theme="dark"] img[src$="pict-meal.svg"]{content:url(assets/pict-meal-dark.svg)}
:root[data-theme="dark"] img[src$="seat-unavailable.svg"]{content:url(assets/seat-unavailable-dark.svg)}
:root[data-theme="dark"] img[src$="seat-unavailable-right.svg"]{content:url(assets/seat-unavailable-right-dark.svg)}
:root[data-theme="dark"] img[src$="seat-unavailable-left.svg"]{content:url(assets/seat-unavailable-left-dark.svg)}
:root[data-theme="dark"] img[src$="tieline-dot.svg"]{content:url(assets/tieline-dot-dark.svg)}

/* The wordmark goes pure white rather than the icon neutral, so the lockup
   still reads as the reversed brand logo next to the red tail. */

/* Surfaces and marks the design pins literally. */
/* Secondary buttons fill with brand red on hover — the lightened red would
   leave white at 3:1, so the fill keeps the full-strength red. */
:root[data-theme="dark"] .btn--secondary:hover{background:var(--background-brand-standard);border-color:var(--background-brand-standard)}
/* In light mode background/neutral/standard (white) does double duty: it is
   the page AND anything raised off the page. One dark token cannot be both,
   so everything that reads as raised gets lifted a step here — otherwise a
   card ends up darker than the section it sits on and the hierarchy inverts.
   Each one is lifted relative to its own backdrop, not to the page. */
:root[data-theme="dark"] .datepicker,
:root[data-theme="dark"] .airport-dd,
:root[data-theme="dark"] .mappanel,
:root[data-theme="dark"] .mappin__pill,
:root[data-theme="dark"] .farecard{background:var(--background-neutral-subtle)}
/* A card sits ON its section, so it steps up. */
:root[data-theme="dark"] .dealcard{background:var(--background-neutral-strong)}

/* Fields are the exception to the step-up rule, and getting this wrong is
   what made the drawer read oddly. In light a field is WHITE — the same
   colour as the page — cut into a grey panel: a well, not a raised card. The
   faithful translation keeps that relationship, so a field takes the page
   colour and reads as a recess against the panel it sits in, rather than
   floating above it. The swap circle is the same: white-on-page in light. */
:root[data-theme="dark"] .swap,
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .picker select,
:root[data-theme="dark"] .mapfield select{background:var(--background-neutral-standard)}

/* A muted chip on a subtle surface would vanish into it, so it takes the next
   step up the ladder — the map panel and the drawer are both subtle. */
:root[data-theme="dark"] .mappanel .btn--muted,
:root[data-theme="dark"] .drawer .btn--muted{background:var(--background-neutral-strong)}

:root[data-theme="dark"] .searchmvp__dropdown{background:var(--background-neutral-subtle)}
:root[data-theme="dark"] .flow__panel{background:var(--background-neutral-subtle);color:var(--text-neutral-primary)}


/* The cartography is a light-mode photograph. Rather than ship a second map,
   dim and cool it so the pins and the panel still carry the section. */
:root[data-theme="dark"] .mapsec__bg{filter:brightness(0.55) saturate(0.7) contrast(1.05)}
:root[data-theme="dark"] .mappin__pill{box-shadow:var(--box-shadow-md)}

/* The primary button's glyph is the one icon a content-swap would not repaint
   in Chrome — the computed value changed but the original white was still
   painted — so it is filtered to the label colour instead: brightness(0)
   takes the white to black and invert(9.8%) lifts it to #191919. */
:root[data-theme="dark"] .btn--primary img{filter:brightness(0) invert(0.098)}

/* The sale chip stays white in dark, so its icon keeps the light artwork —
   the dark twin would be near-invisible on it. */
:root[data-theme="dark"] .sale__badge img{content:url(assets/icon-info.svg)}

/* Photography keeps its own light, just knocked back a touch so it does not
   glare against the surface. */
/* Photography only. .card img used to be in here as a catch-all, but the
   drawer's cards hold no photos — just pictograms and the seat artwork — so
   all it did was dim the icons 8%. */
:root[data-theme="dark"] .farecard__img,
:root[data-theme="dark"] .dealcard__media img{filter:brightness(0.92)}

/* ============================================================
   Footer — node 57:79614
   ============================================================ */
.footer{
  background:var(--background-neutral-subtle);
  padding:var(--fixed-padding-3xl) var(--dimensions-64);
}
.footer__inner{
  display:flex;align-items:center;gap:20px;
  max-width:var(--footer-max);margin-inline:auto;
}
/* 158.857 x 32 with the layers placed as fractions of the box — the insets
   come straight off the component (I57:79615;698:11948). */
.footer__logo{position:relative;flex:none;width:158.857px;height:32px}
.footer__logo img{position:absolute}
.footer__logo-tail{inset:0.42% 72.21% 0.42% 0.08%}
.footer__logo-roo{inset:3.73% 79.84% 7.37% 0.34%}
.footer__logo-shading{inset:3.81% 79.85% 7.54% 0.34%}
.footer__logo-type{inset:34.24% 0.15% 17.29% 23.32%}

/* utility/regular/md throughout — 14/20, text/neutral/primary. The 9px of top
   padding is the design's own nudge against the centred row. */
.footer__mid{
  display:flex;align-items:center;gap:20px;
  flex:1;min-width:0;padding-top:9px;
  font-size:14px;line-height:20px;font-weight:400;
  color:var(--text-neutral-primary);
}
.footer__copy{margin:0;flex:1;min-width:0}
.footer__links{display:flex;align-items:center;gap:var(--fixed-margin-md);flex:none;white-space:nowrap}
.footer__links a,.footer__copy{color:inherit}
.footer__links a:hover{color:var(--text-brand-primary);text-decoration:underline}

/* Five 44px targets that butt together — no gap in the design. */
.footer__social{display:flex;align-items:center;flex:none}
.footer__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm)}
.footer__social img{width:44px;height:44px}
/* TikTok is the one glyph drawn inside its box rather than filling it. */
.footer__tiktok{display:grid;place-items:center;width:44px;height:44px}
.footer__tiktok img{width:16.87px;height:19.37px}
.footer__social a:hover{background:var(--opacity-neutral-xx-light)}

@media (max-width:1180px){
  /* The copyright and the links stop sharing a line before the logo and the
     social row need to move. */
  .footer__mid{flex-direction:column;align-items:flex-start;gap:var(--fixed-margin-xs)}
}
@media (max-width:860px){
  .footer{padding:var(--fixed-padding-2xl) var(--gutter)}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:var(--fixed-margin-lg)}
  .footer__mid{padding-top:0}
  .footer__links{flex-wrap:wrap;white-space:normal}
}