/* Player Tools visual system for the planner. Load after planner.css.
   Presentation only: canvas colours, route identity, positions and visibility
   remain owned by the existing planner. */
:root {
  color-scheme: dark;
  --bg: #0b111c;
  --paper: #111c2b;
  --ink: #e9eef5;
  --muted: #a4b3c8;
  --line: #29364a;
  --blue: #6ce5c3;
  --pale: #193b35;
  --warn: #f0ce93;
  --ui-raised: #172438;
  --ui-input: #0e1826;
  --ui-control: #19283c;
  --ui-hover: #23364b;
  --ui-accent-ink: #0c2422;
  --ui-accent-hover: #9aefd6;
  --ui-selected-line: #508c7d;
  --ui-input-line: #53677f;
  --ui-danger: #ffb4bd;
  --ui-danger-bg: #3b2029;
  --ui-danger-line: #75434e;
  --ui-warning-bg: #32291c;
  --ui-warning-line: #715a34;
  --ui-shadow: 0 8px 26px #00000040;
}

/* Shared type, controls and keyboard feedback. */
body { background: var(--bg); color: var(--ink); }
h2, h3 { color: var(--ink); }
button, select, input, textarea {
  background: var(--ui-input);
  color: var(--ink);
  border-color: var(--ui-input-line);
}
button { background: var(--ui-control); border-color: var(--line); }
textarea { border: 1px solid var(--ui-input-line); border-radius: 8px; }
button:hover:not(:disabled) {
  background: var(--ui-hover);
  border-color: var(--ui-input-line);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="range"] { accent-color: var(--blue); }
label { color: #c0ccdc; }
summary { color: #c7d6e5; }
summary:hover { color: var(--ui-accent-hover); }
a { color: var(--blue); }
button:disabled { opacity: .48; }
:is(button, a, input, select, summary, textarea, canvas):focus-visible,
.build-slider input:focus-visible, #line-unit-range:focus-visible,
.plant-navigation button:focus-visible, .plant-navigation>span:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
button.primary, .tools button.active, #commander-draw, #drawing-done {
  color: var(--ui-accent-ink);
  background: var(--blue);
  border-color: var(--blue);
  font-weight: 750;
}
button.primary:hover:not(:disabled), .tools button.active:hover,
#commander-draw:hover, #drawing-done:hover {
  color: var(--ui-accent-ink);
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}
.small { font-size: 12px; }
.muted, .save-state, .dialog-note { color: var(--muted); }

/* Compact application header and plan controls. */
.topbar { background: var(--paper); border-color: var(--line); box-shadow: none; }
.brand { color: var(--ink); }
.brand { display: inline-flex; align-items: center; }
.brand-mark { width: 26px; height: 26px; flex: 0 0 26px; margin-right: 8px; }
.ui-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; }
.tools .ui-icon { width: 16px; height: 16px; }
button:has(>.ui-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:has(>.ui-icon)[hidden] { display: none; }
.brand span { color: #c3d2e1; }
.badge { color: #b2f2dc; background: var(--pale); border: 1px solid #34594f; }
.plan-bar select, .plan-bar .route-picker { background: var(--paper); }
.plan-bar :is(button, select), .top-actions :is(button, select) { min-height: 40px; }
.map-start-button, .share-plan-button {
  color: #b4efdc;
  background: #162d30;
  border-color: #3b625e;
}
.map-start-button[aria-pressed="true"],
.workspace-actions #orders-toggle[aria-expanded="true"] {
  background: var(--pale); color: #b4f4df; border-color: var(--ui-selected-line);
}
.workspace-actions #orders-toggle { background: var(--ui-control); color: var(--ink); }
.save-state.save-error { background: var(--ui-danger-bg); color: var(--ui-danger); }

/* Commander strip: destination first, timing secondary. */
.commander-route { background: var(--paper); border-color: var(--line); }
.commander-route-copy strong { color: var(--ink); }
.commander-route-copy span { color: var(--muted); }
.commander-route[data-issue="true"] .commander-route-copy span { color: var(--warn); }
.commander-route-actions button { min-height: 40px; }
.commander-settings-panel {
  color: var(--ink); background: var(--paper); border-color: var(--line);
  box-shadow: var(--ui-shadow);
}
.commander-settings-panel input[type="range"] { accent-color: var(--blue); }
.commander-settings-heading button, .commander-presets button,
.commander-settings-panel input:not([type="range"]):not([type="checkbox"]),
.commander-settings-panel select { min-height: 40px; }
.commander-settings-panel form>[type="submit"] { box-shadow: 0 -6px 12px var(--paper); }
.commander-estimate { background: var(--pale); color: #b4f4df; border-color: #3b625e; }
.commander-estimate small, .commander-timing-help { color: var(--muted); font-size: 12px; }
.commander-estimate[data-caution="true"] {
  background: var(--ui-warning-bg); color: var(--warn); border-color: var(--ui-warning-line);
}

/* Map chrome. No styling of canvas pixels or the map-stage background. */
.map-panel, .orders-panel { background: var(--paper); border-color: var(--line); box-shadow: none; }
.map-controls { background: var(--paper); border-color: var(--line); }
.map-panel .map-toolbar { background: var(--paper); border-color: var(--line); box-shadow: none; }
.map-panel .map-controls .map-toolbar { background: transparent; }
.map-panel .map-toolbar .tools button:not(.active),
.map-panel .map-utility button { background: transparent; color: #c5d3e3; }
.map-panel .map-toolbar .tools button:not(.active):hover,
.map-panel .map-utility button:hover { background: var(--ui-hover); }
.map-toolbar :is(button, select), .more-map-tools>summary { min-height: 40px; }
#map-view, #draw-preset { background: var(--ui-control); border-color: var(--ui-input-line); }
.more-map-tools>summary.active, .more-map-tools[open]>summary {
  background: var(--pale); color: #b4f4df; border-color: var(--ui-selected-line);
}
.secondary-map-tools, .drawing-extra>div {
  background: var(--ui-raised); border-color: var(--line); box-shadow: var(--ui-shadow);
}
.secondary-map-tools button { min-height: 40px; }
.history-controls { background: #111c2bf5; border-color: var(--line); box-shadow: var(--ui-shadow); }
.history-controls button { background: transparent; color: var(--ink); min-height: 40px; min-width: 40px; }
.history-controls button:hover:not(:disabled) { background: var(--ui-hover); }
.zoom button { background: #111c2bf5; border-color: var(--ui-input-line); color: var(--ink); box-shadow: 0 2px 8px #00000035; }
.zoom #fit-orders[data-preview="true"], .history-controls button[data-preview="true"]:not(:disabled) {
  color: #b4f4df; background: var(--pale); border-color: var(--ui-selected-line);
}
.map-badges span, .map-coordinate, .map-scale {
  background: #111c2bf5; color: #c0d0e1; border-color: var(--line); box-shadow: 0 1px 6px #00000028;
}
.map-scale>span:first-child { border-color: #c0d0e1; }
.map-caption { background: var(--paper); color: var(--muted); border-color: var(--line); }
.map-caption>button { color: #b8d4dd; min-height: 40px; }
.placement-mode { background: #111c2bf7; border-color: #3b625e; box-shadow: var(--ui-shadow); }
.placement-mode strong { color: #b4f4df; }
.placement-mode span { color: var(--muted); }

/* Contextual map cards preserve JS-computed width and position. */
.map-context, .map-context[data-kind="placement"], .map-context[data-kind="order"] {
  background: #111c2bfa; color: var(--ink); border-color: #3b4d65; box-shadow: var(--ui-shadow);
}
.context-heading>button { min-height: 40px; min-width: 40px; color: #c7d6e5; }
.context-position, .context-help, .keep-placing, .context-route,
.placement-coordinates, .selection-summary { color: var(--muted); }
.context-time { color: #b4f4df; }
.context-help, .map-context .context-help { font-size: 12px; }
.map-choice-list small { font-size: 11px; }
.context-secondary button { background: transparent; color: #b8d4dd; }
.placement-repeat, .control-toggle { background: var(--ui-control); color: #c4d4e5; border-color: var(--line); }
.control-toggle { min-height: 40px; font-size: 12px; }
.line-selected-completion, .plant-completion {
  background: #162d30; color: #b4f4df; border: 1px solid #3b625e;
}
.plant-navigation { border-color: #3b625e; }
.plant-navigation button { background: var(--ui-control); color: #b4f4df; border-color: var(--ui-selected-line); min-height: 40px; width: 40px; }
.selected-build-settings>summary { color: #b4f4df; min-height: 40px; }
.selected-build-settings>summary>span { color: var(--muted); font-size: 11px; }
.selected-build-settings[open]>summary { border-color: var(--line); }

/* Orders and route summary. */
.count, .route-mode-label { background: var(--ui-raised); color: #c1d0e1; }
.summary-strip>div { background: var(--ui-raised); border-color: var(--line); }
.summary-strip strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-strip span { font-size: 12px; }
.settings-row, .compare-trigger, .builder-summary {
  background: var(--ui-raised); border-color: var(--line); color: #c4d8e9;
}
.empty { background: var(--ui-raised); border-color: #4b5d72; }
.order-button { background: var(--ui-raised); }
.order-button.selected { background: var(--pale); border-color: var(--ui-selected-line); }
.order-content small, .order-end, .route-order-heading small { font-size: 12px; }
.route-order-heading { color: var(--ink); }
.route-checks-button, .audit-step { background: #162d30; color: #b4f4df; border-color: #3b625e; }
.orders-panel #briefing-button { box-shadow: 0 0 0 7px var(--paper); }
.orders-panel .panel-heading {
  position: sticky; top: -14px; z-index: 2; background: var(--paper);
  padding-top: 8px; padding-bottom: 8px; box-shadow: 0 -8px 0 var(--paper), 0 1px 0 var(--line);
}
.orders-heading-actions #hide-orders { color: var(--muted); }
.editor, .editor-grid .build-slider { background: var(--ui-raised); border-color: var(--line); }

/* Dialogs, route switcher and deeper settings. */
dialog, #route-switcher {
  background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 0 24px 80px #00000065;
}
dialog::backdrop { background: #050a12aa; }
.dialog-header>button { background: var(--ui-raised); color: #c7d6e5; }
#routes-dialog>.dialog-header, #route-audit-dialog>.dialog-header,
.route-primary-actions, .share-actions { background: var(--paper); }
.route-panel, .crew-panel { background: var(--ui-raised); border-color: var(--line); }
.route-chip.active { background: var(--ui-hover); border-color: var(--route-colour, var(--ui-selected-line)); }
.route-card-copy b { color: var(--warn); }
.route-settings label, .route-panel>p { color: var(--muted); }
.quick-route { background: transparent; color: var(--ink); }
.quick-route:hover { background: var(--ui-hover); }
.quick-route.active { background: var(--pale); border-color: var(--ui-selected-line); }
.quick-route-number { background: var(--ui-raised); }
.quick-routes-footer button { background: var(--ui-raised); }
#quick-route-list::-webkit-scrollbar-thumb { background: #53677f; }
#quick-route-list::-webkit-scrollbar-track { background: var(--ui-input); }
.crew-options, .quick-crew, .route-mode-options, .view-switch { background: var(--ui-input); border-color: var(--line); }
.crew-options button.active, .quick-crew .active, .route-mode-options button[aria-pressed="true"],
.view-switch button.active, .commander-presets [aria-pressed="true"],
.unit-presets button[aria-pressed="true"], .control-toggle[aria-pressed="true"],
.placement-repeat[aria-pressed="true"] {
  background: var(--pale); color: #b4f4df; border-color: var(--ui-selected-line); box-shadow: none;
}
.crew-options button small { color: var(--muted); font-size: 11px; }
.crew-options button, .quick-crew button, .route-mode-options button,
.route-chip, .unit-presets button { min-height: 40px; }
.map-options, .gate-nav, .map-details { background: var(--ui-raised); border-color: var(--line); }
#locations-dialog #gate-list button { background: var(--ui-control); min-height: 40px; }
#gate-list button.active { background: var(--pale); border-color: var(--ui-selected-line); color: #b4f4df; }
.detail-icon { background: var(--ui-input); border-color: var(--line); }
.detail-icon.ground { background: #19382f; color: #b4f4df; }
.detail-icon.obstacle { background: #26302f; color: #c0d0ca; }
.detail-icon.building-art { background: none; }
.detail-copy p, .detail-kicker, .border-legend, .terrain-legend,
.border-help, .art-help, .map-limits { color: var(--muted); font-size: 12px; }
.detail-copy .contact-line { color: #c4d8e9; }
.detail-actions button { min-height: 40px; }
.research-timing, .route-management, .unit-ready, .line-settings[open] { border-color: var(--line); }
.route-comparison, .time-matrix { color: var(--ink); }
.route-comparison :is(th, td), .time-matrix :is(th, td) { border-color: var(--line); }
.route-comparison thead th, .time-matrix thead th,
.route-comparison tfoot { background: var(--ui-raised); color: #c4d8e9; }
.route-comparison small, .time-matrix small, .time-matrix td small,
.time-matrix caption { color: var(--muted); font-size: 11px; }
.builder-conflict { border-color: var(--line); }

/* Drawing dock: keep swatches and arrow colours authoritative. */
.drawing-tools, .drawing-context { background: var(--paper); border-color: var(--line); box-shadow: var(--ui-shadow); }
.map-controls .drawing-tools { background: transparent; box-shadow: none; }
.map-controls .drawing-context { background: transparent; box-shadow: none; }
.drawing-modes, .map-controls .drawing-modes { background: var(--ui-input); }
.drawing-modes button[aria-pressed="true"], .drawing-extra[open]>summary {
  background: var(--pale); color: #b4f4df; border-color: var(--ui-selected-line); box-shadow: none;
}
.drawing-tools :is(button, select), .drawing-extra>summary { min-height: 40px; }
.drawing-tools .drawing-swatch { background: transparent; }
.drawing-swatch[aria-pressed="true"] { background: var(--ui-raised); border-color: var(--swatch); }
.drawing-edit-hint { color: var(--muted); font-size: 12px; }
#add-arrow-bend { background: var(--pale); color: #b4f4df; border-color: var(--ui-selected-line); }

/* Plant line and capacity controls. */
.line-tools { display: flex; flex-direction: column; max-height: calc(100% - 16px); overflow: hidden; background: #111c2bfa; color: var(--ink); border-color: #3b4d65; box-shadow: var(--ui-shadow); }
.line-tools[hidden] { display: none; }
.line-tools> :not(#line-settings) { flex-shrink: 0; }
.line-tools #line-settings { flex: 0 1 auto; min-height: 0; }
.line-tools button, .line-tools summary { min-height: 40px; }
.line-tools p, .line-capacity, .line-unit-control label,
.line-preview-label, .line-summary>div>span { font-size: 12px; }
.line-segment { border-color: var(--line); }
.line-segment button[aria-pressed="true"] { background: var(--pale); color: #b4f4df; }
.line-summary strong { color: #b4f4df; font-variant-numeric: tabular-nums; }
.line-capacity summary, .line-tools #line-estimate { color: #b4f4df; }
.line-time-settings { background: var(--ui-raised); border-color: var(--line); box-shadow: var(--ui-shadow); }
.line-settings .line-time-settings { background: transparent; box-shadow: none; }
#line-settings[open] {
  scrollbar-width: auto; scrollbar-color: #637c98 var(--ui-input);
  scrollbar-gutter: stable; border-bottom: 1px solid var(--ui-input-line);
}
#line-settings[open]>summary {
  position: sticky; top: 0; z-index: 1; background: var(--paper);
  border-bottom: 1px solid var(--line); color: #c7d6e5;
}
#line-settings::-webkit-scrollbar { width: 10px; }
#line-settings::-webkit-scrollbar-track { background: var(--ui-input); }
#line-settings::-webkit-scrollbar-thumb { background: #637c98; border: 2px solid var(--ui-input); border-radius: 6px; }
.line-preview-label, .line-settings>summary, #line-route-total,
.line-shape-actions span, .line-preserved, .unit-slider-heading span,
.unit-march>span, .unit-ready>small { color: var(--muted); }
.line-saved-actions button, .unit-presets button { background: var(--ui-control); border-color: var(--line); }
.unit-presets button[aria-pressed="true"] { background: var(--pale); border-color: var(--ui-selected-line); }
.unit-slider-heading output, .unit-ready>strong { color: #b4f4df; }
.unit-slider-heading input[type="number"], .line-unit-control input[type="number"],
.line-march-label input, .unit-march input { min-height: 34px; border-color: var(--ui-input-line); }
.build-slider input[type="range"], #line-unit-range { min-height: 32px; background: transparent; }
.build-slider input[type="range"]::-webkit-slider-runnable-track,
#line-unit-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--blue) var(--unit-fill,100%), #405168 var(--unit-fill,100%));
}
.build-slider input[type="range"]::-webkit-slider-thumb, #line-unit-range::-webkit-slider-thumb {
  background: var(--blue); border-color: #c0ffe8; box-shadow: 0 1px 4px #00000040;
}
.build-slider input[type="range"]::-moz-range-track, #line-unit-range::-moz-range-track { background: #405168; }
.build-slider input[type="range"]::-moz-range-progress, #line-unit-range::-moz-range-progress { background: var(--blue); }
.build-slider input[type="range"]::-moz-range-thumb, #line-unit-range::-moz-range-thumb { background: var(--blue); border-color: #c0ffe8; }

/* Share controls: the generated image retains its own colours. */
.share-preview { background: var(--ui-input); border-color: var(--line); }
.share-preview figcaption { color: var(--muted); }
#share-image-status { color: #b4f4df; }
.share-settings #copy-briefing { background: var(--pale); color: #b4f4df; border-color: var(--ui-selected-line); }
#briefing-text, #briefing-details, #plan-data { background: var(--ui-input); color: #c4d8e9; border-color: var(--ui-input-line); }
#share-detailed-orders summary { color: #c4d8e9; }
.toast { background: var(--ui-raised); color: var(--ink); border: 1px solid var(--ui-selected-line); box-shadow: var(--ui-shadow); }

/* Semantic feedback remains distinct from selected and primary actions. */
.warning, .placement-warning, .comparison-issue, .audit-step.issue,
.connection-warning, .route-checks-button.needs-review, .builder-summary.needs-review {
  background: var(--ui-warning-bg); color: var(--warn); border-color: var(--ui-warning-line);
}
.comparison-issue small, .route-comparison .unknown-time,
#active-route-time.caution, .quick-route-time.caution,
.line-tools #line-time-warning, .line-tools .line-warning,
.line-review .line-warning, #line-exit-dialog #line-exit-error { color: var(--warn); }
.order-connection-warning { color: var(--warn) !important; }
.connection-ok { background: var(--pale); color: #b4f4df; }
.line-review .line-ok { color: #b4f4df; }
.danger, .context-secondary .danger, .context-help.invalid { color: var(--ui-danger); }
.map-context .context-actions .danger, .placement-warning.invalid {
  color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger-line);
}
button.danger:hover:not(:disabled), .map-context .context-actions .danger:hover {
  color: #ffd6dc; background: #512c37; border-color: #aa6878;
}
#line-exit-dialog p { color: var(--muted); }

/* Removing a selection is a labelled action, with Undo immediately available. */
.map-context .selected-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 36px; }
.selection-delete-actions { display: flex; gap: 6px; margin: 6px 0; }
.selection-delete-actions button { flex: 1; min-width: 0; min-height: 36px; padding: 5px 7px; font-size: 12px; background: var(--ui-danger-bg); color: var(--ui-danger); border-color: var(--ui-danger-line); }
.quick-route-removal { display: flex; gap: 6px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.quick-route-removal button { flex: 1; min-height: 40px; font-size: 12px; }
.map-controls #clear-drawings, #line-delete { color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger-line); }
.history-controls #undo { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; }
.history-controls #undo span { font-size: 12px; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast button { pointer-events: auto; flex-shrink: 0; min-height: 36px; padding: 4px 10px; font-size: 12px; }
@media (pointer: coarse) {
  .selection-delete-actions button, .quick-route-removal button, .toast button { min-height: 44px; }
}

/* Responsive controls stay compact and retain touch affordances. */
/* Desktop chrome should leave the height to the map. Touch controls retain
   their larger targets; route warnings can still wrap rather than disappear. */
@media (min-width: 1000px) and (pointer: fine) {
  .topbar { padding: 4px 12px; min-height: 0; }
  .top-actions :is(button, select), .plan-bar :is(button, select) { min-height: 32px; }
  .top-actions :is(button, select) { padding-top: 4px; padding-bottom: 4px; }
  main { padding: 4px 6px 5px; gap: 4px; }
  .plan-bar { margin-bottom: 0; }
  .map-controls>.commander-route { flex: 1 1 300px; margin: 0; padding: 0 0 0 9px; gap: 8px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
  .commander-route-copy { display: grid; gap: 0; flex: 1; min-width: 0; }
  .commander-route-copy strong { max-width: 100%; font-size: 12px; }
  .commander-route-copy span { font-size: 11px; }
  .commander-route-actions button { min-height: 32px; padding: 4px 8px; }
  .commander-route[data-editing="true"] .commander-route-actions { max-width: none; }
  .map-controls { padding: 4px 6px; }
  .map-toolbar :is(button, select), .more-map-tools>summary { min-height: 32px; }
  .map-caption { min-height: 26px; padding: 1px 8px; gap: 10px; }
  .map-caption>span { flex: 1; min-width: 0; }
  .map-caption>button { min-height: 24px; font-size: 11px; padding: 1px 3px; }
}
@media (max-width: 680px) {
  .commander-route-actions button { min-height: 40px; }
  .commander-route-copy span { font-size: 12px; }
  .context-help, .map-context .context-help { font-size: 12px; }
  .detail-copy p { font-size: 12px; }
}
/* Keep route actions readable across phone widths. */
@media (max-width: 560px) {
  .plan-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 4px; }
  .plan-bar>label { grid-column: 1; grid-row: 1; min-width: 0; }
  .plan-bar .route-picker { grid-column: 2; grid-row: 1; width: 100%; max-width: none; }
  .plan-bar .workspace-actions { grid-column: 3; grid-row: 1; }
  #map-start-button { grid-column: 1; grid-row: 2; max-width: none; }
  .plan-bar .route-picker { font-size: 12px; }
  .active-route-copy #active-route-name { font-size: 12px; }
  #active-route-time { font-size: 11px; }
  .plan-bar .map-start-button { font-size: 12px; }
  #map-destination-button { grid-column: 2 / 4; grid-row: 2; max-width: none; }
}
@media (pointer: coarse) {
  .plan-bar :is(button, select), .top-actions :is(button, select),
  .map-toolbar :is(button, select), .more-map-tools>summary,
  .commander-route-actions button, .commander-presets button,
  .context-actions button, .secondary-map-tools button,
  .drawing-tools :is(button, select), .line-tools button,
  .line-saved-actions button, .control-toggle { min-height: 44px; }
  .build-slider input[type="range"], #line-unit-range { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  button, input, select, textarea, summary { transition: none; animation: none; }
}
@media (forced-colors: active) {
  :root {
    --bg: Canvas; --paper: Canvas; --ink: CanvasText; --muted: CanvasText;
    --line: CanvasText; --blue: Highlight; --pale: Canvas;
    --ui-raised: Canvas; --ui-input: Canvas; --ui-control: ButtonFace;
    --ui-hover: ButtonFace; --ui-input-line: ButtonText;
    --ui-selected-line: Highlight; --ui-danger: CanvasText;
    --ui-danger-bg: Canvas; --ui-danger-line: CanvasText;
    --ui-warning-bg: Canvas; --ui-warning-line: CanvasText; --warn: CanvasText;
  }
  button, input, select, textarea { forced-color-adjust: auto; }
  button.primary, .tools button.active, #commander-draw, #drawing-done {
    background: Highlight; color: HighlightText; border-color: Highlight;
  }
  button[aria-pressed="true"], .order-button.selected, .quick-route.active {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
  :is(button, a, input, select, summary, textarea, canvas):focus-visible { outline-color: Highlight; }
  .map-context, .line-tools, .placement-mode, .history-controls, .zoom button,
  .map-badges span, .map-coordinate, .map-scale { background: Canvas; color: CanvasText; box-shadow: none; }
  .drawing-swatch::before { forced-color-adjust: none; }
}

/* An unknown estimate takes the commander directly to its timing settings. */
#line-time-warning { width: 100%; text-align: left; line-height: 1.45; padding: 8px 10px; margin-top: 6px; background: var(--ui-warning-bg); border: 1px solid var(--ui-warning-line); color: var(--warn); font-size: 12px; }
#line-time-warning[hidden] { display: none; }
#line-time-warning:not([hidden])::after { content: " ›"; font-weight: 800; }

/* Short landscape screens use the same editor as a compact side sheet, so
   timing fields cannot collapse to zero height underneath the map toolbar. */
@media (max-height: 560px) and (min-width: 600px) {
  .map-stage:has(.line-tools:not([hidden])) { isolation: auto; }
  .map-stage:has(.line-tools:not([hidden])) .history-controls { left: 348px; bottom: auto; top: 8px; z-index: 13; }
  .line-tools { position: fixed; top: 8px; bottom: auto; left: 8px; z-index: 12; max-height: calc(100dvh - 16px); width: 330px; }
  .line-tools #line-settings[open] { max-height: none; }
  .line-tools #line-preview-label { display: none; }
  .line-tools #line-feedback:not(.line-warning) { display: none; }
  .line-tools .line-shape-actions { padding-top: 4px; }
  .line-tools #line-route-total { font-size: 11px; }
}
@media (pointer: coarse) {
  dialog input:not([type="range"]):not([type="checkbox"]), dialog textarea,
  .line-tools input:not([type="range"]), .map-context input:not([type="range"]),
  .commander-settings-panel input:not([type="range"]):not([type="checkbox"]) { font-size: 16px; }
}

/* On short portrait phones (including a reduced keyboard viewport), expanded
   options need screen height; collapsing Options returns the clear map view. */
@media (max-height: 680px) and (max-width: 599px) {
  .map-stage:has(.line-tools:not([hidden])[data-compact="false"]) { isolation: auto; }
  .line-tools:not([hidden])[data-compact="false"] { position: fixed; z-index: 12; top: 8px; left: 8px; width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 68px); }
  .map-stage:has(.line-tools:not([hidden])[data-compact="false"]) .history-controls { position: fixed; left: 8px; bottom: 8px; z-index: 13; }
  .line-tools[data-compact="false"] #line-settings[open] { max-height: none; }
  .line-tools[data-compact="false"] #line-preview-label,
  .line-tools[data-compact="false"] #line-feedback:not(.line-warning) { display: none; }
}

/* UX40: a shared visual vocabulary, with labels for unfamiliar actions. */
:root {
  --icon-share: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V3m-4%204%204-4%204%204M5%2012v8h14v-8%22/%3E%3C/svg%3E");
  --icon-folder: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h7l2%203h9v11H3zM3%206V4h7l2%203h7v2%22/%3E%3C/svg%3E");
  --icon-orders: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M9%204V2h6v2M9%2010h6m-6%204h6m-6%204h4%22/%3E%3C/svg%3E");
  --icon-start: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E");
  --icon-flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V3m0%201c5-4%208%204%2014%200v10c-6%204-9-4-14%200%22/%3E%3C/svg%3E");
  --icon-build: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2021%209-9m-1-8%203-2%208%208-3%203-3-3-4%204-4-4%204-4z%22/%3E%3C/svg%3E");
  --icon-route: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2218%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M6%2018h7a4%204%200%200%200%200-8H9a3%203%200%200%201%200-6h10m-3-3%203%203-3%203%22/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%206v6l4%202%22/%3E%3C/svg%3E");
  --icon-trash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M9%206V3h6v3M6%206l1%2015h10l1-15M10%2010v7m4-7v7%22/%3E%3C/svg%3E");
  --icon-undo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204%203%2010l6%206M3%2010h11a6%206%200%200%201%206%206v4%22/%3E%3C/svg%3E");
  --icon-redo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%204%206%206-6%206m6-6H10a6%206%200%200%200-6%206v4%22/%3E%3C/svg%3E");
  --icon-move: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M8%206l4-4%204%204m-8%2012%204%204%204-4M6%208l-4%204%204%204m12-8%204%204-4%204%22/%3E%3C/svg%3E");
  --icon-pen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2015%2011-11%205%205L9%2020l-6%201zM13%206l5%205M4%2015l5%205%22/%3E%3C/svg%3E");
  --icon-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2012V7a2%202%200%200%201%204%200v4-6a2%202%200%200%201%204%200v7-5a2%202%200%200%201%204%200v6c0%205-3%208-7%208-3%200-4-1-6-4l-3-5a2%202%200%200%201%203-2l3%203%22/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%205%205L20%206%22/%3E%3C/svg%3E");
  --icon-reset: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%201%207M3%203v7h7%22/%3E%3C/svg%3E");
  --icon-attack: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2020%2016-16m-9%200h9v9%22/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%208%204v6c0%205-8%2010-8%2010S4%2017%204%2012V6z%22/%3E%3C/svg%3E");
  --icon-note: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10v12H7zM12%2015v7M4%206h3m10%200h3%22/%3E%3C/svg%3E");
  --icon-bend: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2019V9a5%205%200%200%201%205-5h12m-4-3%204%203-4%203%22/%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2219%22%20r%3D%222%22/%3E%3C/svg%3E");
  --icon-reverse: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16m-4-4%204%204-4%204M20%2017H4m4-4-4%204%204%204%22/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2212%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M15%208V3H3v12h5%22/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2011v6m0-10v1%22/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%2010%2019H2zM12%208v6m0%203v1%22/%3E%3C/svg%3E");
  --icon-frame: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209V3h6m6%200h6v6M3%2015v6h6m6%200h6v-6%22/%3E%3C/svg%3E");
}
:is(#share-plan-button,#share-drawings,#plan-menu-button,#orders-toggle,#map-start-button,[data-context="start-step"],[data-context="start-objective"],#quick-start-route,#map-destination-button,[data-context="destination-objective"],[data-context="destination-cell"],#more-tools-label,#commander-draw,[data-context="reshape-line"],#commander-settings,.route-duration,[data-context="remove"],[data-context="delete-line"],#line-delete,#clear-drawings,#quick-delete-route,#undo,#redo,[data-context="move"],[data-draw-kind="edit"],#line-draw,#edit-text,[data-draw-kind="hand"],#line-pan,#drawing-done,#line-place,#line-clear,#quick-reset-route,[data-tool="attack"],#straighten-arrow,[data-tool="hold"],[data-tool="note"],#add-arrow-bend,#remove-arrow-bend,#line-add-bend,#line-remove-bend,#reverse-arrow,#duplicate-drawing,#map-details-toggle,#fit,#fit-plan) { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
:is(#share-plan-button,#share-drawings,#plan-menu-button,#orders-toggle,#map-start-button,[data-context="start-step"],[data-context="start-objective"],#quick-start-route,#map-destination-button,[data-context="destination-objective"],[data-context="destination-cell"],#more-tools-label,#commander-draw,[data-context="reshape-line"],#commander-settings,.route-duration,[data-context="remove"],[data-context="delete-line"],#line-delete,#clear-drawings,#quick-delete-route,#undo,#redo,[data-context="move"],[data-draw-kind="edit"],#line-draw,#edit-text,[data-draw-kind="hand"],#line-pan,#drawing-done,#line-place,#line-clear,#quick-reset-route,[data-tool="attack"],#straighten-arrow,[data-tool="hold"],[data-tool="note"],#add-arrow-bend,#remove-arrow-bend,#line-add-bend,#line-remove-bend,#reverse-arrow,#duplicate-drawing,#map-details-toggle,#fit,#fit-plan)::before { content:""; width:17px; height:17px; flex:0 0 17px; background:currentColor; -webkit-mask:var(--control-icon) center/contain no-repeat; mask:var(--control-icon) center/contain no-repeat; }
:is(#share-plan-button,#share-drawings) { --control-icon:var(--icon-share); }
:is(#plan-menu-button) { --control-icon:var(--icon-folder); }
:is(#orders-toggle) { --control-icon:var(--icon-orders); }
:is(#map-start-button,[data-context="start-step"],[data-context="start-objective"],#quick-start-route) { --control-icon:var(--icon-start); }
:is(#map-destination-button,[data-context="destination-objective"],[data-context="destination-cell"]) { --control-icon:var(--icon-flag); }
:is(#more-tools-label) { --control-icon:var(--icon-build); }
:is(#commander-draw,[data-context="reshape-line"]) { --control-icon:var(--icon-route); }
:is(#commander-settings,.route-duration) { --control-icon:var(--icon-clock); }
:is([data-context="remove"],[data-context="delete-line"],#line-delete,#clear-drawings,#quick-delete-route) { --control-icon:var(--icon-trash); }
:is(#undo) { --control-icon:var(--icon-undo); }
:is(#redo) { --control-icon:var(--icon-redo); }
:is([data-context="move"]) { --control-icon:var(--icon-move); }
:is([data-draw-kind="edit"],#line-draw,#edit-text) { --control-icon:var(--icon-pen); }
:is([data-draw-kind="hand"],#line-pan) { --control-icon:var(--icon-hand); }
:is(#drawing-done,#line-place) { --control-icon:var(--icon-check); }
:is(#line-clear,#quick-reset-route) { --control-icon:var(--icon-reset); }
:is([data-tool="attack"],#straighten-arrow) { --control-icon:var(--icon-attack); }
:is([data-tool="hold"]) { --control-icon:var(--icon-shield); }
:is([data-tool="note"]) { --control-icon:var(--icon-note); }
:is(#add-arrow-bend,#remove-arrow-bend,#line-add-bend,#line-remove-bend) { --control-icon:var(--icon-bend); }
:is(#reverse-arrow) { --control-icon:var(--icon-reverse); }
:is(#duplicate-drawing) { --control-icon:var(--icon-copy); }
:is(#map-details-toggle) { --control-icon:var(--icon-info); }
:is(#fit,#fit-plan) { --control-icon:var(--icon-frame); }

/* Respect every existing contextual visibility rule. */
:is(button,summary)[hidden] { display:none; }
.workspace-actions #plan-menu-button::before { content:""; font-size:0; }
#map-start-button small { margin-left:-4px; }
.map-context .selected-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px; }
.selection-delete-actions button { gap:5px; }
.selection-delete-actions button::before { width:15px; height:15px; flex-basis:15px; }
.selection-delete-actions button { font-size:11px; padding:5px 4px; }
.commander-route[data-target="false"] #commander-destination { display:none; }
#commander-route-summary { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; font-variant-numeric:tabular-nums; }
.route-visual-metrics { display:contents; }
.route-metric { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; color:var(--ink); }
.route-metric b { font-size:13px; }
.metric-art { width:25px; height:25px; object-fit:contain; }
.route-duration { font-weight:700; }
.route-duration::before { color:var(--blue); }
.route-duration.has-warning { color:var(--warn); }
.route-duration.has-warning::before { --control-icon:var(--icon-warning); color:var(--warn); }
.route-origin { color:var(--muted); font-size:10px; }
.commander-route-copy { gap:3px; }
.map-controls #commander-route { min-height:34px; }
.map-controls .drawing-modes [data-draw-kind="edit"],
.map-controls .drawing-modes [data-draw-kind="hand"] { font-size:0; width:36px; min-width:36px; padding:5px; gap:0; flex:0 0 36px; }
.drawing-modes [aria-pressed="true"]::before { color:var(--blue); }
.history-controls #undo,.history-controls #redo { gap:5px; }
.history-controls #redo { min-width:36px; }
.order-button .order-art { width:28px; height:28px; object-fit:contain; }
.order-button .order-content small { color:var(--muted); }
.workspace-actions #orders-toggle { display:inline-flex; }
#map-info-button,#fit-orders { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
#map-info-button::before,#fit-orders::before { content:""; display:inline-block; width:16px; height:16px; flex:0 0 16px; background:currentColor; mask:var(--control-icon) center/contain no-repeat; -webkit-mask:var(--control-icon) center/contain no-repeat; }
#map-info-button { --control-icon:var(--icon-info); }
#fit-orders { --control-icon:var(--icon-route); }
.commander-route-copy .route-metric { font-size:12px; color:var(--ink); }
.commander-route-copy .route-origin { color:var(--muted); }
/* Route construction controls are irrelevant while sketching battle orders. */
body:has(.tools [data-tool="draw"].active) #commander-route { display:none; }
@media (forced-colors:active) {
  button::before,summary::before,.route-duration::before { forced-color-adjust:none; background:currentColor; }
}
@media (pointer:coarse) {
  .map-controls .drawing-modes [data-draw-kind="edit"],
  .map-controls .drawing-modes [data-draw-kind="hand"] { width:44px; min-width:44px; min-height:44px; flex-basis:44px; }
  .map-context .selected-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; }
  .map-context .selected-actions button { min-height:44px; }
}
@media(max-width:600px) {
  .commander-route { align-items:center; }
  .commander-route-actions { max-width:none; flex-wrap:nowrap; gap:4px; }
  .commander-route-actions #commander-settings { font-size:0; width:44px; min-width:44px; min-height:44px; padding:6px; gap:0; }
  .commander-route-actions #commander-settings::before { width:20px; height:20px; flex-basis:20px; }
  .map-controls .drawing-tools { flex-wrap:wrap; gap:4px; }
  .map-controls .drawing-top-row,.map-controls .drawing-bottom-row { display:flex; flex:1 1 100%; width:100%; align-items:center; gap:5px; }
  .map-controls #drawing-done { order:0; margin-left:auto; }
  .map-controls .drawing-modes { flex:1 1 166px; min-width:166px; }
  .map-controls #draw-preset { flex:1; min-width:70px; max-width:none; width:70px; }
  .map-controls .drawing-tools :is(button,summary,select) { min-height:44px; }
  #commander-route-summary { gap:3px 7px; }
  .route-origin { flex-basis:100%; font-size:9px; }
  .metric-art { width:22px; height:22px; }
  #map-start-button,#map-destination-button { gap:5px; }
  .commander-route-actions button { padding:5px 8px; }
  .selection-delete-actions button { padding:5px; font-size:11px; }
}

/* Keep the current tool selected while nudging or holding the map arrows. */
.map-pan-pad { position:absolute; top:8px; right:8px; z-index:2; display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--paper); box-shadow:0 2px 8px #0003; }
.map-pan-pad button { display:grid; place-items:center; width:34px; min-width:34px; height:34px; min-height:34px; padding:6px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.map-pan-pad button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.map-pan-pad [data-pan="up"] svg { transform:rotate(90deg); }
.map-pan-pad [data-pan="down"] svg { transform:rotate(-90deg); }
.map-pan-pad [data-pan="right"] svg { transform:rotate(180deg); }
.map-pan-pad button[data-panning="true"] { color:var(--ui-accent-ink); background:var(--blue); border-color:var(--blue); }
.map-stage:has(.line-tools:not([hidden])) .map-pan-pad { top:auto; bottom:60px; }
/* The line editor already shows timing and units; reclaim its duplicate strip. */
body:has([data-tool="station-line"].active) #commander-route { display:none; }
@media(pointer:coarse) {
 .map-pan-pad { padding:2px; gap:0; }
 .map-pan-pad button { width:44px; min-width:44px; height:44px; min-height:44px; }
}

/* Selection-local drawing removal, with a compact yes/no confirmation. */
.drawing-delete-actions { position:absolute; z-index:3; display:flex; gap:2px; padding:3px; border:1px solid var(--ui-danger-line); border-radius:10px; background:var(--paper); box-shadow:var(--ui-shadow); }
.drawing-delete-actions[hidden], .drawing-delete-actions button[hidden] { display:none; }
.drawing-delete-actions button { width:36px; height:36px; min-width:0; padding:7px; border:0; border-radius:7px; display:grid; place-items:center; color:var(--ui-danger); background:transparent; touch-action:manipulation; }
.drawing-delete-actions button:hover { background:var(--ui-danger-bg); }
.drawing-delete-actions svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#drawing-delete-cancel { color:var(--ink); }
#drawing-delete-confirm { background:var(--ui-danger-bg); }
@media(pointer:coarse) { .drawing-delete-actions button { width:44px; height:44px; } }

/* Selection is shared across map objects and annotations. */
body[data-selection="drawing"] #commander-route { display:none; }
.selection-drawing-icon { color:var(--mark-colour,var(--ink)); flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:var(--ui-control); font-size:23px; line-height:1; }
.map-choice-list button > span:last-child { min-width:0; }
.map-choice-list strong { overflow-wrap:anywhere; }
#draw-modes button[hidden] { display:none; }

.drawing-selection-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-size:12px; font-weight:650; }
.drawing-selection-label[hidden],#draw-preset[hidden] { display:none; }
#drawing-edit-near { color:var(--ink); }
.map-controls .drawing-tools[data-selected="true"] { flex-wrap:nowrap; }
.map-controls .drawing-tools[data-selected="true"] :is(.drawing-top-row,.drawing-bottom-row) { display:contents; }
.map-controls .drawing-tools[data-selected="true"] .drawing-modes { flex:1 1 auto; min-width:0; }
.map-controls .drawing-tools[data-selected="true"] #drawing-done { order:5; margin-left:0; }

/* Keep map-position actions compact; details stay one tap away. */
.map-context[data-kind="ground"],.map-context[data-kind="selection"] {padding:4px 5px;border-radius:8px}
.ground-heading {gap:5px}
.ground-heading .ground-coordinates {font:500 10px/1.3 ui-monospace,monospace;white-space:nowrap}
.ground-area {min-width:0;flex:1;font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-context .ground-actions {grid-template-columns:auto auto auto;gap:3px;margin:2px 0 0}
.map-context .ground-actions:not(:has([data-context="destination-cell"])) {grid-template-columns:repeat(2,minmax(0,1fr))}
.map-context .ground-actions button {display:flex;align-items:center;justify-content:center;gap:0;padding:4px 5px;font-size:11px;font-weight:500;line-height:1.2;min-width:0;min-height:30px;white-space:nowrap}
.landmark-heading strong {font-size:11px;font-weight:550;gap:4px}
.landmark-heading .placement-coordinates {display:block;margin-top:3px;font-weight:400}
.map-context .landmark-actions {grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:4px;margin:3px 0 0}
.map-context .landmark-actions button {padding:4px;font-size:11px;font-weight:500;min-height:30px}
.map-context[data-kind="selection"] .control-toggle {margin:5px 0 0;min-height:32px;padding:4px 6px}
.map-context[data-kind="selection"] .context-extra {border-top:1px solid var(--line);margin-top:6px;padding-top:3px}
.map-context .landmark-extra-actions {grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}
.map-context[data-kind="ground"] .context-help {margin:6px 0 0;font-size:11px}
@media(pointer:fine) {
 .map-context[data-kind="ground"] .context-heading>button,.map-context[data-kind="selection"] .context-heading>button {min-width:26px;min-height:26px}
}
@media(pointer:coarse) {
 .map-context .landmark-actions {grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}
 .map-context .ground-actions button,.map-context .landmark-actions button,.map-context[data-kind="selection"] .control-toggle {min-height:44px}
}
.ground-actions button::before,.landmark-actions button::before,.landmark-extra-actions button::before {display:none!important}

/* Share workspace: large image, compact controls, always-reachable export. */
.share-dialog{width:min(1120px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;overflow:hidden}
.share-dialog[open]{display:flex;flex-direction:column;gap:12px}
.share-dialog>.dialog-header{flex:none;margin:0;min-height:36px}
.share-layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:20px;align-items:start;min-height:0;overflow:auto;overscroll-behavior:contain}
.share-settings{display:flex;flex-direction:column;gap:16px;min-width:0;padding:4px 4px 12px 0}
.share-settings>label{display:flex;flex-direction:column;align-items:stretch;gap:6px;font-size:12px;width:100%}
.share-settings>label select{width:100%;min-width:0;min-height:44px}
.share-preview{order:0!important;width:100%;box-sizing:border-box;padding:0;border:0;background:transparent;margin:0;min-width:0}
.share-preview figcaption{font-size:11px;line-height:1.4;padding:8px 0 2px;min-height:0;color:var(--muted)}
.share-frame-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;width:100%;font-size:12px}
.share-frame-controls label{font-size:12px}.share-frame-controls output{text-align:right;font-variant-numeric:tabular-nums}
.share-frame-controls input{grid-column:1;min-width:0;width:100%;accent-color:var(--blue);padding:0}
.share-frame-controls button{grid-column:2;min-height:40px;padding:5px 10px;white-space:nowrap;font-size:12px}
.share-crop-notice{padding:10px 12px;border:1px solid #b18a4244;border-radius:8px;background:#d69b1810;color:#efd3a0;line-height:1.45}
.share-crop-notice:has(#share-scope-note:empty):has(#share-label-note[hidden]){display:none}
#share-include-plan{margin-top:8px;min-height:36px;font-size:12px}
.share-footer{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid var(--line);padding-top:12px;min-height:53px}
.share-actions{display:flex;gap:8px;position:static;padding:0;background:transparent;flex:none}
.share-actions button{flex:1;min-width:138px;min-height:44px;font-size:13px}
#share-image-status{margin:0;flex:1;font-size:12px;line-height:1.4}
#share-text-details,#share-detailed-orders{width:100%;box-sizing:border-box}
.share-settings details{border-top:1px solid var(--line);padding-top:12px}
.share-settings summary{font-size:12px;min-height:32px;display:list-item}
#share-text-details>label{display:grid;gap:5px;font-size:12px;margin-top:12px}
#briefing-details{height:180px}.share-settings textarea{font-size:12px}
#share-viewport{width:fit-content;max-width:100%;margin:auto;overflow:hidden;border-radius:10px;background:#172333;touch-action:none;cursor:grab}
#share-viewport.is-dragging{cursor:grabbing}#share-viewport:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
#share-preview-image{display:none!important}
#share-preview-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 225px);object-fit:contain;user-select:none;border-radius:0;touch-action:none}
@media(max-width:900px){
 .share-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px}
 .share-dialog[open]{gap:10px}.share-dialog>.dialog-header{min-height:36px}.share-dialog>.dialog-header h2{font-size:16px}
 .share-layout{display:flex;flex-direction:column;gap:14px;align-items:stretch}
 .share-settings{padding:0 2px 8px;gap:12px}.share-settings>label{flex-direction:row;align-items:center;gap:10px}
 .share-settings>label select{flex:1;width:0;font-size:12px}
 #share-viewport{width:fit-content}#share-preview-canvas{width:auto;max-height:calc(100dvh - 230px)}
 .share-footer{padding-top:10px;flex-direction:column;align-items:stretch;gap:6px}.share-actions{width:100%}.share-actions button{min-width:0}
 .share-frame-controls{grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px}
 .share-frame-controls input{grid-row:1;grid-column:2}.share-frame-controls output{grid-row:1;grid-column:3}.share-frame-controls button{grid-row:1;grid-column:4;min-height:44px}
 #share-image-status:empty{display:none}.share-crop-notice{padding:8px 10px}
}
/* Short landscape screens still need the full image in view, not a tall scroll crop. */
@media(max-width:900px) and (max-height:500px){
 .share-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px}
 #share-preview-canvas{max-height:calc(100dvh - 215px)}
 .share-settings>label{flex-direction:column;align-items:stretch;gap:4px}.share-settings>label select{width:100%;flex:none}
 .share-frame-controls{grid-template-columns:minmax(0,1fr) auto}.share-frame-controls input{grid-column:1;grid-row:2}.share-frame-controls output{grid-column:2;grid-row:1}.share-frame-controls button{grid-column:2;grid-row:2}
 .share-footer{flex-direction:row;align-items:center}.share-actions{width:auto}.share-actions button{min-width:112px}
}

.route-search-status {margin:0 8px;font-size:12px;color:var(--muted);line-height:1.4}
.route-search-status:empty {display:none}

/* UX46: clear preview ownership and direct access to timing. */
.save-state[data-preview="true"]{color:#f4cf91}
#line-more{font-weight:600;white-space:nowrap}
.route-search-status button{min-height:30px;padding:3px 9px;margin-left:4px;font-size:12px}
#share-scope-note:empty{display:none}
#share-include-plan[hidden]{display:none}
#share-include-plan{align-self:flex-start}
#drawing-tools[data-selected="true"] #draw-preset{display:block;max-width:150px}
@media(pointer:coarse){.route-search-status button{min-height:44px}}

/* Hidden editing actions must not be restored by icon-button display rules. */
.line-toolbar > [hidden]{display:none!important}

#default-timing-button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
#default-timing-dialog{width:min(430px,calc(100vw - 24px));box-sizing:border-box}
#default-timing-form{display:grid;gap:12px}#default-timing-form .dialog-header{margin:0}
#default-timing-form .dialog-note{margin:0;font-size:13px;line-height:1.5}
#default-timing-form>label:first-of-type{display:flex;justify-content:space-between}
#default-timing-form input[type=range]{width:100%;accent-color:var(--blue)}
.default-presets{display:flex;gap:6px}.default-presets button{flex:1;min-height:40px}
.default-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.default-fields label{display:grid;gap:6px;font-size:12px}
.default-fields input,.default-fields select{width:100%;min-width:0;box-sizing:border-box}
#default-timing-estimate{font-size:13px;font-weight:600;background:var(--ui-input);padding:10px;border-radius:8px}
#default-timing-form .remember-timing{display:flex;align-items:center;gap:8px;font-size:12px}.remember-timing input{width:18px;min-height:18px;margin:0}
@media(max-width:700px){.workspace-actions #default-timing-button{width:40px;min-width:40px;padding:3px 2px;flex-direction:column;gap:0;font-size:9px;min-height:44px}.workspace-actions #default-timing-button svg{width:16px;height:16px}.plan-bar .workspace-actions{gap:3px}#default-timing-dialog{padding:14px}.default-fields{gap:8px}}
/* Keep compact control rows horizontal despite the shared stacked-label style. */
#default-timing-form>label:first-of-type{flex-direction:row;align-items:center}
#default-timing-form .remember-timing{flex-direction:row;justify-content:flex-start}
#default-timing-form .small{margin:0;font-size:12px;line-height:1.4}
#default-star{font-size:12px}
@media(max-width:480px){#commander-route{padding:6px 8px;margin-bottom:4px}.commander-route-copy .route-origin{display:none}.commander-route-copy strong{font-size:12px}}

/* UX52: map-first inspection and explicitly scoped timing. */
#map-context[data-kind="order"] .plant-completion{margin:4px 0 8px;padding:7px 9px;gap:4px}
#map-context[data-kind="order"] .plant-completion strong{font-size:12px;line-height:1.4}
#map-context[data-kind="order"] .selected-actions{display:grid;grid-template-columns:1.2fr 1fr .85fr;gap:5px}
#map-context[data-kind="order"] .selected-actions button{min-height:36px;font-size:12px;padding:5px}
#map-context[data-kind="order"] .context-extra{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
#map-context[data-kind="order"] .context-extra .selection-summary{font-size:10px;line-height:1.5;margin-bottom:7px}
#commander-custom-note:empty{display:none}
.commander-fields small{font-size:10px;color:var(--muted);line-height:1.35}
.share-preview .share-drag-help{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
#inspect-share-image{font-size:11px;min-height:32px;padding:4px 8px}
.share-inspect-dialog{width:calc(100vw - 16px);max-width:none;height:calc(100dvh - 16px);max-height:none;box-sizing:border-box;margin:8px;padding:12px;overflow:hidden}
.share-inspect-dialog[open]{display:flex;flex-direction:column;gap:10px}
.share-inspect-dialog .dialog-header,.inspect-image-controls,.share-inspect-dialog>p{flex:none;margin:0}
.inspect-image-stage{flex:1;min-height:0;overflow:auto;background:#08121b;overscroll-behavior:contain;touch-action:pan-x pan-y;cursor:grab;border-radius:8px}
.inspect-image-stage:active{cursor:grabbing}
#inspect-image{display:block;max-width:none;max-height:none;margin:auto;user-select:none}
.inspect-image-controls{display:flex;align-items:center;gap:12px}
.inspect-image-controls input{flex:1;min-width:0}.inspect-image-controls output{min-width:42px}
@media(max-width:600px){
 #map-context[data-kind="order"] .selected-actions button{min-height:44px}
 #map-context[data-kind="order"] .context-heading button{min-width:36px;min-height:36px}
 .commander-route .route-origin{display:block!important;font-size:10px}
 .commander-route .route-visual-metrics{flex-wrap:wrap;gap:3px 8px}
 .share-preview .share-drag-help{gap:4px;padding:4px 0;font-size:10px}
 #inspect-share-image{min-height:36px}
 #share-preview-canvas{max-height:calc(100dvh - 260px)}
}

/* Leave equal space for the two direct map actions on narrow screens. */
@media(max-width:560px){
  .plan-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;}
  #route-timing-button{width:40px;min-width:40px;padding:7px;}
  #route-timing-button span{display:none;}
  #map-start-button{grid-column:1 / 3;justify-content:flex-start;white-space:nowrap;}
  #map-destination-button{grid-column:3;white-space:nowrap;min-width:112px;}
  .plan-bar .workspace-actions{gap:3px;}
}

/* Alpha 2: precise touch input, reachable actions, and visible export framing. */
.commander-unit-heading{display:flex;align-items:center;gap:12px;justify-content:space-between}
.commander-unit-heading label{flex:1}
#commander-units-number{width:90px;min-width:0;text-align:right;font-variant-numeric:tabular-nums;padding:6px 9px}
.share-footer{flex-wrap:wrap}
.share-footer .share-crop-notice{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;font-size:12px}
.share-footer .share-crop-notice:has(#share-scope-note:empty):has(#share-label-note[hidden]){display:none}
.share-footer #share-scope-note{margin:0;font-size:12px;line-height:1.35}
.share-footer #share-include-plan{flex:none;margin:0;align-self:center}
@media(max-width:900px){.share-footer .share-crop-notice{flex-basis:auto}}
@media(pointer:coarse){
 .commander-settings-panel :is(button,input:not([type=range]):not([type=checkbox]),select){min-height:44px}
 #map-context[data-kind="order"] .selected-actions button,#inspect-share-image{min-height:44px}
}

@media(max-width:600px){
 .line-toolbar :is(#line-clear,#line-delete){font-size:0;width:44px;min-width:44px;min-height:44px;gap:0;padding:8px;flex:none}
 .line-toolbar :is(#line-clear,#line-delete)::before{width:18px;height:18px;flex-basis:18px}
 .line-toolbar :is(#line-more,#line-done){min-height:44px}
}

/* alpha.3: switch routes first; edit only when requested. */
#route-switcher:popover-open{overflow-y:auto;overscroll-behavior:contain;gap:4px}
#route-switcher [hidden]{display:none!important}
#route-switcher .quick-routes-header{gap:6px;padding-bottom:2px;flex-shrink:0}
#route-switcher .quick-routes-header h2{flex:1;min-width:0}
#route-switcher .quick-routes-header button{min-height:36px;padding:5px 8px;font-size:11px}
#route-switcher .quick-close{color:var(--muted);background:transparent;border-color:transparent}
#route-switcher #quick-route-list{max-height:none;flex-shrink:0;overflow:visible;padding:2px}
#route-switcher .quick-route-row{display:flex;gap:3px;align-items:center}
#route-switcher .quick-route{min-width:0;flex:1;gap:6px}
#route-switcher .quick-route-edit{flex:0 0 32px;width:32px;min-height:36px;padding:8px;border:0;background:transparent;color:var(--muted)}
.quick-route-edit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto}
#route-switcher .quick-route-time{max-width:90px;font-size:10px}
#quick-route-editor{border-top:1px solid var(--line);padding:8px 2px 2px;flex-shrink:0}
.quick-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.quick-editor-heading h3{font-size:12px;margin:0}
.quick-editor-heading button{font-size:11px;min-height:34px}
#quick-team-help,#quick-add-timing{font-size:11px;line-height:1.45;margin:6px 0}
#route-switcher .quick-routes-footer{margin-top:5px;padding-top:0;border:0}
#route-switcher .quick-share{margin-top:4px;min-height:38px;font-size:12px;flex-shrink:0;background:#193d3b;color:#bdf4e7;border-color:#37685f}
#quick-route-add-options{padding:6px 8px 10px;border:1px solid var(--line);border-radius:10px;flex-shrink:0}
.quick-add-choices{display:flex;gap:6px}.quick-add-choices button{flex:1;font-size:11px;min-height:38px}
.share-orders-copy{display:flex;flex-direction:column;gap:5px}.share-orders-copy small{font-size:11px;color:var(--muted);text-align:center}
@media(pointer:coarse),(max-width:600px){#route-switcher .quick-routes-header button,#route-switcher .quick-route-edit,#route-switcher .quick-share,#route-switcher .quick-routes-footer button,.quick-add-choices button,.quick-editor-heading button{min-height:44px}#route-switcher .quick-route-edit{flex-basis:44px;width:44px}#route-switcher .quick-route-time{max-width:76px}#route-switcher .quick-route-copy strong{font-size:12px}#route-switcher .quick-route-copy small{font-size:10px}.share-orders-copy button{min-height:44px}}

/* alpha.4: route editing stays on the map with secondary actions tucked away. */
#commander-adjust-line{white-space:nowrap;font-size:11px;min-height:40px}
#commander-adjust-line[hidden],#quick-adjust-line[hidden],#line-actions-menu [hidden]{display:none!important}
#quick-adjust-line{min-height:44px;margin-top:8px;background:var(--pale);color:#b4f4df;border-color:var(--ui-selected-line)}
#route-lines-popover{position:fixed;inset:auto;margin:0;width:330px;max-width:calc(100vw - 16px);padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--ui-raised);color:var(--ink);box-shadow:var(--ui-shadow);overflow:auto}
#route-line-options{display:grid;gap:6px;margin-top:8px}#route-line-options button{text-align:left;display:grid;gap:4px;min-height:52px;padding:9px}
#route-line-options small{font-size:11px;color:var(--muted)}#route-lines-close{min-height:44px}
#line-actions-menu{flex:none}#line-actions-menu>summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;min-height:44px;display:flex;align-items:center;padding:6px 10px;color:var(--ink);background:var(--ui-control)}
#line-actions-menu>summary::-webkit-details-marker{display:none}#line-actions-menu>div{display:flex;gap:6px;padding:6px 0}
#line-actions-menu .danger{color:var(--ui-danger)}
.line-tools #line-actions-menu :is(#line-clear,#line-delete){font-size:11px;width:auto;min-width:0;min-height:44px;padding:6px 10px;gap:6px}
.line-tools:has(#line-actions-menu[open]) .line-toolbar{flex-wrap:wrap}.line-tools:has(#line-actions-menu[open]) #line-actions-menu{order:3;width:100%}
.line-tools[data-compact="true"] .line-summary{gap:8px;margin:6px 0 0}.line-tools[data-compact="true"] .line-summary>div>span{font-size:11px;line-height:1.35;text-transform:none}
.line-tools[data-compact="true"] #line-place{min-height:44px;white-space:nowrap;font-size:11px;padding:6px 10px}
@media(pointer:coarse),(max-width:600px){#commander-adjust-line{min-height:44px}.commander-route-actions{gap:4px}.line-tools[data-compact="true"]{width:300px}.line-tools[data-compact="true"] .line-toolbar{justify-content:space-between;gap:5px}.line-tools[data-compact="true"] #line-more{flex:1;margin:0;font-size:11px}.line-tools[data-compact="true"] #line-done{margin:0}.line-tools[data-compact="true"] #line-route-total{font-size:10px;line-height:1.3}}

/* Alpha 7: plan-wide research, compact route timing and explicit multi-route apply. */
.map-plan-actions{display:flex;gap:5px;align-items:stretch;min-width:0}
#tech-bonus-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-height:44px;min-width:84px;font-size:11px;padding:4px 9px;background:var(--paper);border-color:var(--line);color:var(--ink);white-space:nowrap}
#tech-bonus-button small{font-size:10px;color:#a4ded0;line-height:1.2}
#tech-bonus-dialog{width:min(360px,calc(100vw - 24px));padding:18px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:16px}
#tech-bonus-dialog form{display:grid;gap:12px}#tech-bonus-dialog label{display:grid;gap:6px;font-size:13px}#tech-bonus-dialog select{min-height:44px;width:100%;font-size:16px}#tech-bonus-dialog p{font-size:13px;line-height:1.5;margin:0}#tech-bonus-dialog small{font-size:11px;line-height:1.5;color:var(--muted)}#tech-bonus-dialog button{min-height:44px}
#commander-settings-panel form{gap:8px}.commander-settings-heading{margin-bottom:9px}.commander-settings-panel h2{font-size:14px}
.commander-settings-panel .commander-arrival{display:flex;align-items:center;justify-content:space-between;gap:10px}.commander-arrival input{width:90px;flex:0 0 90px}
#commander-advanced{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#commander-advanced>summary{display:grid;gap:2px;align-content:center;min-height:44px;padding:5px 20px 5px 0;position:relative;font-size:11px;cursor:pointer;list-style:none}
#commander-advanced>summary::-webkit-details-marker{display:none}#commander-advanced>summary::after{content:'⌄';position:absolute;right:3px;top:12px;font-size:15px}#commander-advanced[open]>summary::after{content:'⌃'}#commander-team-value{font-size:10px;color:var(--muted);line-height:1.3}#commander-advanced>label{margin:4px 0 10px}
#commander-custom-note:empty{display:none}.commander-apply-actions{position:sticky;bottom:-12px;display:flex;gap:7px;background:var(--paper);padding:8px 0 2px;box-shadow:0 -6px 10px var(--paper);z-index:1}.commander-apply-actions button{flex:1;min-width:0;min-height:44px;font-size:12px;padding:6px 7px;line-height:1.2}.commander-settings-panel .commander-estimate{padding:8px 10px}.commander-settings-panel .commander-estimate strong{font-size:20px}
#line-assumption-note{font-size:11px;line-height:1.4;margin:4px 0}#line-assumption-note[hidden],#line-star-totem[hidden],[data-t="lineResearchDraft"][hidden]{display:none!important}
@media(max-width:700px){
 .plan-bar .map-plan-actions{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 88px;gap:5px}
 .map-plan-actions #map-start-button,.map-plan-actions #map-destination-button,.map-plan-actions #tech-bonus-button{grid-column:auto;grid-row:auto;max-width:none;min-width:0;width:100%;font-size:11px;padding:5px;overflow:hidden}
 .map-plan-actions #map-start-button{justify-content:flex-start}.map-plan-actions #map-destination-button{justify-content:center}.map-plan-actions #tech-bonus-button{font-size:10px}
 .commander-settings-panel .commander-apply-actions button{min-height:44px}
}
@media(min-width:701px) and (max-width:999px){.map-plan-actions{flex:1}#tech-bonus-button{min-width:84px}}
.line-tools[data-editable="true"] #line-preview-label{display:none}
.line-tools .line-march-label input{width:76px;min-width:76px}

/* Alpha 7: preview the research impact; adjust march time without a keyboard. */
#tech-bonus-dialog form{gap:10px}#tech-speed-help{margin-top:-5px}
.tech-time-preview{display:grid;gap:5px;padding:10px 12px;background:var(--pale);border:1px solid var(--ui-selected-line);border-radius:10px;min-width:0}
.tech-time-preview[hidden]{display:none}.tech-time-preview>span{font-size:11px;overflow-wrap:anywhere}
.tech-time-preview>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-variant-numeric:tabular-nums}
#tech-preview-before{font-size:12px}#tech-preview-after{font-size:16px;color:#b4f4df;line-height:1.4}
.tech-time-preview[data-caution="true"] #tech-preview-after{color:#f4cf91}
#tech-bonus-dialog .dialog-actions{display:flex;gap:8px}#tech-bonus-dialog .dialog-actions button{flex:1;min-width:0}
.march-setting,.line-tools .line-march-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.march-setting>label{display:grid;gap:3px;font-size:12px;line-height:1.3;min-width:0}
.march-setting>label small{font-size:10px;font-weight:400;color:var(--muted)}
.minute-stepper{display:flex;flex:none;align-items:center;gap:3px}
.minute-stepper button{width:44px;min-width:44px;min-height:44px;padding:3px;font-size:20px;line-height:1}
.minute-stepper #commander-march,.minute-stepper #line-march{width:62px;min-width:62px;flex:0 0 62px;min-height:44px;text-align:center;font-size:16px;padding:4px;box-sizing:border-box;appearance:textfield;-moz-appearance:textfield}
.minute-stepper input::-webkit-inner-spin-button,.minute-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#commander-close-settings{font-size:12px;padding:5px 8px;min-height:44px}
#commander-apply-next{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#commander-next-name{font-size:10px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
#commander-settings-panel{max-width:calc(100vw - 16px);box-sizing:border-box}
#commander-settings-panel:not([open]){display:none}
.commander-apply-actions button[hidden]{display:none}
.commander-apply-actions button small{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.commander-apply-actions:has(#commander-apply-previous:not([hidden])):has(#commander-apply-next:not([hidden]))>.primary{flex:.7}
#commander-advanced .commander-check{padding-bottom:8px}
@media(max-width:360px){.minute-stepper{gap:2px}.minute-stepper #commander-march,.minute-stepper #line-march{width:54px;min-width:54px;flex-basis:54px}.march-setting>label{font-size:11px}}

/* alpha.7: route actions first; no keyboard until naming is requested. */
.quick-primary-actions{display:flex;gap:6px;margin:8px 0}
.quick-primary-actions button{flex:1;min-height:44px;font-size:12px}
.quick-primary-actions #quick-adjust-line{margin:0}
.quick-disclosure{border-top:1px solid var(--line);margin:0;padding:0}
.quick-disclosure>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--muted);list-style:none;padding:6px 2px}
.quick-disclosure>summary::-webkit-details-marker{display:none}
.quick-disclosure>summary::after{content:'⌄';margin-left:auto;font-size:16px}
.quick-disclosure[open]>summary::after{transform:rotate(180deg)}
.quick-disclosure[open]>summary{color:var(--ink)}
#quick-route-editor .quick-route-fields{margin-top:4px}
#quick-edit-title:focus{outline:none}
#route-switcher .quick-route-removal button{min-height:44px}
#route-switcher:has(#quick-route-editor:not([hidden]))>.quick-routes-header,#route-switcher:has(#quick-route-editor:not([hidden]))>#quick-routes-context{display:none}
#route-switcher:has(#quick-route-editor:not([hidden]))>#quick-share-plan{display:none}
#route-switcher:has(#quick-route-editor:not([hidden])) #quick-route-editor{border-top:0;padding-top:0}
#quick-edit-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#quick-edit-done{flex-shrink:0}
.quick-route-paging{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
#quick-route-editor .quick-editor-heading{gap:6px}
#quick-route-editor .quick-editor-heading button{width:44px;min-width:44px;height:44px;padding:10px;display:grid;place-items:center}
#quick-route-editor .quick-editor-heading button[hidden]{display:none}
#quick-route-editor .quick-editor-heading button:disabled{opacity:.3;cursor:default}
#quick-route-editor .quick-editor-heading svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#quick-edit-title{border-left:3px solid var(--route-colour);padding-left:7px}

/* alpha.8: keep the route preview shallow while leaving warnings visible. */
@media(max-width:600px),(max-height:500px){
 .line-tools[data-compact="true"]{width:320px;max-width:calc(100% - 16px);padding:8px}
 .line-tools[data-compact="true"] .line-toolbar{gap:5px}
 .line-tools[data-compact="true"] .line-summary{margin-top:5px;align-items:center}
 .line-tools[data-compact="true"]:not([data-timing-caution="true"]) #line-route-total{display:none}
 .line-tools[data-compact="true"] .line-summary>div>span{font-size:11px;line-height:1.4}
 .line-tools[data-compact="true"] #line-build-time{font-size:16px;line-height:1.4}
 .line-tools[data-compact="true"] #line-place{min-height:44px}
}
.share-actions [hidden]{display:none!important}
.map-stage:has(#placement-mode:not([hidden])) .map-pan-pad{top:auto;bottom:60px}

@media(max-width:600px),(max-height:500px){
 .line-tools[data-compact="true"][data-timing-caution="false"]{display:grid;grid-template-columns:minmax(56px,1fr) 44px 44px 52px 44px;gap:4px;width:340px;overflow:visible}
 .line-tools[data-compact="true"][data-timing-caution="false"] :is(.line-toolbar,.line-summary){display:contents}
 .line-tools[data-compact="true"][data-timing-caution="false"] .line-summary>div{grid-column:1;grid-row:1;align-self:center;min-width:0}
 .line-tools[data-compact="true"][data-timing-caution="false"] .line-summary>div>span{font-size:0;line-height:1.3;display:block}
 .line-tools[data-compact="true"][data-timing-caution="false"] .line-summary>div>span::after{content:attr(data-short-label);font-size:10px}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-more{grid-column:2;grid-row:1;font-size:0;padding:10px;min-width:44px}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-more::before{content:'';display:block;width:20px;height:20px;background:currentColor;mask:var(--icon-clock) center/contain no-repeat}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-actions-menu{grid-column:3;grid-row:1;align-self:center;width:auto;position:static}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-actions-menu>summary{font-size:0;justify-content:center;padding:6px;min-width:44px}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-actions-menu>summary::after{content:'•••';font-size:12px}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-actions-menu>div{position:absolute;top:100%;left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:var(--ui-shadow)}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-place{grid-column:4;grid-row:1;min-width:52px;font-size:0;padding:6px;gap:0}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-place::before{display:none}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-place::after{content:attr(data-short-label);font-size:11px}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-done{grid-column:5;grid-row:1;font-size:0;padding:6px;min-width:44px}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-done::after{content:'×';font-size:22px;line-height:1}
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-selected-completion{grid-column:1/-1}
}
@media(max-width:360px){
 .line-tools[data-compact="true"][data-timing-caution="false"] #line-build-time{font-size:13px;line-height:1.35}
}

/* alpha.11: edit an estimate directly without opening the route action menu. */
#route-switcher .quick-route-timing{flex:0 0 82px;min-width:0;min-height:44px;max-width:82px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;line-height:1.25;background:var(--pale);border:1px solid var(--line);border-radius:9px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#route-switcher .quick-route-timing svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#route-switcher .quick-route-timing.caution{color:#f4cf91}
#route-switcher .quick-route-timing:disabled{background:transparent;border-color:transparent;opacity:.65}
#route-switcher .quick-route-timing:disabled svg{display:none}
@media(max-width:360px){#route-switcher .quick-route-timing{flex-basis:76px;max-width:76px;font-size:10px}}

.quick-route-timing-value{display:flex;align-items:center;justify-content:center;gap:3px;width:100%}.quick-route-timing-value svg{flex-shrink:0}.quick-route-timing small{font-size:9px;font-weight:400;color:var(--muted)}

/* alpha.12: keep timing controls in view when route names are long. */
.commander-settings-heading{gap:8px}
#commander-settings-title{min-width:0;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.5}
#commander-close-settings{flex-shrink:0}

/* Alpha 13: shorter timing panel; fixed action positions while paging routes. */
.commander-settings-panel .commander-estimate{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 8px}
.commander-estimate>span{flex:1 1 85px}
.commander-estimate>strong{flex:0 1 auto;max-width:100%;overflow-wrap:anywhere}
.commander-estimate>small{flex:1 0 100%;line-height:1.45}
#commander-advanced .commander-timing-help{margin:6px 0}
#commander-advanced .commander-timing-help>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
#commander-advanced .commander-timing-help>summary::before{content:'▸';margin-right:6px}
#commander-advanced .commander-timing-help[open]>summary::before{content:'▾'}
.commander-apply-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#commander-apply-previous{grid-column:1;grid-row:1}
.commander-apply-actions>.primary{grid-column:2;grid-row:1}
#commander-apply-next{grid-column:3;grid-row:1}
.commander-apply-actions:not(:has(#commander-apply-previous:not([hidden]))):not(:has(#commander-apply-next:not([hidden])))>.primary{grid-column:1/-1}
.commander-apply-actions button{padding-inline:4px}

/* Keep cancellation available when advanced timing fields scroll. */
.commander-settings-heading{position:sticky;top:0;z-index:2;background:var(--paper);box-shadow:0 -16px 0 var(--paper),0 7px 10px var(--paper)}

/* Compact route editing keeps the estimate readable on narrow phones. */
#commander-adjust-line>svg{display:none}
@media(max-width:700px){
 #commander-adjust-line{width:44px;min-width:44px;min-height:44px;padding:3px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}
 #commander-adjust-line>svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
 #commander-adjust-line>span{font-size:0;line-height:1}
 #commander-adjust-line>span::after{content:'Edit';font-size:10px;line-height:1.2}
 :lang(zh-TW) #commander-adjust-line>span::after{content:'調整'}
}

/* Keep history and view controls separate on narrow phones. */
@media(max-width:420px) {
 .history-controls #undo,.history-controls #redo { width:44px; min-width:44px; min-height:44px; padding:0; gap:0; }
 .history-controls #undo span { display:none; }
 .zoom button { width:44px; min-width:44px; min-height:44px; padding:0; font-size:20px; }
 .zoom #fit,.zoom #fit-orders { font-size:0; gap:0; }
 .zoom #fit::before,.zoom #fit-orders::before { width:20px; height:20px; flex-basis:20px; }
}

/* Carry the route's map colour into its timing editor without another control. */
#commander-settings-title{border-left:3px solid var(--route-colour,var(--blue));padding-left:8px}

/* Drawing choices are visible, with selection and camera actions beside them. */
.map-controls #drawing-tools,.map-controls #drawing-tools[data-selected="true"]{display:flex;flex-wrap:wrap;gap:5px;min-width:0;flex:1 1 100%}
.map-controls #drawing-tools[hidden]{display:none}
.map-controls #drawing-tools :is(.drawing-top-row,.drawing-bottom-row),.map-controls #drawing-tools[data-selected="true"] :is(.drawing-top-row,.drawing-bottom-row){display:flex;flex:1 1 100%;width:100%;gap:5px;align-items:center;min-width:0}
.map-controls #drawing-tools .drawing-modes{display:block;flex:1;min-width:0;padding:0;background:transparent}
#drawing-tools #draw-preset{display:none!important}
.drawing-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-width:480px}
.drawing-presets button{min-width:0;min-height:44px;padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;line-height:1.15;border:1px solid var(--line);background:var(--ui-control)}
.drawing-presets svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.drawing-presets button[aria-pressed="true"],#drawing-tools [data-draw-kind][aria-pressed="true"]{background:var(--pale);border-color:var(--blue);color:var(--ink)}
#drawing-tools .drawing-bottom-row>[data-draw-kind]{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:11px;min-width:44px;min-height:44px;padding:4px 6px}
#drawing-tools .drawing-bottom-row>button,#drawing-tools .drawing-bottom-row>.drawing-extra>summary{min-height:44px;font-size:11px}
.map-controls #drawing-tools #drawing-done{order:5;margin-left:auto}
#drawing-tools #drawing-edit-hint{font-size:11px;line-height:1.3;margin:0;color:var(--muted);flex-basis:100%}
#drawing-tools #drawing-edit-hint[hidden]{display:none}
@media(min-width:900px){
 .map-controls #drawing-tools,.map-controls #drawing-tools[data-selected="true"]{flex-wrap:nowrap;flex-basis:auto}
 .map-controls #drawing-tools :is(.drawing-top-row,.drawing-bottom-row),.map-controls #drawing-tools[data-selected="true"] :is(.drawing-top-row,.drawing-bottom-row){flex:1 1 auto;width:auto}
 #drawing-tools .drawing-top-row{min-width:300px}
 #drawing-tools #drawing-edit-hint{display:none}
}

/* Keep drawing controls visible without squeezing the phone map. */
#drawing-tools [data-draw-kind="edit"]{--control-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%203%2014%209-7%201-3%207-4-17Z%22/%3E%3C/svg%3E")}
@media(max-width:700px){
 body:has(#drawing-tools:not([hidden])) .plan-bar .map-plan-actions,
 body:has(#drawing-tools:not([hidden])) #route-timing-button{display:none}
}

@media(max-width:700px){
 #drawing-tools .drawing-bottom-row>button,#drawing-tools .drawing-bottom-row>.drawing-extra>summary{padding:4px;font-size:10px;gap:3px;min-width:44px}
 #drawing-tools .drawing-bottom-row>button::before{width:15px;height:15px;flex-basis:15px}
}

/* Compact, single-level arrow actions and steady editing guidance. */
.map-controls #drawing-extra>div{width:222px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.map-controls #drawing-context{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 2px;padding:0 0 6px}
.map-controls #drawing-context :is(button,select),.map-controls #drawing-extra>div>button{min-width:0;min-height:44px;padding:5px;font-size:11px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.map-controls #drawing-context button:not([hidden]){display:flex!important;align-items:center;gap:4px}
.map-controls #drawing-context button::before{width:15px;height:15px;flex-basis:15px}
#drawing-tools #drawing-edit-hint{min-height:1.3em}
.map-stage:has(canvas[data-adjusting-drawing="true"]) :is(.map-pan-pad,.history-controls,.zoom,.map-badges){visibility:hidden;pointer-events:none}

/* The drawing toolbar replaces the general map tools on phones. Done returns
   to building and map settings; drawing choices stay visible without a menu. */
@media(max-width:700px){
 .map-controls:has(#drawing-tools:not([hidden]))>.map-toolbar{display:none}
}

/* Overlapping drawings use a short picker, leaving the marks in view. */
#map-context[data-drawing-choices="true"] .map-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#map-context[data-drawing-choices="true"] .map-choice-list button{min-width:0;min-height:44px;padding:5px;gap:5px;font-size:11px}
#map-context[data-drawing-choices="true"] .selection-drawing-icon{width:20px;height:20px;font-size:18px}
#map-context[data-drawing-choices="true"] .map-choice-list strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;font-size:11px}

/* Style stays beside its toolbar without resizing the map beneath a finger. */
.map-controls #drawing-tools .drawing-bottom-row{position:relative}
.map-controls #drawing-tools .drawing-style-options{position:absolute;left:0;top:calc(100% + 5px);z-index:9;flex:none;width:max-content;max-width:100%;padding:6px;gap:5px;border:1px solid var(--line);border-radius:9px;background:var(--ui-raised);box-shadow:var(--ui-shadow)}
.map-controls #drawing-tools .drawing-style-options .drawing-colours{gap:3px;flex-shrink:1;min-width:0}
.map-controls #drawing-tools .drawing-style-options .drawing-swatch{width:34px;min-width:34px;min-height:44px;padding:0}
.map-controls #drawing-tools .drawing-style-options #draw-width{min-width:0;max-width:106px;min-height:44px;padding:4px;font-size:11px}

/* A source or destination near the lower edge must remain tappable on phones.
   These pickers already support one-finger map panning. */
@media(max-width:700px){
 body:has(#map-start-button[aria-pressed="true"]) #map-pan-pad,
 body:has(#map-destination-button[aria-pressed="true"]) #map-pan-pad{display:none}
}

/* Keep the phone route picker short. Share remains in the page header;
   route names, conditions and individual timing actions stay available. */
@media(max-width:700px){
 #route-switcher #quick-share-plan{display:none}
 #route-switcher .quick-route{min-height:52px;padding-top:5px;padding-bottom:5px}
 #route-switcher .quick-routes-header{position:sticky;top:0;z-index:2;background:var(--ui-raised)}
}

/* Editing keeps the mobile map open: creation choices return with Add.
   Empty-map dragging pans, so pan buttons cannot cover the selected mark. */
.map-controls #drawing-add{display:none}
@media(max-width:700px){
 .map-controls #drawing-tools[data-selected="true"] .drawing-top-row,
 .map-controls #drawing-tools[data-selected="true"] [data-draw-kind="hand"]{display:none}
 .map-controls #drawing-tools[data-selected="true"] #drawing-add{display:inline-flex;align-items:center;justify-content:center;gap:4px}
 #drawing-add::before{content:'+';font-size:18px;line-height:1}
 body:has(#drawing-tools[data-selected="true"]:not([hidden])) #map-pan-pad{display:none}
}

/* Compact notices beneath the image; neither covers the battle plan. */
.share-footer .share-crop-notice{flex-wrap:wrap}
.share-footer #share-label-note{margin:0;font-size:12px;line-height:1.35;flex:1 1 100%}

/* Phone chrome uses spacing rather than smaller touch controls. Route timing,
   construction actions and drawing choices keep their existing entry points. */
@media(max-width:700px){
 .topbar{padding-top:2px;padding-bottom:2px;gap:5px}
 main{padding-top:3px;padding-bottom:3px}
 .plan-bar{gap:3px;margin-bottom:3px}
 .plan-bar .map-plan-actions{gap:3px}
 #commander-route{padding:2px 5px;margin-bottom:3px;gap:5px;min-height:48px;align-items:center}
 .commander-route-copy{gap:0}
 .commander-route-copy strong{font-size:11px;line-height:1.25}
 #commander-route-summary{gap:1px 5px;line-height:1.25;font-size:10px}
 .commander-route .route-visual-metrics{gap:1px 5px}
 .commander-route .route-origin{font-size:9px;line-height:1.2}
 .commander-route .metric-art{width:16px;height:16px}
 .commander-route .route-metric{gap:3px}
 .commander-route .route-metric b{font-size:11px}
 .commander-route-actions{gap:3px}
 .map-controls{padding:2px;gap:2px}
 .map-controls>.map-toolbar{padding:0;gap:2px}
 .map-controls .tools{gap:2px}
 .map-controls .map-utility{gap:2px}
 .map-caption{gap:4px;padding:0 5px;align-items:center;min-height:44px}
 #map-hint{min-width:0;white-space:normal;font-size:9px;line-height:1.2}
 #map-info-button{min-height:44px;flex:none;padding:3px 5px;font-size:10px}
 .map-controls #drawing-tools{gap:2px;padding:0}
 .map-controls #drawing-tools .drawing-top-row,
 .map-controls #drawing-tools .drawing-bottom-row{gap:3px}
 #drawing-tools .drawing-presets{gap:2px}
 #drawing-tools #drawing-edit-hint{margin:2px 0;font-size:10px;line-height:1.2;min-height:1.2em}
 .top-actions :is(button,select),.plan-bar :is(button,select),
 .map-controls :is(button,select),.map-controls .more-map-tools>summary,
 .map-controls .drawing-extra>summary,.commander-route-actions button{min-height:44px}
}

@media(max-width:700px){.map-caption{display:none}}
#map-options-hint:empty{display:none}

/* Phone route actions share one row. The picker already carries the estimate. */
@media(max-width:700px){
 .plan-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
 .plan-bar>label{grid-column:1;grid-row:1;min-width:0}
 .plan-bar .route-picker{grid-column:2;grid-row:1;width:100%;max-width:none}
 .plan-bar .workspace-actions{grid-column:3;grid-row:1}
 #commander-route{display:none!important}
 .plan-bar .map-plan-actions{display:flex;gap:3px}
 .map-plan-actions .commander-route-actions{display:contents}
 .map-plan-actions .commander-route-actions[hidden]{display:none!important}
 .map-plan-actions>button,.map-plan-actions .commander-route-actions>button{
  flex:1 1 0;width:0;min-width:44px;min-height:44px;padding:3px 2px;gap:1px;justify-content:center;align-items:center;flex-direction:column
 }
 .map-plan-actions :is(#map-start-button,#map-destination-button,#tech-bonus-button){min-width:44px;width:0}
 .map-plan-actions :is(#map-start-button,#map-destination-button,#commander-draw){font-size:0;line-height:1}
 .map-plan-actions #map-start-button>*{display:none}
 .map-plan-actions :is(#map-start-button,#map-destination-button,#commander-draw)::before{width:17px;height:17px;flex-basis:17px}
 .map-plan-actions :is(#map-start-button,#map-destination-button,#commander-draw)::after{content:attr(data-compact-label);font-size:10px;line-height:1.2;white-space:nowrap}
 .map-plan-actions #commander-settings{font-size:0;gap:1px}
 .map-plan-actions #commander-settings::before{width:17px;height:17px;flex-basis:17px}
 .map-plan-actions #commander-settings::after{content:'Time';font-size:10px;line-height:1.2}
 :lang(zh-TW) .map-plan-actions #commander-settings::after{content:'時間'}
 .map-plan-actions #tech-bonus-button{font-size:10px;line-height:1.2}
 .map-plan-actions #tech-bonus-button>span{font-size:0;line-height:1}
 .map-plan-actions #tech-bonus-button>span::after{content:'Tech';font-size:10px;line-height:1.2}
 :lang(zh-TW) .map-plan-actions #tech-bonus-button>span::after{content:'科技'}
}

/* Direct bend actions occupy the existing selected-arrow row. */
.map-controls #drawing-bends{display:contents}
.map-controls #drawing-bends[hidden]{display:none!important}
.map-controls #drawing-bends button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;padding:3px;font-size:10px;line-height:1.1}
.map-controls #drawing-bends button[hidden]{display:none!important}
.map-controls #drawing-bends button::before{display:none}
.map-controls #drawing-bends svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.map-controls #drawing-bends span{max-width:44px;white-space:normal;text-align:center}
@media(max-width:700px){
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) [data-draw-kind="edit"]{display:none}
}

@media(max-width:700px){
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) .drawing-bottom-row{flex-wrap:nowrap}
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) .drawing-bottom-row>button,
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) #drawing-bends>button,
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) #drawing-extra{flex:1 1 0;min-width:44px;width:0}
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) :is(#drawing-add,#draw-style-toggle,#drawing-done){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px}
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) #drawing-extra>summary{padding-inline:2px;text-align:center;justify-content:center}
}

/* Short touch screens use their width for controls, keeping the map usable. */
@media(min-width:600px) and (max-height:500px) and (pointer:coarse){
 #route-switcher #quick-share-plan{display:none}
 #route-switcher .quick-routes-header{position:sticky;top:0;z-index:2;background:var(--ui-raised)}
 .topbar{padding-block:2px}
 main{padding-block:3px}
 .plan-bar{margin-bottom:3px;gap:4px}
 #commander-route{min-height:44px;padding:2px 5px;margin-bottom:3px}
 #commander-route .commander-route-copy{display:none}
 #commander-route .commander-route-actions{margin-left:auto}
 .map-controls{padding:2px;gap:2px}
 .map-controls>.map-toolbar{padding:0}
 .map-caption{display:none}
 body:has(#drawing-tools:not([hidden])) #commander-route,
 .map-controls:has(#drawing-tools:not([hidden]))>.map-toolbar{display:none}
 .map-controls #drawing-tools,.map-controls #drawing-tools[data-selected="true"]{flex-wrap:nowrap;flex-basis:auto;gap:4px;padding:0}
 .map-controls #drawing-tools :is(.drawing-top-row,.drawing-bottom-row),
 .map-controls #drawing-tools[data-selected="true"] :is(.drawing-top-row,.drawing-bottom-row){flex:1 1 auto;width:auto;gap:4px}
 .map-controls #drawing-tools .drawing-top-row{min-width:276px}
 .map-controls #drawing-tools .drawing-bottom-row{flex-wrap:nowrap}
 .map-controls #drawing-tools #drawing-edit-hint{display:none}
 .map-controls #drawing-tools[data-selected="true"] .drawing-top-row,
 .map-controls #drawing-tools[data-selected="true"] [data-draw-kind="hand"],
 .map-controls #drawing-tools:has(#drawing-bends:not([hidden])) [data-draw-kind="edit"]{display:none}
 .map-controls #drawing-tools[data-selected="true"] #drawing-add{display:inline-flex;align-items:center;justify-content:center}
 body:has(#drawing-tools[data-selected="true"]:not([hidden])) #map-pan-pad{display:none}
 .top-actions :is(button,select),.plan-bar :is(button,select),
 .commander-route-actions button,.map-controls :is(button,select),
 .map-controls .more-map-tools>summary,.map-controls .drawing-extra>summary{min-height:44px}
}
@media(min-width:600px) and (max-width:700px) and (max-height:500px) and (pointer:coarse){
 .plan-bar{display:flex;flex-wrap:nowrap;align-items:stretch}
 .plan-bar>label{flex:1 1 100px;width:100px;min-width:85px}
 .plan-bar .route-picker{flex:1 1 110px;width:110px;min-width:100px}
 .plan-bar .map-plan-actions{flex:1 1 225px;min-width:220px}
 .plan-bar .workspace-actions{flex:none;margin-left:0}
}

/* Larger close targets without a taller mobile share header. */
.share-dialog>.dialog-header,.share-inspect-dialog>.dialog-header{min-height:44px;margin-block:-4px}
.share-dialog>.dialog-header>button,.share-inspect-dialog>.dialog-header>button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;flex:none;-webkit-tap-highlight-color:transparent}

/* New map editions use observed construction times instead of TA1 research scaling. */


/* New-map timers have one clear entry pair; optional comparisons stay folded. */
html:not([data-map="ta1"]) #times-dialog .research-timing[hidden]{display:none!important}
.observed-unit-label{font-size:13px;font-weight:650;margin:0 0 8px;color:var(--ink)}
.observed-more{margin:12px 0 0;border-top:1px solid var(--line);padding-top:10px}
.observed-more>summary{font-size:13px;cursor:pointer;padding:7px 0;color:var(--muted)}
#other-unit-times[open] #build-time-matrix{margin-top:8px}
#construction-reference{margin-top:10px}
html:not([data-map="ta1"]) #legacy-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html:not([data-map="ta1"]) #legacy-times input{width:100%;min-width:0;font-size:16px}

#times-dialog>.dialog-header{position:sticky;top:0;z-index:3;background:var(--paper);padding-block:4px;border-bottom:1px solid var(--line)}
#times-dialog>.dialog-header>button{min-width:44px;min-height:44px;flex:none}
html:not([data-map="ta1"]) #times-dialog .crew-panel{padding:10px;margin-top:10px}
html:not([data-map="ta1"]) #times-dialog #crew-note,
html:not([data-map="ta1"]) #plan-build-controls .unit-march>span{display:none}
html:not([data-map="ta1"]) #times-dialog .allowances{margin-top:12px;padding-top:10px}
html:not([data-map="ta1"]) #times-dialog .allowances>p{margin-top:0}
#times-dialog .observed-more>summary{min-height:44px;display:flex;align-items:center;gap:6px}
#times-dialog .observed-more>summary::before{content:'▸';font-size:12px}#times-dialog .observed-more[open]>summary::before{content:'▾'}
#tech-bonus-button,#times-dialog button{-webkit-tap-highlight-color:transparent}

@media(max-width:700px),(pointer:coarse){
 #times-dialog input[type=number],#commander-settings-panel input[type=number],#line-settings input[type=number]{font-size:16px}
}

/* Keep alliance settings compact; the optional map picker only selects a home area. */
#tech-bonus-form .tech-home-field{display:grid;gap:5px}
#tech-bonus-form .tech-home-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
#tech-bonus-form .tech-home-heading label{font-size:13px;min-width:0}
#tech-bonus-form #tech-home-map{min-height:44px;padding:6px 9px;font-size:12px;white-space:nowrap}
#tech-bonus-form{gap:8px}
#tech-bonus-form small{font-size:11px;line-height:1.4}
#tech-bonus-form .dialog-actions{position:sticky;bottom:-18px;background:var(--panel,#142131);padding:10px 0 0}
.zone-browser[data-picking="true"] .zb-campaign,.zone-browser[data-picking="true"] .zb-current,.zone-browser[data-picking="true"] .zb-legend{display:none}
.zone-browser[data-picking="true"] footer{display:flex;justify-content:flex-end}
.zone-browser[data-picking="true"] .zb-create{min-width:150px}

/* Phone preview reads at full width. Adjust map explicitly enables dragging,
   so scrolling through a long route key cannot accidentally move the frame. */
.share-preview-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-preview-actions button{min-height:44px;font-size:12px;padding:7px 12px}
.share-preview-actions #inspect-share-image{min-height:44px;font-size:12px}
#share-adjust-mode[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
#share-viewport[data-readonly="true"]{width:100%;touch-action:pan-y;cursor:default}
#share-viewport[data-readonly="true"] #share-preview-canvas{width:100%;height:auto;max-height:none;touch-action:pan-y}
.share-preview .share-drag-help{flex-direction:column;gap:6px;padding:0 0 10px}.share-preview-actions{order:-1}
@media(max-width:900px){.share-preview{flex-shrink:0}.share-preview-actions{width:100%}.share-preview-actions button{flex:1}}