/* UX cleanup: this final layer deliberately overrides older visual layers. */
:root { --ux-focus: #145c3a; --ux-soft: #f3f6f3; --ux-line: #dce4dd; }

/* Every interactive control has a reliable pointer and keyboard target. */
button, a, select, input { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ux-focus);
  outline-offset: 2px;
}

/* The planner has one primary action. Secondary actions are quiet and grouped. */
.app-shell.planning .map-tools { left: 440px; }
.planner-panel { width: min(420px, calc(100vw - 20px)); }
.planner-title { padding: 16px 18px 10px; }
.planner-title input { min-height: 40px; }
.route-switcher { margin: 0 14px 10px; }
.planner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planner-stats div { min-width: 0; }
.planner-stats b { overflow: hidden; text-overflow: ellipsis; }
.workspace-tabs { margin-bottom: 9px; }
.workspace-tabs button { min-height: 42px; }
.workspace-view { padding: 14px; }
.workspace-view .route-mode-settings { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }

/* Undo/redo are immediate. Less common map-wide operations live in the route menu. */
.workspace-view .route-edit-toolbar { grid-template-columns: repeat(2, 44px); justify-content: start; }
.workspace-view .route-edit-toolbar button { min-height: 44px; }
.workspace-view .route-edit-toolbar #route-reverse,
.workspace-view .route-edit-toolbar #route-loop,
.workspace-view .route-edit-toolbar #route-fit { display: none; }

.route-menu { min-width: 238px; max-width: min(300px, calc(100vw - 32px)); padding: 8px; }
.route-menu button { min-height: 44px; padding: 10px 12px; font-size: 13px; }
.route-menu-divider { display: block; height: 1px; margin: 6px 4px; background: var(--ux-line); }

.workspace-view .route-node-tools { gap: 8px; }
.workspace-view .route-node-tools .point-type { min-height: 44px; }
.workspace-view .point-palette { height: auto; max-height: 162px; overflow: hidden; }
.workspace-view .point-palette.expanded { max-height: none; }
.workspace-view .point-palette button { min-height: 48px; }
.workspace-section-head > button { min-height: 38px; }

.planner-actions { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px; padding: 12px 14px 14px; }
.planner-actions button, .planner-actions a { min-height: 46px; }
.planner-actions .build-route { font-size: 13px; font-weight: 850; }
.planner-actions #route-share { background: var(--ux-soft) !important; color: #2f3932 !important; }
.planner-actions #route-share { min-width: 96px; }
.planner-actions #river-export { min-width: 44px; }

/* Keep narrow screens usable without horizontal scrolling or clipped labels. */
@media (max-width: 760px) {
  .app-shell.planning .map-tools { left: auto; }
  .planner-panel { width: 100%; }
  .workspace-view { padding: 12px 10px 16px; }
  .workspace-view .route-mode-settings { grid-template-columns: minmax(0, 1fr) 102px; }
  .workspace-view .route-edit-toolbar { grid-template-columns: repeat(2, 44px); overflow: visible; }
  .workspace-view .point-palette { max-height: 202px; }
  .planner-actions { grid-template-columns: minmax(0, 1fr) 1fr !important; }
  .planner-actions .build-route { grid-column: 1 / -1; }
  .planner-actions button, .planner-actions a,
  .planner-actions #route-share, .planner-actions #river-export { min-height: 44px; }
  .route-menu { position: fixed; z-index: 1701; top: auto; right: 10px; bottom: calc(var(--mobile-nav) + 12px); max-height: min(560px, calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 24px)); overflow-y: auto; }
}

/* Tablet / small laptop: keep the header in one line instead of clipping it. */
@media (min-width: 761px) and (max-width: 1180px) {
  .workspace-bar { gap: 8px; padding-inline: 10px; }
  .workspace-brand { gap: 6px; }
  .workspace-brand b { max-width: 118px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-bar nav { gap: 2px; margin-left: auto; }
  .workspace-bar nav a, .workspace-bar nav button { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; }
  .workspace-bar nav .nav-label { display: none; }
  .workspace-bar nav .nav-icon { font-size: 20px; }
  .local-status { width: 40px; height: 40px; flex: 0 0 40px; justify-content: center; padding: 0; }
  .local-status span { display: none; }
}

@media (max-width: 380px) {
  .workspace-view .route-mode-settings { grid-template-columns: 1fr; }
  .planner-stats span { font-size: 8px; }
}

/* Route pins: the Leaflet anchor and the visible tip share one exact center line. */
.river-stop { width:36px !important; height:50px !important; }
.river-stop::after { left:17px; top:29px; width:2px; height:21px; transform:none; box-shadow:none; }
.river-stop .pin-head { left:3px; top:0; width:30px; height:30px; border-width:2px; font-size:14px; box-shadow:0 2px 7px #12251c42; }
.river-stop.route-poi .pin-head { border-style: solid; filter:saturate(.82); }

/* Point editor: selecting an icon is immediate; the technical select stays for form semantics. */
.point-dialog form { width:min(430px,100%); padding:22px; border-radius:20px; }
.point-dialog h2 { margin:0 0 16px; font-size:22px; }
.point-dialog label { margin-top:12px; font-size:12px; }
.point-dialog .optional { color:#9aa3a0; font-size:10px; font-weight:500; }
.point-dialog .point-type-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.point-icon-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:14px 0 4px; }
.point-icon-picker button { min-width:0; min-height:42px; padding:0; border:1px solid #e1e7e2; border-radius:12px; background:#f8faf8; color:#38443d; font-size:19px; }
.point-icon-picker button:hover { background:#eef5ef; border-color:#a9c7b2; }
.point-icon-picker button.active { border-color:#d4a900; background:#fff1b8; box-shadow:0 0 0 2px #ffe071; }
.point-behavior { margin-top:9px; color:#5e6b63; font-size:11px; }
.point-dialog input,.point-dialog select,.point-dialog textarea { min-height:44px; border-radius:11px; font-size:14px; }
.point-form-actions button { min-height:44px; border-radius:12px; }

@media (max-width:760px) {
  .point-dialog form { padding:20px 16px calc(18px + env(safe-area-inset-bottom,0px)); }
  .point-icon-picker { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
  .point-icon-picker button { min-height:44px; font-size:18px; }
}