/* Expand (js/expand-panel.js): a Race tab's panel in a full-window modal over the Dashboard.
 * The dialog is the panel and its own scroll box; the header stays at its top. Tokens only. */
html.xp-lock, html.xp-lock body { overflow: hidden; }
dialog.xp {
    position: fixed; inset: 24px; width: auto; height: auto; max-width: none; max-height: 100%;
    margin: 0; padding: 0; box-sizing: border-box; overflow: auto; overscroll-behavior: contain;
    background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
    z-index: var(--z-dialog, 10090);
}
dialog.xp::backdrop { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); }
.xp-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.xp-txt { flex: 1 1 240px; min-width: 0; }
.xp-title { margin: 0; padding: 0; border: 0; font-size: 18px; color: var(--text); }
.xp-call { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
.xp-seg[hidden], .xp-call[hidden] { display: none; }
.xp-close { min-height: 32px; }
.xp-body { padding: 16px; min-width: 0; }
.xp-body > .subcontent { display: block; }
.xp-body .table-wrap, .xp-body .wx-stints { max-width: 100%; overflow-x: auto; }
/* The header shows the panel's own headline. */
.xp-body #liveTireHead, .xp-body #liveSchedHead, .xp-body .wx-do { display: none; }
/* The map: its canvas fills the panel. */
.xp-body > .mp-wrap { height: calc(100dvh / var(--z, 1) - 48px - 150px); min-height: 280px; }
.xp-open { margin-left: auto; text-transform: none; letter-spacing: 0; }
@media (max-width: 480px) {
    dialog.xp { inset: 12px; }
    .xp-head { padding: 10px 12px; }
    .xp-body { padding: 12px; }
    .xp-body > .mp-wrap { height: calc(100dvh / var(--z, 1) - 24px - 160px); }
}