:root {
  --ink: #16211b; --muted: #6f7c74; --paper: #f7f5ef; --panel: #fffdf8;
  --forest: #173d2b; --forest-2: #22563d; --lime: #cde761; --line: #dedfd6;
  --amber: #cf7c32; --shadow: 0 18px 50px rgba(27, 42, 33, .14);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { color: var(--ink); background: var(--paper); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.workspace { display: grid; grid-template-columns: minmax(380px, 440px) 1fr; height: calc(100vh - 76px); }
.control-panel { background: var(--panel); border-right: 1px solid var(--line); overflow: auto; padding: 34px 34px 60px; position: relative; z-index: 20; }
.panel-view { display: none; animation: enter .3s ease; }.panel-view.is-active { display: block; }@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.eyebrow { text-transform: uppercase; letter-spacing: .17em; font-weight: 750; color: var(--forest-2); font-size: 11px; margin-bottom: 8px; }
h1, h2 { font-family: Georgia, Cambria, serif; font-weight: 500; letter-spacing: -.035em; line-height: 1.08; margin: 0; }h1 { font-size: 42px; }h2 { font-size: 34px; }.lede { color: var(--muted); margin: 12px 0 26px; max-width: 39ch; }
.field { display: block; margin: 18px 0; }.field > span, .waypoint-heading { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; margin-bottom: 8px; color: #526159; }
input, textarea, select { width: 100%; border: 1px solid #d5d8cf; border-radius: 8px; background: #fff; color: var(--ink); padding: 11px 12px; outline: none; transition: border .2s, box-shadow .2s; }input:focus, textarea:focus, select:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(34,86,61,.10); }textarea { resize: vertical; }
.place-search { margin: 0 0 20px; position: relative; }.place-search > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; margin-bottom: 8px; color: #526159; }.search-input-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.search-input-row .button-primary { width: auto; box-shadow: none; padding-inline: 15px; }.search-status { min-height: 18px; padding-top: 4px; color: var(--muted); font-size: 11px; }.search-results { border: 1px solid #d5d8cf; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(22,33,27,.14); overflow: hidden; position: absolute; z-index: 1100; left: 0; right: 0; top: calc(100% - 16px); }.search-result { border: 0; border-bottom: 1px solid #ecece6; background: #fff; color: var(--ink); cursor: pointer; display: grid; gap: 2px; padding: 11px 12px; text-align: left; width: 100%; }.search-result:last-child { border-bottom: 0; }.search-result:hover, .search-result:focus { background: #eff4ed; outline: none; }.search-result strong { font-size: 13px; }.search-result small { color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.profile-grid button { text-align: left; border: 1px solid #d8dbd2; background: #fff; padding: 11px; border-radius: 9px; cursor: pointer; }.profile-grid button b, .profile-grid button small { display: block; }.profile-grid button small { color: var(--muted); margin-top: 2px; }.profile-grid button.is-selected { border-color: var(--forest); background: #eff4ed; box-shadow: inset 0 0 0 1px var(--forest); }
.dev-tuning { padding: 12px; border: 1px dashed var(--amber); border-radius: 10px; background: #fff8ec; }
.tuning-control { display: grid; grid-template-columns: 1fr 82px; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; }
.tuning-control input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.dev-tuning > small { display: block; margin: 7px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.dev-tuning .button { width: 100%; padding: 8px 10px; }
.waypoint-heading { margin: 22px 0 8px; }.waypoint-heading span:last-child { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.waypoint-help { margin: -2px 0 10px; color: var(--muted); font-size: 12px; }.waypoint-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }.waypoint { display: grid; grid-template-columns: 15px 24px minmax(0, 1fr) auto; gap: 7px; align-items: center; border: 1px solid #e0e2da; background: #fff; border-radius: 9px; padding: 7px; }.waypoint.is-draft { border-style: dashed; background: #fafaf6; }.drag-handle { border: 0; background: none; color: #9aa29c; cursor: grab; padding: 0; font-size: 14px; }.waypoint.is-draft .drag-handle { visibility: hidden; }.waypoint-index { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: white; font-size: 11px; }.waypoint.is-draft .waypoint-index { background: #dfe5dc; color: var(--forest); }.waypoint-search { display: grid; grid-template-columns: 1fr 34px; gap: 4px; }.waypoint input { min-width: 0; padding: 7px 8px; font-size: 12px; }.waypoint-search > button { border: 0; border-radius: 6px; background: #edf2ea; color: var(--forest); cursor: pointer; font-size: 14px; }.waypoint-actions { display: grid; grid-template-columns: repeat(3, 22px); }.waypoint-actions button { border: 0; background: none; color: #7d8880; cursor: pointer; padding: 0; font-size: 14px; }.waypoint-actions button:disabled { opacity: .25; }.waypoint.is-dragging { opacity: .45; }.waypoint.is-drag-target { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(23,61,43,.12); }.waypoint-search-results { position: static; margin-top: 7px; box-shadow: 0 8px 20px rgba(22,33,27,.10); }.curve-summary { grid-column: 1 / -1; margin: 2px 0; border-radius: 8px; background: #edf2ea; color: var(--forest); padding: 8px 10px; font-size: 11px; }.leaflet-interactive.route-draggable { cursor: grab; }.leaflet-interactive.route-draggable:active { cursor: grabbing; }
.tool-row { display: flex; gap: 7px; margin: 14px 0 10px; }.button { border: 0; border-radius: 8px; padding: 10px 13px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }.button:disabled { opacity: .42; cursor: not-allowed; }.button-primary { width: 100%; color: #fff; background: var(--forest); padding: 13px 16px; box-shadow: 0 7px 20px rgba(23,61,43,.18); }.button-primary:hover { background: var(--forest-2); }.button-primary span { margin-left: auto; }.button-ghost { background: #f4f3ed; color: #536058; font-weight: 650; }.button-secondary { background: #eaf0e8; color: var(--forest); flex: 1; }
.route-result { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.metric { padding: 10px; border-radius: 9px; background: #f1f1ea; scroll-margin-bottom: 18px; }.metric small, .metric strong { display: block; }.metric small { color: var(--muted); font-size: 10px; }.metric strong { font-family: Georgia, serif; font-size: 17px; }.metric-accent { background: var(--forest); color: white; }.metric-accent small { color: #cad9ce; }.warning { grid-column: 1 / -1; color: #855018; background: #fff2df; border-radius: 8px; padding: 9px 11px; font-size: 12px; margin: 2px 0; }.result-actions, .export-row { grid-column: 1 / -1; display: flex; gap: 7px; }.export-row { align-items: center; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); font-size: 12px; }.export-row a { color: var(--forest-2); font-weight: 750; cursor: pointer; }
.route-save-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; background: #fff2df; border: 1px solid #f0d9b3; margin-bottom: 4px; }.route-save-bar .route-save-note { flex: 1; font-size: 12px; font-weight: 800; color: #855018; }.route-save-bar .button { width: auto; padding: 7px 13px; }.draft-hint { grid-column: 1 / -1; margin: 2px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.curves-tuning { padding: 12px; border: 1px dashed var(--forest-2); border-radius: 10px; background: #f2f7f1; }.curves-tuning > label { display: block; }.curves-tuning > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.route-card { position: relative; }.route-card .eyebrow { padding-right: 30px; }.route-card-menu { position: absolute; top: 10px; right: 10px; }.route-card-menu-button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #eef1ea; color: var(--forest); cursor: pointer; font-size: 18px; line-height: 1; }.route-card-menu-button:hover { background: #e3e8de; }.route-card-menu-list { position: absolute; right: 0; top: 32px; z-index: 30; min-width: 132px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; display: grid; gap: 2px; }.route-card-menu-list button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); }.route-card-menu-list button:hover { background: #eff4ed; }.route-card-menu-list button[data-action="delete"] { color: #8a332d; }
.scenic-breakdown { grid-column: 1 / -1; border: 1px solid #d7decf; border-radius: 10px; padding: 11px; background: #f7f8f2; }.scenic-breakdown-heading { display: grid; gap: 7px; }.scenic-breakdown-heading small,.scenic-breakdown-heading strong { display: block; }.scenic-breakdown-heading small { color: var(--forest-2); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.scenic-breakdown-heading strong { margin-top: 2px; font-size: 12px; }.scenic-breakdown-heading code { justify-self: start; border-radius: 6px; padding: 5px 7px; background: #e9efe4; color: var(--forest); font-size: 9px; font-weight: 750; }.scenic-score-components { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 9px 0 7px; }.scenic-score-components div { border-radius: 7px; padding: 7px; background: white; }.scenic-score-components small,.scenic-score-components strong { display: block; }.scenic-score-components small { min-height: 23px; color: var(--muted); font-size: 8px; line-height: 1.25; }.scenic-score-components strong { margin-top: 3px; font-size: 12px; }.scenic-breakdown > p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }.scenic-breakdown .scenic-score-note { border-left: 2px solid var(--amber); padding-left: 7px; color: #765221; }
.sharing-card { grid-column: 1 / -1; margin-top: 7px; padding: 12px; border: 1px solid #d5dfd5; border-radius: 10px; background: #f3f7f1; }.sharing-card .field { margin: 9px 0; }.sharing-card small { color: var(--muted); font-size: 10px; }
.import-card { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }.import-card strong, .import-card small { display: block; }.import-card small { color: var(--muted); font-size: 11px; }.file-button { position: relative; overflow: hidden; flex: none; }.file-button input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.map-stage { position: relative; overflow: hidden; }.map-stage::after { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 500; box-shadow: inset 20px 0 30px -28px rgba(0,0,0,.3); }#map { height: 100%; width: 100%; background: #dce4d8; }.leaflet-tile-pane { filter: saturate(.72) contrast(.96) brightness(1.04); }.leaflet-control-attribution { font-size: 10px; }
.map-toolbar { position: absolute; z-index: 700; right: 20px; top: 20px; display: grid; gap: 7px; }.map-toolbar button { width: 42px; height: 42px; border: 1px solid #d7dbd2; background: rgba(255,253,248,.96); border-radius: 8px; box-shadow: 0 5px 18px rgba(22,33,27,.14); font-size: 20px; cursor: pointer; }
.map-toolbar button.is-active { background: var(--forest); color: var(--lime); border-color: var(--forest); }
.developer-inspect-mode { cursor: crosshair; }
.road-inspector { position: absolute; z-index: 800; right: 74px; top: 20px; width: min(370px, calc(100% - 110px)); max-height: calc(100% - 40px); overflow: auto; border: 1px solid #d7dbd2; border-radius: 12px; background: rgba(255,253,248,.98); box-shadow: var(--shadow); padding: 15px; }
.road-inspector-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }.road-inspector-heading small, .road-inspector-heading strong { display: block; }.road-inspector-heading small { color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.road-inspector-heading strong { font: 21px/1.2 Georgia, serif; margin-top: 3px; }.road-inspector-heading button { border: 0; background: #f0eee7; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 18px; }.road-inspector > p { color: var(--muted); font-size: 11px; margin: 9px 0; }.road-derived { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }.road-derived div { background: #edf2ea; border-radius: 8px; padding: 8px; }.road-derived small, .road-derived strong { display: block; }.road-derived small { color: var(--muted); font-size: 9px; }.road-derived strong { font-size: 14px; }.road-inspector-note { border-left: 3px solid var(--amber); padding-left: 8px; }.road-tag-summary { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0; font-size: 11px; }.road-tag-summary dt, .road-tag-summary dd { border-bottom: 1px solid var(--line); margin: 0; padding: 5px 2px; }.road-tag-summary dt { color: var(--muted); }.road-tag-summary dd { font-weight: 700; text-align: right; }.road-inspector details { font-size: 11px; margin: 10px 0; }.road-inspector summary { cursor: pointer; font-weight: 700; }.road-inspector table { border-collapse: collapse; width: 100%; margin-top: 7px; word-break: break-word; }.road-inspector th, .road-inspector td { border-bottom: 1px solid var(--line); padding: 4px; text-align: left; vertical-align: top; }.road-inspector th { width: 40%; color: var(--muted); }.road-inspector a { color: var(--forest-2); font-size: 11px; font-weight: 750; }
.road-score-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 15px 0 7px; }.road-score-head small { color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.road-score-head span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.road-scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 11px; }.road-score { background: var(--forest); color: #fff; border-radius: 8px; padding: 7px 3px 8px; text-align: center; }.road-score small { display: block; color: rgba(255,255,255,.82); font-size: 8px; line-height: 1.15; min-height: 21px; }.road-score strong { display: block; font-size: 17px; margin-top: 4px; }
.road-factors { display: grid; gap: 4px; margin: 2px 0 8px; }.road-factor { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 8px; font-size: 11px; border-bottom: 1px solid var(--line); padding: 4px 0; }.road-factor-k { color: var(--muted); }.road-factor-v { text-align: right; font-weight: 750; }.road-factor-v em { display: block; font-style: normal; font-weight: 400; color: var(--muted); font-size: 9px; margin-top: 1px; }.road-factor-bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: #e4e7de; overflow: hidden; margin-top: 2px; }.road-factor-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--forest-2), var(--lime)); }
.map-instruction { position: absolute; z-index: 700; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(23,61,43,.94); color: white; border-radius: 30px; padding: 9px 16px 9px 9px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; }.map-instruction span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--forest); margin-right: 7px; font-size: 18px; }.map-legend { position: absolute; z-index: 700; left: 18px; bottom: 24px; background: rgba(255,253,248,.94); padding: 9px 12px; border-radius: 8px; box-shadow: 0 5px 18px rgba(22,33,27,.1); display: flex; gap: 14px; color: var(--muted); font-size: 11px; }.map-legend i { width: 20px; display: inline-block; vertical-align: middle; border-top: 3px solid var(--forest); margin-right: 5px; }.map-legend .original-swatch { border-top-color: var(--amber); border-top-style: dashed; }
.pipeline-debugger { position: absolute; z-index: 810; right: 74px; top: 20px; width: min(430px, calc(100% - 110px)); max-height: calc(100% - 40px); overflow: auto; border: 1px solid #d7dbd2; border-radius: 12px; background: rgba(255,253,248,.98); box-shadow: var(--shadow); padding: 15px; }
.pipeline-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }.pipeline-heading small, .pipeline-heading strong { display: block; }.pipeline-heading small { color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.pipeline-heading strong { font: 21px/1.2 Georgia, serif; margin-top: 3px; }.pipeline-heading button { border: 0; background: #f0eee7; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 18px; }
.pipeline-steps { counter-reset: pipeline; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 13px 0; padding: 0; }.pipeline-steps li { min-height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 6px 6px 26px; color: var(--muted); font-size: 9px; line-height: 1.25; position: relative; }.pipeline-steps li::before { counter-increment: pipeline; content: counter(pipeline); position: absolute; left: 6px; top: 6px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #e8e8e1; color: var(--muted); font-size: 8px; font-weight: 800; }.pipeline-steps li.is-complete { color: var(--forest-2); background: #f3f6f1; }.pipeline-steps li.is-complete::before { content: "✓"; background: #cfe0d2; color: var(--forest); }.pipeline-steps li.is-current { border-color: var(--forest); background: #edf2ea; color: var(--forest); font-weight: 800; }.pipeline-steps li.is-current::before { background: var(--forest); color: var(--lime); }
.pipeline-details { min-height: 75px; border-top: 1px solid var(--line); padding: 11px 1px; color: var(--muted); font-size: 11px; }.pipeline-details > strong { color: var(--ink); display: block; font-size: 13px; }.pipeline-details p { margin: 5px 0 0; }.pipeline-details code { color: var(--forest); background: #edf2ea; border-radius: 4px; padding: 1px 4px; }.pipeline-warning { color: #855018; background: #fff2df; border-radius: 6px; padding: 6px; max-height: 48px; overflow: hidden; }.pipeline-candidates { display: grid; gap: 3px; margin-top: 7px; }.pipeline-candidates > div { display: grid; grid-template-columns: 42px repeat(3, 1fr) 35px; gap: 4px; align-items: center; border-bottom: 1px solid var(--line); padding: 4px 0; font-size: 9px; }.pipeline-candidates b { color: var(--ink); }.pipeline-candidates em { color: var(--forest); font-style: normal; font-weight: 800; text-align: right; }.pipeline-debugger > .button { margin-top: 4px; }
#toast { position: fixed; z-index: 900; right: 20px; bottom: 24px; max-width: min(360px, calc(100vw - 40px)); background: var(--ink); color: white; border-radius: 9px; padding: 12px 16px; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .25s; }#toast.is-visible { opacity: 1; transform: none; }#toast.is-error { background: #772e28; }
.nav-send { position: relative; margin-top: 12px; }.nav-send > .button { width: 100%; }.nav-send-menu { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); padding: 6px; }.nav-send-group { padding: 8px 8px 10px; }.nav-send-group + .nav-send-group { border-top: 1px solid var(--line); }.nav-send-group > small { display: block; color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 2px 2px 8px; }.nav-send-link { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 13px; cursor: pointer; }.nav-send-link:hover { background: #eff4ed; }.nav-send-link em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 10px; text-align: right; }.nav-send-note { margin: 6px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.nav-send-note em { font-style: normal; font-weight: 700; color: var(--forest-2); }
.card-list { display: grid; gap: 12px; }.route-card { border: 1px solid var(--line); border-radius: 12px; background: white; padding: 16px; cursor: pointer; transition: transform .2s, box-shadow .2s; }.route-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(25,40,30,.09); }.route-card h3 { margin: 2px 0 7px; font: 20px/1.2 Georgia, serif; }.route-card p { color: var(--muted); margin: 0 0 10px; }.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }.tag { background: #edf2ea; color: var(--forest-2); padding: 3px 7px; border-radius: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }.card-metrics { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; font-weight: 700; }.stack-form { margin-top: 20px; }.share-card { margin-top: 18px; background: #edf2ea; border-radius: 10px; padding: 14px; font-size: 12px; word-break: break-word; }
.panel-view > h3 { margin: 24px 0 10px; font: 20px/1.2 Georgia, serif; }
.journey-toolbar { display: grid; grid-template-columns: 1.5fr 1fr; gap: 9px; margin-bottom: 24px; }.journey-toolbar .button { width: 100%; }.journey-toolbar .button.is-selected { box-shadow: inset 0 0 0 2px var(--forest); }
.panel-search { margin: 20px 0 0; }.panel-search input { padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7c74' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 15px; }.panel-search input::-webkit-search-cancel-button { cursor: pointer; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }.section-heading h3 { margin: 0; font: 21px/1.2 Georgia, serif; }.section-heading .eyebrow { margin-bottom: 3px; }.section-heading.compact { align-items: center; margin-top: 0; }.section-heading.compact .button { flex: 0 0 auto; font-size: 11px; }.icon-button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eaf0e8; color: var(--forest); cursor: pointer; font-size: 17px; }
.journey-discover { border-bottom: 1px solid var(--line); padding-bottom: 20px; }.journey-card-grid { display: grid; gap: 13px; }.journey-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; transition: transform .2s, box-shadow .2s; }.journey-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(25,40,30,.11); }.journey-card-cover { position: relative; height: 138px; overflow: hidden; background: #dfe7dc; }.journey-card-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }.journey-cover-placeholder { min-height: 100%; display: grid; place-items: center; background: linear-gradient(135deg,#d9e5d6,#96ad97); color: rgba(255,255,255,.75); font: 56px Georgia,serif; }.journey-visibility { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 12px; background: rgba(18,32,24,.84); color: white; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.journey-card-actions { position: absolute; right: 9px; top: 9px; display: flex; gap: 5px; }.journey-card-actions button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--forest); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.15); }.journey-card-actions button:last-child { color: #8a332d; }.journey-card-body { padding: 14px; }.journey-card-body h3 { margin: 2px 0 6px; font: 22px/1.15 Georgia,serif; }.journey-card-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.journey-card-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 13px; }.journey-card-metrics span { padding: 7px; border-radius: 7px; background: #f1f3ed; color: var(--muted); font-size: 9px; }.journey-card-metrics b { display: block; color: var(--ink); font-size: 12px; }
.journey-route-picker { display: grid; gap: 7px; max-height: 280px; overflow: auto; }.journey-route-option { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: #fff; cursor: pointer; }.journey-route-option input { width: auto; margin-top: 3px; }.journey-route-option span,.journey-route-option small { display: block; }.journey-route-option small { color: var(--muted); }.journey-leg-order,.journey-detail-legs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }.journey-leg-order li,.journey-detail-legs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: white; }.journey-leg-order button,.journey-detail-legs button { border: 0; background: #edf2ea; border-radius: 5px; color: var(--forest); cursor: pointer; }.journey-leg-order button:disabled,.journey-detail-legs button:disabled { opacity: .3; }.empty-leg { color: var(--muted); }.journey-detail { margin: 22px 0; overflow: hidden; border: 1px solid #cad8cb; border-radius: 14px; background: #f4f8f2; }.journey-detail > *:not(.journey-detail-cover) { margin-left: 16px; margin-right: 16px; }.journey-detail h3 { margin-top: 2px; margin-bottom: 7px; font: 25px/1.2 Georgia, serif; }.journey-detail > p { color: var(--muted); }.journey-detail-cover { width: 100%; height: 190px; object-fit: cover; display: block; }.journey-detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: 15px; }.journey-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }.journey-detail-actions button { border: 0; border-radius: 6px; padding: 5px 7px; background: white; color: var(--forest); cursor: pointer; font-size: 10px; }.journey-detail-actions button:last-child { color: #8a332d; }.journey-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; margin-bottom: 12px; }.journey-summary span { background: white; border-radius: 8px; padding: 8px; font-size: 11px; }.journey-summary b { display: block; font-size: 14px; }.journey-detail-legs { margin-bottom: 16px!important; }.journey-detail-legs small,.journey-detail-legs span { display: block; color: var(--muted); font-size: 10px; }.journey-end-marker { border-radius: 50%; background: var(--forest); color: white; border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,.25); display: grid!important; place-items: center; }
.button-journey-add { width: 100%; margin-top: 8px; color: var(--forest); background: #dce9b5; }.journey-plan-context { position: relative; margin-top: 8px; padding: 10px 34px 10px 11px; border-radius: 9px; border: 1px solid #bfd072; background: #f3f8df; }.journey-plan-context b,.journey-plan-context span { display: block; }.journey-plan-context b { font-size: 12px; }.journey-plan-context span { color: var(--muted); font-size: 10px; margin-top: 2px; }.journey-plan-context button { position: absolute; right: 8px; top: 8px; border: 0; background: none; color: #7c342f; cursor: pointer; font-size: 0; }.journey-plan-context button::after { content: "×"; font-size: 18px; }
.modal-open { overflow: hidden; }.modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(12,22,16,.66); backdrop-filter: blur(4px); }.modal-backdrop[hidden] { display: none; }.modal-card { width: min(900px,calc(100vw - 40px)); max-height: calc(100vh - 48px); overflow: auto; border-radius: 17px; background: var(--panel); box-shadow: 0 28px 80px rgba(0,0,0,.35); padding: 24px; }.modal-card-small { width: min(480px,calc(100vw - 40px)); }.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.modal-heading h2 { font-size: 32px; }.modal-close { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #ecece5; color: var(--ink); cursor: pointer; font-size: 22px; }.journey-editor-grid { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(340px,1.15fr); gap: 28px; }.field small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }.journey-cover-preview { height: 170px; border: 1px dashed #b9c5b8; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #edf2ea; color: var(--muted); font-size: 12px; }.journey-cover-preview img { width: 100%; height: 100%; object-fit: cover; }.journey-route-column { border-left: 1px solid var(--line); padding-left: 28px; }.journey-route-search { margin-top: 14px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }.modal-actions .button-primary { width: auto; min-width: 150px; }.button-danger { color: white; background: #8a332d; }
.gem-form { border-top: 1px solid var(--line); padding-top: 16px; }.gem-form h3 { margin: 0; font: 21px/1.2 Georgia, serif; }.gem-card { cursor: default; }.gem-card button { margin-top: 10px; }.gem-road { stroke-dasharray: 8 6; }
.poi-icon { background: var(--amber); color: #fff; border: 2px solid white; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3); display: grid !important; place-items: center; font-size: 11px; }.route-pin { background: var(--forest); color: white; border: 2px solid white; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,.28); }.route-pin span { display: block; transform: rotate(45deg); font-size: 10px; font-weight: 800; text-align: center; line-height: 25px; }
/* Waypoint kinds: solid numbered teardrop for start/finish/stop, a small hollow dot for a silent shaping point. */
.route-pin--start { background: var(--forest); }
.route-pin--finish { background: #b23b2e; }
.route-pin--via { background: #2f6fd0; }
.route-pin--shaping { background: #fff; border-color: #2f6fd0; border-radius: 50%; transform: none; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.route-pin--shaping span { transform: none; color: #2f6fd0; font-size: 9px; line-height: 14px; }
.waypoint--finish .waypoint-index { background: #b23b2e; }
.waypoint--via .waypoint-index { background: #2f6fd0; }
.waypoint--shaping .waypoint-index { background: #fff; color: #2f6fd0; border: 2px dashed #2f6fd0; }
.waypoint--shaping { background: #fbfdff; }
.waypoint-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 20px; }
.kind-toggle { border: 0; background: none; color: #2f6fd0; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
/* Road closures (detours): mark a pin or a closed section the route must avoid. */
.closures { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.closures-heading { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.closures-heading span { font-weight: 700; color: var(--ink); }
.closures-heading small, .closure-empty { color: var(--muted); font-size: 12px; }
.closure-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#closure-pin-button.is-active, #closure-section-button.is-active { background: #b23b2e; color: #fff; border-color: #b23b2e; }
.closure-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.closure-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #fbeceb; color: #7d2a20; font-size: 13px; }
.closure-item button { border: 0; background: none; color: #b23b2e; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.closure-pin { font-size: 18px; line-height: 22px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
@media (max-width: 820px) { body { overflow: auto; }.workspace { display: flex; flex-direction: column; height: auto; }.control-panel { order: 2; padding: 26px 20px 50px; overflow: visible; }.map-stage { height: 52vh; min-height: 380px; order: 1; }.map-instruction { left: 14px; transform: none; max-width: calc(100% - 84px); overflow: hidden; text-overflow: ellipsis; }.map-legend { display: none; }h1 { font-size: 36px; } }

/* ---- Community phase 1 --------------------------------------------------------------------- */
/* CM-17: Route points is the first block of the planner panel. */
.route-points-block .waypoint-heading { margin-top: 0; }
.planner-hero { margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.planner-hero h1 { font-size: 34px; }
.planner-hero .lede { margin: 10px 0 0; }
/* CM-5: route type dropdown with a one-line description */
.route-type-field select { font-weight: 650; }
.route-type-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.admin-only-tag { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #e7ecd7; color: var(--forest-2); font-style: normal; font-size: 9px; letter-spacing: .08em; }
/* CM-4 / CM-8: description, cover, read-only banner inside the result panel */
.route-result > .field, .route-result > .readonly-banner { grid-column: 1 / -1; }
.route-result > .field { margin: 6px 0; }
.route-description-field small { float: right; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.route-cover-preview { display: grid; place-items: center; min-height: 64px; max-height: 170px; overflow: hidden; border: 1px dashed #cbd2c6; border-radius: 10px; background: #f5f6f0; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.route-cover-preview img { width: 100%; max-height: 170px; object-fit: cover; display: block; }
.route-cover-actions { display: flex; gap: 8px; margin-bottom: 4px; }
.route-cover-field > small { color: var(--muted); font-size: 11px; }
.readonly-banner { display: grid; gap: 9px; padding: 12px; border: 1px solid #e3d3a8; border-radius: 10px; background: #fff7df; color: #6b4d12; font-size: 13px; font-weight: 600; }
.readonly-banner .button { width: 100%; }
/* The head of the route panel: what is open, and the way to close it ("Close route" / "Discard draft") */
.route-panel-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 2px; }
.route-panel-head .eyebrow { margin: 0; }
.close-route-button { flex: 0 0 auto; gap: 6px; padding: 6px 11px; font-size: 12px; }
.close-route-button:hover { background: #e9e8df; }
.close-route-button:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
/* spoken, not seen: "Ready for a new route." */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.route-card-cover { width: calc(100% + 32px); height: 110px; object-fit: cover; display: block; margin: -16px -16px 12px; border-radius: 12px 12px 0 0; }
.route-card.is-dragging { opacity: .45; }
/* CM-6: folders */
.folder-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 10px; font-size: 13px; }
.crumb { border: 0; border-radius: 7px; background: none; padding: 4px 7px; color: var(--forest-2); font-weight: 700; cursor: pointer; }
.crumb:hover { background: #eef2ea; }
.crumb.is-current { color: var(--ink); cursor: default; }
.crumb-sep { color: var(--muted); }
.folder-toolbar { margin: 0 0 12px; display: flex; }
.folder-toolbar .button { flex: 0 0 auto; }
.folder-list { display: grid; gap: 8px; margin-bottom: 8px; }
.folder-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 44px 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #f6f8f2; cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.folder-card:hover, .folder-card:focus-visible { box-shadow: 0 8px 20px rgba(25,40,30,.09); outline: none; border-color: #c4d0c0; }
.folder-card .folder-icon { font-size: 20px; color: var(--forest-2); }
.folder-card .folder-meta strong, .folder-card .folder-meta small { display: block; }
.folder-card .folder-meta small { color: var(--muted); font-size: 12px; }
.folder-card .route-card-menu { top: 50%; transform: translateY(-50%); }
.folder-card.is-drop-target, .crumb.is-drop-target { border-color: var(--forest); background: #e3efd8; box-shadow: 0 0 0 2px rgba(23,61,43,.18); }
.folder-picker { display: grid; gap: 2px; max-height: 320px; overflow: auto; margin-bottom: 8px; }
.folder-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.folder-option:hover { background: #f1f5ee; }
.folder-option input { width: auto; }
/* CM-7: journey card ⋯ menu (same component as the route cards) */
.journey-card { position: relative; }
.journey-card-menu { z-index: 3; top: 9px; right: 9px; }
.journey-card-menu .route-card-menu-button { background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.journey-card-menu .route-card-menu-list { top: 33px; }
/* CM-17: closures as a map control with a count badge and a popover */
.toolbar-item { position: relative; }
.map-toolbar .toolbar-item > button { position: relative; }
.map-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #b23b2e; color: #fff; font: 700 11px/18px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fffdf8; }
.map-toolbar button.is-armed { background: #b23b2e; color: #fff; border-color: #b23b2e; animation: closure-armed 1.4s ease-in-out infinite; }
@keyframes closure-armed { 50% { box-shadow: 0 0 0 5px rgba(178,59,46,.25); } }
.closures-popover { position: absolute; z-index: 800; top: 0; right: 52px; width: 290px; max-width: calc(100vw - 96px); padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; box-shadow: var(--shadow); }
.map-toolbar .closures-popover button { width: auto; height: auto; box-shadow: none; font-size: 13px; }
.map-toolbar .closures-popover .closure-item button { border: 0; background: none; width: auto; height: auto; padding: 0 2px; font-size: 16px; }
.closures-popover .closures-heading { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.closures-popover .closures-heading span { font-weight: 700; color: var(--ink); }
.closures-popover .closures-heading small, .closures-popover .closure-empty { color: var(--muted); font-size: 12px; }
.closures-popover .closure-empty { display: block; margin-top: 8px; }
.closures-popover .closure-buttons .button { padding: 9px 8px; font-size: 12px; }
@media (max-width: 820px) { .closures-popover { right: 50px; width: min(290px, calc(100vw - 100px)); } .planner-hero h1 { font-size: 28px; } }
.map-toolbar .closures-popover .button { border: 0; background: #f4f3ed; color: #536058; font-weight: 650; }
.check-field { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.check-field input { width: auto; }
.map-toolbar { z-index: 760; }

/* ---- Notifications bell (CM-10) ---- */
.notif { position: relative; display: inline-flex; }
.notif-bell { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.notif-bell:hover, .notif-bell[aria-expanded="true"] { background: rgba(127,140,132,.18); }
.notif-bell:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.notif-badge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #d4442f; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.notif-panel { position: absolute; right: -8px; top: calc(100% + 10px); width: 360px; max-width: calc(100vw - 24px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 2000; overflow: hidden; text-align: left; white-space: normal; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.notif-head strong { font-size: 14px; }
.notif-mark-all { border: 0; background: none; color: var(--forest-2); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.notif-mark-all:disabled { color: var(--muted); cursor: default; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.notif-item { display: grid; gap: 2px; padding: 12px 16px 12px 22px; color: var(--ink) !important; text-decoration: none; border-bottom: 1px solid #ecece6; position: relative; }
.notif-item:hover, .notif-item:focus-visible { background: #f1f4ee; outline: none; }
.notif-item strong { font-size: 13px; }
.notif-item span { font-size: 12px; color: var(--muted); }
.notif-item small { font-size: 11px; color: #8a958e; }
.notif-item.is-unread { background: #eef5e4; }
.notif-item.is-unread::before { content: ""; position: absolute; left: 9px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--forest-2); }
.notif-empty { margin: 0; padding: 22px 16px; color: var(--muted); font-size: 13px; text-align: center; }

/* bell: accept / decline an invitation straight from the notification */
.notif-actions { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px 22px; border-bottom: 1px solid #ecece6; background: #eef5e4; }
.notif-actions.is-read { background: transparent; }
.notif-action { border: 0; border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 750; cursor: pointer; background: #e9ece3; color: #46554c; }
.notif-action.is-primary { background: var(--forest); color: #fff; }
.notif-action:disabled { opacity: .5; cursor: default; }
.notif-action-state { font-size: 12px; font-weight: 700; color: var(--forest-2); }
li:has(> .notif-actions) > .notif-item { border-bottom: 0; }

/* CM-18: one inline-SVG icon family for the map button stack (24px grid, 1.8 stroke, currentColor) */
.map-icon { width: 22px; height: 22px; display: block; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-toolbar > button, .map-toolbar .toolbar-item > button { color: var(--forest); display: grid; place-items: center; padding: 0; }
.map-toolbar > button:hover, .map-toolbar .toolbar-item > button:hover { background: #f1f4ea; border-color: #c4cbb8; }
.map-toolbar > button:focus-visible, .map-toolbar .toolbar-item > button:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.map-toolbar > button.is-active:hover { background: var(--forest); }
.map-toolbar #closures-map-button.has-closures { color: #b23b2e; border-color: #d9a39b; background: #fdf1ef; }
.map-toolbar #closures-map-button.has-closures .map-icon { stroke-width: 2.2; }
.map-toolbar button.is-armed { color: #fff; }
.map-toolbar .map-badge { color: #fff; }
.closures-popover .closures-title { display: flex; align-items: center; gap: 7px; }
.closures-popover .closures-title .map-icon { width: 18px; height: 18px; margin: 0; color: #b23b2e; }
.closure-label { display: inline-flex; align-items: center; gap: 6px; }
.closure-label .map-icon { width: 15px; height: 15px; margin: 0; }
.map-instruction span .map-icon { width: 15px; height: 15px; }
.closure-pin { display: grid; place-items: center; color: #b23b2e; }
.closure-pin .map-icon { width: 22px; height: 22px; stroke-width: 2.4; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* CM-19: rider-level road inspector */
.road-fun { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin: 12px 0 4px; padding: 11px 12px; border-radius: 10px; background: var(--forest); color: #fff; }
.road-fun small { display: block; color: rgba(255,255,255,.75); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.road-fun strong { display: block; font: 20px/1.2 Georgia, serif; color: var(--lime); }
.road-fun-value { font-size: 26px; font-weight: 750; }
.road-fun-value i { font-style: normal; font-size: 11px; opacity: .7; margin-left: 2px; }
.road-fun-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.road-fun-bar i { display: block; height: 100%; background: var(--lime); border-radius: 3px; }
.road-admin { margin-top: 12px; padding-top: 6px; border-top: 1px dashed var(--amber); }
.road-inspector .road-inspector-note { font-size: 11px; color: var(--muted); margin: 10px 0; }
.road-inspector #road-inspector-content > a { display: inline-block; margin-top: 4px; }
.journey-cover-placeholder img { width: 56px; height: 56px; opacity: .85; }

/* MD-6: calm banner while no map data is installed / the routing engine restarts */
.map-banner { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #e3d3a8; border-radius: 12px; background: #fff7e4; color: #6b4d12; font-size: 13px; line-height: 1.45; }
.map-banner-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-banner-text { flex: 1; min-width: 0; }
.map-banner-text strong, .map-banner-text span { display: block; }
.map-banner-link { flex: none; align-self: center; padding: 6px 12px; border-radius: 8px; border: 1px solid #e3d3a8; background: #fffdf8; color: var(--forest); font-size: 12px; font-weight: 750; text-decoration: none; }
.map-banner-link:hover { background: #fff; }
.name-conflict-actions { flex-wrap: wrap; }
.name-conflict-actions .button-secondary { flex: 1 1 auto; }
.search-results-head { display: flex; justify-content: flex-end; padding: 3px 4px 0; }
.search-results-close { border: 0; width: 26px; height: 26px; border-radius: 50%; background: #ecece5; color: var(--ink); cursor: pointer; font-size: 17px; line-height: 1; }
.search-results-close:hover, .search-results-close:focus-visible { background: #dfe3d8; }

/* Footer links (privacy, support, imprint) at the bottom of the planner's side panel. */
.control-panel > .legal-footer { padding: 28px 0 0; font-size: 12px; color: var(--muted); }
.control-panel > .legal-footer a { color: var(--forest-2); text-decoration: none; }
.control-panel > .legal-footer a:hover { text-decoration: underline; }
.control-panel > .legal-footer .sep { margin: 0 6px; }

/* Pause times: the time under each point's search field, and the way to give a stop a pause (a photo spot: 30 minutes). */
.waypoint-extra { grid-column: 3 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 22px; font-size: 11px; color: var(--muted); }
.waypoint-time { font-weight: 700; color: #526159; font-variant-numeric: tabular-nums; }
.waypoint-time:empty { display: none; }
.waypoint--shaping .waypoint-time { font-weight: 500; opacity: .8; }
.pause-add, .pause-chip { border: 1px solid #d5d8cf; border-radius: 12px; background: #f4f3ed; color: #536058; cursor: pointer; padding: 1px 9px; font-size: 11px; font-weight: 650; line-height: 1.6; }
.pause-add:hover { background: #eaf0e8; color: var(--forest); }
.pause-chip { background: #fff2df; border-color: #f0d9b3; color: #855018; font-weight: 750; }
.pause-chip:hover { background: #ffe9c6; }
.pause-add:focus-visible, .pause-chip:focus-visible, .pause-presets button:focus-visible, .pause-actions button:focus-visible, .pause-custom button:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.pause-add[aria-expanded="true"], .pause-chip[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(34,86,61,.18); }
.pause-editor { grid-column: 3 / -1; display: grid; gap: 8px; padding: 9px 10px; border: 1px solid #e0e2da; border-radius: 9px; background: #fbfbf7; }
.pause-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.pause-presets button, .pause-actions button, .pause-custom button { border: 1px solid #d5d8cf; border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; padding: 4px 9px; font-size: 12px; font-weight: 650; }
.pause-presets button:hover, .pause-actions button:hover, .pause-custom button:hover { background: #eff4ed; }
.pause-presets button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.pause-custom { display: flex; align-items: center; gap: 6px; }
.pause-custom label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pause-custom input { width: 86px; padding: 5px 7px; }
.pause-error { margin: 0; color: #8a332d; font-size: 11px; }
.pause-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pause-actions [data-action="pause-remove"] { color: #8a332d; }
.duration-breakdown { grid-column: 1 / -1; margin: 2px 0; border-radius: 8px; background: #fff2df; color: #855018; padding: 8px 10px; font-size: 12px; font-weight: 650; }
.card-metrics { flex-wrap: wrap; }

/* A card whose menu is open stays above the cards after it. A hovered card is lifted by `transform`, which makes it a layer of its own, and a layer is painted in the order of the
   cards: the next card would cover the part of the menu that hangs out of the first one ("Delete", the last entry), the pointer would meet that card, and the press and the release
   of a click would land on different elements - nothing would be clicked. */
.route-card:has(.route-card-menu-list:not([hidden])), .journey-card:has(.route-card-menu-list:not([hidden])) { z-index: 20; }
.route-card:focus-within { z-index: 20; }   /* (a browser without :has() has this: the card that has the focus) */

/* ---- Library and Journey without anything open: the list has the whole width ------------------------------------------------------ */
/* app.js syncLayout() puts `is-listing` on .workspace while the Library shows no open route (saved or draft) or the Journey panel no open
   journey: the map has nothing to show then, so its stage is hidden (hidden, not taken apart: the map keeps its view) and the panel gets
   the whole width. A route or journey that is opened takes the split view back. Plan, Highlights and Convoy never have this class. */
.workspace.is-listing { grid-template-columns: minmax(0, 1fr); }
.workspace.is-listing .map-stage { display: none; }
.workspace.is-listing .card-list,
.workspace.is-listing .journey-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.workspace.is-listing .card-list > p,
.workspace.is-listing .journey-card-grid > p { grid-column: 1 / -1; margin: 4px 0; }
.workspace.is-listing .folder-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; margin: 12px 0 0; }
.workspace.is-listing .route-card { display: flex; flex-direction: column; }
.workspace.is-listing .route-card .route-card-cover { flex: none; }
.workspace.is-listing .route-card .card-metrics { margin-top: auto; padding-top: 12px; }

/* the head of the two panels: title and text, and the buttons (one below the other as long as the map is beside the panel) */
.panel-head { display: block; }
/* the bar that says which route is open (only the split view has one) and closes it; the journey's detail has the same head */
.open-item-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 10px 12px; border: 1px solid #cad8cb; border-radius: 12px; background: #f4f8f2; }
.open-item-bar[hidden] { display: none; }
.open-item-text { min-width: 0; }
.open-item-text .eyebrow { margin: 0 0 2px; }
.open-item-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-detail-head { margin-top: 12px; margin-bottom: 10px; }
/* the heading that takes the focus when the one that had it went away with a layout switch (app.js keepFocusInView) */
.panel-view h1[tabindex="-1"]:focus, .panel-view h2[tabindex="-1"]:focus { outline: none; }

@media (min-width: 821px) {
  .workspace.is-listing .control-panel { border-right: 0; padding: 34px clamp(24px, 4vw, 64px) 60px; }
  .workspace.is-listing .control-panel > .panel-view,
  .workspace.is-listing .control-panel > .map-banner,
  .workspace.is-listing .control-panel > .legal-footer { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; }
  .workspace.is-listing .panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 40px; }
  .workspace.is-listing .panel-head-text { flex: 1 1 420px; min-width: 0; }
  .workspace.is-listing .panel-head .lede { max-width: 66ch; margin-bottom: 22px; }
  .workspace.is-listing .panel-head .journey-toolbar { flex: 0 0 auto; grid-template-columns: auto auto; margin-bottom: 22px; }
  .workspace.is-listing .panel-head .journey-toolbar .button { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
  /* the Library: head / curated routes / folder bar / folders / "My routes" with the search beside it / the routes */
  .workspace.is-listing #panel-library.is-active,
  .workspace.is-listing #panel-journey.is-active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); column-gap: 28px; align-items: end; }
  .workspace.is-listing #panel-library.is-active { grid-template-areas: "head head" "discover discover" "crumbs newfolder" "folders folders" "section search" "list list"; }
  .workspace.is-listing #panel-journey.is-active { grid-template-areas: "head head" "discover discover" "section search" "list list"; }
  .workspace.is-listing .panel-view > .panel-head { grid-area: head; }
  .workspace.is-listing .panel-view > .journey-discover { grid-area: discover; margin-bottom: 4px; }
  .workspace.is-listing .panel-view > .panel-search { grid-area: search; margin: 24px 0 14px; }
  .workspace.is-listing .panel-view > .section-heading { grid-area: section; margin: 24px 0 14px; }
  .workspace.is-listing #panel-library > #folder-breadcrumb { grid-area: crumbs; align-self: center; margin: 0; }
  .workspace.is-listing #panel-library > .folder-toolbar { grid-area: newfolder; align-self: center; justify-self: end; margin: 0; }
  .workspace.is-listing #panel-library > #folder-list { grid-area: folders; }
  .workspace.is-listing #panel-library > #saved-route-list,
  .workspace.is-listing #panel-journey > #journey-list { grid-area: list; align-self: start; }
}

/* ---- Covers have one frame everywhere: 16:9 (docs/FEATURES-2026-10-19.md part B, CR-1 and CR-6) -------------------------------------------------------- */
/* The server draws the `cover` size of a picture from the crop its owner chose; the frame is the same shape, so what the owner saw in the crop dialog is what shows.
   A picture that is not 16:9 (an old cover, until its owner looks at it) is filled into the frame, never stretched. Highlight photos are not covers: they keep
   their own shape (#hl-photo-preview is not touched). */
.route-card-cover { height: auto; aspect-ratio: 16 / 9; }
#route-cover-preview:has(img), #route-edit-cover-preview:has(img) { max-height: none; aspect-ratio: 16 / 9; }
#route-cover-preview img, #route-edit-cover-preview img { max-height: none; height: 100%; }
.journey-card-cover { height: auto; aspect-ratio: 16 / 9; }
.journey-cover-preview { height: auto; min-height: 64px; }
.journey-cover-preview:has(img) { aspect-ratio: 16 / 9; }
.route-cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }