:root { font-family: "Segoe UI", system-ui, sans-serif; color: #e7edf2; background: #eef1f3; color-scheme: dark; --panel: #14202b; --border: #ffffff16; --muted: #9fadb9; --accent: #78beb6; --rail: 76px; --gap: 14px; }
.ballast-width { position: fixed; z-index: 7; bottom: 34px; left: calc(var(--hud-map-left, var(--rail)) + (100vw - var(--hud-map-left, var(--rail)) - var(--hud-map-right, 0px)) / 2); transform: translateX(-50%); width: min(300px, calc(100vw - var(--hud-map-left, var(--rail)) - var(--hud-map-right, 0px) - 24px)); padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12px; }
.ballast-width output { color: var(--accent); font-variant-numeric: tabular-nums; }
.ballast-width input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ballast-width input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 13px; }
[hidden] { display: none !important; }
#map { position: fixed; inset: 0; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.surface { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 18px #0003; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: transparent; cursor: pointer; min-height: 36px; border-radius: 6px; padding: 8px 12px; }
button:hover:not(:disabled), summary:hover { background: #ffffff09; }
button:disabled { cursor: default; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button[aria-expanded="true"], #pin-panel[aria-pressed="true"] { color: var(--accent); background: #78beb615; }
.topbar { position: fixed; top: var(--gap); left: var(--gap); right: var(--gap); display: flex; align-items: center; gap: 10px; pointer-events: none; z-index: 4; }
.topbar > * { pointer-events: auto; }
.brand { height: 46px; display: flex; align-items: center; padding: 0 15px; gap: 10px; white-space: nowrap; }
.brand-logo { width: 29px; height: 29px; object-fit: contain; flex: 0 0 auto; }
.brand > span:not(.version) { font-size: 19px; font-weight: 400; letter-spacing: -.6px; }
.brand strong { font-weight: 650; }
.version { font-size: 10px; color: var(--muted); border-left: 1px solid var(--border); padding-left: 9px; }
.search { width: min(370px, 32vw); height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--muted); }
.search input { width: 100%; min-width: 0; background: none; border: 0; font-size: 13px; }
.search input::placeholder { color: #9fadb9; opacity: 1; }
.search { position: relative; }
.search:focus-within { border-color: #78beb680; }
.search input:focus { outline: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { font: 10px "Segoe UI", sans-serif; white-space: nowrap; border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; }
.search-clear { flex-shrink: 0; width: 26px; min-height: 26px; padding: 4px; }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; width: min(460px, calc(100vw - 30px)); color: #e7edf2; overflow: hidden; }
.search-results > p { margin: 0; padding: 12px 14px; font-size: 11px; color: var(--muted); }
#search-list { max-height: min(460px, calc(100dvh - 180px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#search-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 0; text-align: left; border-top: 1px solid var(--border); }
#search-list button[aria-selected="true"], #search-list button:hover { background: #78beb619; }
.search-kind { width: 39px; flex-shrink: 0; font-size: 10px; color: var(--accent); border: 1px solid #78beb640; border-radius: 4px; padding: 4px; text-align: center; }
#search-list button > span:last-child { min-width: 0; }
#search-list strong { display: block; font-size: 13px; font-weight: 600; }
#search-list small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding: 10px 14px; font-size: 10px; color: var(--muted); }
@media (max-width: 760px) { .search-results { width: min(460px, calc(100vw - 140px)); }.search kbd { display: none; } }
@media (max-width: 480px) { .search-results { width: calc(100vw - 20px); }.search-results footer { font-size: 9px; } }
.soon { color: #8e9daa; font-size: 10px; font-weight: 400; white-space: nowrap; letter-spacing: 0; }
.search .soon, .future-action .soon { border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.top-actions button { height: 46px; }
.future-action { display: flex; align-items: center; gap: 9px; color: #aab5be; }
.icon-button { width: 34px; min-height: 34px; padding: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.top-actions .icon-button { width: 46px; }
.tool-rail { position: fixed; top: 76px; left: var(--gap); width: var(--rail); padding: 5px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.tool-rail button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12px 2px; font-size: 10px; min-height: 66px; color: #b9c5cf; }
.tool-rail button[aria-expanded="true"] { color: var(--accent); }
.tool-rail { max-height: calc(100dvh - 175px); overflow-y: auto; scrollbar-width: thin; }
.measure-body { padding-bottom: 16px; }
#measure-panel { z-index: 8; }
.measure-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 2px 0 20px; }
.measure-modes button { display: flex; flex-direction: column; align-items: center; gap: 9px; border: 1px solid var(--border); padding: 13px 2px; font-size: 11px; color: #b9c5cf; }
.measure-modes .icon { width: 25px; height: 25px; }
.measure-modes button[aria-pressed="true"] { color: #f4cd75; background: #f4cd7510; border-color: #f4cd7560; }
.measure-result { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; font-variant-numeric: tabular-nums; }
.measure-result > span:first-child { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
#measure-value { color: #f4cd75; font-size: 31px; line-height: 1.2; font-weight: 500; overflow-wrap: anywhere; }
#measure-secondary { font-size: 11px; color: #bdc9d1; line-height: 1.7; white-space: pre-line; }
.measure-hint { color: #bdc9d1; line-height: 1.65; font-size: 12px; margin: 16px 0; }
.measure-message { color: #f4cd75; font-size: 12px; line-height: 1.6; }.measure-message:empty { display: none; }
.measure-primary { width: 100%; background: #78beb61b; color: var(--accent); border: 1px solid #78beb640; }
.measure-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0; font-size: 12px; }
.measure-actions button { border: 1px solid var(--border); }.measure-body button:disabled { opacity: .4; }
.measure-clear { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; color: var(--muted); font-size: 12px; }.measure-clear .icon { width: 16px; height: 16px; }
.measure-note { font-size: 10px; color: var(--muted); line-height: 1.8; margin: 14px 0 0; }
.measure-handles { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.measure-annotations { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.measure-graduations { position: absolute; inset: 0; fill: none; stroke: #f4cd75; stroke-width: 1.2; pointer-events: none; }
.measure-radius-line { stroke-width: 1; stroke-dasharray: 4 3; }
.measure-label { position: absolute; transform: translate(-50%, -50%); padding: 4px 7px; border-radius: 5px; background: #14202bed; border: 1px solid #f4cd7540; color: #f4cd75; font-size: 11px; line-height: 16px; white-space: pre; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px #0003; pointer-events: none; }
.measure-label-total { font-weight: 600; }.measure-label-tick { font-size: 10px; padding: 1px 4px; border-color: transparent; color: #e6e9eb; background: #14202bdc; }
.measure-handle { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; border: 2px solid #f4cd75; background: #14202b; color: #f4cd75; border-radius: 50%; width: 23px; height: 23px; min-height: 23px; padding: 0; font-size: 10px; cursor: grab; box-shadow: 0 1px 5px #0008; }
.measure-handle:hover { background: #36434b !important; }
.measure-box-resize { width: 18px; height: 18px; min-height: 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.measure-box-resize::after { content: ''; position: absolute; inset: 4px; border: 2px solid #f4cd75; border-radius: 2px; background: #14202b; }
.measure-box-resize:hover { background: transparent !important; }.measure-box-resize:hover::after { background: #f4cd75; }
.measure-box-rotate { width: 25px; height: 25px; min-height: 25px; font-size: 18px; cursor: grab; }
.measure-box-move, .measure-circle-move { width: 25px; height: 25px; min-height: 25px; border-radius: 5px; font-size: 18px; cursor: move; }
.measure-circle-radius { width: 17px; height: 17px; min-height: 17px; }
.measure-rotation-stem { position: absolute; width: 30px; height: 1px; background: #f4cd75; transform-origin: left center; }
.measure-crosshair { cursor: crosshair !important; }
.measure-crosshair.measure-panning { cursor: grabbing !important; }
.measuring .turnout-controls { pointer-events: none; }.measuring .turnout-control { pointer-events: none; }
.drawer { position: fixed; left: calc(var(--gap) + var(--rail) + 12px); top: 76px; width: 316px; max-height: calc(100dvh - 180px); display: flex; flex-direction: column; z-index: 3; }
.drawer-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 18px 17px 14px; flex: 0 0 auto; }
h1, h2 { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin: 0; line-height: 1.3; }
.drawer-heading p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.heading-actions { display: flex; gap: 0; margin: -5px -8px 0 0; }
.drawer-body { padding: 0 17px 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #415361 transparent; overscroll-behavior: contain; }
.layer-group { border-top: 1px solid var(--border); padding: 4px 0; }
summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; padding: 10px 1px; font-weight: 550; border-radius: 5px; min-height: 39px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin: 0 4px; flex-shrink: 0; }
details[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
summary > .soon, .group-count { margin-left: auto; }
.group-count { font-size: 11px; color: var(--accent); font-weight: 400; }
.layer-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 12px; padding: 8px 5px 8px 12px; min-height: 43px; font-size: 12px; }
.layer-toggle:disabled { color: #7f909e; }
.layer-submenu { margin-left: 23px; border-left: 1px solid var(--border); }
.layer-submenu .layer-toggle { font-size: 11px; min-height: 36px; }
.switch { display: block; flex-shrink: 0; width: 31px; height: 18px; background: #41515f; border-radius: 12px; padding: 3px; }
.switch::after { content: ''; display: block; width: 12px; height: 12px; background: #b6c0c8; border-radius: 50%; transition: transform 120ms ease; }
.layer-toggle[aria-pressed="true"] .switch { background: #528f89; }
.layer-toggle[aria-pressed="true"] .switch::after { transform: translateX(13px); background: #ecf8f5; }
.layer-toggle:disabled .switch { opacity: .4; }
.future-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8293a1; padding: 9px 5px 9px 12px; font-size: 11px; }
.panel-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 8px 0 15px; }
.basemaps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 20px; }
.basemaps button { text-align: left; padding: 6px; border: 1px solid var(--border); }
.basemaps button[aria-pressed="true"] { border-color: var(--accent); background: #78beb60c; }
.map-preview { display: block; height: 70px; border-radius: 4px; margin-bottom: 9px; }
.plan-preview { background-color: #b6c5b9; background-image: linear-gradient(28deg, transparent 43%, #e9e5d0 44% 48%, transparent 49%), linear-gradient(114deg, transparent 47%, #ede9dc 48% 52%, transparent 53%), linear-gradient(150deg, transparent 61%, #88acb4 62% 68%, transparent 69%); }
.satellite-preview { background-color: #4b5c46; background-image: linear-gradient(30deg, transparent 43%, #9a9684 44% 46%, transparent 47%), repeating-linear-gradient(110deg, transparent 0 12px, #89937b 13px 17px, transparent 18px 26px); }
.basemap-caption { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.section-label { display: flex; justify-content: space-between; font-size: 13px; padding-top: 16px; border-top: 1px solid var(--border); }
.empty-state { padding: 25px 25px 36px; text-align: center; }
.empty-state > .icon { width: 36px; height: 36px; color: var(--accent); }
.empty-state h3 { font-size: 14px; font-weight: 500; margin-top: 15px; }
.empty-state p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.menu { position: fixed; z-index: 5; top: 76px; right: var(--gap); width: 300px; padding: 0 16px 16px; max-height: calc(100dvh - 100px); overflow: auto; }
.menu .drawer-heading { padding-left: 0; padding-right: 0; }
.menu h2 { font-size: 16px; }
#platform-test { background: #20323e; width: 100%; font-size: 11px; border: 1px solid var(--border); }
.basemap-picker { position: fixed; bottom: 40px; left: var(--gap); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px; min-width: 163px; text-align: left; }
.mini-map { width: 39px; height: 39px; border-radius: 5px; border: 1px solid #ffffff25; }
.picker-caption { display: block; font-size: 9px; color: var(--muted); margin-bottom: 3px; }
.basemap-picker .chevron { width: 14px; height: 14px; margin-left: 8px; transform: rotate(-90deg); }
.view-actions { position: fixed; z-index: 2; right: var(--gap); top: 230px; width: 64px; display: flex; flex-direction: column; align-items: stretch; padding: 3px; }
.view-actions button { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; padding: 6px 4px; min-height: 32px; }
.view-actions .icon { width: 15px; height: 15px; }
.control-divider { height: 1px; width: 40px; align-self: center; background: var(--border); }
#status { position: fixed; z-index: 6; left: 50%; bottom: 40px; transform: translateX(-50%); width: max-content; max-width: min(540px, calc(100% - 32px)); margin: 0; padding: 12px 17px; border: 1px solid #78beb64a; background: var(--panel); box-shadow: 0 4px 18px #0003; border-radius: 8px; color: #dce8ee; font-size: 12px; line-height: 1.5; }
.maplibregl-ctrl-top-right { top: 76px; right: var(--gap); }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
.maplibregl-ctrl-group { border: 1px solid var(--border); background: var(--panel); border-radius: 9px; overflow: hidden; box-shadow: 0 4px 18px #0003 !important; }
.maplibregl-ctrl-group button { width: 36px; height: 36px; border-color: var(--border) !important; }
.maplibregl-ctrl-group button:hover { background-color: #ffffff0b; }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(.85); }
.maplibregl-ctrl-top-right .maplibregl-ctrl-group { width: 64px; display: flex; flex-direction: column; align-items: center; border: 0; background: none; overflow: visible; box-shadow: none !important; }
.maplibregl-ctrl-top-right .maplibregl-ctrl-group button { background-color: var(--panel); box-shadow: 0 3px 12px #0003; }
.maplibregl-ctrl-top-right .maplibregl-ctrl-group button:hover { background-color: #20323e; }
.maplibregl-ctrl-top-right button.maplibregl-ctrl-zoom-in { border-radius: 8px 8px 0 0; }
.maplibregl-ctrl-top-right button.maplibregl-ctrl-zoom-out { border-radius: 0 0 8px 8px; }
.maplibregl-ctrl-top-right button.maplibregl-ctrl-compass { order: -1; width: 64px; height: 64px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 50%; }
.maplibregl-ctrl-top-right button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { filter: none; background-size: 64px 64px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='26' fill='none' stroke='%23687f8d' stroke-opacity='.55'/%3E%3Cpath d='M8 32h4m40 0h4M32 52v4M15 15l3 3m28 28 3 3M15 49l3-3m28-28 3-3' stroke='%23687f8d' stroke-opacity='.65'/%3E%3Ctext x='32' y='17' text-anchor='middle' fill='%23e7edf2' font-family='Segoe UI,Arial,sans-serif' font-size='13'%3EN%3C/text%3E%3Cpath d='m32 23-8 20 8-4 8 4Z' fill='%2378beb6'/%3E%3C/svg%3E"); }
.maplibregl-ctrl-attrib { font-size: 10px; color: #d4dde3; background: #14202bef !important; }
.maplibregl-ctrl-attrib a { color: #d4dde3; }
.maplibregl-ctrl-attrib-button { filter: invert(.8); }
.maplibregl-ctrl-scale { color: #d4dde3; background: #14202bef; border-color: #d4dde3; font-size: 10px; }
@media (max-width: 760px) {
:root { --gap: 10px; --rail: 64px; }
.brand { padding: 0 10px; }.brand > span { display: none; }
.search { flex: 1; width: auto; max-width: 370px; }.future-action .soon { display: none; }
.drawer { width: min(316px, calc(100vw - 142px)); }
.view-actions { right: 10px; }
#status { bottom: 105px; }
}
@media (max-width: 480px) {
.topbar { gap: 6px; }.brand { display: none; }.search { padding: 0 9px; }.search .soon { display: none; }
.top-actions { gap: 5px; }.future-action { padding: 6px 9px; font-size: 11px; }.future-action .icon { display: none; }
.drawer { left: 84px; width: calc(100vw - 94px); z-index: 4; }.drawer-heading { padding: 14px 12px; }.drawer-body { padding: 0 12px 8px; }
.menu { width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

/* Scene library and geographic editor. */
.scenes-action { display: flex; align-items: center; gap: 9px; }
.scenes-action[aria-expanded="true"] { background: #20383f; }
.scene-panel { position: fixed; z-index: 5; top: 76px; right: 94px; width: 288px; max-height: calc(100dvh - 170px); overflow-y: auto; }
.scene-panel .drawer-heading { align-items: center; padding-bottom: 17px; }
.scene-panel h2 { font-size: 17px; }
.scene-body { padding: 0 17px; }
.scene-transfer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
#scene-transfer-tools details { margin: 12px 0; font-size: 12px; color: var(--muted); }
#scene-transfer-tools summary { cursor: pointer; margin-bottom: 8px; }
#scene-transfer-tools button { font-size: 12px; }
.scene-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: #0c1721; border-radius: 8px; margin-bottom: 18px; }
.scene-modes button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 5px; font-size: 12px; color: var(--muted); border: 1px solid transparent; }
.scene-modes button[aria-pressed="true"] { background: #20383f; color: #a3ded4; border-color: #78beb63d; }
.scene-primary { width: 100%; background: #78beb6; color: #102a2c; font-weight: 650; min-height: 40px; }
.scene-primary:hover:not(:disabled) { background: #98d3ca; }
.scene-primary:disabled { background: #293d46; color: #8298a0; }
.scene-secondary { width: 100%; color: var(--muted); margin-top: 5px; font-size: 12px; }
.scene-stats { border-top: 1px solid var(--border); padding-top: 15px; margin: 14px 0 0; }
.scene-stats div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 12px; }
.scene-stats dt { color: var(--muted); }.scene-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.scene-edit-actions { display: flex; justify-content: flex-end; margin: 6px -7px; }
.scene-edit-actions button { color: var(--muted); font-size: 11px; padding: 7px; }.scene-edit-actions button:disabled { opacity: .4; }
#scene-error { color: #edb5a9; font-size: 12px; line-height: 1.5; margin: 8px 0 14px; }
.scene-footer { padding: 14px 17px 17px; border-top: 1px solid var(--border); }
.scene-bar, .scene-chip { position: fixed; z-index: 5; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 6px 8px; white-space: nowrap; }
.scene-bar > span { padding: 0 10px; color: var(--accent); font-size: 12px; min-width: 95px; }
.scene-bar button { font-size: 12px; }.scene-bar kbd { margin-left: 7px; font: 10px "Segoe UI", sans-serif; color: var(--muted); }
.scene-chip { gap: 12px; padding-left: 15px; }.scene-chip > .icon { color: var(--accent); width: 18px; }.scene-chip > span { font-size: 12px; }.scene-chip > button:not(.icon-button) { color: var(--accent); font-size: 12px; border-left: 1px solid var(--border); border-radius: 0; }
.scene-handles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-handle { position: absolute; pointer-events: auto; width: 14px; height: 14px; min-height: 0; padding: 0; border: 2px solid #14202b; outline: 1px solid #78beb6; background: #b4eee3; border-radius: 50%; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.scene-handle:hover, .scene-handle.selected { background: white; box-shadow: 0 0 0 4px #78beb640; }
.scene-midpoint { width: 9px; height: 9px; background: #548c87; cursor: copy; }
.scene-crosshair { cursor: crosshair !important; }
@media (max-width: 760px) { .scene-panel { right: 84px; width: min(288px, calc(100vw - 100px)); }.scene-bar, .scene-chip { bottom: 105px; }.scenes-action { padding: 8px 10px; } }
@media (max-width: 480px) { .scenes-action .icon { display: none; }.scene-bar { max-width: calc(100vw - 20px); gap: 0; }.scene-bar > span { min-width: auto; padding: 0 5px; }.scene-bar button { padding: 7px; }.scene-bar kbd { display: none; } }

.scene-name-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.scene-name { width: 100%; background: #0c1721; border: 1px solid #ffffff24; border-radius: 6px; padding: 10px 11px; margin-bottom: 18px; outline: none; }
.scene-name:focus { border-color: var(--accent); }.scene-name::placeholder { color: #8495a0; }
.scene-message { color: #edb5a9; font-size: 12px; line-height: 1.5; margin: 12px 0; }
.scenes-empty { color: var(--muted); text-align: center; padding: 25px 0; font-size: 12px; }
#scenes-list { margin: 17px 0; }
.saved-scene { padding: 15px 0; border-top: 1px solid var(--border); }
.saved-scene > strong { display: block; overflow-wrap: anywhere; font-weight: 550; font-size: 13px; line-height: 1.5; }
.saved-scene > div { display: flex; gap: 8px; margin: 10px 0 0; }
.saved-scene button { font-size: 12px; padding: 6px 12px; min-height: 32px; }
.saved-scene button:first-child { background: #78beb61b; color: #a3ded4; }.saved-scene button:last-child { color: var(--muted); }
.saved-scene .scene-trash { margin-left: auto; padding: 6px; width: 32px; color: var(--muted); }
.saved-scene .scene-trash:hover { color: #edb5a9; background: #edb5a914; }
.scene-trash .icon { width: 18px; height: 18px; }
.scene-delete-dialog { width: min(360px, calc(100vw - 32px)); padding: 23px; background: var(--panel); color: #e7edf2; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 60px #0006; }
.scene-delete-dialog::backdrop { background: #071018a6; }
.scene-delete-dialog > p { overflow-wrap: anywhere; line-height: 1.5; color: var(--muted); margin: 15px 0 23px; }
.scene-delete-dialog > div { display: flex; justify-content: flex-end; gap: 8px; }
#scene-delete-confirm { background: #a54443; color: white; }#scene-delete-confirm:hover:not(:disabled) { background: #b64d4c; }
.scene-workspace { display: flex; align-items: center; height: 46px; gap: 14px; padding: 0 15px 0 4px; min-width: 0; max-width: min(650px, calc(100vw - 175px)); }
.scene-workspace > div { min-width: 0; }.scene-workspace small { display: block; font-size: 9px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px; }.scene-workspace strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 550; }
.scene-workspace > button { white-space: nowrap; font-size: 12px; color: var(--muted); }
.workspace-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.scene-workspace-tools { position: fixed; z-index: 3; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 5px; gap: 5px; }
.scene-workspace-tools button { font-size: 12px; }.scene-workspace-tools button:last-child { color: var(--accent); }
.in-scene #view-france, .in-scene .view-actions > .control-divider { display: none; }
@media (max-width: 760px) { .scene-workspace { gap: 8px; padding-right: 10px; }.scene-workspace-tools { bottom: 105px; } }
/* Docked scene workspace; the regional HUD retains its original layout. */
.scene-only { display: none; }
.view-actions > .scene-only { display: none; }
.in-scene .view-actions > .scene-only { display: flex; }
body.in-scene { --hud-top: 64px; --hud-map-left: var(--rail); --hud-map-right: 0px; background: var(--panel); }
.in-scene.scene-panel-open { --hud-map-left: calc(var(--rail) + var(--hud-work-width, 360px)); }
.in-scene.scene-inspector-open { --hud-map-right: var(--hud-inspector-width, 300px); }
.in-scene #map { inset: var(--hud-top) var(--hud-map-right) 0 var(--hud-map-left); }
.in-scene .topbar { top: 0; left: 0; right: 0; height: var(--hud-top); padding: 9px 14px; gap: 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
.in-scene .topbar > .brand, .in-scene .topbar > .search { display: flex; }
.in-scene .brand { border: 0; box-shadow: none; background: none; padding-left: 0; }
.in-scene .search { width: clamp(190px, 23vw, 330px); }
.in-scene .scene-workspace { flex: 1; border: 0; background: none; box-shadow: none; padding-right: 0; gap: 9px; max-width: 500px; }
.scene-title-menu { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 7px; text-align: left; }
.scene-title-menu > span { min-width: 0; }.scene-title-menu .icon { width: 13px; transform: rotate(90deg); }
.scene-workspace .scene-title-menu strong { color: #e7edf2; font-size: 13px; font-weight: 600; }.scene-workspace .scene-title-menu small { color: var(--accent); }
.scene-saved { font-size: 15px; color: var(--accent); }
.in-scene .scene-only { display: flex; }
.in-scene .scene-rail-tools { flex-direction: column; gap: 4px; }
.in-scene .tool-rail { left: 0; top: var(--hud-top); bottom: 0; padding: 8px 5px; max-height: none; border-radius: 0; border: 0; border-right: 1px solid var(--border); box-shadow: none; overflow-y: auto; scrollbar-width: thin; }
.scene-rail-divider { height: 1px; background: var(--border); margin: 8px 9px; }
.in-scene [data-panel="models-panel"] { display: flex; }
.in-scene .drawer { left: var(--rail); top: var(--hud-top); bottom: 0; width: var(--hud-work-width, 360px); max-height: none; border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.in-scene .drawer-heading { align-items: center; padding: 17px 18px; min-height: 64px; }.in-scene .drawer-heading h1, .in-scene .drawer-heading h2 { font-size: 19px; }
.in-scene .drawer-body { padding: 0 18px 15px; }
.hud-toolbar { padding: 0 18px 14px; flex-shrink: 0; }
.hud-search { display: flex; align-items: center; gap: 9px; border: 1px solid #ffffff25; background: #0c172180; border-radius: 6px; padding: 9px 11px; margin: 0 0 13px; }
.hud-search .icon { width: 17px; height: 17px; color: var(--muted); }.hud-search input { width: 100%; min-width: 0; border: 0; background: none; outline: none; font-size: 12px; }.hud-search:focus-within { border-color: var(--accent); }.hud-search input::placeholder { color: var(--muted); }.hud-search input:disabled { opacity: .55; }
.hud-segments { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.hud-segments button { font-size: 11px; padding: 7px 12px; min-height: 32px; border: 1px solid #ffffff20; border-radius: 5px; }
.hud-segments button[aria-pressed="true"] { background: #78beb6; border-color: #78beb6; color: #102a2c; font-weight: 600; }
.hud-segments button:disabled, .hud-button-grid button:disabled, .hud-wide:disabled, .hud-playback :disabled { color: #8799a5; opacity: .6; cursor: default; }
.hud-scroll { flex: 1; min-height: 0; }.hud-empty { color: var(--muted); font-size: 12px; padding: 15px 3px; margin: 0; line-height: 1.5; }.hud-pending { padding: 25px 0; text-align: center; }
.hud-footer { padding: 14px 18px 17px; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.hud-footer > span { color: var(--muted); font-size: 11px; }.hud-footer > button:not(.scene-primary) { border: 1px solid #78beb64a; color: var(--accent); min-height: 38px; }
.hud-label { display: block; font-size: 10px; color: var(--muted); letter-spacing: .8px; margin: 0 0 10px; }
.hud-button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0; }.hud-button-grid button, .hud-wide { border: 1px solid #ffffff20; font-size: 12px; }.hud-wide { width: 100%; margin: 8px 0; }
.hud-playback { display: flex; align-items: center; gap: 6px; }.hud-playback button, .hud-playback select { background: #0c1721; border: 1px solid #ffffff20; padding: 7px; font: inherit; min-width: 0; border-radius: 5px; }.hud-playback select { flex: 1; }
.content-group { border-top: 1px solid var(--border); }.content-group summary { font-size: 13px; padding: 13px 0; }.hud-count { margin-left: auto; color: var(--muted); background: #ffffff09; border-radius: 4px; padding: 2px 7px; font-size: 11px; }
.content-row { display: flex; gap: 3px; align-items: center; border-top: 1px solid #ffffff0b; }.content-select { flex: 1; min-width: 0; text-align: left; padding: 12px 8px; border-left: 3px solid transparent; border-radius: 0; }.content-select[aria-pressed="true"] { border-color: var(--accent); background: #78beb61b; }.content-select strong { display: block; font-size: 12px; overflow-wrap: anywhere; }.content-select small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }
.scene-inspector { position: fixed; right: 0; top: var(--hud-top); bottom: 0; width: var(--hud-inspector-width, 300px); z-index: 3; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.scene-inspector .drawer-body { overflow-y: auto; }.scene-inspector .drawer-heading { align-items: flex-start; }.scene-inspector .hud-label { margin-bottom: 8px; }.scene-inspector .drawer-heading h2 { font-size: 17px; overflow-wrap: anywhere; }.inspector-actions { grid-template-columns: repeat(3, 1fr); gap: 5px; }.inspector-actions button { padding: 8px 2px; font-size: 11px; }
.inspector-properties { margin: 0; padding: 0 5px 10px; font-size: 12px; }.inspector-properties > div { display: flex; justify-content: space-between; margin: 12px 0; }.inspector-properties dt { color: var(--muted); }.inspector-properties dd { margin: 0; }
.inspector-toggle { position: fixed; right: calc(var(--hud-map-right) + 14px); bottom: 40px; z-index: 3; gap: 6px; align-items: center; font-size: 11px; }.inspector-toggle .icon { width: 16px; height: 16px; }
.hud-resizer { position: fixed; top: var(--hud-top); bottom: 0; width: 7px; z-index: 5; cursor: col-resize; touch-action: none; }.hud-resizer::after { content: '⋮'; position: absolute; top: 50%; left: 0; color: #8295a2; padding: 8px 0; background: #20313b; border-radius: 3px; }.hud-resizer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#scene-left-resize { left: calc(var(--hud-map-left) - 3px); }#scene-right-resize { right: calc(var(--hud-map-right) - 3px); }
.in-scene:not(.scene-panel-open) #scene-left-resize, .in-scene:not(.scene-inspector-open) #scene-right-resize { display: none; }
.in-scene .maplibregl-ctrl-top-right { top: 14px; }.in-scene .view-actions { top: calc(var(--hud-top) + 154px); right: calc(var(--hud-map-right) + 14px); width: 74px; }.in-scene .view-actions button { font-size: 10px; }
.in-scene .basemap-picker { left: calc(var(--hud-map-left) + 14px); }.in-scene #status { left: calc(var(--hud-map-left) + (100vw - var(--hud-map-left) - var(--hud-map-right)) / 2); }
.scene-actions-menu > button, .scene-orientation-menu > button { display: block; width: 100%; text-align: left; }.scene-actions-menu > button:disabled, .scene-orientation-menu > button:disabled { color: #7c8c98; }
.in-scene .scene-actions-menu { top: var(--hud-top); right: auto; left: min(680px, calc(100vw - 285px)); width: 260px; }.in-scene .scene-orientation-menu { top: calc(var(--hud-top) + 254px); right: calc(var(--hud-map-right) + 14px); width: 230px; }
@media (max-width: 1200px) { .in-scene .brand > span { display: none; }.in-scene .brand { padding-right: 0; }.in-scene .scene-workspace { max-width: 360px; }.in-scene .search { width: 220px; } }
@media (max-width: 900px) { .in-scene { --hud-map-right: 0px !important; }.in-scene .scene-inspector { width: min(320px, calc(100vw - var(--rail))); z-index: 6; }.in-scene #scene-right-resize { display: none; } }
@media (max-width: 760px) {
body.in-scene { --hud-top: 112px; --hud-map-left: var(--rail); }
.in-scene .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 40px; gap: 8px; padding: 7px 10px; }.in-scene .topbar > .brand { display: none; }.in-scene .topbar > .search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; height: 40px; }.in-scene .scene-workspace { grid-column: 1; grid-row: 1; max-width: 100%; padding: 0; height: 44px; gap: 3px; }.in-scene .top-actions { grid-column: 2; grid-row: 1; }.in-scene .top-actions button { height: 40px; }.in-scene .scene-workspace > button { padding: 5px; }.in-scene .scene-workspace .scene-title-menu strong { font-size: 11px; }.in-scene .scene-workspace .workspace-divider, .in-scene .scene-saved { display: none; }
.in-scene .drawer { width: min(var(--hud-work-width, 360px), calc(100vw - var(--rail))); z-index: 5; }.in-scene .scene-inspector { top: var(--hud-top); }.in-scene .hud-resizer { display: none; }.in-scene .basemap-picker { min-width: 120px; bottom: 45px; }.in-scene .basemap-picker .picker-caption, .in-scene .basemap-picker .chevron { display: none; }.in-scene .inspector-toggle { bottom: 105px; }.in-scene .scene-actions-menu { left: 10px; }.in-scene.scene-panel-open .basemap-picker { display: none; }
}

.work-compose-open { width: 100%; margin: 0 0 16px; padding: 12px; border: 1px solid #78beb65c; background: #78beb614; color: var(--accent); font-size: 13px; text-align: left; }
.work-compose-open:hover { border-color: var(--accent); }
.work-config { border-top: 1px solid var(--border); padding-top: 17px; margin-top: 6px; }
.work-config h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.work-variant { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.work-variant select { width: 100%; min-width: 0; padding: 9px; font: inherit; background: #0c1721; color: #e7edf2; border: 1px solid #ffffff25; border-radius: 6px; }
.work-model-variant, .work-model-length { margin: 9px 0; color: var(--muted); font-size: 12px; }
.work-model-length { text-align: right; font-variant-numeric: tabular-nums; }
.work-models { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.work-models .engine-card { padding: 9px 11px; border-radius: 6px; }
.work-models .engine-card strong { font-size: 13px; }
.ttx-dialog { width: min(1180px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid #3c5260; border-radius: 12px; background: var(--panel); color: #e7edf2; box-shadow: 0 24px 100px #0008; }
.ttx-dialog[open] { display: flex; flex-direction: column; }
.ttx-dialog::backdrop { background: #071018b8; }
.ttx-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ttx-heading h2 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -.4px; }
.ttx-heading p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.ttx-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 270px; min-height: 0; overflow-y: auto; }
.ttx-assembly { min-width: 0; padding: 20px 24px; background: #10202b; }
.ttx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ttx-toolbar > span { color: var(--muted); font-size: 12px; }
.ttx-toolbar > div, .ttx-selection > div, .ttx-footer > div { display: flex; flex-wrap: wrap; gap: 7px; }
.ttx-dialog button:not(.icon-button) { border: 1px solid #ffffff25; }
.ttx-dialog button:disabled { opacity: .45; }
.ttx-dialog select:focus-visible, .work-variant select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ttx-preview { height: clamp(170px, 29vh, 310px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.ttx-preview .icon { width: 36px; height: 36px; opacity: .55; }
.ttx-preview { position: relative; overflow: hidden; touch-action: none; }
.ttx-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#ttx-preview-empty { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: center; pointer-events: none; }
.ttx-composition { justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: thin; overscroll-behavior-x: contain; }
.ttx-composition > span { width: 100%; text-align: center; }
.ttx-element { flex: 0 0 160px; display: flex; flex-direction: column; gap: 5px; align-self: stretch; text-align: left; min-width: 0; background: #182e3b; border: 1px solid #ffffff25; padding: 10px; user-select: none; }
.ttx-element strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.ttx-element span, .ttx-element small { font-size: 11px; color: var(--muted); }
.ttx-element[aria-pressed="true"] { border-color: #ffd400; background: #ffd4000a; }
.ttx-dialog .ttx-element[aria-pressed="true"] { border-color: #ffd400; }
.ttx-element strong { color: #e7edf2; }
.ttx-dialog .ttx-composition { justify-content: flex-start; }
.ttx-selected-fields { flex-wrap: wrap; align-items: center; min-width: 0; }
.ttx-selected-fields > span { font-size: 12px; }
.ttx-selected-fields select { min-width: 0; max-width: 230px; background: #0c1721; color: #e7edf2; border: 1px solid #ffffff25; border-radius: 6px; padding: 8px; font: inherit; font-size: 12px; }
.ttx-message { margin: 0; padding: 12px 24px; border-top: 1px solid var(--border); color: #f4c7a2; font-size: 12px; }
.ttx-view[aria-pressed="true"], #ttx-view[aria-pressed="true"] { color: var(--accent); background: #78beb61c; }
.ttx-composition { min-height: 88px; display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.ttx-selection { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; }
.ttx-selection > span { font-size: 12px; color: var(--muted); }
.ttx-selection button { font-size: 12px; padding: 7px 10px; }
.ttx-library { min-width: 0; padding: 22px 20px; border-left: 1px solid var(--border); }
.ttx-library h3 { margin: 0 0 20px; font-size: 16px; font-weight: 600; }
.ttx-field { display: grid; gap: 7px; margin: 0 0 15px; }
.ttx-field > span { font-size: 11px; color: var(--muted); }
.ttx-field select { width: 100%; min-width: 0; max-width: 100%; background: #0c1721; color: #e7edf2; border: 1px solid #ffffff25; border-radius: 6px; font: inherit; font-size: 12px; padding: 10px 8px; text-overflow: ellipsis; }
.ttx-single-variant { color: var(--muted); font-size: 12px; margin: 6px 0 15px; }
.ttx-library-length { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; margin: 20px 0; }
.ttx-library > button { width: 100%; }
.ttx-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
.ttx-footer > span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.ttx-footer .scene-primary { width: auto; }
@media (max-width: 900px) { .ttx-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }.ttx-workspace { grid-template-columns: minmax(0, 1fr) 240px; }.ttx-assembly { padding: 18px; }.ttx-preview { height: 180px; } }
@media (max-width: 640px) { .ttx-workspace { grid-template-columns: minmax(0, 1fr); }.ttx-library { border-left: 0; border-top: 1px solid var(--border); padding: 18px; }.ttx-library h3 { margin-bottom: 14px; }.ttx-preview { height: 140px; }.ttx-heading { padding: 16px 18px; }.ttx-heading h2 { font-size: 19px; }.ttx-footer { padding: 14px 18px; }.ttx-footer > div { margin-left: auto; }.ttx-toolbar { flex-wrap: wrap; }.ttx-selection > div { width: 100%; }.ttx-library-length { margin: 12px 0; } }
.engine-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; color: var(--muted); font-size: 12px; }
.engine-option select { min-width: 0; max-width: 65%; border: 1px solid var(--border); background: #0c1721; color: #8799a5; padding: 7px; border-radius: 5px; font: inherit; }
/* Trains: catalogue cards, livery chips, placement bubble and cursors (trains.js). */
.engine-cards { display: grid; gap: 8px; padding: 6px 0 10px; }
.engine-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 13px; border: 1px solid #ffffff1c; border-radius: 8px; background: #0c172166; transition: border-color .12s, background .12s; }
.engine-card strong { display: block; font-size: 14px; font-weight: 600; }
.engine-card > span:first-child { min-width: 0; }
.engine-card small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-card[aria-pressed="true"] { border-color: var(--accent); background: #78beb612; }
.engine-card-liveries { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 96px; }
.livery-swatch { display: inline-flex; width: 22px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px #ffffff2b; flex: 0 0 auto; }
.livery-swatch > span { flex: 1; }
.engine-field { display: block; margin: 12px 0 14px; }
.engine-field .hud-label { margin-bottom: 7px; }
.engine-field select { width: 100%; border: 1px solid #ffffff25; background: #0c1721; color: #e7edf2; padding: 8px 9px; border-radius: 6px; font: inherit; font-size: 12px; }
.engine-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.livery-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.livery-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 10px 5px 6px; border: 1px solid #ffffff20; border-radius: 15px; font-size: 11px; }
.livery-chip[aria-checked="true"] { border-color: var(--accent); background: #78beb61c; color: #e7f6f3; }
.engine-note { margin: 4px 0 6px; font-size: 11px; color: var(--muted); }
.hud-button-grid button.danger:not(:disabled) { color: #ff9b94; border-color: #ff9b9440; }
.train-hint { position: fixed; z-index: 4; top: 72px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 9px 14px; font-size: 12px; border-radius: 18px; white-space: nowrap; pointer-events: none; }
.in-scene .train-hint { top: calc(var(--hud-top) + 14px); left: calc(var(--hud-map-left) + (100vw - var(--hud-map-left) - var(--hud-map-right)) / 2); }
.train-hint[data-tone="warning"] { border-color: #e9b45a70; color: #f3d6a0; }
.train-hint-keys { color: var(--muted); font-size: 11px; }
.train-hint.message-only .train-hint-keys { display: none; }
.train-hint kbd { font: 10px "Segoe UI", sans-serif; border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; margin: 0 2px 0 6px; color: #e7edf2; }
.maplibregl-canvas.placing-train { cursor: crosshair; }
.maplibregl-canvas.over-train { cursor: grab; }
.maplibregl-canvas.dragging-train { cursor: grabbing; }
.livery-chip.plain { padding-left: 11px; }
.engine-switch { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 10px 11px; border: 1px solid #ffffff1c; border-radius: 8px; font-size: 12px; cursor: pointer; }
.engine-switch input { accent-color: #78beb6; width: 16px; height: 16px; margin: 0; }
.engine-switch:has(input:checked) { border-color: #78beb666; background: #78beb60f; }

.turnout-controls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.turnout-control { position: absolute; pointer-events: auto; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--turnout-scale, 1)); background: none; touch-action: none; }
.turnout-control svg { display: block; width: 32px; height: 32px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.turnout-control.junction, .turnout-control.junction svg { width: 44px; height: 44px; }
.turnout-control .background { stroke: #122630; stroke-width: 5px; }.turnout-control .active { stroke: #95e2d3; stroke-width: 2.8px; }
.turnout-control.diverging .active { stroke: #f1ce8b; }.turnout-control.occupied .active { stroke: #e9a69a; }
.turnout-control.unavailable .background { stroke: #d8ad78; stroke-width: 2px; stroke-dasharray: 2 3; }
.turnout-control:hover { background: #14202b80; }.turnout-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.turnout-choices { display: flex; gap: 8px; margin: 12px 0 20px; }.turnout-choices button { flex: 1; border: 1px solid #ffffff25; color: var(--muted); font-size: 12px; }
.turnout-choices:has(> button:nth-child(3)) { flex-direction: column; }
.lam-controls { display: grid; gap: 8px; margin: 16px 0; }.lam-controls label { font-size: 12px; color: var(--muted); }.lam-controls select { width: 100%; min-width: 0; padding: 8px 9px; font: inherit; font-size: 12px; color: #e7edf2; background: #0c1721; border: 1px solid #ffffff25; border-radius: 6px; }.lam-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.turnout-choices button[aria-pressed="true"] { background: #78beb628; border-color: #78beb6; color: #a3ded4; }.turnout-choices button:disabled { opacity: .5; }
#scene-turnouts[aria-pressed="true"] { color: var(--accent); background: #78beb619; }
/* Scenario preparation keeps the existing scene drawer and resize behaviour. */
.scenario-body { display:flex;flex-direction:column;gap:16px;min-height:0; }
.scenario-body p { margin:0; }
.scenario-body button { min-height:36px;white-space:normal; }
.scenario-body button:focus-visible,.scenario-body summary:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.scenario-toolbar,.scenario-title-row,.scenario-selection-title { display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0; }
.scenario-body .scenario-back { padding:0;min-height:26px;color:var(--muted);font-size:12px; }
.scenario-back:hover { color:var(--accent); }
.scenario-save-status { flex-shrink:0;color:var(--accent);font-size:10px; }
.scenario-save-status.is-dirty { color:#e8ca83; }
.scenario-input { width:100%;min-width:0;box-sizing:border-box;min-height:38px;padding:9px 10px;color:inherit;background:#0c172166;border:1px solid #ffffff20;border-radius:7px;font:inherit;font-size:12px; }
.scenario-input:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #78beb619; }
.scenario-input.scenario-name { flex:1;font-size:17px;font-weight:600;background:transparent;border-color:transparent;padding:7px 0; }
.scenario-input.scenario-name:hover { border-bottom-color:var(--border); }
.scenario-input.scenario-name:focus { padding-left:8px;border-color:var(--accent); }
.scenario-body .scenario-primary { width:100%;padding:11px 12px;border:1px solid #78beb64d;border-radius:7px;background:#78beb621;color:#b0e6dc;font-weight:600;font-size:12px; }
.scenario-body .scenario-primary:hover:not(:disabled) { background:#78beb637;border-color:var(--accent); }
.scenario-body .scenario-primary:disabled { color:var(--muted);background:#ffffff04;border-color:var(--border);opacity:.55; }
.scenario-library-row { display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:8px;background:#ffffff02; }
.scenario-library-row>.scenario-input { grid-column:1/-1; }
.scenario-library-open { display:flex;align-items:center;gap:10px;min-width:0;padding:6px;text-align:left; }
.scenario-library-open>.icon { color:var(--accent);flex-shrink:0; }
.scenario-library-open strong { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500; }
.scenario-count { min-width:22px;padding:3px 5px;background:#78beb614;border-radius:5px;color:var(--accent);font-size:11px;text-align:center; }
.scenario-menu { position:relative;flex-shrink:0;width:30px; }
.scenario-menu>summary { display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;min-height:30px;padding:0;border-radius:5px;color:var(--muted); }
.scenario-menu>summary::-webkit-details-marker { display:none; }
.scenario-menu>summary::before { display:none; }
.scenario-menu>summary:hover,.scenario-menu[open]>summary { color:var(--accent);background:#78beb614; }
.scenario-menu>summary[aria-disabled="true"] { pointer-events:none;opacity:.4; }
.scenario-menu-list { position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;width:172px;padding:5px;background:#1b2a35;border:1px solid #ffffff25;border-radius:8px;box-shadow:0 8px 24px #0007; }
.scenario-body .scenario-menu-list button { text-align:left;padding:7px 10px;min-height:32px;font-size:12px;border-radius:4px; }
.scenario-menu-list button:hover:not(:disabled) { background:#78beb619; }
.scenario-body .scenario-danger { color:#ffb4a8; }
.scenario-timeline { display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:36vh;padding:3px 3px 3px 0;flex-shrink:0; }
.scenario-step { position:relative;display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:7px;padding:4px;min-width:0; }
.scenario-step:not(:last-child)::after { content:'';position:absolute;left:37px;top:36px;height:17px;border-left:1px solid #78beb647;pointer-events:none; }
.scenario-step.is-selected { border-color:#78beb64d;background:#78beb610; }
.scenario-step.is-dragging { opacity:.4; }
.scenario-step.is-drop-target { box-shadow:inset 0 2px var(--accent); }
.scenario-body .scenario-grip,.scenario-grip-space { width:12px;min-width:12px;padding:0;font-size:17px;color:#ffffff40;cursor:grab; }
.scenario-body .scenario-grip { min-height:30px; }
.scenario-step-select { display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left;padding:0 4px; }
.scenario-step-number { display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ffffff25;border-radius:50%;flex-shrink:0;font-size:11px;color:var(--muted);background:var(--panel);z-index:1; }
.is-selected .scenario-step-number { color:#b0e6dc;background:#25433f;border-color:var(--accent); }
.scenario-step-name { font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.scenario-body .scenario-step-view { width:30px;flex-shrink:0;padding:5px;min-height:30px;color:var(--muted); }
.scenario-step-view[aria-pressed="true"] { color:var(--accent); }
.scenario-step-view .icon { width:16px;height:16px; }
.scenario-body .scenario-add-step { border:1px dashed #78beb640;border-radius:7px;color:var(--accent);font-size:12px;padding:9px; }
.scenario-selection { display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--border);padding-top:15px; }
.scenario-selection-title>span { color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase; }
.scenario-comment>summary { padding:3px 0;cursor:pointer;color:var(--muted);font-size:12px; }
.scenario-comment textarea { min-height:72px;resize:vertical;margin-top:10px; }
.scenario-footer { position:sticky;bottom:-18px;margin-top:auto;padding:12px 0 0;background:var(--panel);border-top:1px solid var(--border);z-index:3; }
.scenario-footer>button { width:100%;font-size:12px;color:var(--muted); }
.scenario-delete { display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid #ffb4a840;border-radius:7px; }
.scenario-delete>button { overflow-wrap:anywhere; }
.scenario-error { color:#ffb4a8;font-size:12px; }
.scenario-player { display:flex;flex-direction:column;gap:10px;padding:13px;background:#78beb60a;border:1px solid #78beb633;border-radius:10px; }
.scenario-player-options { display:flex;gap:8px; }
.scenario-player-options select { min-width:0;padding:7px 8px;background:#0c1721;color:var(--text);border:1px solid var(--border);border-radius:6px;font:inherit;font-size:12px; }
.scenario-player-options select:first-child { flex:1; }
.scenario-player-options select:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.scenario-player-controls { display:flex;gap:8px; }
.scenario-body .scenario-play { display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-height:46px;border:1px solid #a3e1d5;border-radius:7px;background:var(--accent);color:#102a29;font-weight:650;font-size:14px; }
.scenario-play:hover:not(:disabled) { background:#9bd9ce; }
.scenario-play .icon { width:20px;height:20px;stroke-width:2.5; }
.scenario-body .scenario-rewind { display:flex;align-items:center;justify-content:center;width:44px;border:1px solid var(--border);border-radius:7px;color:var(--muted); }
.scenario-rewind:hover:not(:disabled) { color:var(--accent);border-color:var(--accent); }
.scenario-player button:disabled,.scenario-player select:disabled { opacity:.45; }
.scenario-progress { width:100%;height:3px;border:0;border-radius:4px;appearance:none;accent-color:var(--accent); }
.scenario-progress::-webkit-progress-bar { background:#ffffff12;border-radius:4px; }
.scenario-progress::-webkit-progress-value { background:var(--accent);border-radius:4px; }
.scenario-progress::-moz-progress-bar { background:var(--accent);border-radius:4px; }
.scenario-play-position { min-height:12px;color:var(--muted);font-size:10px;text-align:center; }
.scenario-play-position:empty { display:none; }
.scenario-speed { display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px; }
.scenario-speed>span:first-child { flex:1; }
.scenario-speed .scenario-input { width:88px;text-align:right; }
.in-scenario #scene-workspace-name::after { content:' · Scénario temporaire';color:#8fd0c7;font-weight:normal; }
.placing-marker .maplibregl-canvas { cursor:crosshair; }
.marker-editor { display:grid;gap:8px;margin-top:14px; }
.marker-editor input { padding:8px;min-width:0;background:#0c1721;border:1px solid var(--border);border-radius:6px; }