/* Later components in cascade order: language picker, search hits, help examples, copy pill, map loading, R43 additions. */
.language-choice {display:block;font-weight:600;margin-bottom:var(--space-2,8px)}
/* Language picker: disclosure button + inline listbox, rows >= 44 px. */
.language-button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control); padding: 0 var(--space-3) 0 var(--space-4); font: inherit; font-weight: var(--fw-medium); color: var(--text); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.language-button:hover { border-color: var(--border-strong); }
.language-button:focus-visible, .language-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.language-button[aria-expanded="true"] { border-color: var(--accent); }
.language-button .language-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-chevron svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); transition: transform 160ms ease-in; }
.language-button[aria-expanded="true"] .language-chevron svg { transform: rotate(180deg); }
.language-visual { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 44px; }
.flag { display: block; width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px #0002; }
.flag-auto { display: inline-flex; align-items: center; gap: 4px; }
.flag-auto svg { width: 20px; height: 20px; color: var(--muted); }
.language-list { margin: var(--space-2) 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.language-option { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control); padding: 0 var(--space-3); border-radius: 9px; cursor: pointer; }
.language-option:hover { background: var(--surface-2); }
.language-option[aria-selected="true"] { background: var(--bg); font-weight: var(--fw-semibold); box-shadow: 0 1px 3px #0003; }
:root[data-theme="dark"] .language-option[aria-selected="true"] { background: var(--surface-2); }
.language-option .language-name { flex: 1; }
.language-check { display: none; color: var(--accent); }
.language-check svg { width: 18px; height: 18px; }
.language-option[aria-selected="true"] .language-check { display: inline-flex; }

/* Search results from an assistant link (?hits=): a medium chip under the badge row with an X to clear them. */
.hits-chip { position: fixed; z-index: 2; top: calc(var(--top) + 36px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 2px 2px 2px 14px; border-radius: var(--radius-pill); background: var(--search-blue); color: #fff;
  max-width: calc(100vw - 120px); font-size: .9375rem; font-weight: var(--fw-semibold); box-shadow: 0 1px 5px #0003; white-space: nowrap; }
.hits-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hits-clear { flex-shrink: 0; position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #ffffff33; color: inherit; }
.hits-clear::after { content: ''; position: absolute; inset: -4px; }
.hits-clear svg { width: 19px; height: 19px; stroke-width: 2.5; }

/* Each example badge heads its own box, so every explanation clearly belongs to the badge above it. */
.time-examples { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.time-example { display: grid; justify-items: start; gap: 6px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.time-example .dist { min-height: 26px; font-weight: var(--fw-medium); }
#info .time-example p { margin: 0; font-size: var(--fs-md); line-height: 1.45; }

/* Last-resort street wrapping: retain the full text in the native title tooltip. */
#details-title.is-wrapped { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; hyphens: auto; }

.selected-site { cursor: pointer; z-index: 3; }
.selected-site canvas { display: block; filter: drop-shadow(0 3px 4px #0006); }
@media (prefers-reduced-motion: reduce) { .plug-chevron svg { transition: none !important; } }

/* At the narrow target widths, use the card width for rows rather than reserving a glyph gutter. */
@media (max-width: 360px) { .plug-points { margin-inline: 0; } }

/* Power-chip head: glyphs have a neutral tile; only the power chip encodes current. */
.plug-glyph { width: 24px; height: 26px; flex-shrink: 0; background: #f4f5f6; color: #24303b; }
.plug-glyph.is-multi { width: 48px; }
.plug-glyph.is-multi svg.mdi { width: 24px; height: 24px; }
.plug-power { padding: 1px 5px; border-radius: 5px; background: var(--bg); color: var(--text); font-size: 12px; font-weight: var(--fw-semibold); white-space: nowrap; }
.plug-power.is-dc { background: var(--accent-soft); color: var(--accent); }
.plug-point-id { display: block; width: 100%; min-height: 44px; line-height: 44px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--text); text-align: left; font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; text-overflow: clip; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.point-id-prefix { color: var(--muted); }
/* Hold-to-copy pill: compact, round, never interactive itself. The accent face is revealed left to right. */
.point-id-popover { position: fixed; z-index: 30; max-width: calc(100vw - 16px); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong), 0 4px 14px #0003; font: var(--fw-medium) 13px/18px Inter, sans-serif; font-variant-numeric: tabular-nums; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; animation: id-in 120ms var(--ease-out) both; }
.point-id-face { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 14px; }
.point-id-face.is-fill { position: absolute; inset: 0; background: var(--accent); color: var(--on-accent); clip-path: inset(0 100% 0 0); }
.point-id-text { min-width: 0; padding-block: 7px; overflow-wrap: anywhere; }
.point-id-status { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.point-id-icon { display: grid; place-items: center; width: 18px; height: 18px; }
.point-id-icon svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.point-id-label { font-weight: var(--fw-semibold); white-space: nowrap; }
.point-id-label:empty, .is-tight .point-id-label { display: none; }
.point-id-popover.is-holding .is-fill { animation: id-fill 1000ms linear -120ms both; }
.point-id-popover.is-done .is-fill { clip-path: none; }
.point-id-popover.is-failed .is-fill { background: var(--warn-bg); color: var(--warn-text); }
@keyframes id-fill { to { clip-path: inset(0 0 0 0); } }
@keyframes id-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }
@keyframes id-fade { from { opacity: 0; } }
/* Reduced motion: no sweep or pop-in; the accent fades in over the same second instead. */
@media (prefers-reduced-motion: reduce) {
  .point-id-popover { animation: none; }
  .point-id-popover.is-holding .is-fill { clip-path: none; animation-name: id-fade; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 374px) { .sheet-body { padding-inline: max(0px, calc(12px - var(--sheet-gutter, 0px))); } .sheet-header { padding-left: 12px; } .sheet-footer { padding-inline: 12px; } }

[data-theme="dark"] .plug-glyph { background: transparent; color: var(--text); }
.plug-point-id.is-full { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; cursor: text; }
.plug-point-id.is-truncated { cursor: pointer; }

.plug-point .dist { max-width: 100%; min-width: 0; overflow: hidden; }

/* Basemap feedback does not depend on the station catalog or occupancy stream. */
.map-loading { position: fixed; z-index: 4; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 2px 12px #0003; pointer-events: none; }
.map-loading::before { content: ''; display: block; width: 28px; height: 28px; border: 3px solid #2563eb33; border-top-color: var(--search-blue); border-radius: 50%; animation: map-spin .8s linear infinite; }
.map-loading[hidden], .map-retry[hidden] { display: none; }
.map-retry { position: fixed; z-index: 4; bottom: 90px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); border-radius: 12px; padding: 10px 14px; background: var(--bg); color: var(--text); box-shadow: 0 2px 12px #0003; }
.map-retry button { color: var(--search-blue); background: transparent; border: 0; min-height: 44px; padding: 0 12px; font: inherit; font-weight: 600; }
#map[data-basemap-pending] .search-origin { visibility: hidden; }
@keyframes map-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-loading::before { animation: none; border-right-color: var(--search-blue); } }

@media (min-width: 1024px) {
  .map-loading, .map-retry { left: calc((100% + var(--map-clearance)) / 2); }
  .map-retry { max-width: calc(100vw - var(--map-clearance) - 32px); }
}

/* R43 help: the details power chip on its card surface, AC neutral and DC tinted, in the boxed example style. */
.power-example { margin-bottom: var(--space-3); }
.power-samples { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); }
#info .power-example p { margin: 0; font-size: var(--fs-md); line-height: 1.45; }