/* HERE wave 2a: the no-location card (Map sheet and Home), the traffic layer and its button, the "Why is it late?" sheet, the detour note. */
:root { --tr-green: #1f9d63; --tr-orange: #e08a00; --tr-red: #d9363e; --tr-busway: #2f7fe8; --tr-none: #9a928e; }
:root[data-theme="dark"] { --tr-green: #3dd68c; --tr-orange: #ffb02e; --tr-red: #ff6b6b; --tr-busway: #6aa9ff; --tr-none: #8f8782; }

/* ---- no location ---- */
.loc-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2, var(--surface)); }
.loc-card .grow { flex: 1; min-width: 0; } .loc-card b { display: block; font-size: var(--fs-sub); } .loc-card small { display: block; font-size: var(--fs-foot); color: var(--muted); line-height: 1.35; }
.loc-card .ico { width: 36px; height: 36px; border-radius: 11px; flex: none; }
.loc-card.finding { border-style: dashed; background: none; }
.loc-card .spinner { width: 26px; height: 26px; flex: none; }
.loc-card .spinner circle { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
.loc-card.loc-approx { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }   /* 3.9.42: "Location is approximate" (nolocation.js) */
.h-from-here { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--fs-detail, 13px); color: var(--muted); line-height: 1.35; }   /* 3.9.42: "From where you are now (near …) · based on your location · change" */
.h-from-here b { display: inline; font-size: inherit; font-weight: 600; color: var(--text, inherit); } .h-from-here .link { padding: 0; min-height: 0; font-size: inherit; }
.h-from-here > span { min-width: 0; }
.loc-acts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.loc-acts .btn { width: 100%; justify-content: center; }
.loc-help { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); font-size: var(--fs-foot); line-height: 1.4; }

/* ---- traffic on the map ---- */
.mv-traffic { position: absolute; inset: 0; pointer-events: none; }
.mv-ttile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; opacity: 0; transition: opacity .25s; user-select: none; -webkit-user-drag: none; }
.mv-ttile.in { opacity: .9; }
.traffic-btn { position: absolute; right: 12px; top: calc(var(--safe-top) + 180px); z-index: 10; width: 50px; height: 56px; flex-direction: column; gap: 1px; padding: 4px 0 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text); }
.traffic-btn[hidden] { display: none; }
.traffic-btn .i { width: 22px; height: 22px; }
.traffic-btn.on { background: var(--text); color: var(--bg); box-shadow: var(--shadow), 0 0 0 2px var(--accent); }

/* ---- why is it late ---- */
.why-row-link { margin: -4px 0 10px; font-size: var(--fs-sub); } .why-row-link .why-link { padding: 2px 0; font-weight: 700; text-decoration: underline; }
.why-lead { font-weight: 700; }
.why-card { padding: 12px; border-radius: 16px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); margin: 0 0 12px; }
.why-map { display: block; width: 100%; height: auto; }
/* (5 Oct) a real map under the line: a still mosaic of map tiles (why.js mapSVG), the line and the bus drawn over it */
.why-mapbox { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #E8E6E0; }
:root[data-theme="dark"] .why-mapbox { background: #1B2322; }
.why-mapbox .why-tiles { position: absolute; inset: 0; pointer-events: none; }
.why-mapbox .why-tiles img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.why-mapbox .why-map { position: absolute; inset: 0; height: 100%; }
.why-mapbox .why-attr { top: auto; right: 4px; bottom: 4px; font-size: 10px; padding: 3px 5px; }
.why-halo { fill: none; stroke: var(--surface); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.why-seg { fill: none; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.why-seg.green { stroke: var(--tr-green); } .why-seg.orange { stroke: var(--tr-orange); } .why-seg.red { stroke: var(--tr-red); } .why-seg.busway { stroke: var(--tr-busway); stroke-dasharray: 1 7; } .why-seg.none { stroke: var(--tr-none); stroke-dasharray: 2 6; }
.why-bus { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.why-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 4px; font-size: var(--fs-cap); color: var(--muted); }
.why-key { display: inline-flex; align-items: center; gap: 6px; }
.why-dot { width: 12px; height: 5px; border-radius: 3px; display: inline-block; }
.why-dot.green { background: var(--tr-green); } .why-dot.orange { background: var(--tr-orange); } .why-dot.red { background: var(--tr-red); } .why-dot.busway { background: var(--tr-busway); } .why-dot.none { background: var(--tr-none); }
.why-ahead { margin: 4px 0 0; font-size: var(--fs-cap); color: var(--muted); }
.why-row { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; font-size: var(--fs-sub); } .why-row b { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.why-loading { display: flex; align-items: center; gap: 10px; } .why-loading .spinner { width: 24px; height: 24px; } .why-loading .spinner circle { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
.why-note { margin-top: 4px; }

/* ---- detours ---- */
.note.detour b { display: block; }

/* ---------- traffic on the trip map (js/trafficline.js; the console's traffic_line switch) ----------
   Drawn in the lines layer (z-index 1) so stops and markers stay on top. Red is dashed as well as red: not colour alone. */
.mv-tl-seg { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mv-tl-seg.green { stroke: var(--tr-green); } .mv-tl-seg.orange { stroke: var(--tr-orange); }
.mv-tl-seg.red { stroke: var(--tr-red); stroke-linecap: butt; stroke-dasharray: 9 5; }
.mv-here .mv-tl-seg, :root.mv-here .mv-tl-seg { stroke-width: 5.5; }
.tl-chip { position: absolute; left: 8px; bottom: 52px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; line-height: 1.2; color: var(--text, #222); background: var(--surface, #fff); box-shadow: 0 1px 6px rgba(0,0,0,.18); pointer-events: none; }
.tl-chip i { display: inline-block; width: 13px; height: 5px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.tl-chip i.green { background: var(--tr-green); } .tl-chip i.orange { background: var(--tr-orange); }
.tl-chip i.red { background: repeating-linear-gradient(90deg, var(--tr-red) 0 6px, transparent 6px 9px); }