/* Shares MAP V2 typography and colour tokens; native uses the same web surface. */
#cn-launcher {
    position: fixed; right: max(22px, var(--v2-safe-right)); bottom: calc(16px + max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom)));
    z-index: 1010; min-height: 48px; border: 3px solid transparent; border-radius: 24px;
    display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--v2-blue);
    /* MAP selected-control surface; retain the blue/yellow rim without neon. */
    background: linear-gradient(#edf4ff, #edf4ff) padding-box,
        conic-gradient(from 0deg, #0096d6 0deg, #ffd400 25deg 70deg, #0096d6 95deg 360deg) border-box;
    font: 600 14px/1.4 var(--v2-font, system-ui, sans-serif); cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}
#cn-launcher svg { display: block; flex: none; width: 20px; height: 20px; }
#cn-panel {
    position: fixed; z-index: 2100; right: max(22px, var(--v2-safe-right)); top: calc(130px + var(--v2-safe-top));
    max-height: calc(100dvh - 152px - var(--v2-safe-top) - max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom))); width: min(410px, calc(100vw - 32px)); display: flex; flex-direction: column;
    background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-border); border-radius: 16px;
    box-shadow: var(--v2-shadow); overflow: hidden; font-size: 14px; line-height: 1.6;
}
#cn-launcher[hidden], #cn-panel[hidden], #cn-panel [hidden] { display: none !important; }
#cn-panel input, #cn-panel select { font: inherit; }
/* Match station-detail actions; do not reset their shared 850 weight with font:inherit. */
#cn-panel .cn-button { font-family: inherit; font-size: 16px; line-height: normal; }
#cn-panel button { cursor: pointer; }
#cn-panel :is(button, input, select, summary):focus-visible, #cn-launcher:focus-visible { outline: 3px solid var(--v2-yellow); outline-offset: 2px; }
#cn-panel h2 { font-size: 27px; line-height: 1.35; margin: 0 0 12px; letter-spacing: -.4px; }
#cn-panel[data-step="results"] h2 { font-size: 22px; margin-bottom: 4px; }
#cn-panel h2:focus { outline: none; }
#cn-panel h3 { margin: 10px 0 5px; font-size: 20px; line-height: 1.45; overflow-wrap: anywhere; }
.cn-header { display: flex; align-items: center; gap: 8px; padding: 8px 24px; flex: none; }
/* Equal control boxes; this also overrides detail Close hover/active fills. */
#cn-panel .cn-header button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: max(44px, 1.25em); height: max(44px, 1.25em); padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--v2-text); font-size: 28px; line-height: 1; }
/* Align the chevron's left stroke, not its transparent hit box, with body content. */
#cn-panel .cn-back { margin-left: calc(-1 * (max(44px, 1.25em) - 24px) / 2 - 7px); }
#cn-panel .cn-back:focus-visible { outline-offset: -3px; }
#cn-panel .cn-back svg { display: block; flex: none; }
#cn-panel .cn-close { position: relative; inset: auto; margin-left: auto; }
.cn-body { padding: 12px 24px 20px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.cn-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 14px 24px max(16px, var(--v2-safe-bottom)); border-top: 1px solid var(--v2-soft-border); flex: none; }
.cn-footer > .cn-button { flex: 1; }
.cn-footer > .cn-small { flex: 1; }
.cn-button { border: 1px solid var(--v2-border); background: white; color: var(--v2-blue); border-radius: 8px; padding: 10px 14px; min-height: 44px; }
.cn-button.cn-primary { background: var(--v2-blue); color: white; border-color: var(--v2-blue); }
.cn-button:hover { border-color: var(--v2-blue); }
.cn-button:disabled { opacity: .55; cursor: wait !important; }
#cn-info { width: 44px; padding: 0; margin: -8px -12px -8px 0; flex: none; border: 0; background: none; color: var(--v2-muted); font-size: 16px; }
.cn-button[aria-pressed=true] { background: #edf4ff; border: 2px solid var(--v2-blue); }
.cn-scenarios { display: grid; gap: 12px; }
.cn-scenarios .cn-button { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px; color: var(--v2-text); background: #f8fafc; }
.cn-scenarios .cn-button svg { flex: none; color: var(--v2-blue); }
.cn-scenarios .cn-button[data-cn="stay"] svg { color: var(--v2-green); }
.cn-scenarios .cn-button[data-cn="cheap"] svg { color: #8c6b18; }
.cn-scenarios .cn-button > span[aria-hidden] { margin-left: auto; color: var(--v2-muted); font-size: 20px; }
.cn-scenario-copy { min-width: 0; }
.cn-scenario-copy small { display: block; margin-top: 5px; color: var(--v2-muted); font-size: 12px; line-height: 1.6; font-weight: 400; }
.cn-scenarios strong { display: block; font-size: inherit; font-weight: inherit; }
.cn-muted, .cn-small { color: var(--v2-muted); }
.cn-small { font-size: 12px; line-height: 1.7; }
.cn-options { display: flex; gap: 8px; }
.cn-options > button { flex: 1; padding: 10px 6px; }
#cn-panel fieldset { border: 0; padding: 0; margin: 22px 0; }
#cn-panel legend { font-weight: 700; margin-bottom: 9px; }
.cn-field { display: block; font-weight: 600; margin: 16px 0; }
.cn-field input, .cn-field select { display: block; width: 100%; min-height: 46px; margin-top: 8px; padding: 10px; background: white; color: var(--v2-text); border: 1px solid var(--v2-border); border-radius: 8px; }
#cn-panel [data-cn="location"] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px; text-align: left; }
#cn-panel [data-cn="location"] svg { flex: none; }
#cn-panel [data-cn="location"][aria-pressed="true"] { border-width: 1px; }
.cn-origin-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--v2-muted); font-size: 12px; }
.cn-origin-divider::before, .cn-origin-divider::after { content: ""; flex: 1; border-top: 1px solid var(--v2-soft-border); }
.cn-optional { margin-top: 20px; }
#cn-panel summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--v2-muted); }
.cn-check { display: flex; gap: 12px; align-items: center; min-height: 48px; }
.cn-check input { width: 20px; height: 20px; accent-color: var(--v2-blue); }
.cn-tag { display: inline-block; background: #edf4ff; color: var(--v2-blue); padding: 4px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.cn-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; font-variant-numeric: tabular-nums; }
.cn-metrics > span { flex: 1 1 auto; min-width: min-content; max-width: 100%; }
.cn-metrics strong { display: block; font-size: 32px; line-height: 1.15; letter-spacing: -.7px; font-weight: 700; color: var(--v2-text); }
.cn-metrics > span:first-child strong { color: var(--v2-green); }
.cn-metrics small { font-size: 13px; letter-spacing: 0; font-weight: 500; }
.cn-metrics strong { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; white-space: normal; }
.cn-metrics small { white-space: nowrap; }
.cn-metrics .cn-price { column-gap: 0; }
.cn-metrics .cn-range { font-size: 24px; line-height: 1.53; }
.cn-metrics .cn-unknown { font-size: 22px; line-height: 1.68; letter-spacing: 0; color: var(--v2-muted); }
.cn-metric-label { display: block; margin-top: 5px; font-size: 11px; color: var(--v2-muted); font-weight: 400; }
.cn-station-meta { display: block; margin: 0; font-size: 12px; color: var(--v2-muted); font-weight: 400; }
.cn-station-provider { margin: 4px 0 0; font-size: 12px; color: var(--v2-muted); overflow-wrap: anywhere; }
.cn-reason { margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: var(--v2-text); overflow-wrap: anywhere; }
.cn-source-time { font-size: 11px; }
.cn-status, .cn-message { font-size: 13px; color: var(--v2-muted); margin-top: 14px; }
.cn-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; margin-top: 10px; }
.cn-message { padding: 12px; background: #fff6da; border-radius: 8px; color: #704e00; }
#cn-panel .cn-footer-results { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: 12px; padding-bottom: max(8px, var(--v2-safe-bottom)); }
#cn-panel .cn-footer-results > .cn-button { flex: 1 0 auto; white-space: nowrap; padding-left: 4px; padding-right: 4px; border-color: transparent; }
#cn-panel .cn-footer-results > .cn-button[data-cn="navigate"] { order: -2; flex-basis: 100%; }
#cn-panel .cn-footer-native > .cn-button[data-cn="navigate"] { flex-basis: calc(50% - 4px); }
#cn-panel .cn-footer-results > .cn-button[data-cn="monitor"] { order: -1; flex-basis: calc(50% - 4px); border-color: var(--v2-border); }
@media (max-width: 767px) {
    #cn-launcher { right: max(16px, var(--v2-safe-right)); bottom: calc(8px + max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom))); }
    #cn-panel { inset: auto 0 max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom)); width: 100%; max-height: calc(100dvh - max(160px, var(--v2-safe-top)) - max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom))); border-radius: 18px 18px 0 0; }
    .cn-header { padding-left: 20px; padding-right: 20px; }
    #cn-panel .cn-header button { font-size: 26px; }
    .cn-body { padding: 10px 20px 20px; }
    .cn-footer { padding-left: max(20px, var(--v2-safe-left)); padding-right: max(20px, var(--v2-safe-right)); }
    #cn-panel h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { #cn-panel *, #cn-launcher { transition: none !important; scroll-behavior: auto !important; } }
/* At narrow widths the complete legend and launcher cannot share one row. */
@media (max-width: 374px) {
    #cn-launcher { bottom: calc(56px + max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom))); }
}
@media (max-height: 600px) {
    #cn-panel { top: max(8px, var(--v2-safe-top)); bottom: calc(8px + max(var(--cn-map-bottom, 0px), var(--v2-safe-bottom))); height: auto; max-height: none; }
}