/* ===========================================================================
   Travel request form  —  /travel-request
   ---------------------------------------------------------------------------
   Internal staff page. Loaded ONLY on this route (app/layout.tsx links it when
   x-pathname matches), and every rule is nested under `.ltr-page`.

   Why scoped: the flights feature is not on master yet and will land its own
   hero/search styles. Nothing in here may leak out, and nothing out there may
   bleed in. Do not add a bare element or utility selector to this file, and do
   not reference `.ltr-*` from any other stylesheet.

   Colour tokens use light-dark(). The site has no theme toggle today, so these
   resolve light — but the page flips correctly the moment one is added.
   =========================================================================== */

.ltr-page {
  /* Brand */
  --ltr-coral: #f45d6b;
  --ltr-coral-dark: #d9434f;
  --ltr-navy: #0f2733;
  --ltr-navy-2: #1b4d61;
  --ltr-teal: #326b7b;

  /* Surfaces */
  --ltr-bg: light-dark(#f4f6f8, #1c1c1c);
  --ltr-surface: light-dark(#ffffff, #262626);
  --ltr-surface-2: light-dark(#f8fafc, #2e2e2e);
  --ltr-hover: light-dark(#f1f5f9, #333333);

  /* Lines */
  --ltr-border: light-dark(#e5e9ee, #3d3d3d);
  --ltr-border-strong: light-dark(#cfd6de, #555555);

  /* Text */
  --ltr-text: light-dark(#1f2933, #f1f1f1);
  --ltr-muted: light-dark(#6b7785, #a8b0b9);
  --ltr-heading: light-dark(#0f2733, #e4f7ff);

  /* Feedback */
  --ltr-error: light-dark(#c42b2b, #f87171);

  /* Over a travel policy limit (LEIS-1024). A separate ramp from --ltr-error
     on purpose: an over-limit amount is valid and will be sent, so it needs a
     tinted panel that reads as a warning rather than the hairline red of a
     field that has to be fixed. Both pairs clear 7:1 against their own
     background, in either scheme. */
  --ltr-warn-bg: light-dark(#fdecec, #3a1f21);
  --ltr-warn-border: light-dark(#f3bcbc, #7a3b3f);
  --ltr-warn-text: light-dark(#8f1f1f, #fca5a5);
  --ltr-warn-accent: light-dark(#c42b2b, #f87171);

  /* Shape */
  --ltr-radius: 20px;
  --ltr-radius-lg: 14px;
  --ltr-radius-sm: 10px;
  --ltr-shadow: 0 1px 2px rgba(15, 39, 51, .06), 0 4px 16px rgba(15, 39, 51, .06);
  --ltr-shadow-lg: 0 16px 48px rgba(15, 39, 51, .2);

  /* Type — reuses the font faces already loaded by the root layout */
  --ltr-font: var(--font-lato), "Lato", system-ui, -apple-system, sans-serif;

  /* The content column the whole page aligns to, per the mockup */
  --ltr-col: 1130px;

  background: var(--ltr-bg);
  color: var(--ltr-text);
  font-family: var(--ltr-font);
}

.ltr-page *,
.ltr-page *::before,
.ltr-page *::after { box-sizing: border-box; }

.ltr-page [hidden] { display: none !important; }

/* leisure-new-style.css:78 ships a global `* { color: var(--color-content) }`.
   Because it matches every element it re-sets the colour on descendants and
   destroys inheritance: a white-on-coral button renders with a grey label and a
   grey icon, because the <span> and <svg> inside it are matched by `*` too, and
   an icon drawn with `fill: currentColor` picks up grey from its <path>.

   `:where()` contributes no specificity, so this whole selector scores 0,0,0 —
   identical to `*`. It wins only because this stylesheet is linked after
   leisure-new-style.css, and it loses to every `.ltr-…` rule in this file,
   including single-class ones like `.ltr-error`. A higher-specificity reset
   would silently override those and turn the error messages grey. */
:where(.ltr-page) :where(svg, svg *, span, strong, em, small, output, p, li, i, b) {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Layout shell
   One 1130px column, matching `.emp-request-form` in the prototype.
   --------------------------------------------------------------------------- */

.ltr-shell {
  width: var(--ltr-col);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---------------------------------------------------------------------------
   Hero
   A pale blue wash with large soft chevrons, drawn in CSS rather than shipped
   as an image — it is two repeating gradients, so it costs no request and
   stays crisp at any width.
   --------------------------------------------------------------------------- */

.ltr-hero {
  position: relative;
  width: 100%;
  padding: 32px 0 86px;
  background: linear-gradient(180deg, #e9f1f5 0%, #eef3f5 62%, var(--ltr-bg) 100%);
  overflow: hidden;
}

.ltr-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .85) 0 2px, transparent 2px 190px),
    repeating-linear-gradient(65deg, rgba(190, 212, 222, .35) 0 2px, transparent 2px 190px);
}

.ltr-hero-inner { position: relative; z-index: 1; }

.ltr-title {
  margin: 0 0 4px;
  color: var(--ltr-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.ltr-subtitle {
  margin: 0 0 26px;
  color: var(--ltr-muted);
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Booking-type cards
   Ticket stubs: a notch is punched out of each side with two half-circles that
   are filled with the hero colour, so the card reads as torn from a strip.
   --------------------------------------------------------------------------- */

.ltr-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ltr-card-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 168px;
  padding: 18px 18px 16px;
  border: 1px solid #cfdcd8;
  border-radius: 14px;
  background: var(--ltr-surface);
  color: var(--ltr-heading);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease,
    box-shadow .15s ease;
}

/* The notches. `--ltr-notch` is the hero colour behind the card; keeping it a
   variable means the stub still reads correctly if the hero gradient changes. */
.ltr-card-tab::before,
.ltr-card-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 1px solid #cfdcd8;
  border-radius: 50%;
  background: var(--ltr-notch, #edf2f5);
  z-index: 2;
}

.ltr-card-tab::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ltr-card-tab::after { right: -10px; clip-path: inset(0 50% 0 0); }

.ltr-card-tab:hover:not(.is-active) {
  border-color: var(--ltr-teal);
  transform: translateY(-1px);
}

.ltr-card-tab.is-active {
  background: var(--ltr-navy-2);
  border-color: var(--ltr-navy-2);
  color: #fff;
  box-shadow: 0 0 0 3px #e4ecef;
  transform: translateY(-1px);
  z-index: 4;
}

.ltr-card-tab:focus-visible {
  outline: 3px solid var(--ltr-coral);
  outline-offset: 3px;
}

.ltr-card-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  color: var(--ltr-navy-2);
}

.ltr-card-tab-icon svg { width: 30px; height: 30px; display: block; }
.ltr-card-tab-icon svg path { fill: currentColor; }
.ltr-card-tab.is-active .ltr-card-tab-icon { color: var(--ltr-coral); }

.ltr-card-tab-title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.ltr-card-tab-desc {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed #cfdcd8;
  color: var(--ltr-muted);
  font-size: 14px;
  line-height: 1.35;
}

.ltr-card-tab.is-active .ltr-card-tab-desc {
  color: rgba(255, 255, 255, .88);
  border-top-color: rgba(255, 255, 255, .45);
}

/* ---------------------------------------------------------------------------
   Form sections
   Each is its own white card. The prototype's markup carries a step number in
   a <span>, which its own stylesheet then hides — so there are no numbers here.
   --------------------------------------------------------------------------- */

.ltr-form-wrap { padding-bottom: 56px; margin-top: -46px; position: relative; z-index: 2; }

.ltr-section {
  padding: 22px 24px;
  margin: 0 0 18px;
  background: var(--ltr-surface);
  border: 1px solid var(--ltr-border);
  border-radius: 16px;
  box-shadow: var(--ltr-shadow);
}

.ltr-section-heading {
  margin: 0 0 5px;
  color: var(--ltr-heading);
  font-size: 16px;
  font-weight: 700;
}

.ltr-section-hint {
  margin: 0 0 18px;
  color: var(--ltr-muted);
  font-size: 13px;
}

.ltr-section-heading + .row { margin-top: 13px; }

/* ---------------------------------------------------------------------------
   Empty state, before a booking type is chosen
   --------------------------------------------------------------------------- */

.ltr-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 24px 20px;
  margin-bottom: 8px;
  border: 1px dashed #cfdcd8;
  border-radius: 14px;
  color: var(--ltr-teal);
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------------- */

.ltr-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ltr-text);
  font-size: 13px;
  font-weight: 600;
}

.ltr-label em { font-style: normal; color: var(--ltr-coral); }
.ltr-label-hint,
.ltr-optional { color: var(--ltr-muted); font-weight: 400; }

.ltr-input {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--ltr-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: var(--ltr-surface);
  border: 1px solid var(--ltr-border-strong);
  border-radius: var(--ltr-radius-sm);
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}

.ltr-input::placeholder { color: var(--ltr-muted); opacity: .8; }

.ltr-input:focus {
  border-color: var(--ltr-navy-2);
  box-shadow: 0 0 0 3px rgba(27, 77, 97, .15);
}

.ltr-page textarea.ltr-input { min-height: 90px; resize: vertical; }

.ltr-input[data-uppercase="true"] { text-transform: uppercase; }
.ltr-input[data-uppercase="true"]::placeholder { text-transform: none; }

.ltr-page .is-invalid {
  border-color: var(--ltr-error);
  box-shadow: 0 0 0 3px rgba(196, 43, 43, .10);
}

.ltr-error {
  display: block;
  margin-top: 5px;
  color: var(--ltr-error);
  font-size: 12px;
}

.ltr-hint {
  display: block;
  margin-top: 5px;
  color: var(--ltr-muted);
  font-size: 12px;
}

.ltr-nights {
  display: block;
  margin-top: 5px;
  color: var(--ltr-navy-2);
  font-size: 12px;
  font-weight: 600;
}

/* Select ------------------------------------------------------------------ */

.ltr-select-wrap { position: relative; }

.ltr-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.ltr-select-wrap > svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--ltr-muted);
  pointer-events: none;
}

/* Segmented radio (trip type) --------------------------------------------- */

.ltr-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ltr-choice { position: relative; margin: 0; cursor: pointer; }
.ltr-choice input { position: absolute; opacity: 0; pointer-events: none; }

.ltr-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 96px;
  padding: 7px 16px;
  border: 1px solid var(--ltr-border-strong);
  border-radius: var(--ltr-radius-sm);
  background: var(--ltr-surface);
  color: var(--ltr-text);
  font-size: 14px;
}

.ltr-choice input:checked + span {
  background: var(--ltr-navy-2);
  border-color: var(--ltr-navy-2);
  color: #fff;
}

.ltr-choice input:focus-visible + span {
  outline: 2px solid var(--ltr-coral);
  outline-offset: 2px;
}

/* Stepper ------------------------------------------------------------------ */

.ltr-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--ltr-border-strong);
  border-radius: var(--ltr-radius-sm);
  background: var(--ltr-surface);
  overflow: hidden;
}

.ltr-stepper button {
  width: 42px;
  min-width: 42px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ltr-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ltr-stepper button:hover:not(:disabled) { background: var(--ltr-hover); }
.ltr-stepper button:disabled { opacity: .35; cursor: default; }

.ltr-stepper input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding: 5px 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ltr-text);
  text-align: center;
  font-family: inherit;
  font-size: 14px;
}

/* Phone (dial code + number) ---------------------------------------------- */

.ltr-phone-group {
  display: grid;
  grid-template-columns: minmax(105px, 34%) minmax(0, 1fr);
  gap: 8px;
}

.ltr-phone-code,
.ltr-phone-number {
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ltr-text);
  font-family: inherit;
  font-size: 14px;
  background: var(--ltr-surface);
  border: 1px solid var(--ltr-border-strong);
  border-radius: var(--ltr-radius-sm);
  outline: 0;
}

.ltr-phone-code { cursor: pointer; text-overflow: ellipsis; }

.ltr-phone-code:focus,
.ltr-phone-number:focus {
  border-color: var(--ltr-navy-2);
  box-shadow: 0 0 0 3px rgba(27, 77, 97, .15);
}

.ltr-phone-group.is-invalid {
  border: 0;
  box-shadow: none;
}

.ltr-phone-group.is-invalid .ltr-phone-code,
.ltr-phone-group.is-invalid .ltr-phone-number {
  border-color: var(--ltr-error);
  box-shadow: 0 0 0 3px rgba(196, 43, 43, .10);
}

/* ---------------------------------------------------------------------------
   Date field + calendar
   --------------------------------------------------------------------------- */

.ltr-date-field { position: relative; }
.ltr-date-input { padding-right: 38px; cursor: pointer; background: var(--ltr-surface); }

.ltr-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--ltr-text);
  pointer-events: none;
}

.ltr-cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 286px;
  max-width: calc(100vw - 32px);
  padding: 0 14px 14px;
  background: var(--ltr-surface);
  border: 1px solid var(--ltr-border-strong);
  border-radius: 8px;
  box-shadow: var(--ltr-shadow-lg);
  overflow: hidden;
}

/* Opened upward, when the field sits too near the bottom of the viewport for
   the panel to fit below it. See `LtrDateField`'s own note. */
.ltr-page .ltr-cal.is-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.ltr-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin: 0 -14px 10px;
  padding: 0 8px;
  background: var(--ltr-teal);
  color: #fff;
}

.ltr-cal-head strong { font-size: 14px; font-weight: 700; line-height: 1; color: #fff; }

.ltr-cal-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.ltr-cal-head button svg { width: 14px; height: 14px; }
.ltr-cal-head button:disabled { opacity: .35; cursor: default; }

.ltr-cal-week,
.ltr-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }

.ltr-cal-week { margin-bottom: 5px; }

.ltr-cal-week span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: var(--ltr-text);
  font-size: 13px;
  font-weight: 500;
}

.ltr-cal-day {
  width: 32px;
  height: 32px;
  margin: 2px auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ltr-text);
  font-size: 14px;
  cursor: pointer;
}

.ltr-cal-day:hover:not(.is-disabled) { background: var(--ltr-hover); }
.ltr-cal-day.is-today { background: var(--ltr-hover); font-weight: 600; }
.ltr-cal-day.is-other-month { color: var(--ltr-border-strong); }
.ltr-cal-day.is-disabled { color: var(--ltr-border-strong); cursor: default; pointer-events: none; }

.ltr-cal-day.is-selected,
.ltr-cal-day.is-selected.is-today {
  background: var(--ltr-coral);
  color: #fff;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Traveller cards
   --------------------------------------------------------------------------- */

.ltr-traveller-card + .ltr-traveller-card {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--ltr-border);
}

.ltr-traveller-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--ltr-heading);
  font-size: 15px;
  font-weight: 700;
}

.ltr-traveller-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #dcefec;
  color: var(--ltr-navy-2);
  font-size: 11px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */

.ltr-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding: 0 2px 2px;
}

.ltr-form-error {
  margin-right: auto;
  color: var(--ltr-error);
  font-size: 13px;
}

.ltr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 130px;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--ltr-radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}

.ltr-btn svg { width: 16px; height: 16px; }

.ltr-btn-ghost {
  background: var(--ltr-surface);
  border-color: var(--ltr-border-strong);
  color: var(--ltr-text);
}

.ltr-btn-ghost:hover { background: var(--ltr-hover); }

.ltr-btn-primary {
  background: var(--ltr-coral);
  border-color: var(--ltr-coral);
  color: #fff;
}

.ltr-btn-primary:hover:not(:disabled) {
  background: var(--ltr-coral-dark);
  border-color: var(--ltr-coral-dark);
}

.ltr-btn:disabled { opacity: .6; cursor: default; }

.ltr-btn:focus-visible { outline: 3px solid var(--ltr-navy-2); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Confirmation screen
   --------------------------------------------------------------------------- */

.ltr-success {
  padding: 40px 24px 44px;
  background: var(--ltr-surface);
  border: 1px solid var(--ltr-border);
  border-radius: 16px;
  box-shadow: var(--ltr-shadow);
  text-align: center;
}

.ltr-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #dcefec;
  color: var(--ltr-navy-2);
}

.ltr-success-icon svg { width: 26px; height: 26px; }

.ltr-success-lead {
  margin: 0 auto 22px;
  max-width: 48ch;
  color: var(--ltr-text);
  font-size: 15px;
  line-height: 1.5;
}

.ltr-success-ref-label {
  display: block;
  margin-bottom: 4px;
  color: var(--ltr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ltr-success-ref {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--ltr-heading);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  user-select: all;
}

.ltr-success-hint,
.ltr-success-partial {
  margin: 0 auto 22px;
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.5;
}

.ltr-success-hint { color: var(--ltr-muted); }
.ltr-success-partial { color: var(--ltr-error); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .ltr-tabs { grid-template-columns: 1fr; gap: 12px; }

  /* The stub notches only read as notches on a card in a row of three. */
  .ltr-card-tab {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  .ltr-card-tab::before,
  .ltr-card-tab::after { display: none; }
  .ltr-card-tab-icon { margin-bottom: 0; }
  .ltr-card-tab-title { font-size: 17px; }
  .ltr-card-tab-desc { display: none; }
}

@media (max-width: 767.98px) {
  .ltr-hero { padding: 24px 0 70px; }
  .ltr-title { font-size: 24px; }
  .ltr-section { padding: 18px 16px; border-radius: 14px; }

  .ltr-phone-group { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); }

  .ltr-actions { flex-direction: column-reverse; align-items: stretch; }
  .ltr-actions .ltr-btn { width: 100%; }
  .ltr-form-error { margin: 0 0 4px; text-align: center; }

  .ltr-success-ref { font-size: 25px; }
}

/* ---------------------------------------------------------------------------
   Saved-traveller picker
   Signed-in requesters only — see features/travel-request/saved-travellers.ts.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   "Use a saved traveller"

   A dropdown, not a select and not an always-open list. A select cannot hold
   a delete button; an open list of twenty colleagues pushes the first real
   field off the screen on every traveller card. Shares the trigger and panel
   with .ltr-combo, which already replaces the native select on this form.
   --------------------------------------------------------------------------- */

.ltr-page .ltr-saved-picker {
  max-width: 460px;
  margin: 0 0 16px;
}

.ltr-page .ltr-saved-legend {
  display: block;
  margin-bottom: 6px;
  color: var(--ltr-muted);
  font-size: 12px;
  font-weight: 600;
}

/*
 * Match the trigger's width.
 *
 * `.ltr-combo-panel` caps itself at 360px because the dial-code trigger is
 * deliberately narrow and its rows carry a full country name. Here the
 * trigger is the full 460px and the rows are names, so inheriting that cap
 * left the panel visibly narrower than the control it belongs to.
 */
/* `.ltr-page` on the front for weight: `.ltr-combo-panel` is declared later
   in this file and would otherwise win the tie on order alone. */
.ltr-page .ltr-saved-panel {
  min-width: 0;
  max-width: none;
}

/* The panel scrolls instead of growing. Eight-ish rows, then a scrollbar —
   enough to see there is more without the page having to move. */
.ltr-saved-panel .ltr-saved-list {
  max-height: 288px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ltr-saved-row {
  position: relative;
  border-top: 1px solid var(--ltr-border);
}

/* Choosing a person: the whole row, less the space the bin occupies. */
.ltr-saved-choose {
  display: block;
  width: 100%;
  padding: 10px 44px 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ltr-text);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.ltr-saved-choose:hover,
.ltr-saved-choose:focus-visible {
  background: var(--ltr-hover);
}

.ltr-saved-choose.is-selected {
  background: var(--ltr-teal);
  color: #fff;
  font-weight: 600;
}

/* "Enter details manually" is the first row and owns no divider — the
   search box or the panel edge is already above it. */
.ltr-saved-list > .ltr-saved-choose:first-child {
  border-top: 0;
}

.ltr-saved-forget {
  position: absolute;
  top: 5px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ltr-muted);
  cursor: pointer;
}

.ltr-saved-forget svg {
  width: 15px;
  height: 15px;
}

.ltr-saved-forget:hover:not(:disabled),
.ltr-saved-forget:focus-visible {
  background: var(--ltr-warn-bg);
  color: var(--ltr-warn-accent);
}

.ltr-saved-forget:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Confirmation, inline under the row it belongs to. A dialog for forgetting
   one name is heavier than the action deserves, and it would cover the list
   the user is working through. */
.ltr-saved-confirm {
  padding: 10px 12px 12px;
  background: var(--ltr-surface-2);
  border-top: 1px solid var(--ltr-border);
}

.ltr-saved-confirm p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ltr-text);
}

.ltr-saved-confirm-actions {
  display: flex;
  gap: 8px;
}

.ltr-saved-confirm-actions button {
  padding: 6px 14px;
  border: 1px solid var(--ltr-border-strong);
  border-radius: 6px;
  background: var(--ltr-surface);
  color: var(--ltr-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ltr-saved-confirm-actions button.is-destructive {
  border-color: var(--ltr-warn-border);
  background: var(--ltr-warn-bg);
  color: var(--ltr-warn-text);
}

.ltr-saved-confirm-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ltr-saved-error {
  margin: 0;
  padding: 8px 12px;
  background: var(--ltr-warn-bg);
  border-top: 1px solid var(--ltr-border);
  color: var(--ltr-warn-text);
  font-size: 13px;
}


/* ---------------------------------------------------------------------------
   Searchable dropdown
   Replaces the native select for the country and dial-code lists, which are
   too long to navigate by first letter and cannot show a flag natively.
   --------------------------------------------------------------------------- */

.ltr-combo { position: relative; }

.ltr-combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.ltr-combo-trigger > svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--ltr-muted);
}

.ltr-combo-value,
.ltr-combo-placeholder {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ltr-combo-placeholder { color: var(--ltr-muted); }

.ltr-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 100%;
  /* The dial-code trigger is deliberately narrow, but its rows carry a full
     country name, so the panel is allowed to outgrow it. */
  min-width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  background: var(--ltr-surface);
  border: 1px solid var(--ltr-border-strong);
  border-radius: var(--ltr-radius-sm);
  box-shadow: var(--ltr-shadow-lg);
  overflow: hidden;
}

.ltr-combo.is-compact .ltr-combo-panel { left: 0; }

.ltr-combo-search {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ltr-border);
  outline: 0;
  background: var(--ltr-surface);
  color: var(--ltr-text);
  font-family: inherit;
  font-size: 14px;
}

.ltr-combo-search::placeholder { color: var(--ltr-muted); }

.ltr-combo-list {
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
}

.ltr-combo-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ltr-text);
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ltr-combo-option.is-active { background: var(--ltr-hover); }

.ltr-combo-option.is-selected {
  background: var(--ltr-navy-2);
  color: #fff;
  font-weight: 600;
}

.ltr-combo-empty {
  padding: 14px 10px;
  color: var(--ltr-muted);
  text-align: center;
  font-size: 13px;
}

/* Dial-code row: flag, country name, then the code pinned right. */
.ltr-dial-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ltr-dial-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ltr-dial-code { color: var(--ltr-muted); font-variant-numeric: tabular-nums; }
.ltr-combo-option.is-selected .ltr-dial-code { color: rgba(255, 255, 255, .8); }

/* Month and year pickers in the calendar header. Native selects, so the long
   year list stays scrollable and searchable by typing. */
.ltr-cal-selects {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ltr-cal-selects select {
  appearance: none;
  -webkit-appearance: none;
  padding: 3px 20px 3px 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  background: transparent;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.ltr-cal-selects select:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* The popup list is rendered by the OS, so its options need readable colours
   of their own — white-on-transparent would be invisible there. */
.ltr-cal-selects option { color: var(--ltr-text); background: var(--ltr-surface); }

/* ---------------------------------------------------------------------------
   Locked behind the sign-in overlay (LEIS-1011)
   ---------------------------------------------------------------------------
   The page stays mounted and visible so the requester can see what they are
   signing in for — and so a session that expires mid-form does not take the
   half-filled form with it. `inert` on the container is what actually makes it
   unusable (no clicks, no typing, no tab stops, out of the a11y tree); these
   rules only make that state look as unusable as it is.

   The hero's title and subtitle are left crisp. Blurring them too would leave
   someone on an unrecognisable page behind a modal that does not say which
   page it is.
   --------------------------------------------------------------------------- */

.ltr-page.is-locked .ltr-tabs,
.ltr-page.is-locked .ltr-form-wrap {
  filter: blur(4px);
  opacity: .5;
  /* Belt and braces with `inert`: a browser that does not support the
     attribute still gets a region nothing can be aimed at. */
  pointer-events: none;
  user-select: none;
}

/* The blur is decoration, and a blurred page sliding into focus is motion
   nobody asked for. Dim only. */
@media (prefers-reduced-motion: reduce) {
  .ltr-page.is-locked .ltr-tabs,
  .ltr-page.is-locked .ltr-form-wrap {
    filter: none;
    opacity: .4;
  }
}

/* ---------------------------------------------------------------------------
   Expected cost and travel policy limits (LEIS-1024)
   ---------------------------------------------------------------------------
   Two money fields — the expected flight fare per traveller and the expected
   hotel rate per night — each with the limit that applies under it, and a
   warning box when the amount is above that limit.

   The warning is not an error state. The request sends either way and reaches
   the desk flagged for review, so `.is-invalid` is deliberately not reused
   here: a red hairline on the input would tell the requester to fix something
   that does not need fixing.
   --------------------------------------------------------------------------- */

/* Narrow on purpose. A currency amount is 3–6 characters and a field sized for
   the full column invites a phone number into it. */
.ltr-money-input {
  position: relative;
  max-width: 220px;
}

.ltr-money-input .ltr-input {
  padding-left: 26px;
  /* Digits of equal width, so the value does not shuffle as it is typed. */
  font-variant-numeric: tabular-nums;
}

.ltr-money-prefix {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--ltr-muted);
  font-size: 14px;
  font-weight: 600;
  /* The prefix is inside the field's box; without this, clicking it does not
     focus the input it is sitting on. */
  pointer-events: none;
}

.ltr-overlimit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  color: var(--ltr-warn-text);
  font-size: 13px;
  line-height: 1.5;
  background: var(--ltr-warn-bg);
  border: 1px solid var(--ltr-warn-border);
  border-left: 4px solid var(--ltr-warn-accent);
  border-radius: var(--ltr-radius-sm);
}

/* The field-level box is a live region and stays mounted even with nothing to
   say — see LtrMoneyField for why. This is what stops an empty one occupying
   15px of every form. */
.ltr-overlimit:empty {
  display: none;
}

.ltr-overlimit-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  /* Optical alignment with the cap height of the first line, not its box. */
  margin-top: 1px;
  color: var(--ltr-warn-accent);
}

/* The second warning, immediately above the Send button. */
.ltr-overlimit-summary {
  margin: 0 0 16px;
  padding: 14px 16px;
  font-size: 14px;
}

.ltr-overlimit-summary strong {
  display: block;
  margin-bottom: 6px;
}

.ltr-overlimit-summary ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.ltr-overlimit-summary li {
  /* leisure-new-style.css:98 ships `ul li { list-style: none }`, which beats
     inheritance from this list's own `ul` — the marker has to be restored on
     the `li` itself, or the two overages read as orphaned sentences. Same trap
     custom-fixes.css documents at its own `list-style: disc`. */
  list-style: disc;
}

.ltr-overlimit-summary li + li {
  margin-top: 2px;
}

/* Flagged, on the confirmation screen. `.ltr-success` centres its text; this
   is a sentence or two and reads better left-aligned in a centred box. */
.ltr-success-flagged {
  margin: 0 auto 22px;
  max-width: 52ch;
  font-size: 13px;
  text-align: left;
}

@media (max-width: 767.98px) {
  /* Full width below the fold of a phone — 220px leaves an odd stub of empty
     row next to a field that is already the last thing in its section. */
  .ltr-money-input { max-width: none; }

  .ltr-overlimit { padding: 11px 12px; }
  .ltr-overlimit-summary { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   A half of the trip the desk has already booked

   `<fieldset disabled>` already stops every control in the subtree from being
   edited; this is what makes that visible, because a disabled input that looks
   like an enabled one just reads as a page that has stopped working.
   --------------------------------------------------------------------------- */

.ltr-page .ltr-locked-half {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0; /* fieldset's UA default is min-content, which breaks the grid */
}

.ltr-page .ltr-locked-half .ltr-section {
  opacity: 0.65;
}

/* The note itself stays fully legible — it is the one thing in here the
   traveller still has to read. */
.ltr-page .ltr-locked-note {
  display: block;
  opacity: 1;
  background: var(--ltr-surface-2);
  border: 1px solid var(--ltr-border);
  border-left: 3px solid var(--ltr-teal);
  border-radius: var(--ltr-radius-sm);
  padding: 12px 16px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ltr-text);
}