/* warm "moto" palette: orange-red brand accent (the logo), sand background by day, graphite at night;
   the route on the map stays blue for contrast */
:root {
  --bg: #f1ece4;
  --panel: #faf7f2;
  --card: #ffffff;
  --text: #1f1b16;
  --muted: #736b60;
  --line: #e7dfd3;
  --accent: #ff9500;
  --accent-2: #ff2d55;
  --accent-soft: #fde6da;
  /* Apple system colours, like the iPhone app */
  --c-blue: #007aff; --c-violet: #af52de; --c-teal: #30b0c7; --c-orange: #ff9500; --c-pink: #ff2d55; --c-red: #ff3b30; --c-green: #34c759; --c-amber: #fab300; --c-indigo: #5856d6; --c-brown: #a2845e; --c-yellow: #fab300;
  --g-brand: linear-gradient(135deg, #ff9500, #ff2d55); --g-route: linear-gradient(135deg, #007aff, #5856d6); --g-go: linear-gradient(135deg, #34c759, #30b0c7); --g-pending: linear-gradient(135deg, #fab300, #ff9500);
  --card-shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 20px rgba(60, 40, 20, .07);
  --route: #33b3ff;
  --start: #1fae5b;
  --end: #e5484d;
  --via: #0a84ff;
  --warn: #ff9f0a;
  --shadow: 0 8px 30px rgba(15, 20, 30, .14);
  --radius: 12px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d0f13;
  --panel: #13161c;
  --card: #1a1e26;
  --text: #f2efe9;
  --muted: #9a9ca6;
  --line: #2a2f3a;
  --accent: #ff9f0a;
  --accent-2: #ff375f;
  --accent-soft: #3a2117;
  --c-blue: #0a84ff; --c-violet: #bf5af2; --c-teal: #40c8e0; --c-orange: #ff9f0a; --c-pink: #ff375f; --c-red: #ff453a; --c-green: #30d158; --c-amber: #ffd60a; --c-indigo: #5e5ce6; --c-brown: #ac8e68; --c-yellow: #ffd60a;
  --g-brand: linear-gradient(135deg, #ff9f0a, #ff375f); --g-route: linear-gradient(135deg, #0a84ff, #5e5ce6); --g-go: linear-gradient(135deg, #30d158, #40c8e0); --g-pending: linear-gradient(135deg, #ffd60a, #ff9f0a);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow: 0 8px 30px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
kbd { font: 11px ui-monospace, Menlo, monospace; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.muted { color: var(--muted); }
.tiny { font-size: 11px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

.app { display: grid; grid-template-columns: clamp(380px, 25vw, 480px) 1fr; height: 100vh; }

/* ---------- Panel ---------- */
.panel {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); z-index: 2;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-text { margin-right: auto; }
.brand h1 { font-size: 17px; margin: 0; letter-spacing: -.01em; }
.brand p { margin: 0; color: var(--muted); font-size: 12px; }
.logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff6a00, #ee0979); font-size: 19px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.card.grow { flex: 1 0 380px; display: flex; flex-direction: column; min-height: 380px; }

.btn { border: 1px solid var(--line); background: var(--panel); padding: 7px 11px; border-radius: 8px; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.ghost { background: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; font-size: 15px; flex: none; padding: 0; line-height: 1; }   /* no browser padding: the icon sits in the middle, small ones don't clip it */
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.small { width: 24px; height: 24px; font-size: 11px; }

/* Waypoints */
.waypoints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wp { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; position: relative; }
.wp.dragging { opacity: .4; }
.wp.drop-before::before { content: ""; position: absolute; left: 26px; right: 0; top: -3px; height: 2px; background: var(--accent); }
.wp .dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--via); background: var(--panel); cursor: grab; justify-self: center; }
.wp.start .dot { border-color: var(--start); }
.wp.end .dot { border-color: var(--end); background: var(--end); }
.wp.fuel .dot { border-color: var(--warn); }
.wp .field { position: relative; }
.wp input[type=text] { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); outline: none; }
.wp input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wp .acts { display: flex; gap: 2px; }
.wp .acts button { border: 0; background: none; color: var(--muted); padding: 3px 5px; border-radius: 6px; visibility: hidden; font-size: 12px; }
.wp:hover .acts button, .wp .acts button.on { visibility: visible; }
.wp .acts button:hover { background: var(--line); color: var(--text); }
.wp .acts button.on { color: var(--warn); }
.wp.shape .dot { width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 2px; transform: rotate(45deg); }
.wp.shape .label { color: var(--muted); font-size: 12px; padding: 2px 9px; cursor: pointer; }
.wp.shape .label:hover { color: var(--text); }
.wp-group { color: var(--muted); font-size: 12px; padding: 1px 0 1px 26px; cursor: pointer; user-select: none; list-style: none; }
.wp-group:hover { color: var(--text); }

.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 300px; overflow: auto; }
.suggest li { padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.suggest li small { display: block; color: var(--muted); font-size: 12px; }
.suggest li.active, .suggest li:hover { background: var(--accent-soft); }

.wp-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.wp-actions .btn { padding: 6px 9px; }
.depart { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.depart input[type=datetime-local] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.check { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.depart .check { grid-column: 1 / -1; color: var(--text); }

/* Moto options */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.modes button { border: 0; background: none; padding: 6px 0 5px; border-radius: 7px; font-size: 12px; line-height: 1.2; }
.modes button span { display: block; font-size: 16px; }
.modes button.active { background: var(--accent); color: #fff; }
.mode-hint { margin: 6px 2px 10px; font-size: 12px; color: var(--muted); min-height: 16px; }
.offroad-row { align-items: flex-start; gap: 12px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.offroad-row input[type=range] { width: 100%; accent-color: #c08a4a; margin: 4px 0 0; }
.offroad-row.off .grow { opacity: .45; }
.switch { position: relative; width: 44px; height: 26px; flex: none; margin-top: 2px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider-ui { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s; cursor: pointer; }
.slider-ui::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .slider-ui { background: #c08a4a; }
.switch input:checked + .slider-ui::before { transform: translateX(18px); }
.switch input:focus-visible + .slider-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.avoid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.chip input:checked + span { border-color: var(--end); background: color-mix(in srgb, var(--end) 18%, var(--panel)); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.tank { margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.tank input[type=number] { width: 70px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.tank input[type=number]:disabled { opacity: .45; }

/* Summary */
.alts { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.alts button { flex: 1; min-width: 100px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 6px 9px; font-size: 12px; color: var(--muted); }
.alts button b { display: block; color: var(--text); font-size: 14px; }
.alts button .tag { color: var(--warn); }
.alts button.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
.stats .k { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.stats .v { font-size: 18px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.fuel-warn { margin-top: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px;
  background: color-mix(in srgb, var(--warn) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); }
.fuel-warn button { margin: 4px 4px 0 0; padding: 3px 8px; font-size: 12px; }
.legs { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.legs div { display: flex; justify-content: space-between; gap: 8px; }
.legs span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.row-actions .btn { padding: 7px 2px; font-size: 13px; }

/* Tabs */
/* five tabs must fit the narrowest panel (380 px); if not, the bar scrolls instead of hiding a tab */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: -4px -4px 8px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; border: 0; background: none; padding: 6px 3px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13px; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 9px; background: var(--line); font-size: 11px; text-align: center; }
.tab-body { overflow: auto; flex: 1; min-height: 0; }
.empty { color: var(--muted); padding: 12px 8px; margin: 0; font-size: 13px; }
.empty p { margin: 0; }
.empty ul { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 4px; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px; border-radius: 8px; cursor: pointer; }
.steps li:hover { background: var(--accent-soft); }
.steps .ico { font-size: 16px; text-align: center; }
.steps .d { color: var(--muted); font-size: 12px; white-space: nowrap; }
.steps li.leg-head { cursor: default; font-weight: 600; padding-top: 12px; grid-template-columns: 26px 1fr; }
.steps li.leg-head:hover { background: none; }

.poi-list, .saved { list-style: none; margin: 0; padding: 0; }
.poi-list li, .saved li { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; }
.poi-list li:hover, .saved li:hover { background: var(--accent-soft); }
.poi-list .ico { font-size: 18px; width: 24px; text-align: center; }
.poi-list .meta, .saved .meta { flex: 1; cursor: pointer; min-width: 0; }
.poi-list .meta b, .saved .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poi-list .meta small, .saved .meta small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poi-list .km { color: var(--muted); font-size: 12px; white-space: nowrap; }
.poi-list button, .saved button { border: 0; background: none; color: var(--muted); }

/* ---------- Map ---------- */
.map-wrap { position: relative; overflow: hidden; }
#map { position: absolute; inset: 0; }
#map.tool-shape .maplibregl-canvas, #map.tool-poi .maplibregl-canvas { cursor: crosshair; }
#map.grab-route .maplibregl-canvas { cursor: grab; }
#map.dragging-route .maplibregl-canvas { cursor: grabbing; }

/* wraps instead of sliding under the zoom buttons in a narrow window; --tb-bottom (set from app.js) keeps
   the hint and the float panels just below it */
.toolbar { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; max-width: calc(100% - 76px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.toolbar .tool { width: 38px; height: 36px; border: 0; background: none; border-radius: 8px; font-size: 17px; }
.toolbar .tool:hover { background: var(--card); }
.toolbar .tool.active { background: var(--accent); color: #fff; }
.toolbar .sep { width: 1px; background: var(--line); margin: 4px 2px; }
.tool-hint { position: absolute; top: var(--tb-bottom, 62px); left: 12px; max-width: calc(100% - 76px); z-index: 3; background: var(--accent); color: #fff;
  padding: 6px 12px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); }
.drag-tip { position: fixed; z-index: 30; pointer-events: none; background: rgba(0,0,0,.78); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 12px; }
/* right side: the left column belongs to the toolbar and the float panels */
.legend { position: absolute; right: 12px; bottom: 40px; z-index: 3; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); display: grid; gap: 3px; }
.legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.map-wrap.with-elev .legend { bottom: 196px; }
.map-wrap.with-elev .float-panel { max-height: calc(100% - var(--tb-bottom, 62px) - 180px); }
.map-wrap.with-elev .maplibregl-ctrl-bottom-left, .map-wrap.with-elev .maplibregl-ctrl-bottom-right { bottom: 160px; }

.elev { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 150px; z-index: 3;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px 10px 4px; }
.elev-head { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.elev-head .icon-btn { margin-left: auto; }
.elev-chart { position: relative; height: 112px; }
.elev-chart svg { display: block; width: 100%; height: 100%; }
.elev-chart text { fill: var(--muted); font-size: 10px; }
.elev-chart .grid { stroke: var(--line); stroke-width: 1; }
.elev-chart .cursor { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; }
.elev-chart .dot { fill: #fff; stroke: var(--route); stroke-width: 2; }
.elev-tip { position: absolute; top: 0; background: var(--text); color: var(--panel); font-size: 11px; padding: 2px 6px; border-radius: 5px; pointer-events: none; white-space: nowrap; }

.loading, .toast { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow); font-size: 13px; }
.loading { top: 14px; }
.toast { bottom: 28px; }
.map-wrap.with-elev .toast { bottom: 180px; }

/* Markers */
.marker-wrap { width: 28px; height: 38px; cursor: grab; }
.marker { width: 28px; height: 28px; margin-top: 1px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--via); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); display: grid; place-items: center; }
.marker span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 12px; }
.marker.start { background: var(--start); }
.marker.end { background: var(--end); }
.marker.fuel { background: var(--warn); }
.shape-pt { width: 14px; height: 14px; background: #fff; border: 3px solid #0b0d10; border-radius: 3px; transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: grab; }
.shape-pt:hover { background: var(--route); }
/* round markers like the phone (Apple Maps style): gradient disc, gloss, white ring, soft shadow, white symbol */
.poi-pin, .fuel-alert { cursor: pointer; }
.mkr { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mk) 82%, #fff), color-mix(in srgb, var(--mk) 85%, #000));
  box-shadow: 0 0 0 2.5px #fff, 0 1.5px 3px 2.5px rgba(0, 0, 0, .35); transition: transform .12s; }
.mkr::after { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 17px 17px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); }
.mkr svg { stroke-width: 2.6; position: relative; z-index: 1; }
.mkr b { font: 800 16px/1 -apple-system, BlinkMacSystemFont, sans-serif; position: relative; z-index: 1; }
.poi-pin:hover .mkr { transform: scale(1.1); }
.poi-pin.mark .mkr { width: 28px; height: 28px; }
.poi-pin.mark .mkr svg { width: 14px; height: 14px; }
.fuel-alert { border-radius: 50%; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } }
.station-pin { width: 26px; height: 26px; border-radius: 50%; background: #1fae5b; display: grid; place-items: center; font-size: 13px;
  border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* Popups */
.maplibregl-popup-content { background: var(--panel); color: var(--text); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--panel); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--panel); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--panel); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--panel); }
.maplibregl-popup-close-button { color: var(--muted); font-size: 18px; padding: 0 6px; }
.poi-form { width: 280px; display: grid; gap: 8px; }
.poi-types { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.poi-types button { border: 1px solid var(--line); background: var(--card); border-radius: 7px; font-size: 16px; padding: 3px 0; }
.poi-types button.active { border-color: var(--accent); background: var(--accent-soft); }
.poi-form .type-label { font-size: 12px; color: var(--muted); }
.poi-form input, .poi-form textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.poi-form textarea { resize: vertical; min-height: 54px; }
.poi-form .row { flex-wrap: wrap; gap: 5px; }
.poi-form .row .btn { padding: 5px 8px; font-size: 12px; }
.pop-title { font-weight: 600; margin-bottom: 6px; padding-right: 16px; }
.pop-list { display: grid; gap: 4px; max-height: 220px; overflow: auto; min-width: 220px; }
.pop-list button { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 7px; padding: 5px 8px; font-size: 12px; }
.pop-list button:hover { border-color: var(--accent); }

/* Context menu */
.ctx { position: fixed; z-index: 50; min-width: 230px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.ctx button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; }
.ctx button:hover { background: var(--accent-soft); }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); padding: 20px; max-width: 480px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 12px; font-size: 17px; }
/* buttons stay visible when a long dialog (help, ride import) scrolls in a low window */
dialog menu { position: sticky; bottom: -20px; padding: 10px 0 0; margin: 16px 0 0; display: flex; justify-content: flex-end; gap: 8px; background: var(--panel); }
dialog input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
#qr { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: 12px; margin: 10px 0; }

@media (min-width: 2200px) { body { font-size: 15px; } .stats .v { font-size: 22px; } }
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); height: auto; }   /* minmax: a long label never makes the page wider than the phone */
  .panel { overflow: visible; border-right: 0; }
  .map-wrap { height: 65vh; order: -1; }
}

/* ---------- Ride plan, weather, roads ---------- */
.alerts { display: grid; gap: 4px; margin-top: 10px; }
.alerts:empty { display: none; }
.alert { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 5px 8px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.alert:hover { border-color: var(--accent); }
.alert.l2 { border-color: color-mix(in srgb, var(--end) 60%, transparent); background: color-mix(in srgb, var(--end) 12%, var(--panel)); }
.alert .i { font-size: 15px; line-height: 1.1; }
.ride-opts { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--muted); padding: 2px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.ride-opts input { width: 54px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
h3.sec { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 2px 6px; }
.day { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel); }
.day-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.day-head span { color: var(--muted); font-weight: 400; font-size: 12px; }
.day ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.day li { display: grid; grid-template-columns: 22px 44px 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.day li:hover { background: var(--accent-soft); }
.day li .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.day li .km { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.day li .btn { padding: 2px 7px; font-size: 11.5px; }
.wx-strip { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.wx { flex: 1 0 44px; text-align: center; font-size: 11px; padding: 4px 2px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.wx:hover { border-color: var(--accent); }
.wx .e { font-size: 17px; display: block; }
.wx .tp { font-weight: 650; font-size: 12px; }
.wx .rn { color: #3d9bff; }
.wx.wet { background: color-mix(in srgb, #3d9bff 16%, var(--panel)); }
.wx .km { color: var(--muted); display: block; }
.wx-note { font-size: 12px; color: var(--muted); margin: 6px 2px 0; }
.bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 4px 0 6px; background: var(--line); }
.bar i { display: block; height: 100%; }
.bar-legend { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; font-size: 12px; margin-bottom: 10px; }
.bar-legend span:nth-child(odd) i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.bar-legend span:nth-child(even) { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ride-pin { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--panel);
  border: 2px solid var(--muted); box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer; }
.ride-pin.night { width: 28px; height: 28px; border-color: #b26bff; font-size: 15px; }
.wx-pin { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); cursor: pointer; }
.lodge-pin { width: 26px; height: 26px; border-radius: 50%; background: #b26bff; display: grid; place-items: center; font-size: 13px; border: 2px solid #fff; cursor: pointer; }

/* Loop generator */
.float-panel { position: absolute; top: var(--tb-bottom, 62px); left: 12px; z-index: 4; width: min(340px, calc(100% - 76px)); max-height: calc(100% - var(--tb-bottom, 62px) - 28px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; }
.fp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.loop-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin: 8px 0; font-size: 12.5px; }
.loop-form label { display: grid; gap: 2px; color: var(--muted); }
.loop-form select { padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.loop-form .btn { align-self: end; }
.loop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.loop-list li { border: 2px solid var(--line); border-radius: 10px; padding: 7px 9px; cursor: pointer; display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.loop-list li:hover, .loop-list li.hot { border-color: var(--accent); }
.loop-list .sw { width: 14px; height: 14px; border-radius: 4px; }
.loop-list b { display: block; }
.loop-list small { color: var(--muted); }
.loop-list .btn { padding: 4px 9px; font-size: 12px; }
#map.tool-avoid .maplibregl-canvas { cursor: crosshair; }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.help-grid kbd { justify-self: start; }
.ride-opts input[type=time] { width: 84px; }

/* ---------- Ridden trips ---------- */
.row.wrap { flex-wrap: wrap; }
.rides-summary { font-size: 12.5px; color: var(--muted); margin: 0 2px 6px; }
.rides-summary b { color: var(--text); }
.rides { list-style: none; margin: 6px 0 0; padding: 0; }
.rides li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 7px 6px; border-radius: 8px; }
.rides li:hover, .rides li.hot { background: var(--accent-soft); }
.rides li.off { opacity: .5; }
.rides .sw { width: 12px; height: 12px; border-radius: 50%; background: #ff4fd8; }
.rides .meta { cursor: pointer; min-width: 0; }
.rides .meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rides .meta small { color: var(--muted); display: block; }
.rides .acts { display: flex; gap: 2px; }
.rides .acts button { border: 0; background: none; color: var(--muted); padding: 3px 5px; border-radius: 6px; }
.rides .acts button:hover { background: var(--line); color: var(--text); }
.novelty-line { margin-top: 8px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.novelty-line .bar { flex: 1; margin: 0; height: 8px; }
.loop-new { grid-column: 1 / -1; color: var(--text) !important; display: flex !important; }
.ride-pop { min-width: 240px; }
.ride-pop small { color: var(--muted); display: block; margin-bottom: 8px; }
.ride-pop .row { flex-wrap: wrap; gap: 5px; }
.ride-pop .btn { padding: 5px 8px; font-size: 12px; }
#map.tool-pick .maplibregl-canvas { cursor: crosshair; }

/* ---------- Itinerary ---------- */
.itin-head { display: grid; gap: 6px; margin-bottom: 10px; }
.itin-head input, .itin-head textarea, .stop-form input, .stop-form textarea, .day-notes textarea, .day-title {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.itin-title { font-size: 15px; font-weight: 650; }
.itin-head textarea, .day-notes textarea, .stop-form textarea { resize: vertical; min-height: 40px; }
.itin-total { font-size: 12.5px; color: var(--muted); }
.itin-total b { color: var(--text); }
.day-title { font-weight: 600; margin: 4px 0 2px; border-color: transparent; background: transparent; padding: 3px 4px; }
.day-title:hover, .day-title:focus { border-color: var(--line); background: var(--panel); }
.day li.has-form { grid-template-columns: 22px 66px 1fr auto; }
.day li .t2 { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.day li .xp { border: 0; background: none; color: var(--muted); padding: 3px 6px; font-size: 13px; min-width: 24px; min-height: 24px; }
.day li .sub { grid-column: 3 / -1; color: var(--muted); font-size: 11.5px; white-space: pre-line; }
.stop-form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; padding: 8px; margin: 2px 0 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; cursor: default; }
.stop-form label { display: grid; gap: 2px; color: var(--muted); }
.stop-form .full { grid-column: 1 / -1; }
.stop-form h4 { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; }
.day-notes { margin-top: 6px; }
.day-notes summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.day-cost { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.day-cost b { color: var(--text); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.checklist li:hover { background: var(--accent-soft); }
.checklist li.done span { color: var(--muted); text-decoration: line-through; }
.checklist li span { flex: 1; }
.checklist li button { border: 0; background: none; color: var(--muted); visibility: hidden; }
.checklist li:hover button { visibility: visible; }
.checklist .add input { flex: 1; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.modes.vehicles { grid-template-columns: repeat(2, 1fr); margin-bottom: 6px; }
.modes.vehicles button { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; padding: 5px 0; }
.modes.vehicles button span { display: inline; font-size: 15px; }
.routing-src { display: block; width: 100%; margin-top: 10px; text-align: left; border: 0; background: none; padding: 2px; font-size: 11.5px; color: var(--muted); }
.routing-src.local { color: var(--start); }

/* long unbroken notes / URLs must not push the panel wider */
.day li .nm, .day li .sub, .poi-list .meta, .alert span, .stop-form, .itin-total { overflow-wrap: anywhere; }
.poi-pin.mark { width: 26px; height: 26px; font-size: 14px; border-color: #ff4fd8; }
.routing { margin-top: 10px; display: grid; gap: 4px; font-size: 12.5px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.seg button { border: 0; background: none; padding: 5px 0; border-radius: 6px; font-size: 12px; }
.seg button.active { background: var(--accent); color: #fff; }
.seg button:disabled { opacity: .5; }
.routing .routing-src { margin-top: 0; }
dialog code { background: var(--card); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* instant tooltips for icon buttons */
.tip { position: fixed; z-index: 100; max-width: 260px; padding: 5px 9px; border-radius: 7px; font-size: 12px; line-height: 1.35;
  background: var(--text); color: var(--panel); box-shadow: var(--shadow); pointer-events: none; white-space: normal; }

/* ---------- Base map picker ---------- */
.basemap-panel { width: min(318px, calc(100% - 76px)); }
.basemap-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.basemap { display: grid; gap: 2px; padding: 5px; border: 2px solid transparent; border-radius: 10px; background: var(--card); text-align: left; color: var(--text); cursor: pointer; }
.basemap:hover { border-color: var(--line); }
.basemap.active { border-color: var(--accent); }
.basemap img { width: 100%; height: auto; aspect-ratio: 132 / 84; object-fit: cover; border-radius: 6px; background: var(--line); display: block; margin-bottom: 3px; }
.basemap b { font-size: 13px; }
.basemap span { font-size: 11px; color: var(--muted); line-height: 1.25; }

/* ---------- Sync button ---------- */
#syncBtn.off { opacity: .45; filter: grayscale(1); }
#syncBtn.err { box-shadow: inset 0 0 0 2px var(--end); }
#syncBtn.busy { animation: syncPulse 1s ease-in-out infinite; }
@keyframes syncPulse { 50% { opacity: .4; } }

/* ---------- Moto roads (moto card) ---------- */
.moto-roads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 4px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.lvl-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.lvl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lvl button { display: grid; justify-items: center; gap: 3px; padding: 7px 2px 6px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--muted); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.lvl button:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--text); }
.lvl button svg { width: 100%; max-width: 52px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lvl button span { font-size: 11px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.lvl button.off svg { opacity: .5; }
.lvl button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--card)); color: var(--accent); }
.lvl button.active span { color: var(--text); font-weight: 600; }
.moto-go { display: grid; gap: 1px; margin-top: 6px; padding: 8px 10px; text-align: center; white-space: normal; }
.moto-go small { font-size: 11px; opacity: .85; font-weight: 400; }
.moto-score { display: grid; gap: 4px; font-size: 12.5px; }
.moto-score:empty { display: none; }
.moto-score .ms-line { display: flex; align-items: baseline; gap: 5px; }
.moto-score .ms-line span { margin-left: auto; }
.moto-score .ms-line span { color: #0a9e45; font-weight: 700; }
.moto-score .bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.moto-score .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5fd17f, #0a9e45); }
.moto-score small { color: var(--muted); font-size: 11.5px; }
.moto-overlay { font-size: 12.5px; }


/* =====================================================================
   Look – colours, header, cards, modes, stats (overrides the plain base above)
   ===================================================================== */
.panel { background: var(--bg); border-right: 0; gap: 12px; }
:root[data-theme="dark"] .panel { background: linear-gradient(180deg, #14171e, var(--bg) 320px); }

/* header: brand strip */
.brand { padding: 10px 10px 10px 12px; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, #ff6a00 0%, #ee0979 100%); box-shadow: 0 6px 22px rgba(238, 9, 121, .25); }
.brand h1 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.brand p { color: rgba(255, 255, 255, .85); }
.brand .logo { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.brand .icon-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.brand .icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .3); }
.brand .icon-btn:disabled { opacity: .45; }

/* cards */
.card { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px; box-shadow: var(--card-shadow); padding: 14px; }
.card-title { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.card-title i { font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--tc, var(--accent)) 16%, transparent); }

/* buttons */
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 10px; transition: background .12s, border-color .12s, transform .06s; }
.btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.ghost { background: color-mix(in srgb, var(--muted) 7%, transparent); border-color: transparent; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #000), var(--accent)); border-color: transparent; }
.icon-btn { border-radius: 10px; background: var(--card); }

/* inputs */
.wp input[type=text], .depart input[type=datetime-local], .tank input[type=number] { background: var(--panel); border-color: var(--line); border-radius: 10px; }
.wp input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* vehicle + mode tiles: every mode has its own colour */
.modes { gap: 6px; padding: 0; background: none; border: 0; }
.modes button { border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 2px 7px; font-weight: 600; color: var(--muted);
  transition: border-color .12s, background .12s, color .12s; }
.modes button span { font-size: 18px; margin-bottom: 2px; }
.modes button:hover { border-color: color-mix(in srgb, var(--mc, var(--accent)) 55%, var(--line)); color: var(--text); }
.modes button.active { border-color: var(--mc, var(--accent)); color: var(--text);
  background: color-mix(in srgb, var(--mc, var(--accent)) 14%, var(--card)); box-shadow: 0 2px 10px color-mix(in srgb, var(--mc, var(--accent)) 22%, transparent); }
.modes [data-mode="fast"] { --mc: var(--c-yellow); }
.modes [data-mode="balanced"] { --mc: var(--c-blue); }
.modes [data-mode="curvy"] { --mc: var(--c-violet); }
.modes [data-mode="short"] { --mc: var(--c-green); }
.modes [data-vehicle="moto"] { --mc: var(--accent); }
.modes [data-vehicle="car"] { --mc: var(--c-blue); }
.vehicles { margin-bottom: 8px; }
.vehicles button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.vehicles button span { display: inline; font-size: 17px; margin: 0; }

/* panels inside the moto card */
.moto-roads, .offroad-row { background: var(--panel); border-color: color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; }
.chip span { background: var(--panel); padding: 5px 11px; transition: border-color .12s, background .12s; }
.chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.seg { background: var(--panel); border-radius: 11px; }
.seg button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

/* summary: coloured stat tiles */
.stats { gap: 6px; }
.stats > div { --sc: var(--c-blue); padding: 7px 8px 7px 10px; border-radius: 12px; min-width: 0;
  background: color-mix(in srgb, var(--sc) 9%, var(--card)); box-shadow: inset 3px 0 0 var(--sc); }
.stats > div:nth-child(2) { --sc: var(--c-violet); }
.stats > div:nth-child(3) { --sc: var(--c-teal); }
.stats > div:nth-child(4) { --sc: var(--c-orange); }
.stats > div:nth-child(5) { --sc: var(--c-green); }
.stats > div:nth-child(6) { --sc: var(--c-brown); }
.stats .k { color: color-mix(in srgb, var(--sc) 70%, var(--text)); font-weight: 600; }
.stats .v small { font-size: .62em; font-weight: 600; color: var(--muted); }
.stats .v { display: block; font-size: clamp(15px, 0.9vw + 7px, 19px); font-weight: 750; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.alts button { border-radius: 12px; background: var(--panel); }
.alts button.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.row-actions .btn { font-weight: 600; }
.row-actions #phoneBtn { grid-column: 1 / -1; padding: 9px; font-size: 14px; }  /* the main way out: to the phone */

/* tabs as a pill bar */
.tabs { gap: 3px; padding: 3px; margin: -2px -2px 10px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.tabs button { border: 0; border-radius: 9px; padding: 6px 3px; font-weight: 600; }
.tabs button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tabs button.active .badge { background: var(--accent); color: #fff; }
.steps li:hover, .poi-list li:hover, .saved li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* map chrome */
.toolbar { border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.toolbar .tool { border-radius: 10px; }
.toolbar .tool.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.tool-hint { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.float-panel, .legend, #elevPanel { border-radius: 16px; box-shadow: var(--card-shadow); }
.lvl button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); }

/* =====================================================================
   Icons + iPhone-app look (Theme.swift): gradient icon squares, brand / route / pending gradients
   ===================================================================== */
svg.ico { flex: none; vertical-align: -3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn svg.ico { width: 16px; height: 16px; }
.icon-btn svg.ico { width: 17px; height: 17px; }
.brand .logo { color: #fff; }
.brand .logo svg.ico { width: 22px; height: 22px; vertical-align: 0; }
/* section headers like the phone's SettingsIcon: white symbol on a coloured gradient square */
.card-title { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 750; color: var(--text); }
.card-title .sq { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--c-orange)) 82%, #fff), var(--tc, var(--c-orange)));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tc, var(--c-orange)) 35%, transparent); }
.card-title .sq svg.ico { width: 16px; height: 16px; vertical-align: 0; stroke-width: 2.4; }
.card.moto .card-title { --tc: var(--c-orange); }
/* big gradient actions like the phone's BigButton */
.btn.primary { background: var(--g-brand); }
.btn.primary:hover:not(:disabled) { background: var(--g-brand); filter: brightness(1.06) saturate(1.05); }
.moto-go { background: var(--g-route) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-violet) 35%, transparent) !important; }
.fuel-go { background: var(--g-pending) !important; color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-amber) 35%, transparent); }
/* mode and vehicle tiles with icons */
.modes button span { display: grid; place-items: center; height: 22px; color: var(--mc, var(--accent)); }
.modes button.active span { color: var(--mc, var(--accent)); }
.vehicles button span { display: inline-grid; height: auto; }
/* toolbar icons */
.toolbar .tool { display: grid; place-items: center; color: var(--text); }
.toolbar .tool svg.ico { width: 19px; height: 19px; }
.toolbar .tool.active { color: #fff; background: var(--g-brand); }
/* summary stats: small icon in the label, like the phone's StatPill */
.stats .k { display: flex; align-items: center; gap: 4px; }
.stats .k svg.ico { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2.4; }
.tank .fuel-go { margin-left: auto; padding: 6px 10px; font-size: 12.5px; }
.tank .fuel-ico { color: var(--c-orange); }
.wp-actions { flex-wrap: nowrap; }
.wp-actions .btn { padding: 6px 8px; font-size: 12.5px; gap: 4px; }
.wp-actions #clearBtn { margin-left: auto; }
.wp .acts button.fuel-btn.on { color: var(--c-orange); }
.steps li > :nth-child(2) { overflow-wrap: anywhere; }
.stats .k { overflow: hidden; }
.stats .k > span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Fuel log ---------- */
.fuel-log { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c-amber) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c-amber) 25%, var(--line)); }
.fuel-log h3.sec { margin: 2px 0; display: flex; align-items: center; gap: 5px; color: var(--c-orange); }
.fuel-log .fuel-go { padding: 5px 9px; font-size: 12px; }
.fuel-stats { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); }
.fuel-list li .ico { color: var(--c-orange); width: 20px; display: grid; place-items: center; }
.fuel-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.fuel-form label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.fuel-form label.wide { grid-column: 1 / -1; }
.fuel-form input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); width: 100%; }
#mapsQr { display: grid; place-items: center; padding: 8px; background: #fff; border-radius: 12px; width: max-content; margin: 4px auto 6px; }
.maps-qr p { text-align: center; margin: 0 0 6px; }
#syncQr { display: grid; place-items: center; padding: 8px; background: #fff; border-radius: 12px; width: max-content; margin: 4px auto 8px; }
.btn.moto-go { display: grid; justify-items: center; }
.card-title .title-btn { margin-left: auto; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--muted); }
.card-title .title-btn:hover { color: var(--text); }

/* ---------- Pairing celebration ---------- */
.paired { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10, 12, 18, .45); backdrop-filter: blur(4px);
  animation: pairedFade .25s ease-out; cursor: pointer; }
.paired.out { animation: pairedFade .5s ease-in reverse forwards; }
.paired-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 34px 24px; border-radius: 24px; background: var(--card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); text-align: center; max-width: min(360px, calc(100vw - 32px)); animation: pairedPop .45s cubic-bezier(.2, 1.4, .4, 1); }
.paired-card b { font-size: 22px; font-weight: 800; background: linear-gradient(135deg, #21c45e, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paired-card span { color: var(--muted); font-size: 13.5px; }
.paired-check { width: 108px; height: 108px; }
.paired-check .ring { fill: none; stroke: url(#pg); stroke-width: 7; stroke-dasharray: 327; stroke-dashoffset: 327; transform: rotate(-90deg); transform-origin: 60px 60px;
  animation: pairedDraw .6s .1s ease-out forwards; }
.paired-check .tick { fill: none; stroke: url(#pg); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: pairedDraw .35s .62s ease-out forwards; }
.paired-burst { position: absolute; left: 50%; top: 82px; width: 0; height: 0; }
.paired-burst i { position: absolute; width: 9px; height: 14px; border-radius: 3px; background: var(--c); opacity: 0;
  animation: pairedBurst var(--t) .7s cubic-bezier(.1, .8, .3, 1) forwards; }
@keyframes pairedFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pairedPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pairedDraw { to { stroke-dashoffset: 0; } }
@keyframes pairedBurst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) {
  .paired, .paired-card, .paired-check .ring, .paired-check .tick, .paired-burst i { animation-duration: .01s !important; animation-delay: 0s !important; }
}
dialog code { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- Tap feedback ---------- */
.btn, .icon-btn, .toolbar .tool, .modes button, .lvl button, .tabs button, .seg button, .basemap, .alts button { position: relative; overflow: hidden; isolation: isolate;
  transition: transform .14s cubic-bezier(.2, .9, .3, 1.3), background .12s, border-color .12s, color .12s, box-shadow .12s, filter .12s; }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .toolbar .tool:active, .modes button:active, .lvl button:active, .tabs button:active,
.seg button:active, .basemap:active, .alts button:active { transform: scale(.94); transition-duration: .06s; }
.btn.primary:active:not(:disabled), .fuel-go:active, .moto-go:active { filter: brightness(.95); }
.ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0);
  animation: ripple .5s ease-out forwards; }
.btn.primary .ripple, .toolbar .tool.active .ripple, .fuel-go .ripple, .moto-go .ripple { background: #fff; opacity: .35; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .toolbar .tool:active, .modes button:active, .lvl button:active, .tabs button:active, .seg button:active { transform: none; }
}

/* ---------- AI route ---------- */
.card-title .ai-btn { margin-left: auto; color: #fff; background: linear-gradient(135deg, var(--c-violet), var(--c-pink)); border-color: transparent;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c-violet) 35%, transparent); }
.card-title .ai-btn:hover { color: #fff; filter: brightness(1.06); background: linear-gradient(135deg, var(--c-violet), var(--c-pink)); }
.card-title .imp-btn { margin-left: 0; }
.card-title .ai-btn .ripple { background: #fff; opacity: .35; }
dialog textarea#aiText { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); resize: vertical; font: inherit; }
dialog textarea#aiText:focus { outline: none; border-color: var(--c-violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violet) 20%, transparent); }
.ai-examples { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.ai-ex { border: 0; border-radius: 999px; padding: 6px 11px; font-size: 12.5px; text-align: left; color: var(--text);
  background: color-mix(in srgb, var(--c-violet) 12%, transparent); }
.ai-ex:hover { background: color-mix(in srgb, var(--c-violet) 22%, transparent); }
.linkish { border: 0; background: none; color: var(--c-violet); font-weight: 600; padding: 0 0 0 6px; display: inline-flex; align-items: center; gap: 3px; }
dialog input#aiKeyIn { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }

/* AI planning in progress */
.ai-wait { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(10, 12, 18, .35); backdrop-filter: blur(3px); animation: pairedFade .2s ease-out; }
.ai-wait-card { display: grid; justify-items: center; gap: 6px; padding: 26px 30px 20px; border-radius: 22px; background: var(--card); box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  text-align: center; max-width: min(380px, calc(100vw - 32px)); animation: pairedPop .35s cubic-bezier(.2, 1.4, .4, 1); }
.ai-wait-card b { font-size: 18px; }
.ai-wait-card .btn { margin-top: 8px; }
.ai-orb { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 6px;
  background: conic-gradient(from 0deg, var(--c-violet), var(--c-pink), var(--c-orange), var(--c-violet)); animation: aiSpin 2.2s linear infinite;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-violet) 15%, transparent), 0 8px 24px color-mix(in srgb, var(--c-pink) 35%, transparent); }
.ai-orb svg { animation: aiSpin 2.2s linear infinite reverse; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-orb, .ai-orb svg { animation: none; } }
.ai-steer { font-size: 12.5px; margin-top: 8px; }
ul.ai-roads { margin: 2px 0 8px; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; }
p.ai-roads { margin: 8px 0 0; }
.suggest li { display: flex; align-items: center; gap: 10px; }
.suggest li .sg-main { flex: 1; min-width: 0; }
.suggest li .sg-dist { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Liquid Glass (the shared look of the hub and its apps, iOS 26 style): translucent blurred panels with a light
   rim, pill controls, raised segmented pills. Functionality unchanged; the brand stays orange to pink like the phone.
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .78); --glass-rim: rgba(255, 255, 255, .7);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 10px 30px rgba(30, 30, 60, .14);
  --glass-blur: saturate(170%) blur(22px);
  --pill-track: rgba(118, 118, 128, .14); --pill-on: #ffffff; --pill-on-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 3px 8px rgba(0, 0, 0, .1);
}
:root[data-theme="dark"] {
  --glass: rgba(22, 30, 48, .55); --glass-strong: rgba(28, 36, 56, .74); --glass-rim: rgba(255, 255, 255, .09);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 34px rgba(0, 0, 0, .45);
  --pill-track: rgba(118, 118, 128, .24); --pill-on: rgba(255, 255, 255, .16); --pill-on-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* a soft coloured ground behind the side panel, so its glass cards have something to blur */
.panel { background:
  radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--c-orange) 18%, transparent), transparent 70%),
  radial-gradient(70% 45% at 100% 35%, color-mix(in srgb, var(--c-pink) 12%, transparent), transparent 70%),
  radial-gradient(70% 50% at 10% 85%, color-mix(in srgb, var(--c-blue) 12%, transparent), transparent 70%), var(--bg); }
:root[data-theme="dark"] .panel { background:
  radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 70%),
  radial-gradient(70% 45% at 100% 35%, color-mix(in srgb, var(--c-indigo) 16%, transparent), transparent 70%),
  radial-gradient(70% 50% at 10% 85%, color-mix(in srgb, var(--c-teal) 10%, transparent), transparent 70%), var(--bg); }

/* glass surfaces – in the panel and over the map */
.card, .toolbar, .float-panel, .legend, .elev, dialog, .toast, .loading, .suggest, .maplibregl-popup-content,
.maplibregl-ctrl-group, .ai-wait-card, .paired-card {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim); box-shadow: var(--glass-shadow);
}
.card { border-radius: 20px; }
.toolbar, .legend { border-radius: 18px; }
.float-panel, .elev, dialog { border-radius: 20px; }
dialog, .suggest, .ai-wait-card, .paired-card { background: var(--glass-strong); }
/* the sticky footer fades the list scrolling under it instead of letting the buttons sit on top of rows */
dialog menu { background: none; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); padding-top: 18px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px); mask-image: linear-gradient(to bottom, transparent, #000 14px); }
.maplibregl-popup-content { border-radius: 16px; }
.maplibregl-popup-tip { opacity: .7; }
.maplibregl-ctrl-group { border-radius: 14px; overflow: hidden; }
.maplibregl-ctrl-group button + button { border-top-color: var(--glass-rim); }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.toast, .loading { border-radius: 999px; }
.moto-roads, .offroad-row, .fuel-log { background: color-mix(in srgb, var(--glass) 70%, transparent); border-color: var(--glass-rim); border-radius: 16px; }

/* pill controls */
.btn { border-radius: 999px; }
.btn.ghost:not(.ai-btn):not(.today-btn) { background: var(--pill-track); }
.icon-btn { border-radius: 50%; }
.chip span { border-radius: 999px; }
.wp input[type=text], .depart input[type=datetime-local], .tank input[type=number], dialog input[type=text], dialog input[type=password] { border-radius: 12px; }
/* segmented controls: a pill track with a raised pill for the choice */
.seg, .tabs { background: var(--pill-track); border: 0; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button, .tabs button { border-radius: 999px; transition: background .18s, box-shadow .18s, color .18s; }
.seg button.active, .tabs button.active { background: var(--pill-on); color: var(--text); box-shadow: var(--pill-on-shadow); }
.tabs button.active .badge { background: var(--accent); color: #fff; }
/* tiles (modes, levels, base maps) keep their colour, just rounder and glassy */
.modes button, .lvl button, .basemap { border-radius: 16px; background: color-mix(in srgb, var(--glass) 80%, transparent); }
.modes button.active, .lvl button.active { box-shadow: var(--pill-on-shadow), 0 0 0 1px var(--mc, var(--accent)); }
.toolbar .tool { border-radius: 12px; }

@media (prefers-reduced-transparency: reduce) {
  .card, .toolbar, .float-panel, .legend, .elev, dialog, .toast, .loading, .suggest, .maplibregl-popup-content, .maplibregl-ctrl-group {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card);
  }
}

/* =====================================================================
   Colourful menu (hub request): every item has its own small gradient square with a white line icon, like iOS
   Settings and Mainhub; the active item is a glass pill with a soft shadow; small uppercase section headings.
   ===================================================================== */
:root { --sq-hi: rgba(255, 255, 255, .9); --c-gray: #8e8e93; --c-cyan: #32ade6; }
:root[data-theme="dark"] { --sq-hi: rgba(255, 255, 255, .1); --c-gray: #98989d; --c-cyan: #64d2ff; }
/* light glass that is really visible: stronger blobs behind it and a highlight on the top edge */
:root:not([data-theme="dark"]) .panel { background:
  radial-gradient(60% 38% at 0% 0%, color-mix(in srgb, var(--c-orange) 30%, transparent), transparent 70%),
  radial-gradient(70% 40% at 100% 30%, color-mix(in srgb, var(--c-pink) 22%, transparent), transparent 70%),
  radial-gradient(70% 45% at 0% 70%, color-mix(in srgb, var(--c-blue) 18%, transparent), transparent 70%),
  radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--c-violet) 16%, transparent), transparent 70%), #f2f2f7; }
.card, .toolbar, .float-panel, .legend, .elev, dialog, .suggest, .maplibregl-ctrl-group { box-shadow: inset 0 1px 0 var(--sq-hi), var(--glass-shadow); }

/* the shared square */
.card-title .sq, .toolbar .tool svg.ico, .tabs button svg.ico {
  --tc0: var(--tc, var(--c-orange));
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc0) 72%, #fff), var(--tc0) 70%);
  color: #fff; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px color-mix(in srgb, var(--tc0) 40%, transparent);
}
.card-title .sq.brand, .toolbar [data-tool="pan"] svg.ico { background: var(--g-brand); }

/* section headings: small, uppercase, the square in front */
.card-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); gap: 9px; }
.card-title .sq { width: 24px; height: 24px; }
.card-title .sq svg.ico { width: 14px; height: 14px; stroke-width: 2.4; }

/* map toolbar: a coloured square per tool, the active tool sits on a raised glass pill */
.toolbar .tool { width: 38px; height: 38px; color: #fff; border-radius: 12px; transition: background .18s, box-shadow .18s; }
.toolbar .tool svg.ico { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; stroke-width: 2.2; transition: transform .18s; }
.toolbar .tool:hover { background: var(--pill-track); }
.toolbar .tool:hover svg.ico { transform: scale(1.06); }
.toolbar .tool.active, .toolbar .tool.active:hover { background: var(--pill-on); color: #fff; box-shadow: var(--pill-on-shadow), inset 0 0 0 1px var(--glass-rim); }
.toolbar .tool.active svg.ico { transform: scale(1.08); }
.toolbar .tool.active .ripple { background: var(--accent); opacity: .25; }
.toolbar [data-tool="shape"] { --tc: var(--c-blue); }
.toolbar [data-tool="poi"] { --tc: var(--c-pink); }
.toolbar [data-tool="avoid"] { --tc: var(--c-red); }
#curvesBtn { --tc: var(--c-violet); }
#surfaceBtn { --tc: var(--c-brown); }
#motoBtn { --tc: var(--c-green); }
#trafficBtn { --tc: var(--c-amber); }
#noveltyBtn { --tc: var(--c-yellow); }
#noveltyBtn svg.ico { --tc0: #ffcc00; }
#elevBtn { --tc: var(--c-teal); }
#fitBtn { --tc: var(--c-cyan); }
#styleBtn { --tc: var(--c-indigo); }
#loopBtn { --tc: var(--c-orange); }
#printBtn { --tc: var(--c-gray); }
#helpBtn { --tc: var(--c-blue); }

/* sidebar tabs: square above the label, the active tab is the glass pill */
.tabs { border-radius: 16px; padding: 4px; gap: 2px; }
.tabs button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tabs button svg.ico { width: 24px; height: 24px; padding: 5px; box-sizing: border-box; stroke-width: 2.3; opacity: .82; transition: opacity .18s, transform .18s; }
.tabs button.active svg.ico { opacity: 1; transform: scale(1.06); }
.tabs button.active { color: var(--text); box-shadow: var(--pill-on-shadow), inset 0 0 0 1px var(--glass-rim); }
.tabs button .badge { position: absolute; top: 2px; left: calc(50% + 7px); margin: 0; z-index: 1; }
.tabs [data-tab="steps"] { --tc: var(--c-blue); }
.tabs [data-tab="ride"] { --tc: var(--c-teal); }
.tabs [data-tab="pois"] { --tc: var(--c-pink); }
.tabs [data-tab="rides"] { --tc: var(--c-orange); }
.tabs [data-tab="saved"] { --tc: var(--c-yellow); }

/* nicer tile icons: vehicles and modes on their own gradient squares, levels as little road and ridge pictures */
.modes button .tile-sq { width: 32px; height: 32px; margin: 0 auto 4px; border-radius: 9px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mc, var(--accent)) 70%, #fff), var(--mc, var(--accent)) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px color-mix(in srgb, var(--mc, var(--accent)) 35%, transparent);
  filter: saturate(.55) brightness(1.04); opacity: .8; transition: filter .18s, opacity .18s, transform .18s; }
.modes button.active .tile-sq, .modes button.active span.tile-sq { color: #fff; filter: none; opacity: 1; transform: scale(1.06); }
.modes button:hover .tile-sq { filter: none; opacity: 1; }
.modes button .tile-sq svg.ico { stroke-width: 2.3; }
.modes [data-vehicle="moto"] .tile-sq { background: var(--g-brand); }
.modes [data-mode="fast"] .tile-sq { background: linear-gradient(145deg, #ffd60a, #ff9500); }
.vehicles button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vehicles button .tile-sq { width: 26px; height: 26px; margin: 0; border-radius: 7px; }
.vehicles button .tile-sq svg.ico { width: 16px; height: 16px; }

.lvl { --lc: var(--c-violet); }
#motoHills { --lc: var(--c-green); }
.lvl button { color: var(--muted); }
.lvl button svg { height: 24px; overflow: visible; }
.lvl button svg .road { stroke-width: 6.5; stroke: color-mix(in srgb, currentColor 55%, transparent); }
.lvl button svg .mid { stroke-width: 1.3; stroke: #fff; stroke-dasharray: 3 3.4; }
.lvl button svg .ridge { stroke: none; fill: color-mix(in srgb, currentColor 22%, transparent); }
.lvl button.active, .lvl button:hover { color: var(--lc); }
.lvl button.active { border-color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, var(--glass)); box-shadow: var(--pill-on-shadow), 0 0 0 1px var(--lc); }
.lvl button.active svg .road { stroke: var(--lc); }
.lvl button.active svg .ridge { fill: color-mix(in srgb, var(--lc) 30%, transparent); }

/* avoid chips with a small coloured square */
.chip span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; }
.chip span svg.ico { width: 20px; height: 20px; padding: 3.5px; box-sizing: border-box; border-radius: 6px; color: #fff; stroke-width: 2.3;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc, var(--accent)) 70%, #fff), var(--tc, var(--accent)) 72%); }
.chip input:checked + span { border-color: var(--tc, var(--accent)); background: color-mix(in srgb, var(--tc, var(--accent)) 14%, var(--glass)); }
.seg button svg.ico { vertical-align: -3px; }
.moto-go span svg.ico { vertical-align: -3px; }

/* quick map type on the map: one glass pill like the phone (Mapa · Letecká · Terén · more) */
.maplibregl-ctrl.map-type { display: flex; gap: 2px; padding: 4px; border-radius: 999px; margin: 0 10px 10px 0;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--sq-hi), var(--glass-shadow); }
.map-type button { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 11px 4px 4px; border-radius: 999px;
  font: 600 12.5px/1 inherit; font-family: inherit; color: var(--muted); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.map-type button.more { padding: 4px; }
.map-type button svg.ico { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; color: #fff; stroke-width: 2.3;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc) 72%); filter: saturate(.5); opacity: .8; transition: filter .18s, opacity .18s; }
.map-type button:hover { color: var(--text); }
.map-type button:hover svg.ico, .map-type button.active svg.ico { filter: none; opacity: 1; }
.map-type button.active { background: var(--pill-on); color: var(--text); box-shadow: var(--pill-on-shadow), inset 0 0 0 1px var(--glass-rim); }
@media (max-width: 560px) { .map-type button span { display: none; } .map-type button { padding: 4px; } }
.map-type .mt-sep { width: 1px; margin: 6px 2px; background: var(--glass-rim); }
:root:not([data-theme="dark"]) .map-type .mt-sep { background: rgba(60, 60, 67, .18); }
.alert.act { align-items: center; }
.alert.act > span:nth-child(2) { flex: 1; }
.alert.act .btn { flex: none; padding: 3px 10px; font-size: 12px; font-weight: 600; color: #fff; background: var(--g-route); border: 0; }

/* sync dialog: devices with write access */
.sync-devices ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.sync-devices li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 12px; background: var(--pill-track); }
.sync-devices .dv-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--g-route); flex: none; }
.sync-devices .dv-name { flex: 1; display: grid; font-size: 13px; }
.sync-devices .dv-name small { color: var(--muted); font-size: 11.5px; }
.sync-devices .dv-name small.me { display: inline; color: var(--c-green); font-weight: 600; }
.sync-devices .check { font-size: 12.5px; line-height: 1.35; }

/* avoid options: four coloured switches in a 2×2 grid, the label as a section heading */
.avoid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; }
.avoid .lvl-label { grid-column: 1 / -1; margin: 0; }
.avoid .chip span { width: 100%; box-sizing: border-box; padding: 4px 10px 4px 4px; }

/* share bar: to the phone first, then save / GPX / link / online as tiles */
.row-actions { grid-template-columns: repeat(4, 1fr); margin: 12px 0 4px; }
.row-actions #phoneBtn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; text-align: left; }
.row-actions #phoneBtn .sq { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.row-actions #phoneBtn .lbl { display: grid; line-height: 1.2; }
.row-actions #phoneBtn .lbl small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.row-actions .btn.tile { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; border-radius: 16px; font-size: 12px; font-weight: 600; background: var(--pill-track); }
.row-actions .btn.tile .sq { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc) 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.row-actions .btn.tile .sq svg.ico, .row-actions #phoneBtn .sq svg.ico { width: 16px; height: 16px; vertical-align: 0; }
#shareTool { --tc: var(--c-green); }
@keyframes flash-bar { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } }
.row-actions.flash { animation: flash-bar 1.2s ease; border-radius: 18px; }

/* emoji replaced by line icons (js/emoji.js) and small coloured option icons */
svg.ico.emo { width: 1.15em; height: 1.15em; vertical-align: -0.2em; stroke-width: 2.2; flex: none; }
.emo-dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--ec); vertical-align: 0.05em; flex: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ec) 25%, transparent); }
svg.ico.ro { vertical-align: -3px; }
svg.ico.c-brown { color: var(--c-brown); } svg.ico.c-red { color: var(--c-red); } svg.ico.c-indigo { color: var(--c-indigo); }
svg.ico.c-orange { color: var(--c-orange); } svg.ico.c-blue { color: var(--c-blue); }
.wx-pin, .ride-pin { font-size: inherit; filter: none; background: none; border: 0; }
.fp-head b svg.ico, .pop-title svg.ico { vertical-align: -3px; }
.ride-pin, .ride-pin.night { width: auto; height: auto; box-shadow: none; }

/* touch screens: controls that appear on hover are always there, with finger-sized hit areas */
.wp:focus-within .acts button, .checklist li:focus-within button { visibility: visible; }
@media (hover: none) {
  .wp .acts button, .checklist li button { visibility: visible; }
  .wp .acts button, .checklist li button, .rides .acts button, .icon-btn.small { min-width: 34px; min-height: 34px; }
}

/* my roads: taste tiles with a coloured square */
.taste-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.lvl.taste button { gap: 4px; }
.lvl.taste .tq { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tq) 70%, #fff), var(--tq) 72%); opacity: .75; filter: saturate(.6); transition: opacity .18s, filter .18s; }
.lvl.taste button.active .tq, .lvl.taste button:hover .tq { opacity: 1; filter: none; }
.lvl.taste [data-t="any"] { --tq: var(--c-gray); }
.lvl.taste [data-t="fav"] { --tq: var(--c-yellow); --lc: var(--c-orange); }
.lvl.taste [data-t="new"] { --tq: var(--c-violet); --lc: var(--c-violet); }
.lvl.taste [data-t="mix"] { --tq: var(--c-teal); --lc: var(--c-teal); }
.lvl.taste button.active { border-color: var(--lc, var(--accent)); background: color-mix(in srgb, var(--lc, var(--accent)) 12%, var(--glass)); box-shadow: var(--pill-on-shadow), 0 0 0 1px var(--lc, var(--accent)); }

/* "Kam dnes?" */
.card-title .today-btn { margin-left: auto; color: #fff; background: var(--g-go); border-color: transparent; }
.card-title .today-btn:hover { color: #fff; filter: brightness(1.06); background: var(--g-go); }
.card-title .today-btn .ripple { background: #fff; opacity: .35; }
.card-title .today-btn + .ai-btn { margin-left: 0; }
.today-hours, .today-start { margin: 4px 0 10px; }
.today-start button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-list small b.pick { color: var(--c-green); font-weight: 700; }

/* route card actions: their own row, three equal pills with centred text */
.card-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: -2px 0 12px; }
.card-acts .act { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 8px; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: filter .15s, transform .08s, box-shadow .15s; }
.card-acts .act svg.ico { width: 16px; height: 16px; flex: none; vertical-align: 0; }
.card-acts .act:hover { filter: brightness(1.06); }
.card-acts .act:active { transform: scale(.97); }
.card-acts .act.today { color: #fff; background: var(--g-go); box-shadow: 0 3px 10px color-mix(in srgb, var(--c-green) 30%, transparent); }
.card-acts .act.ai { color: #fff; background: linear-gradient(135deg, var(--c-violet), var(--c-pink)); box-shadow: 0 3px 10px color-mix(in srgb, var(--c-violet) 30%, transparent); }
.card-acts .act.imp { color: var(--text); background: var(--pill-track); }
.card-acts .act.today .ripple, .card-acts .act.ai .ripple { background: #fff; opacity: .35; }


/* close buttons: a soft grey circle with the cross, like iOS sheets */
.fp-head .icon-btn.small, .elev-head .icon-btn.small, .icon-btn.small[title="Zavřít"] {
  width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; padding: 0;
  background: var(--pill-track); color: var(--muted); box-shadow: none; }
.fp-head .icon-btn.small:hover, .elev-head .icon-btn.small:hover { background: color-mix(in srgb, var(--muted) 28%, transparent); color: var(--text); }
.fp-head .icon-btn.small svg.ico, .elev-head .icon-btn.small svg.ico { width: 14px; height: 14px; stroke-width: 2.6; }
.loop-form #loopGo { grid-column: 1 / -1; width: 100%; }
.card-acts { container-type: inline-size; }
@container (max-width: 340px) {
  .card-acts .act { font-size: 12.5px; gap: 4px; padding: 0 4px; }
  .card-acts .act svg.ico { width: 14px; height: 14px; }
}
@container (max-width: 270px) { .card-acts .act svg.ico { display: none; } }

/* summary tiles in a narrow panel: smaller type instead of cut-off labels and values */
.stats { container-type: inline-size; }
.stats > div { overflow: hidden; }
@container (max-width: 360px) {
  .stats > div { padding: 6px 6px 6px 8px; }
  .stats .k { font-size: 9.5px; letter-spacing: .01em; gap: 3px; }
  .stats .k svg.ico { width: 11px; height: 11px; }
  .stats .v { font-size: 15px; letter-spacing: -.03em; }
  .stats .v small { font-size: 10px; }
}
@container (max-width: 300px) { .stats .k svg.ico { display: none; } .stats .v { font-size: 14px; } }
.elev-chart .summit text { font-size: 11px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }

/* season */
.season-years { margin-bottom: 10px; }
.season-stats { margin-bottom: 4px; }
.season-chart { width: 100%; height: auto; display: block; }
.season-chart text { font-size: 9px; fill: var(--muted); }
.season-chart text.v { font-size: 8.5px; font-weight: 700; fill: var(--text); }
.season-fuel { margin: 0 0 4px; font-size: 13px; }
.season-roads { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; }
.season-roads li { cursor: pointer; }
.season-roads li:hover b { color: var(--accent); }
.season-roads small { display: block; color: var(--muted); font-size: 11.5px; }
#stopsBtn { --tc: var(--c-brown); }

/* scrolling menus fade softly at the edges instead of being cut off (shared hub look; only on shadowless scrollers) */
.edge-fade { --ft: 0px; --fb: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
.edge-fade.fade-t { --ft: 18px; }
.edge-fade.fade-b { --fb: 36px; }

/* inside the hub's frame on a computer the hub's round arrow reaches ~14 px into the left edge – keep the cards clear of it */
@media (min-width: 900px) { .in-frame .panel-scroll, .in-frame .panel-foot { padding-left: 24px; } }

/* "Zahodit změny?" in place of the dialog buttons */
.dlg-ask { margin-right: auto; align-self: center; font-weight: 600; font-size: 13px; }
.btn.danger { color: #fff; background: var(--c-red); border-color: transparent; }
.btn.danger:hover { filter: brightness(1.06); background: var(--c-red); }
dialog menu .btn:disabled { opacity: .55; cursor: progress; }

/* collapsible side menu (desktop): « on the map edge, collapsed = a narrow icon rail, the map gets the space */
.rail { display: none; }
.panel-toggle svg.ico { transform: rotate(180deg); transition: transform .2s; }
.panel-collapsed .panel-toggle svg.ico { transform: none; }
@media (min-width: 801px) {
  .panel-collapsed .app { grid-template-columns: 64px 1fr; }
  .panel-collapsed .panel { display: none; }
  .panel-collapsed .rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; overflow-y: auto; z-index: 2;
    background: var(--bg); border-right: 1px solid var(--glass-rim); }
  .in-frame.panel-collapsed .app { grid-template-columns: 78px 1fr; }
  .in-frame.panel-collapsed .rail { padding-left: 14px; }   /* the hub's edge arrow */
}
@media (max-width: 800px) { .panel-toggle { display: none; } }
.rail .panel-toggle { width: 40px; height: 40px; flex: none; }
.rail-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: none; flex: none; }
.rail-btn svg.ico { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 7px; color: #fff; stroke-width: 2.2;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc, var(--c-gray)) 70%, #fff), var(--tc, var(--c-gray)) 72%); }
.rail-btn:hover { background: var(--pill-track); }
.rail-btn.expand svg.ico, .rail-btn.plain svg.ico { background: none; color: var(--muted); width: 22px; height: 22px; padding: 0; }
.rail-btn.expand { background: var(--g-brand); border-radius: 50%; }
.rail-btn.expand svg.ico { color: #fff; }
.rail-sep { width: 28px; height: 1px; background: var(--glass-rim); margin: 2px 0; flex: none; }
:root:not([data-theme="dark"]) .rail-sep { background: rgba(60, 60, 67, .16); }
.rail-grow { flex: 1; }

/* bottom row like the hub: search · look · settings · avatar – below the scrolling part, on the panel's own ground */
.panel { overflow: hidden; padding: 0; gap: 0; }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.panel-foot { flex: none; display: flex; gap: 10px; align-items: center; padding: 8px 14px 14px; }
.foot-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-rim); display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--text); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--sq-hi), 0 2px 8px rgba(0, 0, 0, .08); transition: transform .1s, background .15s; }
.foot-btn:hover { background: var(--pill-on); }
.foot-btn:active { transform: scale(.95); }
.foot-btn svg.ico { width: 19px; height: 19px; }
.foot-btn.avatar, .rail-btn.avatar { margin-left: auto; background: var(--g-brand); color: #fff; border-color: transparent; }
.rail-btn.avatar { margin-left: 0; border-radius: 50%; }
.rail-btn.avatar svg.ico { background: none; }

/* ⌘K search */
.cmdk { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding-top: 12vh; background: rgba(10, 12, 18, .32); }
.cmdk-card { width: min(560px, calc(100% - 32px)); border-radius: 18px; overflow: hidden; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-rim); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--glass-rim); color: var(--muted); }
.cmdk-in input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--text); }
.cmdk-in kbd { font: 11px/1 inherit; padding: 3px 6px; border-radius: 6px; background: var(--pill-track); color: var(--muted); }
.cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.cmdk-list li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 11px; cursor: pointer; }
.cmdk-list li.on, .cmdk-list li:hover { background: var(--pill-track); }
.cmdk-list li.empty { cursor: default; padding: 12px; }
.cmdk-list .ct, .set-list .ct { flex: 1; display: grid; min-width: 0; }
.cmdk-list .ct b, .cmdk-list .ct small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-list small, .set-list small { color: var(--muted); font-size: 11.5px; }
.cmdk-list .cg { font-size: 11px; color: var(--muted); }
.ci { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc) 72%); }

/* settings list with sub-screens */
.set-theme, .set-lang { margin: 4px 0 12px; }
.set-lang { flex-wrap: wrap; }
.set-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.set-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--pill-track); color: var(--text); text-align: left; font: inherit; }
.set-list button:hover { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.set-list button > svg.ico:last-child { color: var(--muted); }
.dlg-back { display: inline-flex; align-items: center; gap: 2px; margin: -4px 0 6px -4px; padding: 4px 8px 4px 4px; border: 0; border-radius: 999px;
  background: none; color: var(--accent); font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }
.dlg-back:hover { background: var(--pill-track); }

@media (max-width: 800px) {
  .panel { overflow: visible; }
  .panel-scroll { overflow: visible; }
  /* phones: the page scrolls, the row stays at the bottom of the screen on a glass strip */
  .panel-foot { position: sticky; bottom: 0; z-index: 3; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-rim); }
}

/* the bottom row reads as a toolbar: a hairline and a faint glass ground instead of a dark gap under the last card */
@media (min-width: 801px) {
  .panel-foot { padding-top: 10px; border-top: 1px solid var(--glass-rim);
    background: color-mix(in srgb, var(--glass) 70%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  :root:not([data-theme="dark"]) .panel-foot { border-top-color: rgba(60, 60, 67, .14); }
  .panel-scroll { padding-bottom: 18px; }
  .panel-scroll.edge-fade.fade-b { --fb: 14px; }
}
/* inside the hub (it sends mainhub:sidebar) the hub's « drives the panel – NaviDesk's own button hides on computers */
/* the collapse button sits in the bottom row, away from the hub's edge arrow – visible inside the hub too */
.panel-foot .foot-btn:last-child { margin-right: auto; }
/* the one collapse button glows on hover, like the hub's « */
#panelToggle { transition: background .15s, color .15s, box-shadow .15s, transform .1s; }
#panelToggle:hover { background: var(--accent); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }

/* contrast in both looks (audit): no white on yellow, deeper greens, a hint of shadow under white text on the
   orange → pink brand, darker accents for small text on the light ground */
.fuel-go, .btn.fuel-go, .tank .fuel-go { color: #3a2600 !important; }
.fuel-go svg.ico { color: #3a2600; }
.fuel-go .ripple { background: #3a2600 !important; opacity: .2 !important; }
.card-acts .act.today { background: linear-gradient(135deg, #24a148, #128a8f); }
.btn.primary, .row-actions #phoneBtn, .card-acts .act, .brand h1, .brand p, .moto-go, .today-btn, .ai-btn, .map-type .active { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.map-type .active { text-shadow: none; }
.brand p { color: #fff; opacity: 1; }
.btn.primary { background: linear-gradient(135deg, #f07c00, #e62a4f); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #f07c00, #e62a4f); }
.row-actions #phoneBtn { background: linear-gradient(135deg, #f07c00, #e62a4f); }
:root:not([data-theme="dark"]) .wx .rn { color: #0062cc; }
:root:not([data-theme="dark"]) .fuel-log h3.sec, :root:not([data-theme="dark"]) h3.sec .fuel-ico { color: #b85a00; }

/* group ride */
.rider-pin { cursor: pointer; }
.rider { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px;
  background: var(--rc); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.rider-pin.stale .rider { opacity: .55; filter: grayscale(.4); }
.group-chip { position: absolute; left: 50%; top: calc(var(--tb-bottom, 62px) + 4px); transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-rim); cursor: pointer; font: 600 12.5px/1.2 inherit; font-family: inherit; color: var(--text);
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); max-width: calc(100% - 120px); }
.group-chip svg.ico { color: var(--c-pink); flex: none; }
.group-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.grp-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.grp-list li small { display: block; color: var(--muted); font-size: 11.5px; }
.grp-list .rider { width: 26px; height: 26px; border-width: 2px; }

/* yellow squares (Uložené, oblíbené, nové silnice, rychlá) carry a dark glyph – white on yellow is unreadable */
.tabs [data-tab="saved"] svg.ico, #noveltyBtn svg.ico, .lvl.taste [data-t="fav"] .tq, [style*="--c-yellow"] svg.ico, [style*="--c-yellow"] .sq,
.modes [data-mode="fast"] .tile-sq { color: #3a2600; }
/* (specificity) the dark glyph also on the save tile and on the selected Fast tile */
.row-actions #saveBtn .sq, .modes button[data-mode="fast"] .tile-sq, .modes button.active[data-mode="fast"] .tile-sq,
.modes button.active[data-mode="fast"] span.tile-sq { color: #3a2600; }

/* maps for the iPhone */
.ms-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.ms-list small { display: block; color: var(--muted); font-size: 11.5px; }
.ms-list .bar { height: 6px; border-radius: 3px; background: var(--pill-track); overflow: hidden; margin: 4px 0 2px; }
.ms-list .bar i { display: block; height: 100%; background: var(--g-go); }

/* community routes */
.com-sort { margin: 4px 0 10px; }
.com-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.com-list button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--pill-track); color: var(--text); font: inherit; cursor: pointer; }
.com-list button:hover { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.com-list small { color: var(--muted); font-size: 11.5px; }
.com-list small.desc { color: var(--text); opacity: .8; }
.stars { color: #c98a00; letter-spacing: 1px; }

/* accounts */
.acc-field { display: grid; gap: 4px; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.acc-field input { padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.acc-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acc-links { font-size: 12.5px; margin: 0; }
.linkish { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
.acc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.acc-head small { display: block; color: var(--muted); }
pre.codes { padding: 10px 12px; border-radius: 12px; background: var(--pill-track); font-size: 15px; line-height: 1.6; text-align: center; user-select: all; }
.acc-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 16px; font-size: 12.5px;
  background: color-mix(in srgb, var(--c-blue) 12%, var(--glass)); border: 1px solid color-mix(in srgb, var(--c-blue) 30%, transparent); }
.acc-banner > span:first-child { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; }
.acc-banner > span:last-child { display: flex; gap: 6px; align-items: center; }
.adm-tabs { margin-bottom: 10px; }
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 55vh; overflow: auto; }
.adm-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--pill-track); font-size: 13px; }
.adm-list small { color: var(--muted); font-size: 11.5px; }
.adm-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* public landing */
.welcome { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 18, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.welcome-card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 22px 16px; border-radius: 24px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-rim); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.welcome-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.welcome-brand img { width: 56px; height: 56px; border-radius: 14px; }
.welcome-brand h1 { margin: 0; font-size: 26px; }
.welcome-brand p { margin: 2px 0 0; color: var(--muted); }
.welcome-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.welcome-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.welcome-list svg.ico { flex: none; color: var(--accent); margin-top: 2px; }
.welcome-acts { display: grid; gap: 8px; }
.welcome-acts .btn { padding: 11px; font-size: 15px; font-weight: 600; }
.welcome-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.welcome-foot a { color: var(--accent); }

/* Kniha jízd – a wide dialog with the table */
dialog.wide { max-width: 1100px; }
.logbook-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.logbook-bar select, .logbook-bar input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.logbook-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table.logbook { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.logbook th, table.logbook td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.logbook th { position: sticky; top: 0; background: var(--panel); font-weight: 600; z-index: 1; }
table.logbook td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.logbook tr.fuel td { color: var(--c-blue, #0a84ff); }
table.logbook input.purpose { width: 100%; min-width: 120px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); }
table.logbook input.purpose:hover, table.logbook input.purpose:focus { border-color: var(--line); background: var(--card); }
.kind-btn { border: 0; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--pill-track); color: var(--text); white-space: nowrap; }
.kind-btn.business { background: #0a84ff; color: #fff; }
.logbook-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 13px; }
.logbook-sum b { font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 10px; }
.chips .check { margin: 0; }

/* rain radar timeline */
.radar-bar { position: absolute; left: 50%; transform: translateX(-50%); top: 120px; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); width: min(560px, calc(100% - 32px)); }
.radar-bar input[type=range] { flex: 1; min-width: 80px; accent-color: #0a84ff;
  background: linear-gradient(90deg, transparent calc(var(--now, 50%) - 1px), rgba(10,132,255,.55) calc(var(--now, 50%) - 1px), rgba(10,132,255,.55) calc(var(--now, 50%) + 1px), transparent calc(var(--now, 50%) + 1px)); }
.radar-bar .rb-time { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 150px; }
.radar-bar .rb-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
@media (max-width: 600px) { .radar-bar .rb-kind { display: none; } .radar-bar .rb-time { min-width: 0; font-size: 11.5px; } }

.surf-sum { margin: 6px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Servisní knížka */
.service-list { list-style: none; margin: 8px 0; padding: 0; }
.service-list li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.service-list small { display: block; color: var(--muted); font-size: 12px; }
.svc-dot { width: 10px; height: 10px; border-radius: 50%; background: #30d158; }
.svc.soon .svc-dot { background: #ff9f0a; } .svc.due .svc-dot { background: #ff453a; }
.svc-left { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* warning text mixed towards the text colour: darker in the light theme, brighter in the dark one – readable in both */
.svc.due .svc-left { color: color-mix(in srgb, #ff453a 75%, var(--text)); font-weight: 600; } .svc.soon .svc-left { color: color-mix(in srgb, #ff9f0a 65%, var(--text)); font-weight: 600; }
.svc-acts { display: flex; gap: 4px; }
.svc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; }
.svc-tag { padding: 2px 8px; border-radius: 999px; background: var(--pill-track); }
.svc-tag.due { background: rgba(255,69,58,.15); color: color-mix(in srgb, #ff453a 75%, var(--text)); } .svc-tag.soon { background: rgba(255,159,10,.15); color: color-mix(in srgb, #ff9f0a 65%, var(--text)); }
@media (max-width: 600px) { .service-list li { grid-template-columns: 12px 1fr; } .svc-left, .svc-acts { grid-column: 2; } }

/* dialogs: buttons wrap instead of being cut off; choices with a description as a readable list */
dialog menu { flex-wrap: wrap; }
dialog menu .btn { flex-shrink: 0; white-space: nowrap; }
.choice-list { display: grid; gap: 8px; margin: 12px 0 0; }
.choice { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--accent, #ff6a3d); }
.choice b { display: block; font-size: 14px; } .choice small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.choice.primary { border-color: #ff7a1a; background: linear-gradient(135deg, rgba(255,122,26,.14), rgba(255,61,128,.10)); }
.choice-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pill-track); }
.choice.primary .choice-ic { background: #ff7a1a; color: #fff; }
#map.tool-draw .maplibregl-canvas { cursor: crosshair; }
.ft-pop b { display: block; } .ft-pop small { color: var(--muted, #888); }
.ft-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#tab-saved > .row { flex-wrap: wrap; }
#tab-saved > .row .btn { flex: 1 1 auto; min-width: 0; }
.ft-row { display: flex; gap: 2px; flex-shrink: 0; }
#freeTracks .meta b, #freeTracks .meta small { white-space: normal; }
.split-how label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.split-how label b { display: block; } .split-how small { color: var(--muted); }
.tool-hint .hint-acts { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; flex-wrap: wrap; }
.tool-hint .hint-acts button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.22); color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.tool-hint .hint-acts button:hover { background: rgba(255,255,255,.35); }
#freeTracks .ft-help { margin: 2px 0 6px; } #freeTracks > .btn { margin-bottom: 8px; }

/* Vlastní stopy: ★, coloured folders, search, Spravovat stopy */
#freeTracks .sec small { font-weight: 500; margin-left: 4px; }
.ft-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ft-item.off .meta { opacity: .5; }
.ft-star { border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; padding: 2px; cursor: pointer; flex-shrink: 0; }
.ft-star.on { color: #ffcc00; }
.ft-star:hover { color: #ffcc00; }
.ft-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #ff7a1a); flex-shrink: 0; display: inline-block; }
.ft-dot.big { width: 14px; height: 14px; }
.ft-folder { display: flex; align-items: center; gap: 7px; padding: 7px 6px; margin-top: 4px; border-radius: 8px; cursor: pointer; user-select: none; }
.ft-folder:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ft-folder small { color: var(--muted); margin-left: auto; white-space: nowrap; }
.ft-chev { display: inline-flex; transition: transform .15s; color: var(--muted); }
.ft-folder.open .ft-chev { transform: rotate(90deg); }
.ft-folder + ul.saved { margin-left: 14px; }
.ft-chk { flex-shrink: 0; }
.ftm { display: grid; grid-template-columns: 220px 1fr; gap: 16px; min-height: 420px; }
.ftm-side { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 12px; }
.ftm-f { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.ftm-f span:not(.ft-dot) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftm-f small { color: var(--muted); }
.ftm-f:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ftm-f.active { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; }
.ftm-new { color: var(--accent); margin-top: 4px; }
.ftm-side .lvl-label { margin: 10px 8px 2px; }
.ftm-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ftm-top { display: flex; gap: 8px; align-items: center; } .ftm-top .search-box { flex: 1; margin: 0; }
.ftm-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ftm-fbar:empty { display: none; }
.ftm-colors { display: inline-flex; gap: 4px; margin: 0 6px; }
.ftm-c { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.ftm-c.on { border-color: var(--text, #fff); box-shadow: 0 0 0 1px var(--c); }
.ftm-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ftm-bulk[hidden] { display: none; }
.ftm-all { font-size: 12px; color: var(--muted); }
.ftm-list { max-height: 52vh; overflow: auto; margin: 0; }
.btn.danger { color: #ff453a; }
@media (max-width: 700px) {
  .ftm { grid-template-columns: 1fr; }
  .ftm-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
  .ftm-side .lvl-label { display: none; }
}

/* rounded like the rest: search boxes, selects and number fields in the track lists and dialogs */
.search-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); transition: border-color .12s, box-shadow .12s; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 9px 0; color: var(--text, inherit); }
.search-box input::-webkit-search-cancel-button { cursor: pointer; }
.ftm-top select, .ftm-move, dialog select, dialog input[type=number] { appearance: none; -webkit-appearance: none; padding: 8px 30px 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; cursor: pointer; outline: none; }
dialog input[type=number] { background-image: none; padding: 6px 12px; cursor: text; }
.ftm-top select:focus, .ftm-move:focus, dialog select:focus, dialog input[type=number]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
dialog select { width: 100%; }
.ftm-top select, .ftm-move { width: auto; }
.ftm-move { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.ft-chk, .ftm-all input, dialog .chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.ftm-list .ft-item { border-radius: 12px; }
.ftm-colors { flex-wrap: wrap; align-items: center; }
.ftm-c.auto { display: inline-grid; place-items: center; background: var(--panel); border: 1px dashed var(--muted); color: var(--muted); font-size: 10px; font-weight: 700; }
.ftm-c.auto.on { border-style: solid; border-color: var(--text, #fff); }
.ftm-c.custom { position: relative; overflow: hidden; display: inline-block; }
.ftm-c.custom input, .ftm-bcolor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.ftm-bcolor { position: relative; overflow: hidden; cursor: pointer; }
.ft-folder .ft-row { margin-left: 4px; }
.ft-folder .ft-row .icon-btn { border: 0; background: none; }   /* the same quiet buttons as on the track rows */
.ft-folder .ft-row .icon-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ft-folder .ft-row .icon-btn { opacity: .7; } .ft-folder:hover .ft-row .icon-btn { opacity: 1; }
dialog .ftm-colors { display: flex; margin: 2px 0 10px; }
dialog .lvl-label { display: block; }
dialog .chk { display: flex; align-items: center; gap: 8px; margin: 6px 0; }

/* the toolbar grown into a labelled panel (⇊ / ⇈) */
.toolbar .tl { display: none; }
.toolbar.expanded { gap: 4px 2px; padding: 6px; max-width: min(760px, calc(100% - 76px)); }
.toolbar.expanded .tool { width: 74px; height: auto; min-height: 56px; padding: 7px 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; }
.toolbar.expanded .tl { display: block; font-size: 10.5px; line-height: 1.15; font-weight: 600; text-align: center; color: var(--muted); white-space: normal; }
.toolbar.expanded .tool.active .tl { color: #fff; }
.toolbar.expanded .tool:hover .tl { color: var(--text); }
.toolbar.expanded .sep { width: 100%; height: 1px; margin: 2px 4px; flex-basis: 100%; }
.toolbar .tb-expand { color: var(--accent); }
@media (max-width: 800px) {
  /* the labelled toolbar on a phone: smaller tiles, never taller than the map (scrolls instead) */
  .toolbar.expanded { max-height: calc(100% - 24px); overflow: auto; }
  .toolbar.expanded .tool { width: 62px; min-height: 48px; padding: 5px 2px; }
  .toolbar.expanded .tl { font-size: 9.5px; }
}
.ft-prof { margin: 6px 0 4px; min-height: 22px; }
.ft-prof-svg { width: 100%; height: 70px; display: block; border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ft-prof-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.td-actions .ft-acts + .ft-acts { margin-top: 6px; }
.maplibregl-ctrl-geolocate:disabled { pointer-events: none; cursor: help; }   /* the click reaches its group, which explains why */
.rs-out { margin-top: 10px; } .rs-out .ok { color: color-mix(in srgb, #30d158 70%, var(--text)); } .rs-out .err { color: color-mix(in srgb, #ff453a 75%, var(--text)); }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rs-table td, .rs-table th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; } .rs-table .n { text-align: right; }
dialog input[type=file] { width: 100%; padding: 8px; border: 1px dashed var(--line); border-radius: 12px; }
dialog input[type=password] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.logbook-empty { margin: 10px 2px; text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.ftm-top { flex-wrap: wrap; } .ftm-top .search-box { flex: 1 1 180px; } .ftm-top select { flex: 0 0 auto; max-width: 100%; }
.ftm-list .meta b, .ftm-list .meta small { white-space: normal; overflow: visible; }
/* long labels (German, English) on a phone: buttons wrap their text or the row instead of pushing the panel wider */
.panel, .panel .card { min-width: 0; }
.wp-actions { flex-wrap: wrap; }
.wp-actions .btn, .card-acts .act, .seg button { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; }
.stats .k { overflow: hidden; text-overflow: ellipsis; }
.stats .v { font-size: clamp(14px, 4.4vw, 18px); overflow: hidden; text-overflow: ellipsis; }
/* the five tabs always fit (German "Markierungen", "Gespeichert"): they share the width instead of scrolling out of view */
.tabs button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) { .tabs button { font-size: 11px; letter-spacing: -.01em; } }
.stats .v { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }   /* "11. 10. 01:17" wraps instead of "11. 10. 0…" */
.modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modes.vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modes button { min-width: 0; overflow-wrap: anywhere; hyphens: auto; padding-left: 2px; padding-right: 2px; }   /* "Ausgewogen" fits a quarter of a phone */
@media (max-width: 440px) { .modes button { font-size: 11px; } }
.toolbar.expanded .tl { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }   /* "Motorradstraßen" breaks inside its tile */