/**
 * "Waarheen?" planner (phase 1). Loaded ONLY when motarva_setting('search.planner')
 * is on (Motarva_Planner::enqueue). Components are shown first in the brand guide
 * (#planner). Tokens only; selection inverts (--mot-selected-fill/label), orange is
 * the plan CTA alone.
 *
 * Blocks: .mot-planner-from (the Vanaf field, 4 variants), .mot-planner-pop (the
 * Vanaf chooser), .mot-plan-head + .mot-plan-jump + .mot-plan-tier (a plan on
 * Browse, §14.2; the groups as numbered panels since 2026-10-04) and
 * the plan's list heads on Explore (.mot-plan-listhead). The plan chip and the
 * start radius pill are the shared .mot-filter-pill / .mot-state-chip. Since
 * 2026-10-02 there is no separate result page (§14.3).
 */

/* ── Vanaf field ─────────────────────────────────────────────────────────── */
.mot-planner-from-host { position: relative; display: flex; align-items: center; min-width: 0; }
.mot-planner-from-host--compact { flex: none; height: 100%; }
.mot-planner-from-host--row,
.mot-planner-from-host--hero { width: 100%; }
.mot-planner-from {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-2, .5rem);
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--mot-text, #1c1c1c);
	text-align: left;
	cursor: pointer;
}
.mot-planner-from:focus-visible {
	outline: 2px solid var(--mot-text, #1c1c1c);
	outline-offset: 2px;
	border-radius: var(--mot-radius-sm, 8px);
}
.mot-planner-from__icon { flex: none; width: 16px; height: 16px; color: var(--mot-text-muted, #6a6a6a); }
.mot-planner-from__text { display: flex; flex-direction: column; min-width: 0; }
.mot-planner-from__label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mot-text, #1c1c1c);
}
.mot-planner-from__value {
	font-size: .875rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--mot-text, #1c1c1c);
}
.mot-planner-from__value--empty { color: var(--mot-text-muted, #6a6a6a); font-weight: 400; }
.mot-planner-from__clear {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: auto;
	border: 0;
	border-radius: var(--mot-radius-pill, 9999px);
	background: none;
	color: var(--mot-text-muted, #6a6a6a);
	cursor: pointer;
}
/* [hidden] must win over display:inline-grid above (tester: the X showed on an empty field). */
.mot-planner-from__clear[hidden] { display: none; }
.mot-planner-from__clear:hover { background: var(--mot-bg-raised, #f2f2f2); color: var(--mot-text, #1c1c1c); }

/* Hero: a third slideout field (Vanaf · Waarheen? · Bochtigheid). */
.mot-hero-search.mot-planner-on .mot-search-slideout__fields { grid-template-columns: 1.2fr 1.5fr 1fr; }
.mot-search-slideout__field--from { flex-direction: row; align-items: center; }
@media (max-width: 768px) {
	.mot-hero-search.mot-planner-on .mot-search-slideout__fields { grid-template-columns: 1fr; }
}

/* Header: a compact segment inside the pill, before "Waarheen?". */
.mot-planner-from--compact {
	flex: none;
	min-width: 120px;
	max-width: 180px;
	height: 100%;
	padding: 0 var(--sp-3, .75rem) 0 36px;
	border-right: 1px solid var(--mot-border, rgba(0,0,0,.07));
}
.mot-planner-from--compact .mot-planner-from__icon { position: absolute; left: 12px; }
.mot-planner-from--compact .mot-planner-from__label { font-size: .62rem; line-height: 1.1; }
.mot-planner-from--compact .mot-planner-from__value { font-size: .8125rem; line-height: 1.2; }
@media (min-width: 1000px) {
	.mot-header__left .mot-searchbar.mot-planner-on { display: flex; align-items: center; max-width: 440px; }   /* 400 + the search button */
}
.mot-searchbar.mot-planner-on > .mot-searchbar__icon { display: none; }
.mot-searchbar.mot-planner-on .mot-searchbar__input { flex: 1 1 auto; min-width: 0; padding-left: var(--sp-3, .75rem); }

/* Phone overlay + the Where dropdown: a full-width row. */
.mot-planner-from--row {
	width: 100%;
	min-height: 48px;
	padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
	border: 1px solid var(--mot-border, rgba(0,0,0,.07));
	border-radius: var(--mot-radius, 12px);
	background: var(--mot-bg-card, #fff);
}
/* The phone search sheet (Ayrton 2026-10-04: "de vanaf plakt tegen de header"
   and "het veld vanaf is ook niet gestyled"): Vanaf is the same field as
   Waarheen under it (.mot-mobile-search__input-wrap): a 48 px pill on the
   raised ground, its icon muted, the same 16 px side gutter and 12 px from the
   sheet head; 8 px between the two fields. The label stays for screen readers
   and is hidden, as Waarheen has none on screen either. */
.mot-planner-from-wrap { padding: 12px var(--sp-4, 1rem) 0; }
.mot-planner-from-wrap + .mot-mobile-search__input-wrap { margin-top: var(--sp-2, .5rem); }
.mot-planner-from-wrap .mot-planner-from--row {
	flex: 1 1 auto;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px;
	background: var(--mot-bg-raised, #f2f2f2);
	border: 1px solid var(--mot-border, rgba(0,0,0,.07));
	border-radius: var(--mot-radius-pill, 9999px);
	transition: border-color .15s;
}
.mot-planner-from-wrap .mot-planner-from--row[aria-expanded="true"] { border-color: var(--mot-text, #1c1c1c); }
.mot-planner-from-wrap .mot-planner-from--row .mot-planner-from__icon { width: 18px; height: 18px; }
.mot-planner-from-wrap .mot-planner-from--row .mot-planner-from__label {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mot-planner-from-wrap .mot-planner-from--row .mot-planner-from__value { font-size: .95rem; }
.mot-planner-from-wrap .mot-planner-from__clear { position: absolute; right: 10px; top: 10px; }
.mot-planner-from-wrap .mot-planner-from--row:has(~ .mot-planner-from__clear:not([hidden])) { padding-right: 46px; }

/* ── Vanaf chooser ───────────────────────────────────────────────────────── */
.mot-planner-pop {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 6px);
	left: 0;
	width: min(360px, calc(100vw - 32px));
	padding: var(--sp-2, .5rem);
	background: var(--mot-bg-card, #fff);
	border: 1px solid var(--mot-border, rgba(0,0,0,.07));
	border-radius: var(--mot-radius-lg, 16px);
	box-shadow: var(--mot-shadow-hover, 0 12px 32px rgba(0,0,0,.12));
	text-transform: none;
	letter-spacing: normal;
}
.mot-planner-pop[hidden] { display: none; }
/* Desktop hero: the card clips its children (overflow: hidden, for the
   rounded corners); while the chooser is open it may hang below the card. */
@media (min-width: 769px) {
	.mot-hero-search.mot-planner-on:has(.mot-planner-pop:not([hidden])) { overflow: visible; }
}
/* Phones: the chooser never leaves its host. In the hero (overflow: hidden,
   WebKit clipped it at the right edge, tester) it opens IN the flow, so the
   hero grows with it; elsewhere it spans the host and scrolls inside itself. */
@media (max-width: 768px) {
	.mot-planner-from-host--hero,
	.mot-planner-from-host--row { flex-wrap: wrap; }
	.mot-planner-from-host--hero .mot-planner-pop,
	.mot-planner-from-host--row .mot-planner-pop { position: static; flex: 1 1 100%; width: auto; margin-top: var(--sp-2, .5rem); box-shadow: none; }
	.mot-planner-pop { max-width: calc(100vw - 32px); max-height: min(60vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
.mot-planner-pop__input,
.mot-search-slideout__field .mot-planner-pop input.mot-planner-pop__input { /* the hero styles every input in a field */
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin-bottom: var(--sp-1, .25rem);
	padding: 0 var(--sp-3, .75rem);
	border: 1px solid var(--mot-border, rgba(0,0,0,.07));
	border-radius: var(--mot-radius, 12px);
	background: var(--mot-bg, #fff);
	color: var(--mot-text, #1c1c1c);
	font: inherit;
	font-size: 16px; /* no iOS zoom */
}
.mot-search-slideout__field .mot-planner-pop input.mot-planner-pop__input { width: 100%; max-width: none; min-width: 0; flex: none; height: 44px; padding: 0 var(--sp-3, .75rem); border: 1px solid var(--mot-border, rgba(0,0,0,.07)); font-size: 16px; }
.mot-planner-pop__input:focus { outline: none; border-color: var(--mot-text, #1c1c1c); }
.mot-planner-pop__row {
	display: flex;
	align-items: center;
	gap: var(--sp-3, .75rem);
	width: 100%;
	padding: var(--sp-2, .5rem);
	border: 0;
	border-radius: var(--mot-radius, 12px);
	background: none;
	color: var(--mot-text, #1c1c1c);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.mot-planner-pop__row:hover,
.mot-planner-pop__row.is-active { background: var(--mot-bg-raised, #f2f2f2); }
.mot-planner-pop__glyph {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--mot-radius-sm, 8px);
	background: var(--mot-bg-raised, #f2f2f2);
	color: var(--mot-text, #1c1c1c);
}
.mot-planner-pop__glyph svg { width: 16px; height: 16px; }
.mot-planner-pop__title { display: block; font-weight: 700; font-size: .875rem; }
.mot-planner-pop__sub { display: block; font-size: .78rem; color: var(--mot-text-muted, #6a6a6a); }
.mot-planner-pop__msg { padding: var(--sp-2, .5rem); font-size: .8125rem; color: var(--mot-text-muted, #6a6a6a); }


/* ── A plan on Browse (scope §14.2): the result header, the tier sections ──
   Browse keeps its layout: the head sits between the filters and the grid,
   the tiers replace the grid while this tab has a start. */
.mot-plan-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2, .5rem) var(--sp-3, .75rem);
	margin: var(--sp-2, .5rem) 0 var(--sp-4, 1rem);
}
.mot-plan-head[hidden] { display: none; }   /* a plan with no routes at the place, until its tiers hold some */
.mot-plan-head__count { margin: 0; font-weight: 700; }
.mot-plan-head__sub { margin: 0; font-size: .875rem; color: var(--mot-text-muted, #6a6a6a); }
.mot-plan-head__plan { margin-left: auto; }
.mot-plan-head__note { flex-basis: 100%; margin: 0; font-size: .875rem; color: var(--mot-text-muted, #6a6a6a); }

.mot-plan-tiers { display: flex; flex-direction: column; gap: var(--sp-6, 1.5rem); }
.mot-plan-tiers[aria-busy="true"] { min-height: 120px; }

/* The three groups, apart (Ayrton 2026-10-04, variant A of
   docs/planner-header-icon-and-sections-scope-2026-10-04.md): each group a
   numbered panel, and a jump bar that stays under the header. The panel is
   the page's own white with an outline (Ayrton 2026-10-05, "W2 · omlijnd":
   no grey fill). Its outline is the card's light grey, --mot-border (Ayrton
   2026-10-05: the outline button's border read too dark, "graag lichtgrijs"),
   at 1.5 px so the panel still carries its own shape on the white page. */
.mot-plan-tier {
	padding: var(--sp-6, 1.5rem);
	border: 1.5px solid var(--mot-border, rgba(0,0,0,.07));
	border-radius: var(--mot-radius-lg, 16px);
	background: var(--mot-bg, #fff);
	scroll-margin-top: calc(var(--mot-header-h, 64px) + 76px);
}
.mot-plan-tier__head {
	margin-bottom: var(--sp-4, 1rem);
	padding-bottom: var(--sp-4, 1rem);
	border-bottom: 1px solid var(--mot-border, rgba(0,0,0,.07));
}
.mot-plan-tier__title {
	display: flex;
	align-items: center;
	gap: var(--sp-3, .75rem);
	margin: 0;
	font-family: var(--mot-font-heading, 'Outfit', sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}
.mot-plan-tier__num,
.mot-plan-jump__num {
	flex: none;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--mot-font, 'Nunito Sans', sans-serif);
	font-weight: 800;
	line-height: 1;
}
.mot-plan-tier__num {
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--mot-text, #1c1c1c);
	font-size: .875rem;
}
.mot-plan-tier__count {
	padding: 2px 9px;
	border-radius: var(--mot-radius-pill, 9999px);
	background: var(--mot-bg-raised, #f2f2f2);
	color: var(--mot-text-muted, #6a6a6a);
	font-family: var(--mot-font, sans-serif);
	font-size: .75rem;
	font-weight: 800;
}
.mot-plan-tier__sub { margin: 4px 0 0 calc(28px + var(--sp-3, .75rem)); font-size: .875rem; color: var(--mot-text-muted, #6a6a6a); }
.mot-plan-tier__empty {
	margin: 0;
	padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
	border-radius: var(--mot-radius, 12px);
	background: var(--mot-bg-raised, #f2f2f2);
	color: var(--mot-text-muted, #6a6a6a);
	font-size: .875rem;
}
.mot-plan-tier .mot-load-more { margin-top: var(--sp-4, 1rem); }

/* The jump bar: bleeds to the page edges like Browse's pill bar (the same
   --mot-archive-pad), sticky under the fixed header. No menus hang from it,
   so the sideways scroll on a phone cannot clip one (main.css, iOS note).
   Layer 40: over the cards' own layers (badges and actions, 2 to 4), under
   the filter bar (50) and every menu (1000+) and the header (1000). */
.mot-plan-jump {
	position: sticky;
	top: var(--mot-header-h-mob, 64px);
	z-index: 40;
	display: flex;
	gap: var(--sp-2, .5rem);
	margin: 0 calc(-1 * var(--mot-archive-pad, 12px)) var(--sp-4, 1rem);
	padding: var(--sp-2, .5rem) var(--mot-archive-pad, 12px);
	background: var(--mot-bg, #fff);
	overflow-x: auto;
	scrollbar-width: none;
}
.mot-plan-jump::-webkit-scrollbar { display: none; }
@media (min-width: 769px) { .mot-plan-jump { top: var(--mot-header-h, 64px); } }
.mot-plan-jump__link {
	flex: 1 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2, .5rem);
	min-height: 44px;
	padding: 0 var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
	border: 1px solid var(--mot-border, rgba(0,0,0,.07));
	border-radius: var(--mot-radius-pill, 9999px);
	background: var(--mot-bg-card, #fff);
	color: var(--mot-text, #1c1c1c);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mot-transition, .15s ease), color var(--mot-transition, .15s ease), border-color var(--mot-transition, .15s ease);
}
.mot-plan-jump__link:hover { border-color: var(--mot-text-muted, #6a6a6a); }
.mot-plan-jump__link:focus-visible { outline: 2px solid var(--mot-text, #1c1c1c); outline-offset: 2px; }
.mot-plan-jump__num { width: 26px; height: 26px; background: var(--mot-bg-raised, #f2f2f2); font-size: .8125rem; }
.mot-plan-jump__count { color: var(--mot-text-muted, #6a6a6a); font-weight: 600; }
.mot-plan-jump__link.is-active {
	background: var(--mot-selected-fill, #1c1c1c);
	color: var(--mot-selected-label, #fff);
	border-color: var(--mot-text, #1c1c1c);
}
.mot-plan-jump__link.is-active .mot-plan-jump__num { background: var(--mot-selected-label, #fff); color: var(--mot-selected-fill, #1c1c1c); }
.mot-plan-jump__link.is-active .mot-plan-jump__count { color: inherit; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .mot-plan-jump__link { transition: none; } }
@media (max-width: 768px) {
	.mot-plan-tier { padding: var(--sp-4, 1rem) var(--sp-3, .75rem); margin-inline: calc(-1 * var(--sp-1, .25rem)); }
	.mot-plan-tier__title { font-size: 1.25rem; }
	.mot-plan-tier__sub { margin-left: 0; }
	.mot-plan-jump__link { flex: 0 0 auto; }
}

/* "Plan the ride there" under an on-the-way card's chips (motarva_route_card_v9 `foot`). */
.mot-card-v9__foot { padding: 0 var(--sp-4, 1rem) var(--sp-3, .75rem); }

/* While the tiers show, the server's ungrouped list and its numbered pages step
   aside (the grid's own `display: grid` would beat the UA's [hidden]). */
.mot-archive[data-plan] #mot-archive-grid[hidden],
.mot-archive[data-plan] .mot-pagination[hidden] { display: none; }

/* The start radius pill ships hidden (it needs a start, which only this tab knows). */
.mot-filter-pill[data-plan-x][hidden] { display: none; }

/* ── A plan on Explore (§14.2): the list's head, the group heads, the start ── */
.mot-plan-listhead,
.mot-plan-listsec { list-style: none; }
.mot-plan-listhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2, .5rem);
	padding: var(--sp-2, .5rem) var(--sp-1, .25rem) var(--sp-1, .25rem);
}
.mot-plan-listsec { padding: var(--sp-4, 1rem) var(--sp-1, .25rem) var(--sp-1, .25rem); }
.mot-plan-listsec__title {
	display: flex;
	align-items: center;
	gap: var(--sp-2, .5rem);
	margin: 0;
	font-family: var(--mot-font-heading, 'Outfit', sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
}
.mot-plan-listsec__sub { margin: 2px 0 0; font-size: .8125rem; color: var(--mot-text-muted, #6a6a6a); }
/* The rider's start (rounded, client-side only): a plain point, not a pin. */
.mot-plan-start { background: none; border: 0; }
.mot-plan-start__dot {
	display: block;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--mot-text, #1c1c1c);
	border: 3px solid var(--mot-bg-card, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

@media (max-width: 640px) {
	.mot-plan-head__plan { margin-left: 0; }
}