/* ─────────────────────────────────────────────────────────────────────────
   W GROUP — module + standalone-shell styles.
   Panel/SOS/marker rules EXTRACTED from weathergpx css/main.css, every rule
   prefixed .wgroup (panel container, overlay wrapper and marker elements all
   carry the class). The "design-system primitives" section is COPIED from
   weathergpx alien.css/main.css (same values) so the standalone shell needs
   no host CSS — embedded, the duplicates resolve to the identical look.
   .wgroup-shell rules are standalone-only chrome (index.html).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Design-system primitives (copied from weathergpx, scoped) ──────────── */

.wgroup .hide { display: none !important; }

.wgroup .td-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid var(--blue6);
    background: var(--blue7);
    color: var(--blue2);
    cursor: pointer;
    font-size: var(--font-xs);
    font-family: inherit;
    transition: background 120ms, color 120ms, border-color 120ms;
    white-space: nowrap;
}
.wgroup .td-btn:disabled { opacity: 0.35; cursor: default; }
.wgroup .td-btn:hover:not(:disabled) { background: var(--blue7); color: var(--color-primary-ultralight); border-color: var(--color-primary-ultralight); }

.wgroup .btn-secondary-hztal {
    font-size: var(--font-md);
    padding: 0.45rem 1rem;
    text-align: center;
    border: 1px solid var(--blue6);
    border-radius: 0.4rem;
    background: var(--blue7);
    color: var(--blue3);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.wgroup .btn-secondary-hztal:hover { background: var(--blue7); color: var(--blue3); border-color: var(--color-primary-ultralight); }
.wgroup .btn-secondary-hztal:disabled { opacity: 0.35; cursor: default; }
.wgroup .btn-secondary-hztal .wg-ico { color: var(--color-secondary-dark); transition: color 120ms; }
.wgroup .btn-secondary-hztal:hover .wg-ico { color: var(--color-secondary); }

.wgroup .wg-ico { width: 1.4rem; height: 1.4rem; flex-shrink: 0; pointer-events: none; }

.wgroup .nav-opt-lbl {
    font-size: var(--font-xs);
    color: var(--blue3);
    text-align: center;
    padding: 0.3rem 0.1rem 0;
    line-height: 1.25;
}

.wgroup .toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-xs);
    color: var(--blue4);
    user-select: none;
    white-space: nowrap;
    transition: color 120ms;
}
.wgroup .toggle-label:has(input:checked) { color: var(--blue1); }
.wgroup .toggle-label:has(input:disabled) { opacity: 0.4; cursor: default; pointer-events: none; }
.wgroup .toggle-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.wgroup .toggle-check-box {
    display: inline-block;
    width: 36px;
    height: 22px;
    border-radius: 999px;
    background: var(--blue6);
    border: 1px solid var(--grey4T);
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    transition: background 200ms, border-color 200ms;
}
.wgroup .toggle-check-box::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue4-5);
    top: 2px;
    left: 2px;
    transition: transform 200ms, background 200ms;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* EMBEDDED-ONLY BUG: weathergpx's alien.css prints the word "on"/"off" inside
   the switch with .toggle-check-box::before. Its switch is 62px wide and has
   room; ours is 36px with a 16px knob, i.e. 16px of free track, so the word
   lands under the knob and reads "ff" when off and "O" when on. group.css never
   declared a ::before, so nothing was overriding it. The module owns its own
   compact switch, so drop the word. Standalone never saw this (no alien.css).
   ⚠ TWO rules to beat, not one: alien.css also sets content:"on" under
   .toggle-label:has(input:checked) .toggle-check-box::before, which scores
   (0,2,1) and outranks a plain .wgroup .toggle-check-box::before at (0,2,0).
   Killing only the first leaves the CHECKED switch still showing "on". */
.wgroup .toggle-check-box::before,
.wgroup .toggle-label:has(input:checked) .toggle-check-box::before { content: none; }
.wgroup .toggle-label:not(:has(input:checked)):not(:has(input:disabled)):hover .toggle-check-box { background: var(--blue5); }
.wgroup .toggle-label:has(input:checked) .toggle-check-box { background: var(--color-primary-deep); border-color: var(--color-primary-lightT); }
.wgroup .toggle-label:has(input:checked) .toggle-check-box::after {
    background: var(--color-primary-bright);
    transform: translateX(15px);
}
.wgroup .td-btn:focus-visible,
.wgroup .toggle-label input:focus-visible ~ .toggle-check-box { outline: 2px solid var(--color-primary-ultralight); outline-offset: 2px; }

/* ── Group panel (extracted from weathergpx main.css) ───────────────────── */

.wgroup #group-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
}
.wgroup #group-options .nav-opt-lbl {
    font-size: var(--font-sm);
    color: var(--blue3);
}
.wgroup #group-options .toggle-label { justify-self: center; }

/* SOS buttons */
.wgroup #btn-sos-group {
    width: 100%;
    background: var(--color-sos);
    color: var(--grey0);
    border: none;
    border-radius: 0.4rem;
    font-size: var(--font-md);
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    min-height: 44px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.wgroup #btn-sos-group:hover { background: var(--color-sos-strong); }
.wgroup #btn-sos-group.sos-active { background: var(--color-sos-dark); }

/* SOS alert banner — position:fixed top, shown when another rider triggers SOS */
.wgroup #sos-alert {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--color-sos);
    color: var(--grey0);
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 1rem;
}
.wgroup .sos-alert-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 600;
    min-height: 36px;
}
.wgroup .sos-group-name { font-size: 0.8em; font-weight: 400; opacity: 0.8; }
.wgroup .sos-cancel-admin {
    margin-left: auto;
    background: rgba(0,0,0,0.25);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px; height: 24px;
    font-size: var(--font-md);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.wgroup .sos-cancel-admin:hover { background: rgba(0,0,0,0.45); }
.wgroup .sos-alert-dot {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--font-sm); font-weight: 700;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.7);
}

/* SOS confirm dialog */
.wgroup #sos-confirm-dialog { border: none; border-radius: 0.75rem; padding: 1.5rem; max-width: 260px; text-align: center; background: var(--blue8); color: var(--blue1); }
.wgroup #sos-confirm-dialog[open] { display: flex; flex-direction: column; align-items: center; }
.wgroup #sos-confirm-dialog::backdrop { background: rgba(0,0,0,0.55); }
.wgroup #sos-confirm-dialog:not([open]) { display: none; }
.wgroup .sos-confirm-text { font-size: var(--font-lg); font-weight: 600; margin: 0 0 1.2rem; }
.wgroup .sos-confirm-btns { display: flex; gap: 0.5rem; justify-content: center; }
.wgroup #btn-sos-go { background: var(--color-sos); color: var(--grey0); border: none; border-radius: 0.4rem; font-weight: 700; font-size: var(--font-md); letter-spacing: 0.06em; padding: 0.5rem 1.5rem; min-height: 44px; cursor: pointer; }
.wgroup #btn-sos-go:hover { background: var(--color-sos-strong); }

/* Pulsing SOS ring on rider map marker */
@keyframes wgroup-sos-pulse {
    0%   { box-shadow: 0 0 0 0   var(--color-sos-90); }
    70%  { box-shadow: 0 0 0 10px var(--color-sos-0);  }
    100% { box-shadow: 0 0 0 0   var(--color-sos-0);   }
}
.wgroup .rider-dot.rider-sos { animation: wgroup-sos-pulse 1.2s ease-out infinite; }

.wgroup .group-join-btns { display: flex; gap: 0.5rem; justify-content: center; }
.wgroup .group-join-btns .btn-secondary-hztal { flex: 1 1 0; white-space: normal; line-height: 1.25; }

.wgroup #group-paste-area { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.wgroup .group-paste-btns { display: flex; gap: 0.5rem; }
.wgroup .group-paste-btns .td-btn,
.wgroup .group-paste-btns .group-btn-primary { flex: 1; min-height: 36px; text-align: center; justify-content: center; }

.wgroup .group-msg { font-size: var(--font-xs); color: var(--color-error-content); text-align: center; margin: 0.4rem 0 0; }

/* Group inputs — consistent focus style, no browser outline overflow */
.wgroup #group-paste-input,
.wgroup #group-rename-input,
.wgroup #group-voice-input,
.wgroup #group-add-follow-input {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.5rem 0.6rem;
    background: var(--blue7); border: 1px solid var(--blue6); border-radius: 0.4rem;
    color: var(--blue2); font-size: var(--font-sm); outline: none; display: block;
    font-family: inherit;
}
.wgroup #group-paste-input:focus,
.wgroup #group-rename-input:focus,
.wgroup #group-voice-input:focus,
.wgroup #group-add-follow-input:focus { border-color: var(--color-primary-light); }

/* Member / follower choice */
.wgroup #group-choice { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.wgroup .group-choice-btns { display: flex; flex-direction: column; gap: 0.4rem; }
.wgroup .group-choice-btns button { min-height: 40px; text-align: center; justify-content: center; }
.wgroup .group-choice-cancel { min-height: 36px; font-size: var(--font-sm); text-align: center; justify-content: center; }

/* Sub-titles: MEMBER / WATCH */
.wgroup .group-sub-title {
    font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--blue4);
    margin: 0.8rem 0 0.3rem; padding: 0;
}
.wgroup .group-watch-title { margin-top: 1rem; }

/* Name rows (group name + rename btn / watch row) */
.wgroup .group-name-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.5rem 0.45rem 0.7rem;
    background: var(--blue7); border: 1px solid var(--blue6);
    border-left: 3px solid transparent;
    border-radius: 0.4rem; margin-bottom: 0.3rem;
    cursor: pointer; user-select: none;
}
.wgroup .group-name-row:hover { background: var(--blue6); }
.wgroup .group-name-row.active { border-left-color: var(--color-primary-light); }
.wgroup .group-view-name { flex: 1; font-size: var(--font-md); font-weight: 600; color: var(--blue1); }
.wgroup .group-view-count { font-size: var(--font-xs); color: var(--blue4); flex-shrink: 0; }
.wgroup .group-followed-unfollow {
    min-height: 28px; min-width: 28px; padding: 0 6px; font-size: var(--font-md); line-height: 1;
    text-align: center; justify-content: center; flex-shrink: 0;
}

/* Admin rename "…" button */
.wgroup .group-rename-btn {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    color: var(--blue4); font-size: var(--font-md); line-height: 1; flex-shrink: 0;
}
.wgroup .group-rename-btn:hover { color: var(--color-primary-light); }

/* Rename inline area */
.wgroup #group-rename-area { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.4rem; }
.wgroup #group-rename-input { min-height: 40px; }

/* Add followed group */
.wgroup .group-add-follow-btn { width: 100%; min-height: 36px; margin-top: 0.4rem; font-size: var(--font-sm); text-align: center; justify-content: center; }
.wgroup #group-add-follow-area { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }

/* Identity setup */
.wgroup .group-setup-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.wgroup #group-name-input {
    flex: 1;
    min-width: 0; /* inputs refuse to shrink below intrinsic width otherwise */
    min-height: 36px;
    padding: 0 0.5rem;
    background: var(--blue7);
    border: 1px solid var(--blue6);
    border-radius: 0.3rem;
    color: var(--blue1);
    font-size: var(--font-sm);
    box-sizing: border-box;
    position: relative;
    font-family: inherit;
}
.wgroup #group-name-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
    z-index: 1;
}
.wgroup input[type="color"]#group-color-input {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid var(--blue6); border-radius: 0.3rem;
    background: none; cursor: pointer; padding: 2px;
}
.wgroup .group-setup-btns {
    display: flex; gap: 0.5rem; margin-top: 0.4rem;
}
/* "With voice" row in the create form — same label/toggle pairing as #group-options */
.wgroup #group-setup-voice {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-top: 0.6rem;
}
.wgroup #group-setup-voice .nav-opt-lbl { font-size: var(--font-sm); color: var(--blue3); }
.wgroup .group-btn-primary {
    flex: 1; min-height: 36px;
    background: var(--color-primary-light); border: none;
    border-radius: 0.4rem; color: #fff;
    font-size: var(--font-sm); font-weight: 600; cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 120ms;
}
.wgroup .group-btn-primary:hover { background: var(--color-primary); }
.wgroup .group-setup-btns .td-btn { flex: 1; min-height: 36px; text-align: center; justify-content: center; }

/* Active group */
.wgroup #group-members-list { margin-bottom: 0.5rem; }
.wgroup .group-member-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: var(--font-sm);
    color: var(--blue2);
}
.wgroup .group-member-me { opacity: 0.7; cursor: pointer; }
.wgroup .group-member-me:hover { opacity: 1; }
.wgroup .group-member-edit-ico { font-size: var(--font-xs); opacity: 0.45; margin-left: auto; }
.wgroup .group-member-dot {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--font-sm); font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.wgroup .group-member-info { flex: 1; display: flex; flex-direction: column; }
.wgroup .group-member-name em { font-style: normal; opacity: 0.5; font-size: var(--font-xs); }
.wgroup .group-member-speed { font-size: var(--font-xs); color: var(--blue4); }
.wgroup .group-active-btns { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.wgroup .group-active-btns .td-btn { flex: 1; min-height: 36px; font-size: var(--font-sm); text-align: center; justify-content: center; }

/* Voice (Discord L0) — an action, so rounded; full width because it is the one
   thing a member does here besides SOS. The edit row below is admin-only. */
.wgroup .group-btn-voice {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%; min-height: 40px; margin-bottom: 0.5rem;
    background: var(--color-primary-light); border: none;
    border-radius: 999px; color: #fff;
    font-size: var(--font-sm); font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background 120ms;
}
.wgroup .group-btn-voice:hover { background: var(--color-primary); }
.wgroup .group-btn-voice .wg-ico { width: 18px; height: 18px; }
.wgroup .group-voice-edit { width: 100%; min-height: 32px; font-size: var(--font-xs); text-align: center; justify-content: center; margin-bottom: 0.5rem; }
.wgroup #group-voice-area { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
/* Help link under the paste field: quiet, it must not compete with Save. */
.wgroup .group-voice-help { font-size: var(--font-xs); color: var(--blue3); text-decoration: underline; align-self: flex-start; margin-top: -0.15rem; }
.wgroup .group-voice-help:hover { color: var(--color-primary); }

/* Map rider markers (marker element itself carries .wgroup) */
.wgroup.rider-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 3000;
}
.wgroup .rider-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: var(--font-lg);
    font-weight: 700;
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.wgroup #group-identity-preview.rider-dot {
    width: 40px; height: 40px;
    font-size: var(--font-xxl);
    flex-shrink: 0;
    cursor: text;
    user-select: text;
}
.wgroup #group-identity-preview.rider-dot:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}
.wgroup #group-identity-preview.rider-dot:empty::before {
    content: '?';
    opacity: 0.45;
}

/* ── Online-required policy: stale dots + reconnect banner + mini toast ── */

/* Positions freeze while offline — dim so nobody rides to a stale dot */
.wgroup .rider-dot.rider-stale { filter: grayscale(60%); opacity: 0.55; }

/* ── Parked riders: last known position, kept on the map ──────────────────────
   .rider-old is PER RIDER (their own fix is old); .rider-stale above is GLOBAL
   (my connection is down). Deliberately two classes: _stale_set() toggles the
   global one wholesale, which would otherwise wipe per-rider ageing on every
   reconnect. They stack harmlessly if both apply. */
.wgroup .rider-dot.rider-old { filter: grayscale(70%); opacity: 0.45; }

/* Age chip under the dot. The marker is already a centred flex column, so this
   just flows underneath it. Dark pill so it stays readable over any map. */
.wgroup .rider-age {
    margin-top: 2px;
    padding: 1px 5px;
    border-radius: 0.6rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}
.wgroup .rider-age.hide { display: none; }

/* Same story in the members list */
.wgroup .group-member-stale .group-member-dot { filter: grayscale(70%); opacity: 0.45; }
.wgroup .group-member-stale .group-member-name { opacity: 0.6; }
/* Mirrors .group-member-speed exactly (it replaces it), so a stale row keeps the
   same shape as a live one — no margin-left:auto, the speed does not use it. */
.wgroup .group-member-age {
    font-size: var(--font-xs);
    color: var(--blue4);
    white-space: nowrap;
}

.wgroup #wgroup-offline {
    position: fixed;
    top: 3.4rem; left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    background: var(--color-warning-bright);
    color: var(--grey0);
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    white-space: nowrap;
}

/* Fallback toast (hosts with their own toast never show this) */
.wgroup #wgroup-toast {
    position: fixed;
    bottom: 1.5rem; left: 50%;
    transform: translateX(-50%);
    z-index: 2600;
    background: var(--blue7);
    color: var(--blue1);
    border: 1px solid var(--blue6);
    font-size: var(--font-sm);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    white-space: nowrap;
}

/* ── Standalone shell chrome (index.html only) ──────────────────────────── */

.wgroup-shell {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--blue8);
    color: var(--blue1);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 16px;
}
.wgroup-shell #topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.8rem;
    height: 52px;
    flex-shrink: 0;
    background: var(--blue8);
    border-bottom: 1px solid var(--blue6);
}
.wgroup-shell .brand { font-weight: 800; letter-spacing: 0.04em; font-size: var(--font-lg); white-space: nowrap; }
.wgroup-shell .brand .brand-module { color: var(--color-primary-light); }
.wgroup-shell #btn-panel-toggle {
    margin-left: auto;   /* people icon anchored right, portrait and landscape alike */
    background: var(--blue7);
    border: 1px solid var(--blue6);
    border-radius: 0.4rem;
    color: var(--blue2);
    min-width: 44px; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.wgroup-shell #btn-panel-toggle:hover { border-color: var(--color-primary-ultralight); color: var(--color-primary-ultralight); }
.wgroup-shell #btn-panel-toggle .wg-ico { width: 1.5rem; height: 1.5rem; }

.wgroup-shell #map-wrap { position: relative; flex: 1; min-height: 0; }
.wgroup-shell #map { position: absolute; inset: 0; }

/* Floating map buttons: ONE ROW, SOS then emergency numbers to its right.
   The ROW is positioned, not the buttons, because the SOS label grows to
   "Cancel SOS" / "SOS abbrechen" while an SOS is live — a hard-coded left
   offset on the neighbour would end up underneath it.
   ⚠ SOS is display:none for non-members (.hide), so the emergency button then
   sits alone at the left edge. Deliberate: no hole where SOS would have been. */
.wgroup-shell #map-btns {
    position: absolute;
    left: 0.75rem; bottom: 1.5rem;
    z-index: 500;
    display: flex; align-items: flex-end; gap: 0.5rem;
}
.wgroup-shell #btn-sos-map {
    min-width: 60px; min-height: 44px;
    background: rgba(12, 24, 41, 0.85);
    color: var(--color-sos);
    border: 2px solid var(--color-sos-strong);
    border-radius: 0.5rem;
    font-size: var(--font-md);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.wgroup-shell #btn-sos-map:hover { background: var(--color-sos-strong); color: var(--grey0); }
.wgroup-shell #btn-sos-map.sos-active { background: var(--color-sos-dark); color: var(--grey0); border-color: var(--color-sos-dark); }

/* Emergency numbers button — sits in #map-btns, to the RIGHT of SOS. Neutral,
   not red: SOS owns the alarm colour, this is reference you read rather than an
   alarm you raise. Always visible, unlike SOS which is member-only. */
.wgroup-shell #btn-emg-map {
    min-width: 60px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 24, 41, 0.85);
    color: var(--blue1);
    border: 2px solid var(--blue5);
    border-radius: 0.5rem;
    cursor: pointer;
}
.wgroup-shell #btn-emg-map:hover { background: var(--blue6); }
.wgroup-shell #btn-emg-map .wg-ico { width: 22px; height: 22px; }

#emg-dialog { display: none; }
#emg-dialog[open] {
    display: flex; flex-direction: column;
    width: min(92vw, 340px); max-height: min(80vh, 620px);
    padding: 0; overflow: hidden;
    border: 1px solid var(--blue6); border-radius: 0.85rem;
    background: var(--blue8); color: var(--blue1);
}
#emg-dialog::backdrop { background: rgba(0,0,0,0.6); }
#emg-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--blue6);
    font-weight: 600;
}
#btn-emg-close {
    background: none; border: none; color: var(--blue1);
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
/* min-height:0 lets this shrink inside the flex column so it scrolls instead of
   being clipped by the dialog's overflow:hidden. */
#emg-dialog #emg-mount { padding: 0.75rem 0.85rem 0.85rem; overflow-y: auto; min-height: 0; }
.emg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.emg-flag { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.emg-picker {
    flex: 1; min-width: 0; padding: 0.4rem 0.5rem;
    border: 1px solid var(--blue6); border-radius: 0.4rem;
    background: var(--blue7); color: var(--blue1); font-size: var(--font-sm);
}
/* Country note. Shown only for the six countries where it changes what you DO.
   ABOVE the numbers on purpose: it tells you which of them to trust. */
.emg-note {
    margin: 0 0 0.5rem;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid var(--color-warning-bright);
    border-radius: 0 0.3rem 0.3rem 0;
    background: var(--blue7);
    font-size: var(--font-sm);
    line-height: 1.35;
}
.emg-list { display: flex; flex-direction: column; gap: 0.3rem; }
.emg-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    min-height: 44px; padding: 0.45rem 0.7rem;
    border: 1px solid var(--blue6); border-radius: 0.5rem;
    background: var(--blue7); color: var(--blue1); text-decoration: none;
}
.emg-row:hover { background: var(--blue6); }
.emg-label { font-size: var(--font-sm); }
.emg-num { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.emg-none { margin: 0.3rem 0; font-size: var(--font-sm); opacity: 0.75; }
.emg-src { margin: 0.55rem 0 0; font-size: 0.72rem; opacity: 0.55; }
.emg-src a { color: inherit; }

/* Panel — floating card over the map */
.wgroup-shell #panel {
    position: absolute;
    top: 60px; right: 0.6rem;
    z-index: 600;
    width: min(340px, calc(100vw - 1.2rem));
    max-height: calc(100% - 76px);
    overflow-y: auto;
    background: var(--blue8);
    border: 1px solid var(--blue6);
    border-radius: 0.75rem;
    padding: 0.8rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    box-sizing: border-box;
}
.wgroup-shell #panel-head { display: flex; justify-content: flex-end; margin: -0.3rem -0.3rem 0.1rem 0; }
.wgroup-shell #btn-panel-close {
    background: none; border: none; cursor: pointer;
    color: var(--blue4); font-size: var(--font-xl); line-height: 1;
    min-width: 32px; min-height: 28px;
}
.wgroup-shell #btn-panel-close:hover { color: var(--color-primary-light); }

.wgroup-shell #panel-footer {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--blue6);
    font-size: var(--font-xs);
    color: var(--blue4);
}
.wgroup-shell .pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.wgroup-shell .pf-row + .pf-row { margin-top: 1rem; }   /* finger space between the two link rows */
/* Install hidden → weathergpx link alone on row 1, pushed right */
.wgroup-shell .pf-row #link-wgpx { margin-left: auto; }
.wgroup-shell #panel-footer a { color: var(--blue3); text-decoration: none; }
.wgroup-shell #panel-footer a:hover { color: var(--color-primary-light); }
.wgroup-shell #lang-row { display: flex; gap: 0.45rem; }
.wgroup-shell #lang-row a { cursor: pointer; text-transform: uppercase; }
.wgroup-shell #lang-row a.active { color: var(--color-primary-light); font-weight: 700; }

/* The shell's offline banner sits below the topbar (52px) — already at 3.4rem. */

@media (max-width: 480px) {
    .wgroup-shell #panel { right: 0.5rem; left: 0.5rem; width: auto; }
}

/* Phone landscape: a 340px card next to the map serves neither — give the
   panel real room, centered just under the topbar (the map has the stage
   anyway once you've joined). */
@media (orientation: landscape) and (max-height: 500px) {
    .wgroup-shell #panel {
        width: min(480px, calc(100vw - 1rem));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 0.5rem;               /* #map-wrap already starts below the topbar */
        max-height: calc(100% - 1rem);
    }
}