/* _content/AspireChatApp.LiveTraffic/Components/Tools/Common/HelpTipComp.razor.rz.scp.css */
/* The "?" help button and its balloon (HelpTipComp.razor). */
.help-tip[b-dw8o59cyu5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.help-tip-button[b-dw8o59cyu5] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-primary);
    background: transparent;
    color: var(--mud-palette-primary);
    font: 700 13px/1 Roboto, Helvetica, Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.help-tip-button:hover[b-dw8o59cyu5],
.help-tip-button.open[b-dw8o59cyu5] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Over the page, invisible: a press outside the balloon closes it. */
.help-tip-backdrop[b-dw8o59cyu5] {
    position: fixed;
    inset: 0;
    z-index: 29;
}

/* Under the button, toward the panel's middle (it sits at a row's end), with a pointer up to the button. */
.help-tip-balloon[b-dw8o59cyu5] {
    position: absolute;
    top: calc(100% + 9px);
    inset-inline-end: -6px;
    z-index: 30;
    width: max-content;
    max-width: min(300px, 78vw);
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}

.help-tip-balloon[b-dw8o59cyu5]::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-end: 11px;
    width: 10px;
    height: 10px;
    background: var(--mud-palette-surface);
    /* Its top-left corner, turned 45 degrees, points up to the button - in either direction of the page. */
    border-left: 1px solid var(--mud-palette-primary);
    border-top: 1px solid var(--mud-palette-primary);
    transform: rotate(45deg);
}
/* _content/AspireChatApp.LiveTraffic/Components/Tools/Common/TwinFeaturePopupComp.razor.rz.scp.css */
/* The clicked 3D Tiles object's popup. Absolutely positioned: the host's globe container must be
   position: relative. */
.twin-feature-popup[b-va2uzo5h44] {
    position: absolute;
    z-index: 12;
    width: 316px;
    max-height: 326px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 3px solid #ffd54f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font-size: 0.78rem;
}

.twin-feature-head[b-va2uzo5h44] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 6px 4px 10px;
}

.twin-feature-titles[b-va2uzo5h44] {
    flex: 1;
    min-width: 0;
}

.twin-feature-title[b-va2uzo5h44] {
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-feature-kind[b-va2uzo5h44] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.twin-feature-rows[b-va2uzo5h44] {
    overflow-y: auto;
    padding: 2px 10px 8px;
}

.twin-feature-row[b-va2uzo5h44] {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.twin-feature-label[b-va2uzo5h44] {
    flex: 0 0 42%;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.twin-feature-value[b-va2uzo5h44] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.twin-feature-note[b-va2uzo5h44] {
    padding: 4px 10px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-style: italic;
}
/* _content/AspireChatApp.LiveTraffic/Components/Tools/LiveTrafficTool/Dialogs/LocationNoticeDialog.razor.rz.scp.css */
/* The location privacy notice over the whole tool (see LocationNoticeDialog.razor) */
.ltn-scrim[b-7n4bmzqrjg] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 10, 20, 0.55);
}

.ltn-dialog[b-7n4bmzqrjg] {
    width: min(520px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 20px 16px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ltn-title[b-7n4bmzqrjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.ltn-intro[b-7n4bmzqrjg] {
    margin: 0 0 8px;
    color: var(--mud-palette-text-secondary);
}

.ltn-points[b-7n4bmzqrjg] {
    margin: 0 0 12px;
    padding-inline-start: 20px;
    line-height: 1.45;
}

.ltn-points li + li[b-7n4bmzqrjg] {
    margin-top: 6px;
}

.ltn-error[b-7n4bmzqrjg] {
    margin-bottom: 10px;
    color: var(--mud-palette-error);
}

.ltn-actions[b-7n4bmzqrjg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ltn-btn[b-7n4bmzqrjg] {
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ltn-btn.primary[b-7n4bmzqrjg] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ltn-btn:disabled[b-7n4bmzqrjg] {
    opacity: 0.6;
    cursor: default;
}
/* _content/AspireChatApp.LiveTraffic/Components/Tools/LiveTrafficTool/LiveTrafficToolComp.razor.rz.scp.css */
/* ================================================================= */
/*               LiveTrafficToolComp.razor.css                    */
/*   Layout of the LiveTrafficTool (RTL aware): PLAN / OPTIONS /   */
/*   ABOUT | toolbar + globe | ROUTE / STOP | chat.                   */
/*                                                                    */
/*   The dstool-* panel rules are a copy of the Adventure tool's: CSS */
/*   isolation is per component, so they cannot be inherited - they   */
/*   are duplicated here deliberately. The planner's own rules (pt-*) */
/*   follow at the end.                                               */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dstool-container[b-xn7h138pfx] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, instruments on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out,
   leaving the LTR layout. */
.dstool-container[dir="rtl"][b-xn7h138pfx] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / globe / instruments panels open at 25% / 50% / 25%
   (flex: 1 / 2 / 1, so the free space is split with the globe getting half).
   A splitter drag writes inline width/min/max, which overrides the flex basis
   and pins that panel — the others keep sharing the remainder. */
.dstool-left-panel[b-xn7h138pfx] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dstool-left-panel[b-xn7h138pfx] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dstool-left-panel.collapsed[b-xn7h138pfx] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-xn7h138pfx] .dstool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-xn7h138pfx] .dstool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* EVERY TAB SCROLLS (user request 2026-10-18: "The tabs in the LiveTrafficTool all need vertical scroll bars to allow user
   scroll down and up"): a tab taller than its panel scrolls up and down in it, never sideways - it was clipped. */
[b-xn7h138pfx] .dstool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Glass-cockpit tab host — the PFD/MFD canvas fills its whole tab panel.
   Without an explicit flex chain the canvas wrapper collapses and the
   instrument is drawn into a sliver at the top of the panel.
   ::deep because MudTabPanel renders the wrapper this div sits in, so that
   wrapper never carries this component's scoped-CSS attribute — styling only
   the inner div leaves an unstretched parent between it and the panel, which
   is exactly what pinned the PFD to 237px inside a 730px tab. */
[b-xn7h138pfx] .dstool-tab-panel > div {
    display: flex;
    flex-direction: column;
    /* At least the panel's height (the MAP and MODEL views fill it), never shrunk below its content - so a long tab
       scrolls rather than being cut off. */
    flex: 1 0 auto;
    min-height: 0;
}

.dstool-display-host[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.dstool-chat-host[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-xn7h138pfx] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-xn7h138pfx] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-xn7h138pfx],
.panel-splitter:active[b-xn7h138pfx] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-xn7h138pfx] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                  CENTER PANEL (Globe + HUD)                        */
/* ----------------------------------------------------------------- */

.dstool-center-panel[b-xn7h138pfx] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    /* Sized by flex, never by its content, so it can be the query container
       the toolbar compacts against (the panel narrows with the splitters and
       the display mode, not just with the window). */
    container: ptool-center / inline-size;
}

.map-toolbar[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
    /* The toolbar holds a button group and a hint chip; on a narrow panel it
       wraps rather than pushing the zoom buttons off the edge. */
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/*              CAMERA-MODE EXCLUSIVE TOGGLE GROUP                    */
/* ----------------------------------------------------------------- */

/* A hand-built segmented control rather than MudButtonGroup: the group
   normalises its children's variant/colour, which is exactly what has to
   DIFFER here — the active segment must read as pressed. Buttons are joined
   by collapsing the borders between them. */
.map-area[b-xn7h138pfx] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* position: relative is load-bearing — the JS helper appends the absolutely
   positioned HUD overlay INSIDE this element, so this is what the HUD's
   inset: 0 resolves against. Without it the HUD would size to the page. */
.map-container[b-xn7h138pfx] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    /* No fixed floor: a 300 px minimum overflowed the globe out of its own
       area on a landscape phone, clipping the glasses frame and the controls. */
    min-height: 0;
    height: 100%;
    /* The globe takes keyboard focus so the flight controls work; the default
       focus ring around the whole 3D view is noise, and the HUD already makes
       it obvious the simulator is live. */
    outline: none;
}

/* ----------------------------------------------------------------- */
/*                  COMPACT TOOLBAR (narrow / touch)                  */
/* ----------------------------------------------------------------- */

/* The keyboard hint means nothing on a touch screen. */
@media (pointer: coarse) {
    [b-xn7h138pfx] .map-toolbar-keys-hint {
        display: none;
    }
}

/* A narrow globe panel: the toolbar wrapped to three rows, which on a
   landscape phone left the globe 179 px of a 290 px panel. Drop the hint and
   the dividers and make the labelled buttons icon-only, so it keeps to one
   row. The label stays in the DOM (font-size 0, not display: none), so the
   buttons keep their accessible names. */
@container ptool-center (max-width: 720px) {
    [b-xn7h138pfx] .map-toolbar-keys-hint,
    [b-xn7h138pfx] .map-toolbar-divider {
        display: none;
    }

    [b-xn7h138pfx] .map-toolbar-labelled {
        min-width: 0;
        padding-inline: 8px;
    }

    [b-xn7h138pfx] .map-toolbar-labelled .mud-button-label {
        font-size: 0;
    }

    [b-xn7h138pfx] .map-toolbar-labelled .mud-button-icon-start {
        margin: 0;
    }
}

/* Narrower still (a portrait phone): zoom and home give way too — the globe
   pinch-zooms on a touch screen. */
@container ptool-center (max-width: 400px) {
    [b-xn7h138pfx] .map-toolbar-zoom {
        display: none;
    }
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-xn7h138pfx]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                  INSTRUMENTS PANEL (host)                          */
/* ----------------------------------------------------------------- */

.dstool-side-panel[b-xn7h138pfx] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and globe panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The host between the panel and the instruments MUST be a bounded flex
   child. Without a rule of its own it sized to its content, and Plotly's
   responsive resize then grew the chart to fit the host that grew to fit the
   chart — an 11,800 px plot clipped by the panel, showing only its legend. */
.dstool-instruments-host[b-xn7h138pfx] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.dstool-chat-panel[b-xn7h138pfx] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate.
   !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.dstool-chat-panel.collapsed[b-xn7h138pfx] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .dstool-chat-panel.collapsed[b-xn7h138pfx] {
    border-right-width: 0;
}

[dir="rtl"] .dstool-chat-panel[b-xn7h138pfx] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL collapsed to a rail (its header button)         */
/* ----------------------------------------------------------------- */

/* The tabs stay MOUNTED (hidden), so the social lists and the journal chart
   keep their state; only the header's expand button shows on the rail. */
.dstool-side-panel[b-xn7h138pfx] {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.dstool-side-panel.collapsed[b-xn7h138pfx] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px !important;
    max-width: 48px;
}

.dstool-side-panel.collapsed > :not(.panel-header)[b-xn7h138pfx] {
    display: none !important;
}

.dstool-side-panel.collapsed .panel-title[b-xn7h138pfx],
.dstool-left-panel.collapsed .panel-title[b-xn7h138pfx] {
    display: none;
}

.dstool-side-panel.collapsed .panel-header[b-xn7h138pfx],
.dstool-left-panel.collapsed .panel-header[b-xn7h138pfx] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* ----------------------------------------------------------------- */
/*                    THE TRANSPORT BAR                               */
/* ----------------------------------------------------------------- */

/* Pedestrian / Driver / Pilot: a segmented control of three icon buttons. */

/* ================================================================= */
/*                    THE PLANNER (pt-*)                              */
/* ================================================================= */

/* A click arms "pick on the globe": the cursor says so. */
.map-container.picking[b-xn7h138pfx] {
    cursor: crosshair;
}

.pt-pick-hint[b-xn7h138pfx] {
    margin-inline-start: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-plan[b-xn7h138pfx],
.pt-options[b-xn7h138pfx],
.pt-route[b-xn7h138pfx],
.pt-board[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
}

/* ---- from / to ---- */
.pt-endpoint[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pt-endpoint-dot[b-xn7h138pfx] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #2e7d32;
}

.pt-endpoint-dot.to[b-xn7h138pfx] {
    border-color: #c62828;
    border-radius: 2px;
}

/* Compact native inputs (the left panel must fit without scrolling). */
.pt-input[b-xn7h138pfx] {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
}

.pt-input:focus[b-xn7h138pfx] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.pt-time[b-xn7h138pfx] {
    flex: 0 0 110px;
    direction: ltr;
}

.pt-suggestions[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-inline-start: 16px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}

.pt-suggestion[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    text-align: start;
    cursor: pointer;
}

.pt-suggestion:hover[b-xn7h138pfx] {
    background: var(--mud-palette-action-default-hover);
}

.pt-suggestion.address[b-xn7h138pfx] {
    color: var(--mud-palette-primary);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pt-suggestion-name[b-xn7h138pfx] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-suggestion-code[b-xn7h138pfx] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}

.pt-swap-row[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 10px;
}

/* ---- when / how ---- */
.pt-section-title[b-xn7h138pfx] {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pt-when[b-xn7h138pfx],
.pt-modes[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pt-chip-toggle[b-xn7h138pfx] {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-chip-toggle.on[b-xn7h138pfx] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pt-mode[b-xn7h138pfx] {
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0.55;
}

.pt-mode.on[b-xn7h138pfx] {
    opacity: 1;
    color: #fff;
    background: var(--pt-mode-color);
    border-color: var(--pt-mode-color);
}

/* A mode button with its on/off checkbox centred underneath. */
.pt-mode-cell[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pt-mode-check[b-xn7h138pfx] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.pt-row[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
}

.pt-row-label[b-xn7h138pfx] {
    flex: 1 1 auto;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ROUTE panel's MAP tab: the top-down viewer fills the tab; its zoom / whole-route buttons over it */
.pt-topmap-wrap[b-xn7h138pfx] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 320px;
}

.pt-topmap[b-xn7h138pfx] {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    border-radius: 6px;
    overflow: hidden;
}

/* At the TOP LEFT in both languages (user, 2026-10-17): at the start side (the right, in Hebrew) they covered Cesium's
   own toolbar there - the base map and projection buttons. */
.pt-topmap-tools[b-xn7h138pfx] {
    position: absolute;
    top: 6px;
    left: 6px;
    right: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(20, 20, 28, 0.75);
}

/* COMMUNITY tab: the location privacy notice's line under the safety alerts (confirmed / not, and its button) */
.pt-notice-ok[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-success);
}

.pt-notice-missing[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-warning);
}

.pt-notice-read[b-xn7h138pfx] {
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    cursor: pointer;
}

/* The MAP tab's 2D / 3D and 3D Tiles (user, 2026-10-18): at the BOTTOM LEFT, over Cesium's attribution line */
.pt-topmap-modes[b-xn7h138pfx] {
    position: absolute;
    left: 6px;
    bottom: 30px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    direction: ltr;
}

.pt-topmap-seg[b-xn7h138pfx],
.pt-topmap-tiles[b-xn7h138pfx] {
    display: flex;
    padding: 2px;
    border-radius: 8px;
    background: rgba(20, 20, 28, 0.75);
}

.pt-topmap-seg button[b-xn7h138pfx],
.pt-topmap-tiles[b-xn7h138pfx] {
    border: 0;
    color: #e8e8f0;
    font: 600 12px/1 inherit;
    cursor: pointer;
}

.pt-topmap-seg button[b-xn7h138pfx] {
    min-width: 34px;
    padding: 6px 8px;
    border-radius: 6px;
    background: transparent;
}

.pt-topmap-seg button.on[b-xn7h138pfx] {
    background: var(--mud-palette-primary);
    color: #fff;
}

.pt-topmap-tiles[b-xn7h138pfx] {
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
}

.pt-topmap-tiles.on[b-xn7h138pfx] {
    background: var(--mud-palette-primary);
    color: #fff;
}

/* Under the ROADS map the 3D Tiles are hidden: the toggle greyed (LiveTrafficToolComp.RoadMap.cs) */
.pt-topmap-tiles:disabled[b-xn7h138pfx] {
    opacity: 0.45;
    cursor: default;
}

/* The map-style segment's icons: as tall as the 2D / 3D labels */
.pt-topmap-seg button[b-xn7h138pfx]  .mud-icon-root {
    display: block;
    font-size: 16px;
}

/* SIMULATE tab: the scenarios' toggle buttons (a sketch and its name), pressed in when chosen - as the mode toggles */
.pt-scenario-toggles[b-xn7h138pfx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 2px;
}

.pt-scenario-toggle[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 6px 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
    color: inherit;
    cursor: pointer;
    transition: transform 0.08s ease;
}

.pt-scenario-toggle:hover[b-xn7h138pfx] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.pt-scenario-toggle.on[b-xn7h138pfx] {
    transform: translateY(3px);
    background: linear-gradient(180deg, color-mix(in srgb, #1e88e5 70%, #000), #1e88e5);
    border-color: color-mix(in srgb, #1e88e5 60%, #fff);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.pt-scenario-toggle:disabled[b-xn7h138pfx] {
    opacity: 0.55;
    cursor: wait;
}

.pt-scenario-sketch[b-xn7h138pfx] {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    background: #23272f;
}

.pt-scenario-name[b-xn7h138pfx] {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

/* A group's "?" (HelpTipComp) at the end of its head */
.pt-help-end[b-xn7h138pfx] {
    margin-inline-start: auto;
    display: inline-flex;
}

/* SIMULATE tab: the scenario's Start / Pause button */

.pt-scenario-start[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: #2e7d32;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.pt-scenario-start.running[b-xn7h138pfx] {
    background: #ef6c00;
}

.pt-scenario-start:disabled[b-xn7h138pfx] {
    opacity: 0.55;
    cursor: wait;
}

/* PLAN tab: "travel by" - public transport or car, a two-button segmented choice */
.pt-travel-by[b-xn7h138pfx] {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.pt-travel-by-option[b-xn7h138pfx] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pt-travel-by-option.on[b-xn7h138pfx] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* COMMUNITY tab: the "show other users" checkbox, its text wrapping instead of being cut */
.pt-row-label.pt-check[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.pt-check input[b-xn7h138pfx] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--mud-palette-primary);
}

.pt-row .pt-input:not(.pt-day):not(.pt-time)[b-xn7h138pfx] {
    flex: 0 0 150px;
}

.pt-feed-status[b-xn7h138pfx],
.pt-stats[b-xn7h138pfx],
.pt-source[b-xn7h138pfx] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.pt-source[b-xn7h138pfx] {
    padding: 0 12px 12px;
}

.pt-empty[b-xn7h138pfx] {
    padding: 16px 4px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ---- option cards ---- */
.pt-card[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: start;
    cursor: pointer;
}

.pt-card.selected[b-xn7h138pfx] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.pt-card-head[b-xn7h138pfx],
.pt-card-foot[b-xn7h138pfx],
.pt-route-summary[b-xn7h138pfx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.pt-card-times[b-xn7h138pfx] {
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.pt-card-duration[b-xn7h138pfx] {
    font-weight: 600;
}

.pt-card-foot[b-xn7h138pfx] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.pt-card-chips[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

[b-xn7h138pfx] .pt-chip-sep {
    color: var(--mud-palette-text-secondary);
}

.pt-chip[b-xn7h138pfx] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 1px 4px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.pt-chip.ride[b-xn7h138pfx] {
    background: var(--pt-chip-color);
    color: #fff;
}

.pt-chip.foot[b-xn7h138pfx] {
    color: var(--mud-palette-text-secondary);
}

.pt-card-tags[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pt-tag[b-xn7h138pfx] {
    font-size: 0.68rem;
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(126, 111, 255, 0.15);
    color: var(--mud-palette-primary);
}

/* ---- the route timeline ---- */
.pt-timeline[b-xn7h138pfx] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.pt-leg[b-xn7h138pfx] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    position: relative;
    padding-bottom: 10px;
}

.pt-leg-time[b-xn7h138pfx] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    direction: ltr;
}

.pt-leg-body[b-xn7h138pfx] {
    border-inline-start: 4px solid var(--pt-chip-color);
    padding-inline-start: 8px;
    min-width: 0;
}

.pt-leg.foot .pt-leg-body[b-xn7h138pfx] {
    border-inline-start-style: dotted;
}

.pt-leg.end .pt-leg-body[b-xn7h138pfx] {
    border-inline-start-color: transparent;
}

.pt-leg-from[b-xn7h138pfx] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pt-leg-what[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
}

.pt-leg-stops summary[b-xn7h138pfx] {
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--mud-palette-primary);
}

.pt-leg-stops ul[b-xn7h138pfx] {
    margin: 2px 0;
    padding-inline-start: 16px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- the stop board ---- */
.pt-board-title[b-xn7h138pfx] {
    font-weight: 700;
    font-size: 0.9rem;
}

.pt-board-actions[b-xn7h138pfx] {
    display: flex;
    gap: 4px;
}

.pt-board-row[b-xn7h138pfx] {
    display: grid;
    grid-template-columns: 44px auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pt-board-time[b-xn7h138pfx] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    direction: ltr;
}

.pt-board-headsign[b-xn7h138pfx] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-board-in[b-xn7h138pfx] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- simulation HUD (over the globe; .map-area is position: relative) ---- */
.pt-sim-hud[b-xn7h138pfx] {
    /* At the bottom of the 3D view (user, 2026-10-16: "move the simulation time panel to the lower part, so it
       will not obscure the directions and the Protector's announcements"), on the left in both languages - the
       globe's compass and full-screen buttons hold the bottom right - above the imagery credits. */
    position: absolute;
    bottom: 34px;
    left: 10px;
    z-index: 10;
    width: min(440px, calc(100% - 20px));
    padding: 8px 10px 4px;
    border-radius: 10px;
    background: rgba(20, 20, 32, 0.84);
    color: #fff;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
}

.pt-sim-row[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-sim-clock[b-xn7h138pfx] {
    flex: 0 0 auto;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.pt-sim-step[b-xn7h138pfx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The time bar: click to jump the trip to that moment (a taller hit area than the 4 px it draws). */
/* The time line (user, 2026-10-14: "a coloured and clickable progress bar showing the simulation's
   progress; clicking it jumps all vehicles to that time"): the legs in their colours, bright where played
   and darkened ahead, a playhead; the bar itself takes the click - its parts let it through, so the
   click's offset is measured on the bar (seekSimulationAt). */
.pt-sim-bar[b-xn7h138pfx] {
    position: relative;
    margin: 6px 0 0;
    padding: 4px 0;
    cursor: pointer;
}

.pt-sim-bar-track[b-xn7h138pfx] {
    position: relative;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

.pt-sim-bar-seg[b-xn7h138pfx] {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

/* The part still to come: darkened (the part played shows the legs' own colours). */
.pt-sim-bar-rest[b-xn7h138pfx] {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    background: rgba(10, 10, 20, 0.62);
    transition: inset-inline-start 0.4s linear;
    pointer-events: none;
}

.pt-sim-bar-head[b-xn7h138pfx] {
    position: absolute;
    top: -2px;
    width: 4px;
    height: 16px;
    margin-inline-start: -2px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    transition: inset-inline-start 0.4s linear;
    pointer-events: none;
}

.pt-sim-bar:hover .pt-sim-bar-track[b-xn7h138pfx] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.pt-sim-bar-times[b-xn7h138pfx] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    opacity: 0.8;
    margin-bottom: 2px;
}

/* Loading the trip and its simulated traffic: progress bars at the bottom of the 3D view,
   so the scene being loaded stays visible behind them. */
.pt-sim-loading[b-xn7h138pfx] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    width: min(360px, calc(100% - 32px));
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(20, 20, 32, 0.88);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.pt-sim-loading-row[b-xn7h138pfx] {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.pt-sim-hud .pt-sim-speed[b-xn7h138pfx] {
    flex: 0 0 120px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.pt-sim-hud[b-xn7h138pfx]  .mud-icon-button,
.pt-sim-hud[b-xn7h138pfx]  .mud-button-root {
    color: #fff;
}

/* ---- PLAN group boxes: where / when / how / preferences ----
   A bordered box per topic, its header an icon in the group's accent colour and a title,
   the accent repeated as a thin bar on the box's inline-start edge (mirrors under RTL). */
.pt-group[b-xn7h138pfx] {
    --pt-group-accent: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 3px solid var(--pt-group-accent);
    border-radius: 6px;
    background: var(--mud-palette-background-gray, rgba(127, 127, 127, 0.04));
}

.pt-group.where[b-xn7h138pfx] { --pt-group-accent: #2e7d32; }
.pt-group.when[b-xn7h138pfx] { --pt-group-accent: #ef6c00; }
.pt-group.how[b-xn7h138pfx] { --pt-group-accent: #1565c0; }
.pt-group.prefs[b-xn7h138pfx] { --pt-group-accent: #7b1fa2; }
.pt-group.you[b-xn7h138pfx] { --pt-group-accent: #00838f; }

/* ---- "You": how I move - four mutually exclusive toggle buttons, raised; the chosen one pressed in ---- */
.lt-transport-label[b-xn7h138pfx] {
    font-size: 12px;
    opacity: 0.75;
    margin: 6px 0 4px;
}

.lt-transport-toggles[b-xn7h138pfx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 4px;
}

.lt-transport-toggle[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 7px 2px 5px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    /* Raised: a lit top edge, a dark ledge under it. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.lt-transport-toggle:hover[b-xn7h138pfx] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.lt-transport-toggle:active[b-xn7h138pfx],
.lt-transport-toggle.on[b-xn7h138pfx] {
    /* Pressed in: sunk by its ledge's height, shaded inside, in its mode's colour. */
    transform: translateY(3px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--lt-mode-color) 70%, #000), var(--lt-mode-color));
    border-color: color-mix(in srgb, var(--lt-mode-color) 60%, #fff);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 rgba(0, 0, 0, 0);
    color: #fff;
}

.lt-transport-icon[b-xn7h138pfx] {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lt-mode-color);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.lt-transport-toggle.on .lt-transport-icon[b-xn7h138pfx] {
    background: rgba(255, 255, 255, 0.22);
}

.lt-transport-name[b-xn7h138pfx] {
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.pt-group-head[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
}

.pt-group-icon[b-xn7h138pfx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--pt-group-accent);
    flex: 0 0 auto;
}

.pt-group-icon[b-xn7h138pfx]  .mud-icon-root {
    font-size: 0.95rem;
}

.pt-group-title[b-xn7h138pfx] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pt-group-accent);
}

/* MODEL tab: the traveller's car in 3D (live_traffic_vehicle_model.js) fills its tab. */
.pt-vehicle-model[b-xn7h138pfx] {
    position: relative;
    flex: 1 1 auto;
    min-height: 380px;
    border-radius: 8px;
    overflow: hidden;
}

/* The PLANNED tab's "show route on 2D / 3D map" buttons: side by side, wrapping on a narrow panel. */
.pt-route-maps[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}

/* The MAP tab's copy of the simulation panel (SimHud(true)): at the bottom of the top view, clear of the camera pad's
   compass in the bottom right corner (cesium_camera_pad.js .gv-campad: right 12px, above the panel - it covered the
   panel's buttons); the 2D / 3D and 3D Tiles buttons lifted above it while a trip plays. */
.pt-sim-hud.pt-sim-hud-top[b-xn7h138pfx] {
    bottom: 26px;
    left: 6px;
    width: min(440px, calc(100% - 72px));
}

.pt-topmap-wrap.sim-on .pt-topmap-modes[b-xn7h138pfx] {
    bottom: 196px;
}

/* The MAP tab's copy of the trip's loading bars (SimLoading(true)): across the top of the top view, under its zoom
   buttons' row. */
.pt-sim-loading.pt-sim-loading-top[b-xn7h138pfx] {
    position: absolute;
    top: 44px;
    bottom: auto;
    left: 6px;
    right: 6px;
    width: auto;
    transform: none;
    z-index: 13;
}

/* THE SPEED LIMIT ON A REAL DRIVE (LiveTrafficToolComp.SpeedLimit.cs): a round road sign - white, a red ring, the limit -
   on the right under the view's globe / base-map buttons, his speed under it; too fast, the sign glows yellow and a banner
   says it. Over the 3D view and in the MAP tab's top view (-top). */
.lt-speed-limit[b-xn7h138pfx] {
    position: absolute;
    top: 64px;
    right: 12px;
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

.lt-speed-limit.lt-speed-limit-top[b-xn7h138pfx] {
    top: 56px;
    right: 8px;
}

.lt-speed-sign[b-xn7h138pfx] {
    width: 58px;
    height: 58px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #ffffff;
    border: 7px solid #d32f2f;
    color: #111111;
    font-weight: 800;
    font-size: 21px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.lt-speed-sign.over[b-xn7h138pfx] {
    animation: lt-speed-halo-b-xn7h138pfx 1s ease-in-out infinite;
}

@keyframes lt-speed-halo-b-xn7h138pfx {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.95), 0 0 18px 8px rgba(255, 214, 0, 0.75); }
    50% { box-shadow: 0 0 0 9px rgba(255, 214, 0, 0.6), 0 0 30px 16px rgba(255, 214, 0, 0.45); }
}

.lt-speed-now[b-xn7h138pfx] {
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(20, 20, 32, 0.85);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.lt-speed-now.over[b-xn7h138pfx] {
    color: #ffd600;
}

.lt-speed-banner[b-xn7h138pfx] {
    max-width: min(280px, calc(100vw - 40px));
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(20, 20, 32, 0.94);
    border: 2px solid #ffd600;
    color: #ffd600;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* THE ROUTE STORY (LiveTrafficToolComp.RouteStory.cs): the PLANNED tab's steps - each a row to press, its leg's colour on
   its inline-start edge, the turn's arrow, the words and the distance to the next step. */
.pt-story-count[b-xn7h138pfx] {
    margin-inline-start: auto;
    font-size: 0.72rem;
    opacity: 0.7;
}

.pt-story-loading[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 4px 0;
}

.pt-story-steps[b-xn7h138pfx] {
    list-style: none;
    margin: 4px 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pt-step[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 4px solid var(--pt-chip-color, var(--mud-palette-primary));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
    text-align: start;
    cursor: pointer;
}

.pt-step:hover[b-xn7h138pfx] {
    background: var(--mud-palette-action-default-hover);
}

.pt-step.selected[b-xn7h138pfx] {
    border-color: var(--mud-palette-primary);
    border-inline-start-color: var(--pt-chip-color, var(--mud-palette-primary));
    background: var(--mud-palette-primary-hover);
}

.pt-step-icon[b-xn7h138pfx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    background: var(--pt-chip-color, var(--mud-palette-primary));
}

/* A roundabout's exit number, on its arrow's corner. */
.pt-step-exit[b-xn7h138pfx] {
    position: absolute;
    inset-block-end: -4px;
    inset-inline-end: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #00b0ff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}

.pt-step-text[b-xn7h138pfx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.pt-step-distance[b-xn7h138pfx] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The MAP tab's own SIMULATE button, after its zoom buttons. */
.pt-topmap-tools[b-xn7h138pfx]  .pt-topmap-simulate {
    margin-inline-start: 4px;
    padding: 2px 10px;
    min-height: 28px;
}

/* MY PLACES (LiveTrafficToolComp.Places.cs): his kept places under From / To - Home and Work first, each a row that
   makes it the destination, with its menu (Home, Work, name, remove). */
.pt-places[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pt-places-head[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pt-places-where[b-xn7h138pfx] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.8;
}

.pt-places-where[b-xn7h138pfx]  .mud-icon-root {
    font-size: 0.9rem;
}

.pt-place[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
}

.pt-place-go[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.pt-place-go:hover[b-xn7h138pfx] {
    background: var(--mud-palette-action-default-hover);
}

.pt-place.named[b-xn7h138pfx]  .pt-place-icon {
    color: var(--mud-palette-primary);
}

.pt-place-text[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pt-place-title[b-xn7h138pfx] {
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-place.named .pt-place-title[b-xn7h138pfx] {
    font-weight: 700;
}

.pt-place-address[b-xn7h138pfx] {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-place-name-input[b-xn7h138pfx] {
    flex: 1 1 auto;
    min-width: 0;
}

.pt-places-more[b-xn7h138pfx] {
    align-self: flex-start;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

/* The one-press destinations under the destination box (Home, Work, his named places). */
.pt-quick-places[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 2px;
    padding-inline-start: 18px;
}

.pt-quick-place[b-xn7h138pfx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 16px;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.pt-quick-place span[b-xn7h138pfx] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-quick-place:hover[b-xn7h138pfx] {
    background: var(--mud-palette-primary-hover);
}

.pt-quick-place.on[b-xn7h138pfx] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* THE PROFILE TAB (LiveTrafficToolComp.Profile.cs): his photo and name, then his fields, then saving. */
.lt-profile[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 4px;
}

.lt-profile-head[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lt-profile-who[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lt-profile-name[b-xn7h138pfx] {
    font-size: 1.1rem;
    font-weight: 700;
}

.lt-profile-handle[b-xn7h138pfx],
.lt-person-handle[b-xn7h138pfx] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.lt-profile-photo-actions[b-xn7h138pfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.lt-file-button[b-xn7h138pfx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    color: var(--mud-palette-primary);
    font-size: 0.82rem;
    cursor: pointer;
    overflow: hidden;
}

.lt-file-button.busy[b-xn7h138pfx] {
    opacity: 0.6;
}

.lt-file-button[b-xn7h138pfx]  .lt-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.lt-profile-fields[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lt-field[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.lt-field textarea[b-xn7h138pfx] {
    resize: vertical;
    font: inherit;
}

.lt-check[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.lt-profile-note[b-xn7h138pfx],
.lt-person-note[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* A FRIEND'S CARD: a window over the tool, the four ways to reach him at its bottom. */
.lt-person-backdrop[b-xn7h138pfx] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.45);
}

.lt-person-card[b-xn7h138pfx] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1401;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px 16px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

.lt-person-card[b-xn7h138pfx]  .lt-person-close {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
}

.lt-person-name[b-xn7h138pfx] {
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.lt-person-facts[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    margin: 6px 0;
    font-size: 0.88rem;
}

.lt-person-facts > div[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lt-person-about[b-xn7h138pfx] {
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    white-space: pre-wrap;
}

.lt-person-actions[b-xn7h138pfx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}

.lt-contact[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.lt-contact.sms[b-xn7h138pfx] { background: #1e88e5; }
.lt-contact.whatsapp[b-xn7h138pfx] { background: #25d366; }
.lt-contact.call[b-xn7h138pfx] { background: #43a047; }
.lt-contact.video[b-xn7h138pfx] { background: #8e24aa; }

.lt-contact.off[b-xn7h138pfx] {
    opacity: 0.35;
    pointer-events: none;
}

/* VOICE COMMANDS (LiveTrafficToolComp.Voice.cs): a round microphone at the bottom centre of each view, above the
   simulation panel's place; what was heard in a bubble above it; red while listening, amber while thinking. */
.lt-voice[b-xn7h138pfx] {
    position: absolute;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.lt-voice-button[b-xn7h138pfx] {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.lt-voice.listening .lt-voice-button[b-xn7h138pfx] {
    background: #e53935;
    animation: lt-voice-pulse-b-xn7h138pfx 1s ease-in-out infinite;
}

.lt-voice.thinking .lt-voice-button[b-xn7h138pfx] {
    background: #fb8c00;
}

@keyframes lt-voice-pulse-b-xn7h138pfx {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6); }
    50% { box-shadow: 0 0 0 12px rgba(229, 57, 53, 0); }
}

.lt-voice-heard[b-xn7h138pfx] {
    max-width: min(320px, 80vw);
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(20, 20, 32, 0.9);
    color: #fff;
    font-size: 0.88rem;
    text-align: center;
}

/* While a trip plays its panel is at the bottom: the microphone above it. */
.pt-topmap-wrap.sim-on .lt-voice-top[b-xn7h138pfx],
.map-area .pt-sim-hud ~ .lt-voice[b-xn7h138pfx] {
    bottom: 150px;
}

/* The traffic-camera alert's distance, beside its checkbox (LiveTrafficToolComp.Cameras.cs). */
.lt-camera-row[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lt-camera-distance[b-xn7h138pfx] {
    width: 80px;
    flex: 0 0 auto;
}

.lt-camera-unit[b-xn7h138pfx] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* THE PHONE'S CAMERA (LiveTrafficToolComp.CameraVision.cs, user 2026-10-22): the CAMERA tab - the video with what it
   sees boxed (live_traffic_vision.js draws it), the counts, the settings and the dash cam. */
.lt-vision[b-xn7h138pfx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.lt-vision-bar[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lt-vision-stat[b-xn7h138pfx] {
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.lt-vision-rec[b-xn7h138pfx] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ff1744;
}

.lt-vision-error[b-xn7h138pfx] {
    font-size: 0.85rem;
    color: var(--mud-palette-error);
}

.lt-vision-view[b-xn7h138pfx] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.lt-vision-canvas[b-xn7h138pfx] {
    width: 100%;
    height: 100%;
    display: block;
}

.lt-vision-idle[b-xn7h138pfx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    color: #cfd8dc;
    font-size: 0.85rem;
    text-align: center;
}

.lt-vision-counts[b-xn7h138pfx] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.lt-vision-privacy[b-xn7h138pfx] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.lt-dashcam-clips[b-xn7h138pfx] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.lt-dashcam-clips li[b-xn7h138pfx] {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lt-dashcam-clips li.on[b-xn7h138pfx] {
    background: var(--mud-palette-action-default-hover);
}

.lt-dashcam-when[b-xn7h138pfx] {
    flex: 1 1 auto;
    font-size: 0.8rem;
}

.lt-dashcam-player[b-xn7h138pfx] {
    width: 100%;
    margin-top: 6px;
    border-radius: 6px;
    background: #000;
}

/* The small camera window over the 3D view (top left - the speed sign and Cesium's buttons hold the top right) and
   over the MAP tab's view (under its zoom buttons). Pressed: the CAMERA tab. */
/* The camera's small window: in the middle of the view's RIGHT edge (user, 2026-10-22: "The camera viewport is obscuring
   the navigation instruction card") - the top left is the turn card's, the top right the globe's buttons, the speed sign
   and the warnings, the bottom the microphone, the compass and the 2D / 3D buttons. */
.lt-cam-pip[b-xn7h138pfx] {
    position: absolute;
    top: 50%;
    right: 8px;
    left: auto;
    transform: translateY(-50%);
    z-index: 8;
    width: min(30%, 200px);
    padding: 0;
    border: 2px solid #00e5ff;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.lt-cam-pip canvas[b-xn7h138pfx] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.lt-cam-pip.lt-cam-pip-top[b-xn7h138pfx] {
    width: min(32%, 170px);
}

/* GeoView users the camera recognises by position (live_traffic_vision.js WHO IT IS) - the community's purple. */
.lt-vision-matched[b-xn7h138pfx] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b388ff;
}

/* PLAN RIDE always in sight (user, 2026-10-23): the button and the timetable line under it stay at the bottom of the
   PLAN tab (its panel, .dstool-tab-panel, is what scrolls) while the groups above scroll beneath them. margin-top: auto
   puts them at the bottom also when the groups are short; the negative side/bottom margins reach .pt-plan's padding. */
.pt-plan-actions[b-xn7h138pfx] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: auto -10px -8px;
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--mud-palette-surface);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.18);
}