/* "Keep to lower ground" (templates/plan/journey.php: the switch under the route type, and its part of the Route tab; public/assets/js/plan.js, plan/lowground.js). Sent with the page, after
   plan-days.css (whose .plan-linkbtn the comparison button is); the embed has none of it. The site's own tokens (--ink, --ink-soft, --pine, --line, --paper-2, --card), never the lighter
   --muted; sides written as start and end (a right-to-left page mirrors it); a finger's size on a phone; tests/plan-lowground-test.js holds all of that.
   The switch is a button with role="switch": its state is aria-checked, a track that moves AND turns pine, and its words (never colour alone). */

.plan.next .plan-lowground { margin: 0 0 8px; }
.plan.next .plan-lowground[hidden] { display: none; }
.plan.next .plan-lg-switch { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 2px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; text-align: start; cursor: pointer; }
.plan.next .plan-lg-switch:hover:not(:disabled) .plan-lg-track { filter: brightness(1.1); }
.plan.next .plan-lg-switch:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan.next .plan-lg-switch:disabled { cursor: default; color: var(--ink-soft); }
.plan.next .plan-lg-switch:disabled .plan-lg-track { opacity: .55; }
.plan.next .plan-lg-track { position: relative; flex: none; width: 28px; height: 16px; border-radius: 999px; background: #767a70; }
.plan.next .plan-lg-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s ease; }
.plan.next .plan-lg-switch[aria-checked="true"] .plan-lg-track { background: var(--pine); }
.plan.next .plan-lg-switch[aria-checked="true"] .plan-lg-track::after { inset-inline-start: 14px; }
/* the line under it: what it does, or why it is off (the track is 28px and the gap 8px: the line starts under the words) */
.plan.next .plan-lg-note { margin: 0; padding-inline-start: 38px; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.plan.next .plan-lg-note:empty { display: none; }

/* the Route tab's part: what became of it, what it does not do, a press to compare */
.plan.next .plan-lg-info { display: grid; gap: 6px; justify-items: start; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.plan.next .plan-lg-info[hidden] { display: none; }
.plan.next .plan-lg-info [hidden] { display: none; }
.plan.next .plan-lg-status { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan.next .plan-lg-status:empty { display: none; }
.plan.next .plan-lg-caveat { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.plan.next .plan-lg-effect { margin: 0; padding-block-start: 6px; border-block-start: 1px solid var(--line); inline-size: 100%; box-sizing: border-box; font-size: .88rem; line-height: 1.4; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan.next .plan-lg-compare { justify-self: start; }

/* the small tag in the folded journey line (templates/plan/shell.php): shown while lower ground is on, so that its state is never out of sight */
.plan.next .plan-journey-tag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--pine); color: #fff; font-weight: 600; line-height: 1.4; }
.plan.next .plan-journey-tag[hidden] { display: none; }

@media (max-width: 860px) {
  .plan.next .plan-lg-switch { min-height: 44px; }
  .plan.next .plan-lg-compare { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan.next .plan-lg-track::after { transition: none; }
}