/* NavForge web route planner — F-006 step 4.
 *
 * Split out of the page so the SAME stylesheet serves both doors: the standalone
 * page at plan.navforge.app and the tab on navforge.app. One file, one look
 * (rule-w) — a second copy inside the WordPress template would drift the first
 * time either was touched.
 *
 * Everything is scoped under #nf-planner or .nf-planner-* so it cannot leak into
 * the WordPress theme around it.
 */

#nf-planner{
  --nf-bg:#0d1014; --nf-panel:#1E2229; --nf-panel2:#262B33; --nf-line:#313843;
  --nf-ink:#E8E8E8; --nf-dim:#9CA3AF; --nf-faint:#6B7280;
  --nf-pink:#FF2D7B; --nf-green:#39FF14; --nf-blue:#5AA9FF; --nf-amber:#F59E0B;
  display:grid; grid-template-columns:1fr 360px;
  height:78vh; min-height:540px;
  background:var(--nf-bg); color:var(--nf-ink);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  border:1px solid var(--nf-line); border-radius:12px; overflow:hidden;
}
#nf-planner *{box-sizing:border-box}
@media(max-width:900px){
  #nf-planner{grid-template-columns:1fr; height:auto; min-height:0}
  #nf-planner .nf-mapwrap{height:52vh}
  #nf-planner aside{border-left:0; border-top:1px solid var(--nf-line); max-height:none}
}

/* standalone page only — the WordPress tab brings its own header */
.nf-planner-header{
  display:flex; align-items:center; gap:14px; padding:12px 18px;
  border-bottom:1px solid #313843; background:#1E2229; color:#E8E8E8;
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.nf-planner-header .brand{font-weight:650;font-size:16px;white-space:nowrap}
.nf-planner-header .brand span{color:#FF2D7B}
.nf-planner-header .hint{color:#6B7280;font-size:12.5px}
.nf-planner-header a{color:#FF2D7B;text-decoration:none;font-weight:600;font-size:12.5px;margin-left:auto}
body:has(.nf-planner-header){margin:0;background:#0d1014}
body:has(.nf-planner-header) #nf-planner{height:calc(100vh - 49px);border:0;border-radius:0}

#nf-planner .nf-mapwrap{position:relative}
#nf-planner .nf-map{width:100%;height:100%;background:var(--nf-panel)}
#nf-planner aside{border-left:1px solid var(--nf-line);background:var(--nf-panel);overflow-y:auto}
#nf-planner .sec{padding:14px 16px;border-bottom:1px solid var(--nf-line)}
#nf-planner .sec h2{margin:0 0 10px;font-size:11.5px;font-weight:650;letter-spacing:.07em;
                    text-transform:uppercase;color:var(--nf-dim)}

/* ── the place fields — the heart of it ─────────────────────────────────────
   Every point is a NAMED row with a role that never changes under you: Start,
   Stop N, Destination. Typing searches; tapping the map fills whichever row is
   focused. Adding a stop inserts BEFORE the destination, so a third tap can
   never steal it — which is exactly what the first version did. */
#nf-planner .row{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative}
#nf-planner .row .pin{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:2px solid var(--nf-bg)}
#nf-planner .row .grab{color:var(--nf-faint);cursor:grab;font-size:13px;user-select:none;padding:0 1px}
#nf-planner .row input{
  flex:1;min-width:0;padding:9px 10px;border-radius:8px;border:1px solid var(--nf-line);
  background:var(--nf-panel2);color:var(--nf-ink);font:inherit;font-size:13px;
}
#nf-planner .row input:focus{outline:none;border-color:var(--nf-pink);background:#FF2D7B10}
#nf-planner .row input::placeholder{color:var(--nf-faint)}
#nf-planner .row .x{background:none;border:0;color:var(--nf-faint);cursor:pointer;
                    font-size:17px;line-height:1;padding:2px 4px}
#nf-planner .row .x:hover{color:var(--nf-pink)}
#nf-planner .row .x[hidden]{display:none}

#nf-planner .sugg{
  position:absolute;top:100%;left:26px;right:26px;z-index:40;margin-top:3px;
  background:#11151A;border:1px solid var(--nf-line);border-radius:9px;overflow:hidden;
  box-shadow:0 10px 26px #00000070;
}
#nf-planner .sugg div{padding:8px 11px;font-size:12.5px;cursor:pointer;color:var(--nf-ink);
                      border-bottom:1px solid #1C2128}
#nf-planner .sugg div:last-child{border-bottom:0}
#nf-planner .sugg div:hover,#nf-planner .sugg div.sel{background:#FF2D7B1A}
#nf-planner .sugg .none{color:var(--nf-faint);cursor:default}

#nf-planner .addstop{
  width:100%;padding:8px;border-radius:8px;border:1px dashed var(--nf-line);
  background:transparent;color:var(--nf-dim);font:inherit;font-size:12.5px;cursor:pointer;
}
#nf-planner .addstop:hover{border-color:var(--nf-pink);color:var(--nf-ink)}

#nf-planner .presets{display:flex;gap:8px}
#nf-planner .presets button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--nf-line);
  background:var(--nf-panel2);color:var(--nf-ink);font:inherit;font-weight:600;cursor:pointer}
#nf-planner .presets button.on{border-color:var(--nf-pink);background:#FF2D7B18;color:#fff}

#nf-planner .ctl{margin-bottom:13px}
#nf-planner .ctl .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
#nf-planner .ctl .lab b{font-weight:600;font-size:13px}
#nf-planner .ctl .lab i{font-style:normal;color:var(--nf-blue);font-size:12px;font-variant-numeric:tabular-nums}
#nf-planner .seg{display:flex;gap:5px}
#nf-planner .seg button{flex:1;padding:6px 4px;border-radius:7px;border:1px solid var(--nf-line);
  background:var(--nf-panel2);color:var(--nf-dim);font:inherit;font-size:12px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nf-planner .seg button.on{border-color:var(--nf-pink);background:#FF2D7B18;color:#fff;font-weight:600}
#nf-planner input[type=range]{width:100%;accent-color:var(--nf-pink);margin:2px 0 0}

#nf-planner .figures{display:flex;gap:16px;margin:0 0 10px;flex-wrap:wrap}
#nf-planner .fig b{display:block;font-size:19px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}
#nf-planner .fig span{color:var(--nf-faint);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
#nf-planner .actions{display:flex;gap:8px;flex-wrap:wrap}
#nf-planner .actions button{padding:8px 12px;border-radius:8px;border:1px solid var(--nf-line);
  background:var(--nf-panel2);color:var(--nf-ink);font:inherit;font-size:12.5px;cursor:pointer}
#nf-planner .actions button:hover:not(:disabled){border-color:#46505F}
#nf-planner .actions button:disabled{opacity:.4;cursor:default}
#nf-planner .msg{margin:9px 0 0;font-size:12.5px;color:var(--nf-amber)}
#nf-planner .msg:empty{display:none}

#nf-planner ol.turns{list-style:none;margin:0;padding:0}
#nf-planner ol.turns li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #22272F;font-size:12.5px}
#nf-planner ol.turns li:last-child{border-bottom:0}
#nf-planner ol.turns .d{color:var(--nf-blue);min-width:60px;text-align:right;
                        font-variant-numeric:tabular-nums;font-size:12px}

#nf-planner .legend{position:absolute;left:12px;bottom:12px;background:#0d1014E8;
  border:1px solid var(--nf-line);border-radius:9px;padding:8px 11px;font-size:12px;color:var(--nf-dim)}
#nf-planner .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;font-style:normal}
#nf-planner .note{color:var(--nf-faint);font-size:11.5px;line-height:1.5}
#nf-planner .note b{color:var(--nf-dim);font-weight:600}
/* T-448: the "B is 21.5 km from the nearest road" line above Turn by turn — amber
   like .msg, because it is a warning about the plan, not a footnote. */
#nf-planner .note.gap{color:var(--nf-amber);font-size:12.5px;margin:0}
#nf-planner .spin{display:none;position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:#0d1014E8;border:1px solid var(--nf-line);border-radius:9px;
  padding:6px 13px;font-size:12.5px;color:var(--nf-dim)}
#nf-planner .spin.on{display:block}

/* ── the leg strip — D-108 on the web ──────────────────────────────────────
   The phone lets a rider set each LEG differently and pick which one they are
   editing. Without this the website applies one setting to the whole trip, and
   Nick's question was exactly that: "there is no distingtion to where i change
   chips; on the a>B or toC or to D????" */
#nf-planner .legstrip{display:flex;flex-wrap:wrap;gap:6px}
#nf-planner .legchip{
  flex:1 1 auto;min-width:98px;max-width:100%;padding:7px 9px;border-radius:8px;
  border:1px solid var(--nf-line);background:var(--nf-panel2);color:var(--nf-dim);
  font:inherit;font-size:12px;cursor:pointer;text-align:left;line-height:1.3;
}
#nf-planner .legchip b{display:block;font-weight:600;font-size:12px;color:var(--nf-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nf-planner .legchip i{font-style:normal;font-size:11px;color:var(--nf-faint)}
#nf-planner .legchip.on{border-color:var(--nf-pink);background:#FF2D7B18}
#nf-planner .legchip.on b,#nf-planner .legchip.on i{color:#fff}
#nf-planner .legnote{margin:9px 0 0;font-size:11.5px;color:var(--nf-faint);line-height:1.45}

#nf-planner .legbreak{display:flex;flex-direction:column;gap:3px;margin:0 0 11px}
#nf-planner .legbreak span{font-size:12px;color:var(--nf-dim);font-variant-numeric:tabular-nums}
#nf-planner .legbreak b{color:var(--nf-ink);font-weight:600}

/* T-392 — a pasted coordinate is offered back as the rider's OWN point, first,
   before any geocoder result. Styled apart so it cannot be mistaken for a shop. */
#nf-planner .sugg .coord{color:var(--nf-ink);border-left:3px solid var(--nf-green);
  font-variant-numeric:tabular-nums}
#nf-planner .sugg .coord b{color:var(--nf-green);font-weight:600}

/* Letters on every point (Nick 2026-09-18: "smng like a b c d etc so the rider
   knows where each one is"). The row pin grows from an 11 px dot to a 20 px disc
   that holds the letter; the map disc is 24 px and drawn by planner.js dot(). */
#nf-planner .row .pin{width:20px;height:20px;display:inline-flex;align-items:center;
  justify-content:center;font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#0d1014;user-select:none}

/* day / night — the phone's two styles; the button sits under the zoom control */
#nf-planner .nf-theme{position:absolute;top:82px;right:10px;z-index:5;padding:6px 10px;border-radius:8px;
  border:1px solid var(--nf-line);background:#0d1014E8;color:var(--nf-ink);font:inherit;font-size:12px;cursor:pointer}

/* Map look v3 preview badge (planner.js: `?look=<name>`); only present when a non-default look is shown. */
.nf-look { position: absolute; top: 48px; right: 10px; z-index: 5; font: 600 11px/1.4 system-ui, sans-serif;
  padding: 3px 8px; border-radius: 6px; background: #B7410E; color: #fff; pointer-events: none; }
/* Effects checklist under the badge — only with a non-default look (planner.js `?fx=`). */
/* The extras checklist folds (T-480). Nick, on his phone: it "covers the screen in
   portrait and landscape". MEASURED before: 200x299 over a 390x439 map = 34.9% of it,
   always. Now one button, and the panel only when asked. */
.nf-fx-toggle { position: absolute; top: 122px; right: 10px; z-index: 6; font: 600 12px/1 system-ui, sans-serif;
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,22,26,.92); color: #E6E6E6; cursor: pointer; }
.nf-fx-toggle:hover { border-color: var(--nf-pink); }
.nf-fx-toggle.on { color: #F5A623; border-color: rgba(245,166,35,.55); }
.nf-fx-toggle.open { background: #F5A623; color: #16181c; border-color: #F5A623; }
.nf-fx { position: absolute; top: 160px; right: 10px; z-index: 5; width: 200px; max-height: calc(100% - 172px); overflow: auto; font: 11.5px/1.3 system-ui, sans-serif;
  padding: 6px 8px; border-radius: 8px; background: rgba(20,22,26,.92); color: #E6E6E6; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.nf-fx h4 { margin: 0 0 4px; font: 700 11px/1.3 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #F5A623; }
.nf-fx label { display: block; padding: 3px 0; cursor: pointer; }
.nf-fx label input { margin: 0 6px 0 0; vertical-align: -1px; }
.nf-fx small { display: block; color: #9AA3B2; font-size: 10.5px; margin-left: 20px; }

#nf-planner .nf-theme:hover{border-color:var(--nf-pink)}


/* Phone: the open panel may use more width, and in landscape the map is short, so it
   scrolls from just under its button to the bottom of the map. */
@media (max-width: 560px) {
  .nf-fx { width: min(240px, calc(100% - 20px)); max-height: calc(100% - 172px); }
}
@media (max-height: 460px) {
  .nf-fx { top: 122px; max-height: calc(100% - 132px); }
  .nf-fx-toggle { top: 82px; right: 84px; }
}

/* ── The credit line. T-482, Nick 2026-09-30: "yes add the attribution lines; very district
   though." The map is OpenStreetMap data under ODbL, which requires the credit to be VISIBLE,
   and until today the planner showed only "© Mapterhorn" — inherited from Mapterhorn's own
   tilejson — with nothing at all for OSM. MapLibre's default control is a translucent white
   wisp that disappears over pale roads, so it gets its own plate here: dark, opaque, with the
   pink rule above it that the rest of the planner uses for "this is ours". */
#nf-planner .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
  margin: 0; padding: 5px 10px; border-radius: 8px 0 0 0; border-top: 2px solid var(--nf-pink);
  background: rgba(20,22,26,.94); color: #E6E6E6; font: 500 11.5px/1.45 system-ui, sans-serif;
  max-width: min(520px, 96vw); box-shadow: 0 -1px 10px rgba(0,0,0,.35); }
#nf-planner .maplibregl-ctrl-attrib a { color: #F5A623; text-decoration: none; border-bottom: 1px dotted rgba(245,166,35,.6); }
#nf-planner .maplibregl-ctrl-attrib a:hover { color: #fff; border-bottom-color: #fff; }
/* MapLibre hides the text behind an ⓘ button when it decides the line is too wide. We pass
   compact:false, so the button must never come back and shrink the credit into a dot. */
#nf-planner .maplibregl-ctrl-attrib-button { display: none; }
#nf-planner .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 5px 10px; }
/* Phone: the line wraps rather than truncating — a credit you have to scroll to is not shown. */
@media (max-width: 560px) {
  #nf-planner .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
    font-size: 10.5px; padding: 4px 8px; max-width: 100vw; border-radius: 0; }
  /* At that width the credit runs the full bottom edge on two lines, so the start/stop/
     destination key has to sit above it instead of under it (MEASURED on a 390x844 phone:
     the plate is 40 px tall and covered the key). */
  #nf-planner .legend { bottom: 48px; }
}

/* T-487 — the live "nothing to show yet" line under an extra whose data the map
   only carries from a higher zoom. Amber, because it is a state to act on, not
   an error: the box IS on and the extra IS applied, there is simply nothing
   there yet. Hidden by the element's own `hidden` when the zoom is fine. */
.nf-fx label small.nf-fx-zoom { color: #F0A030; font-weight: 600; }
.nf-fx label small.nf-fx-zoom[hidden] { display: none; }