/* Route and fuel, and the route step of the itinerary: a full-bleed map with glass panels. The chart is the working look
   from lib/chart.js: light land, darker water, the coast drawn. The panels stay dark whatever the office's colours. */
.fm{--gl:rgba(7,20,30,.68);--ln:rgba(255,255,255,.13);--mute:rgba(255,255,255,.62);--acc:#2dd4bf;position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:#061018;color:#fff}
.fm [hidden]{display:none!important}
.fm .fm-map{position:absolute;inset:0;background:radial-gradient(1000px 700px at 60% 40%,#0b2130,#050d14)}
.fm-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 62% 42%,transparent 48%,rgba(2,8,14,.55));z-index:1}
.fm-panel{position:absolute;z-index:3;left:16px;top:16px;bottom:16px;width:372px;overflow:auto;background:var(--gl);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--ln);border-radius:20px;padding:18px 18px 14px;box-shadow:0 18px 60px rgba(0,0,0,.45);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.fm-panel h1{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:30px;letter-spacing:-.015em;color:#fff;margin:4px 0 0}.fm-panel h1 em{font-style:italic}
.fm-back{font-size:12px;color:var(--mute);cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-back:hover{color:#fff}
.fm-panel h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:18px 0 9px;font-weight:700}
.fm-stop{display:flex;align-items:center;gap:8px;position:relative}
.fm-n{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}.fm-n .ico{width:13px;height:13px}.fm-stop.add .fm-n{background:transparent;border:1px dashed rgba(255,255,255,.35)}
.fm-q,.fm-in{width:100%;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--ln);border-radius:10px;padding:9px 11px;color:#fff;font:inherit;font-size:13.5px;outline:none;transition:border-color .15s,background .15s}
.fm-q::placeholder,.fm-in::placeholder,.fm-own::placeholder{color:rgba(255,255,255,.42)}.fm-q:focus,.fm-in:focus,.fm-own:focus{border-color:var(--acc);background:rgba(255,255,255,.11)}
select.fm-in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}select.fm-in option{color:#0f172a}
.fm-rowbtns{display:flex;gap:2px;flex:none;width:46px;justify-content:flex-end}.fm-rowbtns button{border:0;background:none;color:var(--mute);width:22px;height:26px;border-radius:7px;font-size:14px;cursor:pointer;padding:0}.fm-rowbtns button:hover{background:rgba(255,255,255,.12);color:#fff}
.fm-leg{display:flex;align-items:center;gap:8px;margin:3px 0 3px 11px;padding:4px 0 4px 20px;border-left:2px solid var(--acc);min-height:30px}.fm-leg.straight{border-left:2px dashed #fbbf24}
.fm-legtx{flex:1;font-size:12px;color:var(--mute);line-height:1.3}.fm-own{width:64px;flex:none;background:transparent;border:1px solid transparent;border-radius:7px;padding:3px 6px;font:inherit;font-size:12px;color:#fff;outline:none;text-align:right}.fm-own:hover{border-color:var(--ln)}
.fm-tidy{display:flex;gap:6px;margin-top:9px}.fm-tidy button{flex:1;border:1px solid var(--ln);background:none;color:var(--mute);border-radius:9px;padding:6px 4px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.fm-tidy button:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.fm-vessel{display:grid;gap:11px}.fm-f{display:grid;gap:5px;font-size:12px;color:var(--mute);font-weight:600;min-width:0}.fm-l{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fm-note{font-size:11.5px;color:var(--mute);line-height:1.4;border-left:2px solid #fbbf24;padding-left:9px}
.fm-two{display:grid;grid-template-columns:1fr 92px;gap:8px}
.fm-seg{display:inline-flex;background:rgba(255,255,255,.08);border-radius:8px;padding:2px}.fm-seg button{border:0;background:none;color:var(--mute);font:inherit;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer}.fm-seg button.on{background:var(--acc);color:#04161c}
.fm-sl{display:grid;grid-template-columns:1fr 66px;gap:10px;align-items:center}.fm-in.sm{padding:7px 8px;text-align:center}
.fm-range{appearance:none;width:100%;height:4px;border-radius:9px;background:rgba(255,255,255,.2);outline:none;margin:0}.fm-range::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}.fm-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:pointer}
.fm-panel footer p{font-size:11px;line-height:1.45;color:rgba(255,255,255,.5);margin:0;padding-top:10px}
.fm-acts{display:flex;gap:8px;position:sticky;bottom:-14px;margin:16px -18px 0;padding:10px 18px;background:rgba(8,21,31,.92);border-top:1px solid var(--ln)}.fm-btn{flex:1;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:11px;padding:10px 8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.fm-btn:hover{background:rgba(255,255,255,.14)}.fm-btn.pri{background:var(--acc);border-color:transparent;color:#04161c}.fm-btn.pri:hover{filter:brightness(1.08);background:var(--acc)}.fm-btn:disabled{opacity:.4;cursor:default}
.fm-stats{position:absolute;z-index:2;left:404px;right:16px;bottom:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;pointer-events:none}
.fm-stat{background:var(--gl);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--ln);border-radius:16px;padding:12px 15px;min-width:0;display:flex;flex-direction:column;gap:2px;box-shadow:0 12px 34px rgba(0,0,0,.35);pointer-events:auto}
.fm-stat small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}.fm-stat b{font-size:clamp(20px,1.9vw,29px);font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}.fm-stat b i{font-style:normal;font-size:.5em;font-weight:500;color:var(--mute);margin-left:4px;letter-spacing:0}.fm-stat span{font-size:11.5px;color:var(--mute);line-height:1.3}
.fm-stat.cost b{color:var(--acc)}.fm-apa{display:block;height:4px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden;margin:5px 0 3px}.fm-apa i{display:block;height:100%;background:var(--acc);border-radius:9px}
.fm-top{position:absolute;z-index:2;left:404px;top:16px;right:60px;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}.fm-pill,.fm-toll{background:var(--gl);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--ln);border-radius:10px;padding:6px 13px;font-size:12px;font-weight:600}.fm-pill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:7px;vertical-align:1px}.fm-pill{background:rgba(7,20,30,.86);color:#fff}.fm-pill.warn,.fm-toll,.fm-moved{background:#fff6e0;color:#5c4305;border:1px solid #f7c948;-webkit-backdrop-filter:none;backdrop-filter:none}.fm-pill.warn::before{background:#b7791f}.fm-moved{border-radius:10px;padding:6px 13px;font-size:12px;font-weight:600}
.fm-land{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:4px 0 6px 34px;font-size:12px;color:#fde68a}.fm-land button{border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.fm-start{position:absolute;z-index:2;left:calc(50% + 196px);top:44%;transform:translate(-50%,-50%);text-align:center;width:min(440px,calc(100% - 430px));pointer-events:none}.fm-start b{display:block;font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:30px;line-height:1.15;text-shadow:0 2px 20px rgba(0,0,0,.6)}.fm-start>span{display:block;color:rgba(255,255,255,.75);font-size:13px;margin:8px 0 12px;text-shadow:0 1px 10px rgba(0,0,0,.7)}.fm-start div{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}.fm-start button{pointer-events:auto;border:1px solid var(--ln);background:var(--gl);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border-radius:10px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}.fm-start button:hover{border-color:var(--acc)}
.fm-fail{position:absolute;z-index:2;left:calc(50% + 196px);top:40%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 430px));text-align:center;color:var(--mute)}
.fm-fit{position:absolute;z-index:2;right:10px;top:84px;width:29px;height:29px;border-radius:7px;border:0;background:#fff;color:#0f172a;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.fm-fit .ico{width:15px;height:15px}
.fm-tip{position:absolute;z-index:6;pointer-events:none;background:#fff;color:#0f172a;font-size:12px;font-weight:600;border-radius:7px;padding:3px 8px;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap}
.fm-drop{position:absolute;z-index:8;background:#0b1c29;border:1px solid rgba(255,255,255,.18);border-radius:12px;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.6);padding:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.fm-drop a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;color:#fff}.fm-drop a:hover,.fm-drop a.on{background:rgba(255,255,255,.12)}.fm-drop small{color:var(--mute);font-size:11px;white-space:nowrap;flex:none}
.fm-grp{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:700;padding:8px 9px 3px}.fm-none{padding:12px;font-size:12.5px;color:var(--mute)}
.fm-sea{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.34);pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .25s}.fm-sea.on{opacity:1}
.fm-plabel{font-size:11px;font-weight:500;color:rgba(255,255,255,.72);pointer-events:none;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.fm-pin{width:28px;height:28px;border-radius:50%;background:#fff;color:#04161c;display:grid;place-items:center;font-size:12px;font-weight:700;cursor:grab;box-shadow:0 0 0 4px rgba(255,255,255,.2),0 4px 14px rgba(0,0,0,.5)}.fm-pin.first{background:var(--pin,#2dd4bf)}.fm-pin:active{cursor:grabbing}
.fm-pin em{position:absolute;left:33px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.7);pointer-events:none}
.fm-boat{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(45,212,191,.35),0 0 22px 6px rgba(45,212,191,.8);pointer-events:none}
@media (max-width:1060px){
  .fm{overflow:visible;align-self:flex-start;min-height:100%;width:100%;background:#07151f;display:flex;flex-direction:column}
  .fm .fm-map{position:relative;inset:auto;height:clamp(300px,50vh,560px);flex:none}.fm-veil{display:none}
  .fm-panel{position:static;width:auto;overflow:visible;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none;padding:6px 16px 26px;order:3}
  .fm-stats{position:relative;left:auto;right:auto;bottom:auto;margin:-54px 12px 0;grid-template-columns:1fr 1fr;order:2;gap:8px}.fm-stat{padding:10px 13px;background:rgba(7,20,30,.86)}.fm-stat b{font-size:24px}
  .fm-top{left:12px;top:12px;right:52px}.fm-start{left:50%;top:150px;width:calc(100% - 40px);transform:translate(-50%,-50%)}.fm-start b{font-size:24px}.fm-fail{left:50%;width:calc(100% - 40px);top:150px}
  .fm-q,.fm-in{font-size:16px}.fm-pin em{font-size:11px}.fm-acts{position:static;background:none;margin:16px 0 0;padding:12px 0 0}
}
.fm .ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* On the working chart the map's own words read dark on light land, and the veil that lit the dark chart is gone. */
.fm .fm-map{background:#6a96bc}.fm-veil{display:none}
.fm-sea{color:rgba(11,47,74,.5)}.fm-plabel{color:#0f2433;text-shadow:0 1px 3px #fff,0 0 5px #fff}
.fm-pin{box-shadow:0 0 0 2.5px #0b2f4a,0 4px 14px rgba(11,47,74,.4)}.fm-pin em{color:#0f2433;text-shadow:0 1px 3px #fff,0 0 6px #fff,0 0 2px #fff}
.fm-boat{box-shadow:0 0 0 3px #0b2f4a,0 0 16px 4px rgba(11,47,74,.6)}
.fm-in[type=date]{color-scheme:dark}
/* The itinerary's route step: the same builder in a box under the page's heading, and on a phone it stacks as Route and fuel does. */
/* The page's own box shrinks to fit its contents, and the route box has none that take width, so it is told to take it all. */
.tv.it{width:100%}
.ib-routebox{display:flex;width:100%;box-sizing:border-box;height:calc(100vh - 160px);min-height:560px;border-radius:20px;overflow:hidden;border:1px solid #e2eaef;background:#6a96bc}
.ib-routebox .fm{flex:1}.fm-panel .fm-h{font-size:12px;color:var(--mute);line-height:1.45;margin:0 0 4px}.fm-acts .fm-btn.pri:disabled{opacity:.45}
@media (max-width:1060px){.ib-routebox{display:block;height:auto;min-height:0;border-radius:14px}}