/* ==========================================================================
   Multi-stop itinerary (W2, flag globe_multistop_v2)
   Loaded by templates/globe/index.html ONLY when the flag is on, so every
   rule here is flag-scoped by construction. Visual target:
   mockups/multi-stop-2026-10-07/web.html (states a-f) and web-mobile.html.

   A white, Google-Maps-grade card inside the Trip Studio panel. Its own
   custom properties live on .ag-itin (never :root), and
   static/css/design-tokens.css is read, never redefined.
   Logical properties only (scripts/check_logical_css.sh gates this folder).
   ========================================================================== */

.ag-itin {
  --ag-itin-ink: #202124;
  --ag-itin-muted: #5f6368;
  --ag-itin-line: #e6eaf2;
  --ag-itin-blue: #1a56db;
  --ag-itin-grad: var(--ag-gradient-button, linear-gradient(135deg, #2563eb, #4f46e5));
  --ag-itin-ui: -apple-system, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: 2px 10px;
  font-family: var(--ag-itin-ui);
  color: var(--ag-itin-ink);
}
.ag-itin[hidden] {
  display: none !important;
}
/* panel.js wraps its blocks in four plain divs; they must not become the flex items that the gap above spaces */
.ag-itin__top,
.ag-itin__errslot,
.ag-itin__content,
.ag-itin__toastslot {
  display: contents;
}

/* ---- the A/B/C card ---------------------------------------------------- */
.ag-itin__card {
  position: relative;
  padding-block: 5px;
  padding-inline: 4px 46px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ag-itin-line);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}
.ag-itin__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.ag-itin__item {
  position: relative;
  list-style: none;
  border-radius: 12px;
}
.ag-itin__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 46px;
  padding-block: 6px;
  padding-inline: 8px;
  border-radius: 12px;
  background: #fff;
  transition: transform 160ms ease;
}
.ag-itin__item:hover .ag-itin__body {
  background: #f6f8fd;
}
/* swipe-to-remove (touch): vertical pans still scroll the sheet, horizontal drags reach reorder.js */
.ag-itin__item[data-role="stop"] .ag-itin__body {
  touch-action: pan-y;
}
.ag-itin__pin {
  --c: #2563eb;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  font-family: var(--ag-itin-ui);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 45%), var(--c);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c) 45%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.ag-itin__pin--moved {
  outline: 2px dashed #4f46e5;
  outline-offset: 2px;
}
.ag-itin__nm {
  flex: 1;
  min-inline-size: 0;
  display: block;
  text-align: start;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: text;
}
.ag-itin__nm b {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ag-itin-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-itin__l2 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}
.ag-itin__l2 small {
  flex: 0 1 auto;
  min-inline-size: 0;
  font-size: 11.5px;
  color: var(--ag-itin-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-itin__eta {
  flex: none;
  font-size: 10.5px;
  font-weight: 750;
  color: #0f766e;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding-inline: 7px;
  line-height: 17px;
  white-space: nowrap;
}
.ag-itin__item--ph .ag-itin__nm b {
  color: var(--ag-itin-blue);
}
.ag-itin__item--err .ag-itin__body,
.ag-itin__item.ag-itin__item--err:hover .ag-itin__body {
  background: #fef2f2;
  box-shadow: inset 0 0 0 1.5px #fca5a5;
}
.ag-itin__item--err .ag-itin__l2 small {
  color: #b91c1c;
  font-weight: 600;
}
.ag-itin__hd,
.ag-itin__x {
  inline-size: 26px;
  block-size: 26px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #80868b;
  flex: none;
  padding: 0;
  cursor: pointer;
}
.ag-itin__hd svg,
.ag-itin__x svg {
  inline-size: 16px;
  block-size: 16px;
}
.ag-itin__hd {
  cursor: grab;
  touch-action: none; /* the long-press lift owns this gesture, not the sheet */
  -webkit-touch-callout: none; /* no iOS callout on the held handle */
}
.ag-itin__x:hover {
  background: #fee2e2;
  color: #dc2626;
}
.ag-itin__hd:focus-visible,
.ag-itin__x:focus-visible,
.ag-itin__nm:focus-visible,
.ag-itin__addbtn:focus-visible,
.ag-itin__swap:focus-visible,
.ag-itin__pill:focus-visible,
.ag-itin__ex:focus-visible,
.ag-itin__via:focus-visible,
.ag-itin__tgl:focus-visible,
.ag-itin__cat:focus-visible,
.ag-itin__acclose:focus-visible,
.ag-itin__erra button:focus-visible,
.ag-itin__undo:focus-visible,
.ag-itin__stepsbox summary:focus-visible,
.ag-itin-sheet__cancel:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* lifted row + insertion line (pointer and keyboard reorder) */
.ag-itin__item--lift {
  z-index: 4;
}
.ag-itin__item--lift .ag-itin__body {
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.28), 0 0 0 2px #4f46e5;
  rotate: -1.2deg;
}
.ag-itin__item--lift .ag-itin__hd {
  color: #4f46e5;
  cursor: grabbing;
}
/* W2b fix wave (T11): the error row's own body rules (specificity 0,3,0 / 0,4,0) must not strip the lift while it is dragged */
.ag-itin__item.ag-itin__item--err.ag-itin__item--lift .ag-itin__body {
  background: #fef2f2;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.28), 0 0 0 2px #4f46e5;
}
.ag-itin--dragging {
  user-select: none;
}
.ag-itin__ins {
  list-style: none;
  block-size: 0;
  position: relative;
  z-index: 3;
}
.ag-itin__ins::before {
  content: "";
  position: absolute;
  inset-inline: 4px;
  inset-block-start: -1px;
  block-size: 3px;
  border-radius: 3px;
  background: var(--ag-itin-grad);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.ag-itin__ins::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -5px;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: #4f46e5;
  box-shadow: 0 0 0 3px #fff;
}

/* leg chips between rows */
.ag-itin__leg {
  --c: #4f46e5;
  position: relative;
  block-size: 24px;
  display: flex;
  align-items: center;
  padding-inline-start: 44px;
}
.ag-itin__leg::before {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  inset-block: -6px;
  border-inline-start: 2.5px dotted color-mix(in srgb, var(--c) 70%, #cbd5e1);
}
.ag-itin__chip {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #3c4043;
  background: #fff;
  border: 1px solid var(--ag-itin-line);
  border-radius: 999px;
  padding-block: 1px;
  padding-inline: 9px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.ag-itin__chip::before {
  content: "";
  inline-size: 12px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c);
}
.ag-itin__chip--pending::before {
  background: #cbd5e1;
}
.ag-itin__via {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  color: #4f46e5;
  font: inherit;
  cursor: pointer;
}
.ag-itin__via svg {
  inline-size: 11px;
  block-size: 11px;
}
.ag-itin__skel {
  display: inline-block;
  inline-size: 84px;
  block-size: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e5e7eb, #f8fafc, #e5e7eb);
  background-size: 200% 100%;
  animation: ag-itin-sk 1.2s linear infinite;
  vertical-align: middle;
}
.ag-itin__skel--wide {
  inline-size: 110px;
}
@keyframes ag-itin-sk {
  to {
    background-position: -200% 0;
  }
}

/* + Add stop row and the inline search */
.ag-itin__addbtn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 7px;
  padding-inline: 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ag-itin-blue);
  font: inherit;
  font-weight: 650;
  font-size: 13.5px;
  min-block-size: 44px;
  cursor: pointer;
}
.ag-itin__addbtn:hover {
  background: #eef4ff;
}
.ag-itin__addbtn[disabled] {
  color: #9aa0a6;
  cursor: not-allowed;
}
.ag-itin__addbtn small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ag-itin-muted);
}
.ag-itin__plus {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  border: 2px dashed #93b4f5;
  display: grid;
  place-items: center;
  color: #2563eb;
  font-weight: 800;
  flex: none;
}
.ag-itin__add,
.ag-itin__search {
  list-style: none;
}
.ag-itin__ac {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 2px #4f46e5, 0 14px 34px rgba(79, 70, 229, 0.22);
  overflow: hidden;
  margin-block: 2px 6px;
}
.ag-itin__acin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
  padding-inline: 10px;
  border-block-end: 1px solid #eef0f5;
}
.ag-itin__acinput {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ag-itin-ink);
  background: transparent;
}
.ag-itin__acclose {
  border: 0;
  background: none;
  font-size: 18px;
  color: #80868b;
  cursor: pointer;
}
.ag-itin__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-block: 8px;
  padding-inline: 10px;
  border-block-end: 1px solid #eef0f5;
}
.ag-itin__cat {
  --c: #4f46e5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 28px;
  padding-inline: 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: #1f2937;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 35%, #fff);
  cursor: pointer;
}
.ag-itin__cat i {
  font-style: normal;
}
/* placesGeocoder.js's own dropdown, re-skinned light inside the card */
.ag-itin__acl .ag-geo-ctl__list {
  position: static;
  margin: 0;
  padding-block: 4px;
  padding-inline: 0;
  list-style: none;
  background: #fff;
  color: var(--ag-itin-ink);
  box-shadow: none;
  border: 0;
}
.ag-itin__acl .ag-geo-ctl__list [role="option"] {
  padding-block: 7px;
  padding-inline: 12px;
  color: var(--ag-itin-ink);
  cursor: pointer;
}
.ag-itin__acl .ag-geo-ctl__list [aria-selected="true"],
.ag-itin__acl .ag-geo-ctl__list [role="option"]:hover {
  background: #eef4ff;
}

/* placesGeocoder.js suggestion subtitle, muted to AA on white */
.ag-itin__acl .ag-sug__s {
  color: #5f6368;
}

/* swap */
.ag-itin__swap {
  position: absolute;
  inset-inline-end: 7px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  border: 1px solid #dadce0;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ag-itin-blue);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}
.ag-itin__swap svg {
  inline-size: 18px;
  block-size: 18px;
}

/* ---- summary strip (routed / live: never hidden) ------------------------ */
.ag-itin__sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  padding-inline: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef2ff, #fdf2f8);
  border: 1px solid #c7d2fe;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.1);
}
.ag-itin__chain {
  display: flex;
  align-items: center;
  flex: none;
}
.ag-itin__chain .ag-itin__pin {
  inline-size: 22px;
  block-size: 22px;
  font-size: 11px;
  box-shadow: 0 0 0 2px #fff;
}
.ag-itin__chain .ag-itin__pin + .ag-itin__pin {
  margin-inline-start: -6px;
}
.ag-itin__sumtx {
  flex: 1;
  min-inline-size: 0;
}
.ag-itin__sumtx b {
  display: block;
  font-size: 13.5px;
  line-height: 1.25;
}
.ag-itin__sumtx small {
  display: block;
  font-size: 12px;
  color: #3c4043;
  font-weight: 600;
}
.ag-itin__ex {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ag-itin-blue);
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding-block: 4px;
  padding-inline: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.ag-itin__ex svg {
  inline-size: 14px;
  block-size: 14px;
}

/* ---- actions row: optimize, fit, clear, avoid, cap meter ---------------- */
.ag-itin__acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding-inline: 2px;
}
.ag-itin__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 30px;
  padding-inline: 12px;
  border-radius: 999px;
  border: 1px solid #dadce0;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: #1f2937;
  white-space: nowrap;
  cursor: pointer;
}
.ag-itin__pill svg {
  inline-size: 15px;
  block-size: 15px;
}
/* The globe shell strips every button's background-image (!important): the
   solid colour under the gradient is what shows there -- without it this was
   white text on the white panel (owner screenshot, 2026-10-11). */
.ag-itin__pill--opt {
  border: 0;
  color: #fff;
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 6px 16px rgba(192, 38, 211, 0.3);
}
.ag-itin__pill--opt em {
  font-style: normal;
  background: rgba(40, 0, 60, 0.28);
  border-radius: 999px;
  padding-inline: 7px;
  font-size: 11px;
}
/* Optimize order is premium (multi_stop_optimize): a locked user still sees
   the free "saves N min" hint, with a lock; pressing it opens the page's gate. */
.ag-itin__pill--locked {
  background-color: #6d28d9;
  background-image: linear-gradient(135deg, #6d28d9, #a21caf);
}
.ag-itin__lock {
  font-size: 12px;
  line-height: 1;
}
.ag-itin__pill--best {
  color: #0b8043;
  border-color: #a7f3d0;
  background: #ecfdf5;
  cursor: default;
}
.ag-itin__pill--danger {
  color: #b91c1c;
  border-color: #fecaca;
}
/* the busy Optimize pill stays focusable (aria-disabled, never disabled) and just reads as working */
.ag-itin__pill[aria-disabled="true"],
.ag-itin__pill[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
.ag-itin__tgl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  block-size: 30px;
  padding-inline: 11px;
  border-radius: 999px;
  border: 1px solid #dadce0;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: #3c4043;
  background: #fff;
  cursor: pointer;
}
.ag-itin__tgl i {
  inline-size: 26px;
  block-size: 15px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  display: inline-block;
}
.ag-itin__tgl i::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start 120ms ease;
}
.ag-itin__tgl--on {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}
.ag-itin__tgl--on i {
  background: #10b981;
}
.ag-itin__tgl--on i::after {
  inset-inline-start: 13px;
}
.ag-itin__cap {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 650;
  color: var(--ag-itin-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ag-itin__capbar {
  display: inline-flex;
  gap: 2px;
}
.ag-itin__capbar i {
  inline-size: 6px;
  block-size: 10px;
  border-radius: 2px;
  background: #e5e7eb;
}
.ag-itin__capbar i.on {
  background: linear-gradient(#6366f1, #4f46e5);
}
.ag-itin__capbar i.warn {
  background: linear-gradient(#f59e0b, #ea580c);
}
.ag-itin__cap--full {
  color: #b45309;
}
.ag-itin__note {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #4f46e5;
}
.ag-itin__est {
  padding-block: 8px;
  padding-inline: 12px;
  border-radius: 12px;
  background: #f5f7ff;
  font-size: 12.5px;
  color: #1e3a8a;
}

/* ---- error card --------------------------------------------------------- */
.ag-itin__err {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-block: 11px;
  padding-inline: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
  border: 1.5px solid #fca5a5;
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.ag-itin__err svg {
  inline-size: 20px;
  block-size: 20px;
  color: #dc2626;
  flex: none;
}
.ag-itin__errtx {
  flex: 1;
  min-inline-size: 0;
}
.ag-itin__erra {
  display: flex;
  gap: 6px;
  margin-block-start: 8px;
}
.ag-itin__erra button {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding-block: 4px;
  padding-inline: 11px;
  background: #fff;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  cursor: pointer;
}
.ag-itin__erra .ag-itin__errp {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  border-color: transparent;
}

/* ---- steps, grouped by leg ---------------------------------------------- */
.ag-itin__stepsbox {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--ag-itin-line);
  padding-block: 8px;
  padding-inline: 12px;
}
.ag-itin__stepsbox summary {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ag-itin-muted);
  cursor: pointer;
}
.ag-itin__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
}
.ag-itin__lh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  margin-block: 8px 4px;
}
.ag-itin__lh .ag-itin__pin {
  inline-size: 20px;
  block-size: 20px;
  font-size: 10.5px;
}
.ag-itin__lh small,
.ag-itin__st small {
  margin-inline-start: auto;
  color: #5f6368;
  font-weight: 600;
  white-space: nowrap;
}
.ag-itin__st {
  display: flex;
  gap: 10px;
  padding-block: 5px;
  padding-inline-start: 28px;
  color: #3c4043;
  border-inline-start: 2px solid #eef0f5;
  margin-inline-start: 9px;
}

/* ---- undo toast + live region ------------------------------------------- */
.ag-itin__toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1f2937;
  color: #fff;
  border-radius: 12px;
  padding-block: 11px;
  padding-inline: 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.ag-itin__undo {
  margin-inline-start: auto;
  border: 0;
  background: none;
  color: #93c5fd;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12.5px;
  cursor: pointer;
}
/* W2b fix wave (T11): the shared indigo ring is 2.33:1 on the dark toast (WCAG 1.4.11 wants 3:1): white here */
.ag-itin__toast .ag-itin__undo:focus-visible {
  outline-color: #fff;
}
.ag-itin__toastbar {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 4px;
  block-size: 2px;
  border-radius: 2px;
  background: #93c5fd;
  transform-origin: left center;
  animation: ag-itin-toast 8s linear forwards;
}
[dir="rtl"] .ag-itin__toastbar {
  transform-origin: right center;
}
@keyframes ag-itin-toast {
  to {
    transform: scaleX(0);
  }
}
.ag-itin__live {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* read-only while navigating */
.ag-itin--readonly .ag-itin__swap,
.ag-itin--readonly .ag-itin__del {
  display: none;
}

/* ---- swipe to remove (touch) -------------------------------------------- */
.ag-itin__del {
  display: none;
}
.ag-itin__item--revealed,
.ag-itin__item:has(.ag-itin__body[style*="translateX"]) {
  /* clip the pulled body at the row's inline edges only; the leg chip above keeps its room */
  clip-path: inset(-40px 0);
}
.ag-itin__item--revealed .ag-itin__body,
.ag-itin__item:has(.ag-itin__body[style*="translateX"]) .ag-itin__body {
  position: relative;
  z-index: 1;
}
/* while a swipe pulls the body, it follows the finger with no easing */
.ag-itin__item:has(.ag-itin__body[style*="translateX"]) .ag-itin__body {
  transition: none;
}
.ag-itin__item--revealed .ag-itin__del,
.ag-itin__item:has(.ag-itin__body[style*="translateX"]) .ag-itin__del {
  display: grid;
  place-items: center;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 86px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 12px;
}
/* a row that carries its leg chip: the red layer starts under the chip, beneath the body only */
.ag-itin__item:has(> .ag-itin__leg) .ag-itin__del {
  inset-block-start: 24px;
}
.ag-itin__del:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ---- map: lettered pins, via dots, ghost handle, menus, badge ----------- */
.ag-itin-legacy-hidden {
  display: none !important;
}
.ag-itin-pin {
  --c: #2563eb;
  inline-size: 30px;
  block-size: 38px;
  cursor: grab;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.35));
}
.ag-itin-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  border: 2.2px solid #fff;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  inset-block-end: 8px;
  inline-size: 26px;
  block-size: 26px;
  margin-inline-start: 2px;
}
.ag-itin-pin__l {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 5px;
  text-align: center;
  color: #fff;
  font: 800 13px/1 -apple-system, Inter, "Segoe UI", sans-serif;
}
.ag-itin-pin--via {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c);
  filter: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}
.ag-itin-pin--via::before {
  content: none;
}
.ag-itin-pin--lift {
  cursor: grabbing;
  translate: 0 -6px;
}
.ag-itin-pin--pulse::after {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  inset-block-start: -6px;
  inline-size: 50px;
  block-size: 50px;
  border-radius: 50%;
  border: 3px solid #ef4444;
  animation: ag-itin-pulse 1.1s ease-out 3;
}
@keyframes ag-itin-pulse {
  from {
    transform: scale(0.5);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}
.ag-itin-handle {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #4f46e5;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.45);
  cursor: grab;
}
.ag-itin-tip {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  background: #111827;
  color: #fff;
  font: 650 12px/1.3 -apple-system, Inter, "Segoe UI", sans-serif;
  border-radius: 10px;
  padding-block: 6px;
  padding-inline: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.ag-itin-tip b,
.ag-itin-tip small {
  display: block;
}
.ag-itin-tip small {
  font-weight: 500;
  color: #cbd5e1;
  font-size: 11px;
}
.ag-itin-ctx {
  position: fixed;
  z-index: 1200;
  min-inline-size: 250px;
  max-inline-size: 300px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  color: #202124;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.06);
  font-family: -apple-system, Inter, "Segoe UI", sans-serif;
  font-size: 13px;
}
.ag-itin-ctx__it {
  display: block;
  inline-size: 100%;
  text-align: start;
  border: 0;
  background: none;
  border-radius: 8px;
  padding-block: 8px;
  padding-inline: 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ag-itin-ctx__it b {
  display: block;
  font-weight: 600;
}
.ag-itin-ctx__it small {
  display: block;
  font-weight: 500;
  color: #5f6368;
  font-size: 11.5px;
}
.ag-itin-ctx__it:hover {
  background: #f1f3f4;
}
.ag-itin-ctx__it:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #4f46e5;
}
.ag-itin-ctx__it--hi {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(79, 70, 229, 0.1));
  color: #1e3a8a;
}
.ag-itin-ctx__it[disabled] {
  color: #9aa0a6;
  cursor: not-allowed;
}
.ag-itin-ctx hr {
  border: 0;
  border-block-start: 1px solid #eee;
  margin-block: 4px;
  margin-inline: 6px;
}
.ag-itin-ctx__coord {
  font-size: 11.5px;
  color: #5f6368;
  padding-block: 4px 6px;
  padding-inline: 10px;
}
.ag-itin-sheet {
  position: fixed;
  z-index: 1200;
  inset-inline: 8px;
  inset-block-end: max(8px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: -apple-system, Inter, "Segoe UI", sans-serif;
}
.ag-itin-sheet__grp {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.ag-itin-sheet .ag-itin-ctx__it {
  font-size: 16px;
  padding-block: 13px;
  padding-inline: 16px;
  border-radius: 0;
  color: #1a56db;
  border-block-end: 1px solid #eee;
}
.ag-itin-sheet hr {
  display: none;
}
.ag-itin-sheet .ag-itin-ctx__coord {
  padding-block: 10px;
  text-align: center;
}
.ag-itin-sheet__cancel {
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #1a56db;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.ag-itin-badge {
  position: absolute;
  z-index: 6;
  inset-inline: 0;
  margin-inline: auto;
  inset-block-start: 14px;
  inline-size: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding-block: 7px;
  padding-inline: 14px;
  font: 700 12.5px/1.2 -apple-system, Inter, "Segoe UI", sans-serif;
  color: #1f2937;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}
.ag-itin-badge__sp {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  border: 2.5px solid #c7d2fe;
  border-block-start-color: #4f46e5;
  animation: ag-itin-spin 0.8s linear infinite;
}
@keyframes ag-itin-spin {
  to {
    rotate: 360deg;
  }
}

/* ---- the Trip Studio panel around it ------------------------------------ */
/* The legacy stop rows ("Stops (optional)", #ag-stops, Add/Clear, the
   Alt-click tips) are replaced by the itinerary. */
#ag-dir .ag-label.bm-g-stops,
#ag-dir #ag-stops,
#ag-dir .ag-row:has(#ag-add-stop),
#ag-dir .ag-subtle.bm-g-stops {
  display: none !important;
}
/* Planning: row A and the destination row ARE the From row and the
   Where-to pill, so those two would only repeat them. */
#ag-dir.bm-trip-on:has(#bm-itin.ag-itin--on:not([hidden])) [data-bm-state="planning"] .bm-fromrow,
#ag-dir.bm-trip-on:has(#bm-itin.ag-itin--on:not([hidden])) [data-bm-state="planning"] #bm-search {
  display: none !important;
}

/* ---- under 720 px: the panel is the bottom sheet ------------------------ */
@media (max-width: 720px) {
  .ag-itin__body {
    min-block-size: 52px;
  }
  .ag-itin__hd,
  .ag-itin__x {
    inline-size: 34px;
    block-size: 34px;
  }
  .ag-itin__hd svg,
  .ag-itin__x svg {
    inline-size: 18px;
    block-size: 18px;
  }
  .ag-itin__via {
    min-block-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-itin__skel,
  .ag-itin-badge__sp,
  .ag-itin__toastbar,
  .ag-itin-pin--pulse::after {
    animation: none;
  }
  .ag-itin__body {
    transition: none;
  }
}