/* The route planner (public/plan.php): what the page, the embed and the phone share: the colours the planner's rules read, the map's markers, its bar's buttons, the layers,
   the lists, the pop-overs, the toast and the question box. The layout of the page is plan-next.css (a computer, and a phone on its side) and plan-phone.css (a phone); the
   embed's is plan-embed.css. */
.plan { --plan-top: 67px; --pine: #1F4A38; --route: #e8792b; --start: #3f7146; --finish: #a63a26;
        --edge: #d9d3c5; --soft: #f3efe6; --panel: #fbfaf7; }
.plan-side { overflow-y: auto; border-inline-end: 1px solid rgba(0,0,0,.08); background: var(--panel); }
.plan-head { padding: 18px 20px 4px; }
.plan-map { position: relative; min-height: 420px; }
#plan-map { position: absolute; inset: 0; }

/* Start and destination, joined like a journey. */
.plan-trip { position: relative; background: #fff; border: 1px solid var(--edge); border-radius: 12px; padding-block: 4px; padding-inline: 0 4px; margin-bottom: 14px; }
.plan-trip::before { content: ""; position: absolute; inset-inline-start: 21px; top: 34px; bottom: 34px; border-inline-start: 2px dotted #bbb3a2; }
.plan-field { display: grid; grid-template-columns: 42px 1fr 40px; align-items: center; }
.plan-field + .plan-field { border-top: 1px solid #efeae0; }
.plan-pin { justify-self: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 11px/22px system-ui, sans-serif; text-align: center; position: relative; z-index: 1; box-shadow: 0 0 0 3px #fff; }
.plan-pin.start { background: var(--start); }
.plan-pin.end { background: var(--finish); }
.plan-pin.via { background: var(--pine); }
.plan-via-field .plan-pin.via { background: #fff; color: var(--pine); box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px var(--pine); line-height: 22px; font-size: 14px; }
.plan-via-row, .plan-via-field { border-top: 1px solid #efeae0; }
.plan-via-row { min-height: 42px; }
.plan-via-name { font-size: 15px; font-weight: 500; padding: 9px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-via-rows[hidden] { display: none; }
.plan-search { position: relative; min-width: 0; }
.plan-search label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #6b6558; padding-top: 7px; }
.plan-search input { width: 100%; box-sizing: border-box; padding: 1px 0 8px; border: 0; font: inherit; font-size: 1rem; background: transparent; color: #1C201D; text-overflow: ellipsis; }
.plan-search input:focus { outline: none; }
.plan-field:focus-within { background: #fbf8f1; border-radius: 10px; }
.plan-field:focus-within label { color: var(--pine); }
.plan-icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; cursor: pointer; color: #4d5a50; }
.plan-icon-btn:hover, .plan-icon-btn:focus-visible { background: var(--soft); color: var(--pine); }
.plan-icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.plan-results { position: absolute; inset-inline: -42px -40px; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto; }
.plan-results:empty { display: none; }
.plan-results .group { padding: 8px 14px 2px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #6b6558; cursor: default; }
.plan-results li[role="option"] { padding: 8px 14px; cursor: pointer; font-size: .95rem; line-height: 1.3; }
.plan-results li[role="option"]:hover, .plan-results li[aria-selected="true"] { background: var(--soft); }
.plan-results small { display: block; color: #666; font-size: .8rem; }
.plan-vias { margin: -6px 0 14px; font-size: .85rem; color: #666; }

/* Walk or ride, then how. */
.plan-mode { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 3px; background: #ebe6da; border-radius: 10px; margin-bottom: 8px; }
.plan-mode button { border: 0; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .9rem; font-weight: 600; background: none; color: #4d5a50; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.plan-mode button[aria-pressed="true"] { background: #fff; color: var(--pine); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.plan-profile { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.plan-profile button { flex: 1 1 100px; padding: 7px 10px; border: 1px solid var(--edge); border-radius: 999px; background: #fff; font: inherit; font-size: .86rem; cursor: pointer; white-space: nowrap; color: #2b312c; }
.plan-profile button[hidden] { display: none; }
.plan-profile button[aria-pressed="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }
.plan-profile-note { font-size: .84rem; color: #666; margin: 0 0 14px; min-height: 1.2em; }

.plan-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.plan-figures li { background: #fff; border: 1px solid #e6e1d6; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.plan-figures b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-figures span { display: block; font-size: .7rem; color: #666; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
#plan-profile-chart { width: 100%; height: 140px; display: block; background: #fff; border: 1px solid #e6e1d6; border-radius: 10px; margin-bottom: 12px; }
.plan-status { min-height: 1.3em; font-size: .9rem; color: #555; margin: 0 0 12px; }
.plan-status.error { color: var(--finish); }

.plan-section { margin: 0 0 16px; }
.plan-section h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: #6b6558; margin: 0 0 8px; font-weight: 600; }
.plan-tips { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: #3a423c; }
.plan-tips li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; line-height: 1.4; }
.plan-tips svg { margin-top: 1px; color: var(--route); }

/* What to do with the route: pinned to the foot of the panel, however far it's scrolled. */
.plan-actions { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 8px; padding: 10px 20px 12px; background: var(--panel);
                border-top: 1px solid #e6e1d6; box-shadow: 0 -6px 16px rgba(251,250,247,.9); }
.plan-actions[hidden] { display: none; }
.plan-actions .primary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
                         background: var(--pine); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; }
.plan-actions .primary:hover { background: #173b2c; }
.plan-actions .primary[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.plan-open-short, .plan-open-tiny { display: none; }
.plan-actions .plan-pop { position: absolute; inset-inline: 12px; bottom: calc(100% + 8px); margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.plan-actions-note { position: absolute; inset-inline: 12px; bottom: calc(100% + 8px); margin: 0; padding: 9px 12px; border-radius: 10px;
                     background: var(--pine); color: #fff; font-size: .85rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.plan-actions-note[hidden] { display: none; }
.plan-note { font-size: .82rem; color: #666; line-height: 1.45; margin: 0 0 10px; }
.plan-note a { color: var(--pine); }
.plan-hint { font-size: .84rem; color: #555; line-height: 1.45; margin: 0 0 14px; padding: 10px 12px; background: var(--soft); border-radius: 10px; }

/* On the map. */
.ga-wp { width: 26px; height: 26px; border-radius: 50%; background: var(--pine); color: #fff; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); font: 700 12px/20px system-ui, sans-serif; text-align: center; cursor: grab; box-sizing: border-box; }
.ga-wp.start { background: var(--start); }
.ga-wp.end { background: var(--finish); }
.ga-wp.pending { opacity: .85; }
.ga-wp.via { width: 16px; height: 16px; background: var(--route); font-size: 0; }
.ga-wp.named { width: 26px; height: 26px; background: var(--pine); font-size: 12px; }
.ga-hover { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--route); box-sizing: border-box; pointer-events: none; }
.maplibregl-popup-content { font: inherit; padding: 8px 10px; }
.maplibregl-popup-content button { font: inherit; font-size: .85rem; padding: 4px 8px; border: 1px solid var(--edge); border-radius: 6px; background: #fff; cursor: pointer; }
.plan-dragging .maplibregl-canvas-container { cursor: grabbing !important; }

.plan-maptop { position: absolute; top: 10px; inset-inline: 10px 50px; z-index: 4; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; pointer-events: none; }
.plan-maptop > * { pointer-events: auto; }
.plan-layers-btn { flex: none; height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding-block: 0; padding-inline: 10px 12px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); font: inherit; font-size: .9rem; font-weight: 600; color: #1C201D; cursor: pointer; }
.plan-layers-btn span { font-weight: 400; color: #666; }
.plan-layers-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan-toolwrap { position: relative; min-width: 0; max-width: 100%; }
/* On a computer the bar wraps onto a second line rather than hide buttons off its end; the groups are
   set apart by space, which wraps cleanly. On a phone it's one line that scrolls sideways. */
.plan-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 38px; box-sizing: border-box; padding: 3px; border-radius: 10px;
                background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.plan-toolbar::-webkit-scrollbar { display: none; }
.plan-tgroup { display: flex; flex: none; gap: 1px; }
.plan-toolbar button { display: flex; align-items: center; gap: 6px; height: 32px; padding-block: 0; padding-inline: 7px 9px; border: 0; border-radius: 7px; background: none;
                       font: inherit; font-size: .84rem; font-weight: 600; color: #1C201D; white-space: nowrap; cursor: pointer; }
.plan-toolbar button:not(:has(span)) { padding: 0 8px; }
.plan-toolbar button svg { flex: none; color: #4d5a50; }
.plan-toolbar button:hover { background: var(--soft); }
.plan-toolbar button:hover svg { color: var(--pine); }
.plan-toolbar button:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; }
.plan-toolbar button:disabled { opacity: .38; cursor: default; background: none; }
.plan-toolbar button[hidden] { display: none; }
.plan-toolbar button[aria-pressed="true"], .plan-toolbar button[aria-expanded="true"] { background: var(--pine); color: #fff; }
.plan-toolbar button[aria-pressed="true"] { background: var(--finish); }
.plan-toolbar button[aria-pressed="true"] svg, .plan-toolbar button[aria-expanded="true"] svg { color: #fff; }
.plan-help-pop .plan-tips { margin-bottom: 8px; }
.plan-help-pop .plan-note { margin: 0; }
.plan-help-pop .touch { display: none; }
.plan-maphint { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; margin: 0; width: max-content; max-width: min(460px, calc(100vw - 80px)); box-sizing: border-box;
                display: flex; align-items: center; gap: 6px; padding-block: 6px; padding-inline: 11px 6px; border-radius: 8px;
                background: rgba(28,32,29,.9); color: #fff; font-size: .84rem; line-height: 1.35; }
.plan-maphint span { flex: 1 1 auto; min-width: 0; margin-inline-end: 4px; }
.plan-maphint button { flex: none; border: 0; border-radius: 6px; padding: 4px 10px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.plan-maphint button:hover { background: rgba(255,255,255,.26); }
.plan-maphint button.done { background: #fff; color: #1C201D; }
.plan-maphint button[hidden] { display: none; }
.plan-maphint[hidden] { display: none; }
.plan-trail-pop, .plan-help-pop { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; width: 340px; max-width: calc(100vw - 40px); max-height: min(420px, 60vh); overflow-y: auto;
                  box-sizing: border-box; margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.plan-layers { position: absolute; top: 54px; inset-inline-start: 10px; z-index: 4; width: 300px; max-width: calc(100% - 20px); max-height: calc(100% - 70px); overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px; box-sizing: border-box; }
.plan-layers[hidden] { display: none; }
.plan-layers h2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: #6b6558; margin: 2px 4px 8px; font-weight: 600; }
.plan-layers h2 + .plan-bases, .plan-layers h2 + .plan-overlays { margin-bottom: 12px; }
.plan-bases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plan-base { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: .8rem; cursor: pointer; padding: 4px 2px; border-radius: 8px; }
.plan-base[hidden] { display: none; }
.plan-base input { position: absolute; opacity: 0; pointer-events: none; }
.plan-base i { width: 72px; height: 52px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); display: block; }
.plan-base input:checked + i { border-color: var(--pine); }
.plan-base input:focus-visible + i { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan-base input:checked ~ b { color: var(--pine); }
.plan-base b { font-weight: 600; }
.plan-layer-detail { font-size: .8rem; color: #666; margin: -4px 4px 12px; min-height: 1.2em; }
.plan-overlays { display: grid; gap: 2px; }
.plan-overlay { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: .88rem; line-height: 1.3; }
.plan-overlay:hover { background: var(--soft); }
.plan-overlay input { margin: 2px 0 0; accent-color: var(--pine); width: 16px; height: 16px; }
.plan-overlay small { display: block; color: #666; font-size: .78rem; }
.plan-legend { display: flex; gap: 0; margin-block: 4px 2px; margin-inline: 34px 4px; font-size: .7rem; color: #555; }
.plan-legend span { flex: 1; text-align: center; padding: 2px 0; }

.plan-card { position: absolute; left: 50%; /* centred: the one place left is right in either direction */ bottom: 36px; transform: translateX(-50%); z-index: 3; width: min(420px, calc(100% - 24px)); box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.2); padding-block: 12px; padding-inline: 14px 40px; font-size: .9rem; line-height: 1.4; color: #333; }
.plan-card[hidden] { display: none; }
.plan-card b { display: block; font-size: 1rem; color: #1C201D; margin-bottom: 2px; }
.plan-card button { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; color: #666; }
.plan-card button:hover { background: var(--soft); }
.plan-card .touch { display: none; }

/* ---- A to B, or a round trip ---- */
.plan-tripmode { display: inline-grid; grid-template-columns: auto auto; gap: 2px; padding: 2px; background: #ebe6da; border-radius: 8px; margin-bottom: 8px; }
.plan-tripmode button { border: 0; background: none; border-radius: 6px; padding: 5px 12px; font: inherit; font-size: .84rem; font-weight: 600; color: #4d5a50; cursor: pointer; }
.plan-tripmode button[aria-pressed="true"] { background: #fff; color: var(--pine); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.plan-field[hidden] { display: none; }
.plan-loop { display: grid; gap: 10px; margin: -4px 0 14px; padding: 12px; background: #fff; border: 1px solid var(--edge); border-radius: 12px; }
.plan-loop[hidden] { display: none; }
.plan-loop-length { font-size: .92rem; color: #3a423c; display: flex; align-items: center; gap: 8px; }
.plan-loop-length input { width: 5em; padding: 6px 8px; border: 1px solid var(--edge); border-radius: 8px; font: inherit; font-size: 1rem; }
.plan-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; color: #3a423c; }
.plan-heading span { margin-inline-end: 4px; }
.plan-heading button { min-width: 38px; padding: 5px 9px; border: 1px solid var(--edge); border-radius: 999px; background: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.plan-heading button[aria-pressed="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }
.plan-loop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-loop-actions button { padding: 8px 12px; border: 1px solid var(--edge); border-radius: 8px; background: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.plan-loop-actions .primary { background: var(--pine); color: #fff; border-color: var(--pine); font-weight: 600; }

/* ---- the profile's key and its steepest stretch ---- */
.plan-gradekey { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -6px 0 8px; font-size: .74rem; color: #666; }
.plan-gradekey[hidden], .plan-steepest[hidden] { display: none; }
.plan-gradekey span { display: inline-flex; align-items: center; gap: 5px; }
.plan-gradekey i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.plan-steepest { font-size: .86rem; color: #3a423c; margin: 0 0 12px; }
.plan-steepest button, .plan-link { border: 0; background: none; padding: 0; font: inherit; font-size: inherit; color: var(--pine); text-decoration: underline; cursor: pointer; }

/* ---- what it runs on ---- */
.plan-waymix[hidden], .plan-along[hidden], .plan-saved[hidden], .plan-pop[hidden] { display: none; }
.plan-mixbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #eee; margin: 2px 0 8px; }
.plan-mixbar i { display: block; height: 100%; }
.plan-mixkey { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: #3a423c; }
.plan-mixkey span { display: inline-flex; align-items: center; gap: 6px; }
.plan-mixkey i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.plan-mixfacts { font-size: .84rem; color: #666; margin: 6px 0 0; }

/* ---- lists: on the way, trails, places to stay, my routes ---- */
.plan-along h3 { font-size: .8rem; font-weight: 600; color: #3a423c; margin: 10px 0 4px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plan-list li { display: flex; align-items: stretch; }
.plan-list li.muted { color: #666; font-size: .85rem; padding: 4px 0; }
.plan-list button, .plan-list a { flex: 1; text-align: start; border: 0; background: none; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font: inherit; font-size: .88rem; color: #1C201D; cursor: pointer; text-decoration: none; line-height: 1.35; }
.plan-list button:hover, .plan-list a:hover, .plan-list button:focus-visible { background: var(--soft); }
.plan-list small { display: block; color: #666; font-size: .78rem; }
.plan-list .chip { display: inline-block; font-size: .7rem; padding: 1px 7px; border-radius: 999px; background: #efe9dc; color: #6b5a3a; vertical-align: 1px; text-transform: capitalize; }
.plan-list .book, .plan-stays .book { flex: 0 0 auto; align-self: center; margin: 0; font-size: .76rem; font-weight: 600; color: #003b95; text-decoration: none; white-space: nowrap; padding: 4px 8px; border: 1px solid #c9d6ea; border-radius: 999px; background: #f4f7fc; }
/* The partners' pills (three since Hotels.com, 5 Oct 2026) never fit beside a name in this panel, and beside them the name
   wrapped one word a line. So the name takes the whole row and the pills sit under it, wrapping if they must. */
.plan-list li, .plan-stays li { flex-wrap: wrap; }
.plan-list li:has(.books) > button, .plan-stays li:has(.books) > button { flex: 1 1 100%; }
.plan-list .books, .plan-stays .books { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; align-self: center; margin: 2px 0 4px; padding-inline-start: 0; }
.plan-list .books:has(+ *), .plan-stays .books { padding-bottom: 2px; }
.plan-list .book:hover, .plan-stays .book:hover { background: #e7eefa; }
.plan-stays li { display: flex; align-items: stretch; }
.plan-note-li { list-style: none; font-size: .74rem; color: #666; padding: 4px 0 2px; line-height: 1.35; }
.plan-saved .plan-list .del { flex: 0 0 34px; margin: 0; text-align: center; font-size: 1.1rem; color: #666; }

/* ---- days ---- */
.plan-stepper { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .92rem; }
.plan-stepper button { width: 30px; height: 30px; border: 1px solid var(--edge); border-radius: 8px; background: #fff; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.plan-stepper button:disabled { opacity: .4; cursor: default; }
.plan-days-list { margin: 0; padding: 0; padding-inline-start: 1.1em; display: grid; gap: 8px; font-size: .88rem; }
.plan-days-list:empty { display: none; }
.plan-days-list li > div { margin-bottom: 2px; }
.plan-stays { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.plan-stays li.muted { color: #666; font-size: .82rem; }
.plan-stays button { border: 0; background: none; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; font: inherit; font-size: .85rem; text-align: start; cursor: pointer; width: 100%; }
.plan-stays button:hover { background: var(--soft); }
.plan-stays small { display: block; color: #666; font-size: .76rem; }
.plan-stays .chip { font-size: .68rem; padding: 1px 6px; border-radius: 999px; background: #efe9dc; color: #6b5a3a; }
.ga-day { width: 24px; height: 24px; border-radius: 6px; background: var(--pine); color: #fff; font: 700 12px/24px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.35); }

/* ---- small panels: a trail to follow, the phone code ---- */
.plan-pop { margin: 6px 0 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.plan-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .92rem; }
.plan-pop-head button { border: 0; background: none; font-size: 1.2rem; line-height: 1; color: #666; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.plan-qr #plan-qr-code svg { display: block; width: 200px; height: 200px; margin: 4px auto 8px; }
.plan-embed-box textarea { display: block; width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--soft);
                           font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #333; resize: vertical; word-break: break-all; }
.plan-embed-copy { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.plan-embed-copy button { flex: none; padding: 7px 14px; border: 1px solid var(--edge); border-radius: 8px; background: #fff; font: inherit; font-size: .88rem; font-weight: 600; color: #1C201D; cursor: pointer; }
.plan-embed-copy button:hover { background: var(--soft); }
.plan-embed-copy .plan-note { margin: 0; }
.plan-card-app { font-weight: 700; color: var(--pine); }
.maplibregl-ctrl-group .plan-3d { font: 700 11px/29px system-ui, sans-serif; width: 29px; color: #333; }
.maplibregl-ctrl-group .plan-3d[aria-pressed="true"] { background: var(--pine); color: #fff; }
.plan-sheet-handle { display: none; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---- pictures of the map for printing: the map resized out of sight ---- */
.plan-capturing .plan-map { overflow: hidden; }
.plan-capturing .plan-map::after { content: attr(data-capturing); position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
                                   background: #f2efe6; color: #4d5a50; font-size: .95rem; }

/* ---- the printed pages (Print): they alone print, A4 portrait, a page each ---- */
.plan-printout { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.plan-printing { margin: 0; background: #fff; }
  body.plan-printing > *:not(.plan-printout) { display: none !important; }
  body.plan-printing .plan-printout { display: block; color: #1C201D; font: 10pt/1.35 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
                                      -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Sized to fit A4, and US Letter too should that be the paper in the printer. */
  .pp-page { display: flex; flex-direction: column; gap: 3mm; break-after: page; page-break-after: always; break-inside: avoid; }
  .pp-page:last-child { break-after: auto; page-break-after: auto; }
  .pp-head h1 { font-size: 17pt; line-height: 1.15; margin: 0; }
  .pp-head p { margin: 1mm 0 0; color: #555; }
  .pp-figures { display: flex; gap: 3mm; margin: 0; padding: 0; list-style: none; }
  .pp-figures li { flex: 1; padding: 1.5mm 2.5mm; border: .3mm solid #d9d3c5; border-radius: 2mm; font-size: 7.5pt; color: #666; text-transform: uppercase; letter-spacing: .04em; }
  .pp-figures b { display: block; font-size: 13pt; color: #1C201D; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .pp-map { display: block; width: auto; height: auto; max-width: 100%; max-height: 141mm; margin: 0 auto; border-radius: 1.5mm; }
  .pp-map.pp-day { max-height: 182mm; }
  .pp-profile { display: block; width: 100%; height: auto; }
  .pp-key { display: flex; flex-wrap: wrap; gap: 1mm 4mm; margin: -1mm 0 0; font-size: 7.5pt; color: #666; }
  .pp-key i { display: inline-block; width: 5mm; height: 1.2mm; margin-inline-end: 1.5mm; border-radius: .6mm; vertical-align: middle; }
  .pp-ends { margin: 0; }
  .pp-foot { display: flex; justify-content: space-between; gap: 4mm; padding-top: 1.5mm; border-top: .3mm solid #e6e1d6; font-size: 7pt; color: #666; }
}

/* Pine, not the route's orange: orange text on this panel is 2.79:1, under the 4.5:1 that WCAG 2.2 AA asks of text; pine is 9.6:1. */
.plan-linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--pine,#1F4A38);text-decoration:underline;cursor:pointer}
.plan-linklike:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px}
.plan-ferry{color:#2f5f78;font-weight:500}

/* Small grey text is #666 (5.5:1 on the panel) or #6b6558 (5.6:1), not the #777, #888, #999 and #7a7466 it was (4.3, 3.4, 2.7 and 4.45:1): WCAG 2.2 AA asks 4.5:1. */
/* ---- the toast over the map: an error, or a note worth reading, where the walker is looking ---- */
.plan-toast-region { position: absolute; left: 50%; /* centred, as the tip card is */ bottom: 36px; transform: translateX(-50%); z-index: 6; width: min(460px, calc(100% - 24px)); pointer-events: none; }
.plan-toast { pointer-events: auto; position: relative; box-sizing: border-box; padding-block: 11px; padding-inline: 14px 40px; border-radius: 12px; background: var(--pine); color: #fff;
              font-size: .9rem; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.plan-toast.error { background: var(--finish); }
.plan-toast[hidden] { display: none; }
.plan-toast button { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.plan-toast button:hover { background: rgba(255,255,255,.18); }
.plan-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.plan-map:has(.plan-toast:not([hidden])) .plan-card { display: none; }

/* ---- the question box: Save, Delete, the example, a link to copy (one <dialog>, ask() in plan.js) ---- */
.plan-dialog { margin: auto; border: 0; border-radius: 14px; padding: 0; width: min(420px, calc(100vw - 32px)); background: #fff; color: #1C201D; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.plan-dialog::backdrop { background: rgba(28,32,29,.5); }
.plan-dialog form { margin: 0; padding: 20px 20px 16px; }
.plan-dialog h2 { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; }
.plan-dialog p { margin: 0 0 14px; font-size: .92rem; line-height: 1.45; color: #3a423c; }
.plan-dialog p[hidden], .plan-dialog-field[hidden], .plan-dialog-actions button[hidden] { display: none; }
.plan-dialog-field { display: block; margin: 0 0 16px; font-size: .84rem; font-weight: 600; color: #3a423c; }
.plan-dialog-field input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px; border: 1px solid #d9d3c5; border-radius: 8px; font: inherit; font-size: 1rem; font-weight: 400; color: #1C201D; background: #fff; }
.plan-dialog-field input:focus-visible { outline: 2px solid #1F4A38; outline-offset: 1px; }
.plan-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.plan-dialog-actions button { padding: 9px 16px; border: 1px solid #d9d3c5; border-radius: 9px; background: #fff; font: inherit; font-size: .92rem; font-weight: 600; color: #1C201D; cursor: pointer; }
.plan-dialog-actions button:hover { background: #f3efe6; }
.plan-dialog-actions button:focus-visible { outline: 2px solid #1F4A38; outline-offset: 2px; }
.plan-dialog-actions .primary { background: #1F4A38; border-color: #1F4A38; color: #fff; }
.plan-dialog-actions .primary:hover { background: #173b2c; }
.plan-dialog-actions .danger { background: #a63a26; border-color: #a63a26; }
.plan-dialog-actions .danger:hover { background: #8c2f1e; }

/* ---- on the water: the paddling modes ---- */
.plan-profile button svg { vertical-align: -4px; margin-inline-end: 6px; }
.plan-paddle-caveat { font-size: .84rem; line-height: 1.4; color: #2f5f78; margin: -8px 0 14px; }
.plan.paddling .plan-figures .f-climb, .plan.paddling #plan-profile-chart, .plan.paddling .plan-gradekey, .plan.paddling .plan-steepest,
.plan.paddling .plan-land-only, .plan.paddling .plan-tripmode, .plan.paddling .plan-loop { display: none !important; }
.plan.paddling .plan-figures { grid-template-columns: repeat(2, 1fr); }
.plan-notes { margin: 0 0 12px; padding-inline-start: 18px; font-size: .86rem; line-height: 1.4; color: #333; }
.plan-notes:empty { display: none; }
.plan-notes li { margin: 0 0 4px; }
/* Locks and weirs on the line. MapLibre places a marker with its own transform, so nothing here may set one. */
.ga-lock, .ga-weir { width: 20px; height: 20px; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.4); box-sizing: border-box;
                     display: grid; place-items: center; cursor: pointer; font: 700 10px/1 system-ui, sans-serif; color: #fff; }
.ga-lock { background: #2f5f78; }
.ga-weir { background: #b7651b; }
/* The credit for seamarks (CC BY-SA) and NOAA's chart, on the map itself. */
.plan-mapcredit { margin-block: 0 4px !important; margin-inline: 0 6px !important; padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.88); font-size: 11px; line-height: 1.4; color: #333; max-width: 70vw; }
.plan-mapcredit a { color: inherit; }
.plan-mapcredit[hidden] { display: none; }

/* ---- plan along a trail (3 Nov 2026): our trails and routes by name ---- */
/* a result: an icon and the words (what it is, how long, where), never the icon alone */
.plan-results li.trail { display: flex; align-items: flex-start; gap: 10px; }
.plan-trail-ico { flex: none; margin-block-start: 2px; color: var(--pine); }
.plan-trail-txt { min-width: 0; display: block; }
.plan-trail-txt b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.plan-trail-txt small { display: block; }
/* the pop-over: a box to type in, what choosing does, a heading that says what the list is */
.plan-trail-search { margin-block: 2px 4px; }
.plan-trail-search label { padding-top: 0; font-size: .75rem; }
.plan-trail-search input { padding: 9px 10px; margin-top: 2px; border: 1px solid var(--edge); border-radius: 8px; background: #fff; }
.plan-trail-search input:focus, .plan-trail-search input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
/* (the list of a search made here pushes the list under it down: inside a pop-over that scrolls, a list laid over it would be cut off) */
.plan-trail-search .plan-results { position: static; margin: 6px 0 0; box-shadow: none; max-height: 240px; }
.plan-trail-note { margin: 4px 0 2px; font-size: .78rem; line-height: 1.4; color: #5b564a; }
.plan-trail-note[hidden], .plan-trail-note:empty { display: none; }
.plan-trail-sub { margin: 12px 0 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6b6558; }
.plan-list .plan-trail-pick { display: flex; align-items: flex-start; gap: 10px; }
.plan-empty-acts { display: inline-flex; flex-wrap: wrap; gap: 0 16px; }

/* The site's skip link waits at left: -9999px (site.css). On a right-to-left page the space to the left of the page is scrollable, so Hebrew and Arabic pages scrolled sideways for
   11,000 px: it waits at the other edge there, which no page scrolls to. */
:root[dir="rtl"] .skip { left: auto; right: -9999px; }
:root[dir="rtl"] .skip:focus { right: 10px; }