/*
 * JOURNEY COMPOSER v2 - assets/css/jc-next.css
 *
 * Loaded ONLY when the v2 composer renders: inc/corridor-layer.php enqueues
 * it behind Plugin::journey_composer_v2(), the same flag that chooses the
 * markup. It is deliberately a separate file rather than another block in
 * corridor-v1.css, and the reason is measured, not stylistic: appended to
 * corridor-v1 its unscoped `.booking-shell ...` rules restyle the LEGACY
 * composer too - on the first attempt that took the home page hero from
 * 960px to 1140px and widened the submit from 292px to 498px on a page that
 * was still rendering v1 markup. A sheet that is not loaded cannot leak.
 *
 * When v2 becomes the only render, this file is merged into corridor-v1.css
 * and the RB-11 sub-fence is deleted in the same commit.
 */

/* ==== RB-14  THE SEARCH COMPOSER ========================================
   Mobile-first. Breakpoints: base(<761) / 430 (inherited from app.css) /
   761 / 1050 (documented, no structural change) / 1200.
   Colour comes only from the --corr-* / --rp-* token set.
   ------------------------------------------------------------------- */

:root{
  --jc-overlap:40px;   /* card height sitting inside the photograph */
  --jc-clear:24px;     /* guaranteed air under the headline. structural. */
  --jc-cell:56px;
  --jc-pad:14px;       /* card inline padding */
  --jc-panel:72px;     /* reserve for app-experience-v11's prepended panel */
}

/* --- 1. UNSEAL THE HERO -------------------------------------------------
   OVERRIDES corridor-v1.css:1339 (.hero isolation+overflow), :1348
   (.hero__band isolation+overflow), :1358 (.hero__band-inner z-index:3) and
   app.css:126 (.booking-shell isolation+overflow).
   Three stacking contexts and two clips sit between .place-suggestions and
   the page today. A z-index of 30 inside a context that resolves at 3 can
   never beat the sticky header at 20, and overflow:hidden clips the list
   outright. The composer now overlaps the photograph, so this is load-
   bearing, not hygiene. Neither .hero nor .booking-shell may EVER regain
   z-index, transform, filter, backdrop-filter, will-change, perspective,
   contain, container-type, mix-blend-mode, isolation or opacity<1.        */
.hero,
.hero__band{ isolation:auto; overflow:visible; }
.hero__band-inner{ z-index:auto; }

/* The two band gradients carried z-index 1 and 2. With .hero__band-inner
   back at auto they would paint OVER the copy, so both are retired and the
   scrim moves onto the media layer, where tree order alone stacks it above
   the <img>. OVERRIDES corridor-v1.css:1360 and :1370. */
.hero__band::before,
.hero__band::after{ content:none; }
.hero__media{ z-index:auto; overflow:clip; }   /* clip replaces the band's */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,17,13,.72)  0%,
    rgba(4,17,13,.62) 46%,
    rgba(4,17,13,.60) 74%,
    rgba(4,17,13,.74) 100%);
}
@media (forced-colors:active){
  .hero__media{ display:none; }
}
/* Was relying on the band's clip to contain a -24px overhang. */
.hero__vehicle-wrap{ inset-inline-end:0; overflow:clip; }

/* --- 2. THE OVERLAP -----------------------------------------------------
   Reserved-space overlap. Both boxes stay in normal flow; every number is
   authored, nothing is measured in script, so CLS is zero.

     card top  = band-padding-top(20) + copy min-block-size
               = 20 + (photo-h - 20 - overlap)
               = photo-h - overlap                    (from the band's top)
     headline bottom = card top - --jc-clear          ALWAYS

   The clearance is inside the copy box as padding, so it survives any
   headline length: if the h1 wraps past the reserve the copy box grows,
   the card is pushed down, and the overlap degrades toward zero. It can
   never eat into the headline.                                            */
.hero__band{ --hero-photo-h:320px; }        /* OVERRIDES corridor-v1.css:1346 (260px) */
.hero__copy{
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-block-size:calc(var(--hero-photo-h) - 20px - var(--jc-overlap));
  padding-block-end:var(--jc-clear);
  margin-block-end:0;
}
.hero__composer{
  position:relative;                 /* positioned, NO z-index. see 1. */
  padding-block-end:var(--jc-panel); /* unconditional prepend reserve */
}

/* --- 3. THE CARD --------------------------------------------------------
   OVERRIDES app.css:126 (dark gradient, lime border, 1.25-1.75rem radius,
   overflow:hidden, isolation) and app.css:127 (the orbit ::before ring).   */
.booking-shell{
  display:flex; flex-direction:column;
  position:relative;
  box-sizing:border-box;
  padding:0 var(--jc-pad);
  color:var(--corr-body);
  background:var(--corr-surface);
  border:0;
  border-radius:var(--corr-r-lg);
  box-shadow:
    inset 0 0 0 1px var(--corr-rule),
    0 2px 6px rgba(4,17,13,.10),
    0 20px 44px -16px rgba(4,17,13,.38);
  overflow:visible;                 /* keep released. the list escapes here */
}
.booking-shell::before{ content:none; }

/* Explicit order on every KNOWN child. An unknown node keeps order:0 and
   lands at the top, which is where form.prepend() wants it. No :first-child
   and no :nth-child() anywhere except rule 13. */
.booking-shell__tongue  { order:1 }
/* SLICE 87. The trip pills are the SECOND question - what service, then what
   shape of journey, then where and when - and they need a number of their own.
   Without one they inherit order:0 and land ABOVE the service tongue, which is
   what shipped for about twenty minutes and read as the form asking the shape
   of a journey before it had asked what is being hired. Everything below is
   renumbered rather than sharing 2 with the error summary: this sheet's own
   slice 84 note records what relying on source order to break a tie costs. */
.booking-shell__trip    { order:2 }
.booking-shell__errors  { order:3 }
.booking-shell__row     { order:4 }
.booking-shell__handle  { order:5 }
.booking-shell__advanced{ order:6 }
.booking-shell__note    { order:7 }

/* --- 4. THE TONGUE (service radiogroup) ---------------------------------
   Replaces app.css:170-186 (.booking-shell__tabs and its buttons) and, by
   the class rename, app.css:445's @media(max-width:350) tab rules.        */
.booking-shell__tongue{
  display:flex; align-items:stretch; gap:0;
  margin-inline:calc(var(--jc-pad) * -1);
  padding-inline:var(--jc-pad);
  box-shadow:inset 0 -1px 0 var(--corr-hair);
}
.booking-shell__service{
  flex:0 1 auto; min-width:0;
  min-height:48px; padding:0 16px;
  font:600 14px/1.2 Archivo, system-ui, sans-serif;
  letter-spacing:.01em;
  color:var(--rp-muted);
  background:transparent; border:0;
  box-shadow:inset 0 -2px 0 transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 120ms ease, box-shadow 120ms ease;
}
.booking-shell__service[aria-checked="true"]{
  color:var(--corr-ink);
  box-shadow:inset 0 -2px 0 var(--corr-gold);
}
.booking-shell__service:active{ background:var(--corr-stone); }
.booking-shell__tongue-help{ margin-inline-start:auto; display:flex; align-items:center; }

/* --- 5. THE RAIL --------------------------------------------------------
   Was .booking-shell__fields (app.css:170: 6-track grid, 3.8rem left pad for
   the route rail). Renamed to escape `.booking-shell__fields > label` in
   app.css:426. One instrument: hairline-divided cells, no gaps, no per-cell
   borders, one ring on the whole rail.                                    */
.booking-shell__row{
  display:grid; gap:0;
  grid-template-columns:minmax(0,1fr);
  margin-block:12px 0;
  padding:8px;
  border-radius:var(--corr-r-md);
  box-shadow:inset 0 0 0 1px var(--corr-hair);
  overflow:visible;
}
.booking-shell__row > *{ min-width:0; }

/* Was app.css:145 - a 1px border PLUS a 24px drop shadow PLUS a -1px hover
   translate on every field: four floating pills at fractional track widths.
   Borders are replaced by inset box-shadow throughout: they do not
   participate in layout, so 1px -> 2px on focus causes no reflow, and they
   round predictably at half-device-pixel offsets. */
.booking-shell__cell{
  position:relative;
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  min-width:0; min-height:var(--jc-cell);
  padding:9px 14px;
  color:var(--corr-body);
  border:0;
  border-radius:var(--corr-r-sm);
  background:transparent;
  box-shadow:none;
  transform:none;
  font-size:1rem; font-weight:400; letter-spacing:normal; text-transform:none;
  cursor:text;
  -webkit-tap-highlight-color:transparent;
  transition:background-color 120ms ease, box-shadow 120ms ease;
}
.booking-shell__cell:hover{ background:var(--corr-stone); transform:none; }
.booking-shell__cell:focus-within{
  z-index:1;                                   /* the ring covers the seam */
  background:var(--corr-surface);
  box-shadow:inset 0 0 0 2px var(--corr-action);
}
.booking-shell__cell + .booking-shell__cell{ box-shadow:inset 0 1px 0 var(--corr-hair); }
.booking-shell__cell + .booking-shell__cell:focus-within{
  box-shadow:inset 0 0 0 2px var(--corr-action);
}

.booking-shell__caption{
  display:block; margin:0 0 2px;
  font:400 11px/1.25 Archivo, system-ui, sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--rp-muted);                        /* 5.10:1 on --corr-stone */
  pointer-events:none;
}
.booking-shell .booking-shell__field > label{ min-height:0; display:block; }

/* --- 6. INPUTS, DATE / TIME, SELECT -------------------------------------
   OVERRIDES app.css:148 (.field-control input/select at .91rem = 14.6px,
   which triggers the iOS Safari focus zoom and never zooms back out).
   16px is a hard floor. The 14px LOOK comes from the 11px caption, not from
   a smaller control font. maximum-scale / user-scalable are never used: SC
   1.4.4. The shell carries all chrome; the control is transparent, so
   Firefox (which exposes no pseudo-elements) and iOS (which content-sizes
   the value chip) are fixed by the same code. */
.booking-shell .field-control{ min-width:0; display:block; }
.booking-shell .field-control input,
.booking-shell .field-control select{
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box;
  display:block; width:100%; min-width:0;
  height:auto; min-height:22px;
  margin:0; padding:0; border:0; border-radius:0;
  background:transparent; outline:none;
  font-family:Archivo, system-ui, -apple-system, sans-serif;
  font-size:max(16px, 1rem);
  font-weight:400; line-height:1.3;
  color:var(--corr-ink);
}
.booking-shell input::placeholder{ color:var(--rp-muted); opacity:1; }
.booking-shell__control--date input,
.booking-shell__control--time input,
.booking-shell time{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.booking-shell__control--date .field-control,
.booking-shell__control--time .field-control{ padding-inline-end:24px; }
.booking-shell input[type="date"],
.booking-shell input[type="time"]{ -webkit-min-logical-width:calc(100% - 2px); }
/* Each ::-webkit-* selector in its OWN rule set. One unknown selector in a
   comma list invalidates the entire list, in Firefox too. */
.booking-shell input[type="date"]::-webkit-date-and-time-value{ text-align:start; margin:0; padding:0 }

/* SLICE 102. Chromium keeps its own background on the date/time
   segment box and picker-icon button even under appearance:none --
   the one part of this form Pick-up/Drop-off do not have and the
   owner named specifically ("grey borders around the calendar
   selectors"). Forcing transparency here removes what CSS actually
   controls; the icon itself is native OS chrome and is only tinted,
   not replaced -- a fully custom calendar/time popover is a separate,
   independently-tested slice, not a change to bundle in with this one. */
.booking-shell input[type="date"],
.booking-shell input[type="time"]{
  background:transparent;
  color-scheme:light;
}
.booking-shell input[type="date"]::-webkit-calendar-picker-indicator,
.booking-shell input[type="time"]::-webkit-calendar-picker-indicator{
  background:transparent;
  padding:4px;
  margin-inline-start:4px;
  opacity:.62;
  cursor:pointer;
}
.booking-shell input[type="date"]:hover::-webkit-calendar-picker-indicator,
.booking-shell input[type="time"]:hover::-webkit-calendar-picker-indicator,
.booking-shell input[type="date"]:focus::-webkit-calendar-picker-indicator,
.booking-shell input[type="time"]:focus::-webkit-calendar-picker-indicator{
  opacity:.9;
}
.booking-shell input[type="time"]::-webkit-date-and-time-value{ text-align:start; margin:0; padding:0 }
.booking-shell input::-webkit-datetime-edit{ padding:0; line-height:1.3 }
.booking-shell input::-webkit-datetime-edit-fields-wrapper{ padding:0 }
.booking-shell input::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; display:none }
.booking-shell input::-webkit-clear-button{ -webkit-appearance:none; appearance:none; display:none }
/* ::-webkit-calendar-picker-indicator is deliberately NOT hidden. Firefox
   draws a glyph that cannot be removed; hide Chromium's and draw our own and
   Firefox gets two. Each engine draws its own; the cell budgets 24px. */

.booking-shell select{
  padding-inline-end:22px;
  line-height:normal;                 /* iOS 1px offset inside centred flex */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A6B63' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0 center;
  cursor:pointer;
}
.booking-shell select::-ms-expand{ display:none }

/* Custom-drawn checkbox: accent-color is Safari 26.2, off the floor. */
.booking-shell__check{ display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.booking-shell__check input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  flex:0 0 auto; width:20px; height:20px; margin:0;
  border:0; border-radius:var(--corr-r-sm);
  background:var(--corr-surface);
  box-shadow:inset 0 0 0 1px var(--corr-rule);
  cursor:pointer;
}
.booking-shell__check input[type="checkbox"]:checked{
  background:var(--corr-action);
  box-shadow:inset 0 0 0 1px var(--corr-action);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.booking-shell__check span{ font-size:15px; color:var(--corr-body); }

/* --- 7. THE COMBOBOX LIST ----------------------------------------------
   OVERRIDES app.css:157 (z-index:80 in a trapped context, 1rem offset,
   -.9rem left, backdrop-filter) and app.css:427, which sizes the list with
   100vw - that includes the classic Windows scrollbar and overflows. */
.place-control{ position:relative; min-width:0; }
.booking-shell .place-suggestions{
  position:absolute; inset-inline:-1px auto; left:auto; right:auto;
  inline-size:max(100%, 260px);
  max-inline-size:min(420px, calc(100% + 120px));
  top:calc(100% + 6px);
  z-index:var(--z-popover);              /* 30, above --z-header 20 */
  margin:0; padding:4px;
  max-height:min(46vh, 320px);           /* not dvh: it resizes mid-scroll */
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:var(--corr-surface);
  border:0; border-radius:var(--corr-r-md);
  box-shadow:inset 0 0 0 1px var(--corr-rule), 0 12px 28px rgba(4,17,13,.16);
}
.booking-shell .place-suggestion{
  min-height:44px; padding:10px 12px;
  border-radius:var(--corr-r-sm);
  font-size:15px; color:var(--corr-ink);
  overflow-wrap:anywhere;
}
.booking-shell .place-suggestion:hover,
.booking-shell .place-suggestion[aria-selected="true"]{
  background:var(--corr-gold-wash); color:var(--corr-900);
}
.booking-shell .place-suggestion::after{ content:none; }

/* --- 8. THE SUBMIT ------------------------------------------------------
   OVERRIDES app.css:159 (lime gradient, 4.55rem, strong+small stack).
   One action colour on the page: --corr-action. Gold #9C7A3C with white
   text is 4.0:1 and fails; it stays an accent, never an action. */
.booking-shell .button--search{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:var(--jc-cell);
  margin:0; padding:0 18px;
  color:#FFFFFF;                           /* 9.9:1 on --corr-action */
  background:var(--corr-action); background-image:none;
  border:0; border-radius:var(--corr-r-sm);
  box-shadow:none;
  font:600 16px/1.2 Archivo, system-ui, sans-serif; letter-spacing:.01em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color 140ms ease;
}
.booking-shell .button--search:hover{ background:var(--corr-action-hi); background-image:none; }
.booking-shell .button--search:active{ background:var(--corr-700); }
.booking-shell .button--search b{
  display:inline; width:auto; background:none; border-radius:0; font-size:1em;
}

/* --- 9. THE HANDLE AND THE DRAWER ---------------------------------------
   The handle sits BELOW the submit, so expanding grows the card downward
   and the primary action never moves. */
.booking-shell__handle{
  display:flex; align-items:center; gap:10px;
  width:100%; min-height:44px;
  margin-block:8px 0; padding:0 6px;
  font:400 14px/1.3 Archivo, system-ui, sans-serif;
  color:var(--corr-700);
  background:transparent; border:0;
  cursor:pointer; text-align:start;
  -webkit-tap-highlight-color:transparent;
}
.booking-shell__handle-label{ flex:0 0 auto; }
.booking-shell__handle-summary{
  flex:1 1 auto; min-width:0;
  font-size:13px; color:var(--rp-muted); text-align:end;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.booking-shell__handle-chev{
  flex:0 0 auto; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform 200ms ease;
}
.booking-shell__handle[aria-expanded="true"] .booking-shell__handle-chev{
  transform:rotate(-135deg) translateY(-2px);
}

/* grid-template-rows fr interpolation: Chrome 107 / FF 66 / Safari 16.0 /
   Samsung 21 - under the floor. NOT max-height (guessed easing: snaps or
   clips) and NOT interpolate-size / calc-size (no Firefox, no Safari at
   all). Both companions below are mandatory: a grid child defaults to
   min-height:auto and refuses to shrink, so without them 0fr never
   collapses and the content spills. */
.booking-shell__advanced{
  display:grid; grid-template-rows:1fr;
  /* app.css:258 sets align-items:center on this element for its old flex
     layout. Switching display to grid does NOT reset it, and the whole 0fr
     technique depends on the item being STRETCHED to the row: a centred item
     is sized to its own content and then centred in a 0px row, so it spills
     symmetrically over everything above and below. Measured on the first
     build: the row collapsed to 0px and the inner still rendered 247px,
     painting the return, luggage and accessibility controls straight across
     the fields and the submit. One declaration. */
  align-items:stretch;
  /* Same fault, second property: the element kept app.css's COLUMN tracks
     (measured: 353.7px 144.1px 144.1px 262px). Switching to grid for the row
     animation left them in place, so the drawer's single child landed in a
     354px column inside a 1064px card - which is why Passengers clipped to
     "PASSENGEF" and the accessibility label wrapped to four lines. The row
     is the axis being animated; the column axis must be one full track. */
  grid-template-columns:minmax(0,1fr);
  /* The collapsed padding survived too - 18.4px of it - so the drawer left a
     gap when shut. */
  padding-block:0;
  transition:grid-template-rows 220ms cubic-bezier(.2,.7,.3,1);
}
.booking-shell__advanced-inner{ min-height:0; overflow:hidden; }
.jc-js .booking-shell__handle[aria-expanded="false"] + .booking-shell__advanced{
  grid-template-rows:0fr;
}
@supports not (grid-template-rows:0fr){
  .jc-js .booking-shell__handle[aria-expanded="false"] + .booking-shell__advanced{ display:none }
}
/* REDUCED MOTION: app.css:456 already sets transition-duration:.01ms
   !important on *, *::before, *::after inside
   @media (prefers-reduced-motion: reduce). Both transitions above are
   therefore already neutralised site-wide and the panel snaps. Nothing is
   added here; do not add a competing rule that could weaken it. */

.booking-shell__advanced-grid{
  display:grid; gap:8px;
  grid-template-columns:minmax(0,1fr);
  padding-block:8px 0;
}
.booking-shell__advanced-grid > *{ min-width:0; }
.booking-shell__return{ display:grid; gap:8px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.booking-shell__return[hidden]{ display:none; }
.booking-shell__advanced .booking-shell__cell{
  box-shadow:inset 0 0 0 1px var(--corr-hair);
  border-radius:var(--corr-r-md);
}
.booking-shell__advanced .booking-shell__cell:focus-within{
  box-shadow:inset 0 0 0 2px var(--corr-action);
}

/* --- 10. THE PLINTH -----------------------------------------------------
   OVERRIDES app.css:163 (.7rem = 11.2px on a dark band). A required
   disclosure set in pale micro-type reads as something being hidden, which
   costs more trust than not having it. 13px, body ink, full-bleed, carrying
   the card's bottom radius. Architecture, not fine print. */
.booking-shell__note{
  display:block;
  margin:12px calc(var(--jc-pad) * -1) 0;
  padding:14px var(--jc-pad) 16px;
  color:var(--corr-body);
  background:var(--corr-stone);
  border:0;
  box-shadow:inset 0 1px 0 var(--corr-hair);
  border-radius:0 0 var(--corr-r-lg) var(--corr-r-lg);
  font:400 13px/1.45 Archivo, system-ui, sans-serif;
}

/* --- 11. ERRORS ---------------------------------------------------------
   The token set contains no negative colour and none is invented. Gold ink
   is the attention channel and colour is never the only signal: the ring,
   the caption colour, a glyph and the summary link all fire together. */
.booking-shell__errors{
  margin-block:12px 0; padding:14px 16px;
  border-radius:var(--corr-r-md);
  background:var(--corr-gold-wash);
  box-shadow:inset 3px 0 0 var(--rp-gold-ink);   /* 7.10:1 on white */
  color:var(--corr-ink); font-size:15px; line-height:1.45;
}
.booking-shell__errors ul{ margin:6px 0 0; padding-inline-start:18px; }
.booking-shell__errors a{ color:var(--rp-gold-ink); text-underline-offset:3px; }
.booking-shell__cell:has([aria-invalid="true"]){
  background:var(--corr-gold-wash);
  box-shadow:inset 0 0 0 2px var(--rp-gold-ink);
}
.booking-shell__cell:has([aria-invalid="true"]) .booking-shell__caption{ color:var(--rp-gold-ink); }
.booking-shell__cell:has([aria-invalid="true"]) .booking-shell__caption::after{ content:" !"; font-weight:700; }
/* :has() is Safari 15.4 / Chrome 105 / Firefox 121. Where it is absent the
   ring is simply not drawn; the summary, the link and aria-invalid still
   carry the failure, so nothing is colour-only and nothing is lost. */

/* --- 12. FOCUS ----------------------------------------------------------
   --corr-action on --corr-surface is ~12:1, far past the 3:1 non-text
   minimum. The cell ring is inset so focus never changes the box size. */
.booking-shell :focus-visible{
  outline:2px solid var(--corr-action);
  outline-offset:2px;
  border-radius:var(--corr-r-sm);
}
.booking-shell .button--search:focus-visible{
  outline:2px solid var(--corr-surface); outline-offset:-4px;
  box-shadow:0 0 0 3px var(--corr-action);
}
.booking-shell input:focus,
.booking-shell select:focus{ outline:none }   /* the ring lives on the cell */
@media (forced-colors:active){
  .booking-shell__cell:focus-within{ outline:2px solid Highlight; outline-offset:-2px }
}

/* --- 13. THE HYDRATION PREPEND -----------------------------------------
   app-experience-v11.js does form.prepend(panel) at BOTH line 592 and line
   640, with panels of two different heights. The node is
   <section class="appx-shortcut-panel" data-appx-shortcut-panel>, so it is
   targeted by attribute rather than by position: this survives both call
   sites, both heights, the hidden inputs staying where they are, and a
   conditional error block appearing above it. Taken out of flow into the
   unconditional --jc-panel reserve on .hero__composer, so the document
   height is identical whether the panel arrives or not. */
.booking-shell > [data-appx-shortcut-panel]{
  order:0;
  position:absolute; inset-inline:0;
  top:calc(100% + 12px);
  margin:0;
}

/* --- 14. >=430 ----------------------------------------------------------
   NO COUNTER-RULE IS SHIPPED, AND NONE IS NEEDED.
   app.css:426 is
     .booking-shell__field, .booking-shell__fields > label, .button--search
       { grid-column: 1 / -1 !important }
   The `.booking-shell__fields > label` arm is retired by the container
   rename in section B. The other two arms are bare classes that still match
   From, To and the submit - and full width is exactly what they want at
   <=430. Date and Time are labels inside .booking-shell__row, which that
   rule cannot reach. Do not add !important here; if a future edit restores
   the .booking-shell__fields class name, fix the class name, not the
   cascade. Verified at 320px: 276px of content, date/time 130px each. */

/* --- 15. 761 - TWO-ROW RAIL --------------------------------------------- */
@media (min-width:761px){
  :root{ --jc-overlap:64px; --jc-clear:32px; --jc-cell:56px; --jc-pad:16px; }
  .hero__band{ --hero-photo-h:420px; }
  .booking-shell__row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .booking-shell__field--from,
  .booking-shell__field--to{ grid-column:auto; }
  /* corridor-v1.css states in its own docblock that it carries no !important.
     The two the spec reached for here were only fighting the sibling rule on
     the line above - same sheet, higher specificity - so they are resolved by
     giving the three rules the row prefix instead. (0,2,0) and later wins. */
  .booking-shell__cell + .booking-shell__cell{ box-shadow:inset 1px 0 0 var(--corr-hair) }
  .booking-shell__row .booking-shell__control--date{ grid-column:1 / 2; box-shadow:inset 0 1px 0 var(--corr-hair) }
  .booking-shell__row .booking-shell__control--time{ grid-column:2 / 3; box-shadow:inset 1px 0 0 var(--corr-hair), inset 0 1px 0 var(--corr-hair) }
  .booking-shell__row .booking-shell__cell:focus-within{ box-shadow:inset 0 0 0 2px var(--corr-action) }
  .booking-shell .button--search{ grid-column:1 / -1; margin-block-start:8px }
  .booking-shell__advanced-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .booking-shell__return{ grid-column:1 / -1 }
  .booking-shell__check{ grid-column:1 / -1 }
}

/* --- 16. 1050 -----------------------------------------------------------
   app.css's own 1050 breakpoint switches the navigation to the drawer. The
   composer needs no structural change here; it stays in the 761 two-row
   form. Documented so nobody adds one. At 1050 the container resolves to
   902px of content and the two place cells are 183px each - the narrowest
   they get, and the reason both are minmax(0,1fr) and not fixed. */

/* --- 17. 1200 - THE ONE-LINE RAIL --------------------------------------- */
@media (min-width:1200px){
  :root{ --jc-overlap:88px; --jc-clear:40px; --jc-cell:64px; --jc-pad:16px; }
  .hero__band{ --hero-photo-h:480px; }

  /* OVERRIDES corridor-v1.css:1611 `.hero__copy,.hero__composer{width:58%}`.
     The copy column stays at 58%; the composer goes full-bleed, which is
     what makes the 1096px five-track ledger below true. */
  .hero__composer{ width:100%; max-width:none; }
  /* The vehicle art moves up so the photo band, not the composer, contains
     it; the card then crosses its lower edge. */
  .hero__vehicle-wrap{
    inset-block:auto auto; top:calc(var(--hero-photo-h) - 300px);
    block-size:300px;
  }

  /* Content 1096 at >=1310. Rail padding 8 -> inner 1080.
     1080 - 168 - 136 - 216 = 560 -> 280 / 280.
     Track edges 0 / 280 / 560 / 728 / 864 / 1080: four hairlines, each one
     a single cell edge on an integer boundary, never doubled, never on a
     half pixel. minmax(0,1fr) absorbs the fractional gutter below 1310. */
  .booking-shell__row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 168px 136px minmax(216px,auto);
  }
  .booking-shell__cell + .booking-shell__cell{ box-shadow:inset 1px 0 0 var(--corr-hair) }
  /* The 761 block placed date in column 1 and time in column 2 for its
     two-row form. Nothing reset that here, so on the five-track rail both
     landed back on top of Pick-up and Drop-off and pushed themselves to a
     second row - which also left the submit in the 168px track, where its
     label overflowed by 16px. Auto placement is what this rail wants. */
  .booking-shell__row > .booking-shell__control--date,
  .booking-shell__row > .booking-shell__control--time{ grid-column:auto }
  .booking-shell__row > .button--search{ min-width:0 }
  .booking-shell__control--date,
  .booking-shell__control--time{ grid-column:auto }
  .booking-shell .button--search{
    grid-column:auto; margin-block-start:0; margin-inline-start:8px; width:calc(100% - 8px);
  }
  .booking-shell__advanced-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .booking-shell__return{ grid-column:1 / 3; grid-row:2 }
  .booking-shell__return-toggle{ grid-column:1 / -1 }
  .booking-shell__check:not(.booking-shell__return-toggle){ grid-column:auto }
}

/* --- 18. GLOBAL HYGIENE -------------------------------------------------
   100%, never none: `none` can disable the user's own text zoom, a SC 1.4.4
   hazard. Chrome-on-Android text inflation still fires inside the Samsung
   and in-app WebViews that carry a large share of PK mobile traffic.
   scrollbar-gutter is a pure enhancement (Safari 18.2); the load-bearing
   rule is that nothing in this fence is ever sized with 100vw. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-gutter:stable; }
/* ==== RB-13 END ========================================================= */

/* ==== RB-18 composer polish ============================================
   Two defects measured on production behind ?jc=1 at 1440x900 and 390x844.
   This whole file is loaded only when the flag is on, so nothing here can
   reach a visitor on the v1 composer.                                     */

/* --- 18a. the help trigger sits ON the cell divider -------------------
   Measured, 1440:

     .booking-shell__field--from   189..443
     next cell (--to) starts at    443
     its 24x24 help trigger        419..443   right edge exactly on the seam

   RB-12 pinned the trigger with `inset:0 0 auto auto`, which anchors it to
   the cell's BORDER box and so ignores the cell's 14px padding. On v1 that
   read as deliberate: the cells were separated pills with a border and a
   drop shadow, so the button sat inside a visible boundary. v2 divides the
   cells with a single hairline and no gap, so the same rule parks the
   button on the divider itself - and at 390 on the rail's outer edge
   (trigger 297..321 against a cell ending at 321).

   Inset by the cell's own padding, less a couple of pixels so it still
   reads as belonging to the caption row rather than to the value.       */
.booking-shell--v2 .booking-shell__cell > .idrive-contextual-help{
  inset:6px 8px auto auto;
}

/* --- 18b. date and time do not pair below 761 ------------------------
   Measured at 390x844: .booking-shell__row resolved to a single 267px
   track and gave date and time a full row each - five stacked rows for
   what is one decision, and 56px of fold spent on it.

   Why a viewport query here and a container query in RB-17: on mobile
   this composer IS the viewport. It is full-bleed, its width is
   vw minus fixed page and form padding, and there is no intermediate
   column that can resize independently. RB-17's list sat inside an
   article column that the viewport does not describe.

   The split is 1.15 / 0.85 rather than even, because the two controls do
   not want the same room. Measured against each input's intrinsic width
   (cloned to width:auto, same font):

     390  row 283  date cell 154, input 128 vs 115 wanted  (+13)
                   time cell 113, input  87 vs  75 wanted  (+12)
     360  row 253  stacks - an even split gave the date 110 against 115,
                   and 1.15fr still only reached 137 of the 143 it needs.

   Hence the 376 floor: below it the pair genuinely does not fit and
   stacking is the correct answer, not a compromise.                     */
@media (min-width:376px) and (max-width:760px){
  .booking-shell--v2 .booking-shell__row{ grid-template-columns:1.15fr 0.85fr; }
  .booking-shell--v2 .booking-shell__row > .booking-shell__field,
  .booking-shell--v2 .booking-shell__row > .button--search{ grid-column:1 / -1; }
  .booking-shell--v2 .booking-shell__row > .booking-shell__control--date{ grid-column:1 / 2; }

  /* The stacked rail draws its seams as top hairlines. Side by side, the
     time cell needs the vertical seam as well - the same pair of insets
     the >=761 layout already uses at line 521. */
  .booking-shell--v2 .booking-shell__row > .booking-shell__control--time{
    grid-column:2 / 3;
    box-shadow:inset 1px 0 0 var(--corr-hair), inset 0 1px 0 var(--corr-hair);
  }
  .booking-shell--v2 .booking-shell__row > .booking-shell__control--time:focus-within{
    box-shadow:inset 0 0 0 2px var(--corr-action);
  }
}
/* ==== RB-18 END ========================================================= */

/* ---------------------------------------------------------------------------
   SLICE 84 - driver contract and driver accommodation.

   Both controls sit INSIDE .booking-shell__return, which is a two-column grid
   (line 409). Left alone, the contract checkbox would take one column and the
   accommodation fieldset the other, putting a one-line question beside a
   two-line answer set. Both span the full row instead.

   The radios reuse the .booking-shell__check row - same 44px target, same gap,
   same label type - and only add the control paint the existing rule gives
   checkboxes, because that rule is keyed to input[type="checkbox"] and radios
   would otherwise render as the raw UA control against a styled sibling.
   --------------------------------------------------------------------------- */
/* THE SPAN RULE NEEDS ITS OWN HOOK, not .booking-shell__check.
   .booking-shell__check is already claimed at two breakpoints - `grid-column:1/-1`
   at >=761 and `grid-column:auto` at >=1200 via
   `.booking-shell__check:not(.booking-shell__return-toggle)`. That last one is
   (0,2,0), the same weight as a `.booking-shell__return > .booking-shell__check`
   descendant rule, so which one won depended on source order alone - too fragile
   for a control that must span the row at every width. .booking-shell__engagement
   is targeted by nothing else in this sheet. */
.booking-shell__return > .booking-shell__engagement{ grid-column:1 / -1; }

/* .booking-shell__return's own arms style the date/time CELLS. The checkbox is
   not a cell and must keep the row layout .booking-shell__check gives it, so the
   box sits beside its label rather than centred above it. */
label.booking-shell__engagement{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  text-align:start;
}

.booking-shell__accommodation{
  display:grid;
  gap:4px;
  border:0;
  margin:0;
  padding:0;
  min-inline-size:0; /* a fieldset defaults to min-content and blows out the grid */
}

.booking-shell__accommodation legend{
  padding:0;
  margin-block-end:4px;
}

.booking-shell__accommodation .booking-shell__check{ min-height:40px; }

/* SLICE 87. accent-color alone left the UNCHECKED radio painted by whatever
   global input background is in scope - on production it rendered as a solid
   dark disc, which reads as "selected" beside the one that actually is. Drawn
   the same way the checkbox above is drawn instead: a hairline ring on the
   surface, and a ring plus dot in the action green when chosen. */
.booking-shell__check input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  inline-size:20px;
  block-size:20px;
  flex:0 0 auto;
  margin:0;
  border:0; border-radius:50%;
  background:var(--corr-surface);
  box-shadow:inset 0 0 0 1px var(--corr-rule);
  cursor:pointer;
}
.booking-shell__check input[type="radio"]:checked{
  box-shadow:inset 0 0 0 1px var(--corr-action);
  background-image:radial-gradient(circle at center, var(--corr-action) 0 5px, transparent 5px);
}

.booking-shell__check input[type="radio"]:focus-visible{
  outline:2px solid var(--corr-gold-lift, #C9A96A);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------------
   SLICE 87 - THE TRIP PILLS.

   Three segments holding ONE value, replacing a return checkbox with a driver
   contract checkbox nested inside it. Two controls could express three states
   only by convention, and one of the four combinations they could express -
   a contract with no return - was not a thing we sell.

   NOT the service tongue's paint. The tongue (section 4) is an underlined tab
   strip because it switches what the whole form means; this sits under it and
   answers a narrower question, so it is a seated segmented control. Reusing
   the tongue's look would have made two different questions read as one
   two-row control.

   The native radio is CLIPPED, never display:none or visibility:hidden: both
   remove it from the tab order and from the accessibility tree, which would
   throw away the exact thing real radios were chosen for. opacity:0 on a
   0-sized absolutely positioned input keeps focus, keyboard arrows and the
   announced group intact, and :has(:checked) paints the label around it.
   --------------------------------------------------------------------------- */
.booking-shell__trip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:4px;
  margin:10px 0 0;
  padding:4px;
  border:0;                                     /* a fieldset's UA border */
  border-radius:var(--corr-r-md);
  box-shadow:inset 0 0 0 1px var(--corr-hair);
  min-inline-size:0;                            /* fieldsets are min-content */
}
/* Above the phone widths the group sizes to its own content and sits at the
   start of the card. Stretched to the full 1096px rail each segment is ~360px
   of mostly empty box, which reads as three panels rather than one control. */
@media (min-width:700px){
  .booking-shell__trip{
    grid-template-columns:repeat(3, minmax(0, max-content));
    inline-size:max-content; max-inline-size:100%;
  }
}
.booking-shell__trip[hidden]{ display:none; }

.booking-shell__trip-pill{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  gap:2px;
  min-width:0; min-height:48px;
  padding:8px 10px;
  border-radius:var(--corr-r-sm);
  text-align:start;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color 120ms ease, box-shadow 120ms ease;
}
.booking-shell__trip-pill > input{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  inline-size:1px; block-size:1px;
  opacity:0; margin:0; pointer-events:none;
}
.booking-shell__trip-pill > span{ display:contents; }
.booking-shell__trip-pill strong{
  font:600 13px/1.25 Archivo, system-ui, sans-serif;
  letter-spacing:.01em;
  color:var(--corr-body);
  text-wrap:balance;
}
.booking-shell__trip-pill small{
  font:400 11px/1.3 Archivo, system-ui, sans-serif;
  color:var(--rp-muted);
}
.booking-shell__trip-pill:hover{ background:var(--corr-stone); }
.booking-shell__trip-pill:has(:checked){
  background:var(--corr-surface);
  box-shadow:inset 0 0 0 1px var(--corr-action);
}
.booking-shell__trip-pill:has(:checked) strong{ color:var(--corr-action); }
.booking-shell__trip-pill:has(:focus-visible){
  outline:2px solid var(--corr-gold-lift, #C9A96A);
  outline-offset:1px;
}

/* Under 700px the three subtitles cost four wrapped lines each and push the
   pick-up fields below the fold. Only the CHOSEN segment keeps its subtitle -
   which is the one the reader needs, because it explains what they just
   picked. Nothing is hidden from assistive technology: the strong label alone
   is a complete accessible name, and the subtitle is decoration for the
   sighted reader at widths where it fits. */
@media (max-width:699px){
  .booking-shell__trip-pill small{ display:none; }
  .booking-shell__trip-pill:has(:checked) small{ display:block; }
}