/* The route planner (resources/views/MyRoutes/planner.htm), on the map page's layout (map.css).
   Colours only from the tokens; the route line's colours are in public/js/v2/planner.js. */

.planner { grid-template-rows: 1fr; }
.planner .mapx-panel { grid-row: 1; }
.planner .mapx-map { grid-row: 1; }
.planner-scroll { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; overscroll-behavior: contain; }
.planner-head { display: flex; gap: 10px; align-items: flex-start; }
.planner-head .h3 { margin: 4px 0 0; }
.planner-head p { margin: 2px 0 0; }
.planner-back { flex-shrink: 0; }

.planner-search { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.planner-search .search-field { width: 100%; height: 46px; background: var(--c-surface-2); border-color: transparent; }
.planner-results {
  position: absolute; top: 50px; left: 0; right: 0; z-index: 5; margin: 0; padding: 6px; list-style: none;
  background: var(--c-surface); border: 1px solid var(--c-outline); border-radius: var(--r-m); box-shadow: var(--shadow-1);
  max-height: 320px; overflow-y: auto;
}
.planner-results button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 10px; text-align: left; color: var(--c-text); cursor: pointer; }
.planner-results button:hover, .planner-results button:focus-visible, .planner-results button[aria-selected="true"] { background: var(--c-primary-container); }
.planner-results small { display: block; color: var(--c-text-2); }
.planner-results .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kind, var(--c-primary)); flex-shrink: 0; }

.planner-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.planner-point { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-outline); }
.planner-point:last-child { border-bottom: 0; }
.planner-badge {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: var(--c-surface); color: var(--c-accent); border: 2.5px solid var(--c-accent);
}
.planner-point.is-start .planner-badge { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.planner-point.is-end .planner-badge { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.planner-point b { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.planner-point small { display: block; color: var(--c-text-2); font-size: 12.5px; }
.planner-point .planner-acts { display: flex; gap: 2px; }
.planner-point .icon-btn { width: 32px; height: 32px; }
.planner-leg { border: 0; background: none; padding: 0; color: var(--c-text-2); font-size: 12.5px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.planner-leg.is-straight { color: var(--c-accent); }
.planner-hint { margin: 0; }
.planner-tools { flex-wrap: wrap; gap: 4px; }
.planner-busy { display: flex; align-items: center; gap: 10px; margin: 0; }
.planner-busy .mapx-spinner { width: 18px; height: 18px; border-width: 3px; }

.planner-result { display: flex; flex-direction: column; gap: 12px; }
.planner-variants { flex-wrap: wrap; }
.planner-variants .chip[aria-checked="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.planner-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.planner-stats div { background: var(--c-surface-2); border-radius: var(--r-m); padding: 10px; min-width: 0; }
.planner-stats dt { font-size: 12px; color: var(--c-text-2); }
.planner-stats dd { margin: 2px 0 0; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.planner-result > .muted.small { margin: -4px 0 0; }
.planner-profile { margin: 0; }
.planner-profile svg { display: block; width: 100%; height: 110px; }
.planner-profile .area { fill: color-mix(in srgb, var(--c-accent) 18%, transparent); }
.planner-profile .line { fill: none; stroke: var(--c-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.planner-profile .grid { stroke: var(--c-outline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.planner-profile text { fill: var(--c-text-2); font-size: 11px; }
.planner-along { display: flex; flex-wrap: wrap; gap: 6px; }
.planner-along:empty { display: none; }
.planner-along .chip { cursor: default; }
.planner-steps summary { cursor: pointer; font-weight: 700; }
.planner-steps ol { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.planner-steps li small { color: var(--c-text-2); }
.planner-ad { margin: 4px 0; }

/* the points on the map */
.planner-marker {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--font, system-ui, sans-serif);
  background: #fff; color: var(--c-accent); border: 3px solid var(--c-accent); box-shadow: 0 2px 6px rgb(0 0 0 / .35); cursor: grab;
}
.planner-marker.is-start { background: var(--c-primary); border-color: #fff; color: #fff; }
.planner-marker.is-end { background: var(--c-accent); border-color: #fff; color: #fff; }

@media (max-width: 860px) {
  .planner .mapx-panel { --sheet-h: 42dvh; height: var(--sheet-h); }
  .planner .mapx-panel.is-open { --sheet-h: 82dvh; }
  .planner-scroll { padding: 0 16px 16px; }
  .planner .mapx-tools-br { bottom: calc(42dvh + 16px); }
  .planner .mapx-tools-br .mapx-zoom { display: flex; }
}

/* "Мої маршрути" (resources/views/MyRoutes/list.htm) */
.myrx { display: flex; flex-direction: column; gap: 16px; }
.myrx-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.myrx-head .h2 { margin: 0; display: flex; gap: 10px; align-items: center; }
.myrx-head .btn { margin-left: auto; }
.myrx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.myrx-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.myrx-title { color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; margin: 0; }
.myrx-title:hover { color: var(--c-primary); }
.myrx-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.myrx-meta span { display: inline-flex; gap: 6px; align-items: center; }
.myrx-note { margin: 0; }
.myrx-actions { flex-wrap: wrap; gap: 6px; margin-top: auto; }
.myrx-actions form { margin: 0; }

/* the planner's save box */
.planner-save { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--c-outline); padding-top: 14px; }
.planner-save .field { margin: 0; }
.planner-share { display: flex; gap: 6px; align-items: center; }
.planner-share .input { flex: 1; min-width: 0; font-size: 13px; }
.myrx-adrow { grid-column: 1 / -1; }