/* Layout: one full-bleed map canvas; a title pill top-left, map controls top-right, layers sheet, point card at the bottom. */
:root{
  --sea:#D6EAF8; --land:#E5E5E2; --il:#F2EFE4; --rte:#1E6FE8; --rwy:#2F64B0; --coast:#9DB6C6; --route:#A7AFB9; --ink:#15191E; --muted:#5E6875;
  --border:#6A5A80; --alt:#8F969E; --nav:#7A3E9D; --panel:#FFFFFF; --line:#DCE1E6; --accent:#0B6E99; --hover:#1E6FE8; --halo:#F2EFE4;
  --he:"Rubik","Heebo","Arial Hebrew",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sea:#0E2232; --land:#17191C; --il:#24282D; --rte:#4F9BFF; --rwy:#4A86D8; --coast:#2F4A5E; --route:#4E5966; --ink:#E9EDF2; --muted:#93A0B0;
  --border:#9C8CB0; --alt:#6E7884; --nav:#C08BE0; --panel:#12171D; --line:#29323C; --accent:#5BC8E8; --hover:#4F9BFF; --halo:#24282D; color-scheme:dark}}
:root[data-theme="dark"]{
  --sea:#0E2232; --land:#17191C; --il:#24282D; --rte:#4F9BFF; --rwy:#4A86D8; --coast:#2F4A5E; --route:#4E5966; --ink:#E9EDF2; --muted:#93A0B0;
  --border:#9C8CB0; --alt:#6E7884; --nav:#C08BE0; --panel:#12171D; --line:#29323C; --accent:#5BC8E8; --hover:#4F9BFF; --halo:#24282D; color-scheme:dark}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--sea);color:var(--ink);font-family:var(--he);overflow:hidden;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px));padding-block:0}
#map{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map:active{cursor:grabbing}
.ui{position:fixed;z-index:3;display:flex;gap:8px}
.tl{flex-direction:column;align-items:flex-start;max-height:calc(100% - 24px - env(safe-area-inset-top,0px));width:min(290px,calc(100vw - 86px));top:calc(env(safe-area-inset-top,0px) + 12px);left:max(12px,env(safe-area-inset-left,0px))}
.tr{top:calc(env(safe-area-inset-top,0px) + 12px);right:max(12px,env(safe-area-inset-right,0px));flex-direction:column}
.pill{padding:2px 4px;display:grid;gap:1px}  /* the title sits right on the water: no card */
.pill b{font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pill span{font:500 11px var(--mono);color:var(--muted)}
.btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.btn svg{width:20px;height:20px}
.btn:focus-visible,.row input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
#layers,#keys{position:fixed;z-index:4;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(62px,calc(env(safe-area-inset-right,0px) + 62px));width:min(260px,calc(100vw - 86px));background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:4px;box-shadow:0 6px 24px rgba(0,0,0,.14)}
#layers h2,#keys h2{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.row{display:flex;align-items:center;gap:10px;padding:8px 2px;cursor:pointer;font-size:15px}
.row input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.row small{margin-inline-start:auto;font:500 11px var(--mono);color:var(--muted)}
.soon{font:500 12px var(--he);color:var(--muted);border-top:1px solid var(--line);padding-top:8px;margin-top:4px;line-height:1.5}
#menu{position:fixed;z-index:5;min-width:170px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.16);padding:6px;display:grid;gap:2px}
#menu .mh{display:flex;align-items:baseline;gap:6px;padding:4px 8px 6px;border-bottom:1px solid var(--line);margin-bottom:2px}
#menu .mh b{font:600 15px var(--he);direction:rtl;margin-left:auto;text-align:right}
#menu .mh i{font:600 10px var(--mono);font-style:normal;color:var(--muted);letter-spacing:.05em}
#menu .mh span{font-size:12px}
#menu button{all:unset;cursor:pointer;font:500 14px var(--he);padding:8px 10px;border-radius:6px;color:var(--ink)}
#menu button:hover,#menu button:focus-visible{background:var(--sea)}
#menu i.code{font:600 10px var(--mono);font-style:normal;color:var(--muted);letter-spacing:.05em;padding:0 2px}
#menu #mDel{color:#C62828}
#route .ra{display:flex;gap:6px}
#rName{all:unset;font:600 14px var(--he);color:var(--ink);border-bottom:1px dashed transparent;min-width:0;width:100%;cursor:text}
#rName:hover{border-bottom-color:var(--line)} #rName:focus{border-bottom-color:var(--rte)}
#route button#rSave{color:var(--rte);border-color:var(--rte)} #route button#rSave[disabled]{color:var(--muted);border-color:var(--line);cursor:default}
#savedHead{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;width:100%;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#savedHead i{font-style:normal;margin-inline-start:auto} #savedHead svg{width:14px;height:14px;transition:transform .15s}
#savedHead[aria-expanded="true"] svg{transform:rotate(90deg)} #savedList{margin-top:6px}
#savedBox .it{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;cursor:pointer}
#savedBox .it:hover,#savedBox .it:focus-visible{background:var(--sea)}
#savedBox .it div{min-width:0;flex:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#savedBox .it b{font:600 14px var(--he);overflow-wrap:anywhere}
#savedBox .it span{font:500 11px var(--mono);color:var(--muted)}
#savedBox .it button{all:unset;cursor:pointer;color:var(--muted);font:600 12px var(--mono);padding:4px 8px;border-radius:6px}
#savedBox em.cur{font:600 9px var(--mono);font-style:normal;letter-spacing:.08em;color:#fff;background:var(--rte);border-radius:4px;padding:2px 5px}
#savedBox .it button.act{display:grid;place-items:center;padding:4px} #savedBox .it button.act svg{width:14px;height:14px} #savedBox .it button.sv{color:var(--rte)}
#curRow{margin:-2px -6px 4px} #curRow .it{cursor:default} #curRow:not([hidden])+#savedHead{border-top:1px solid var(--line);padding-top:8px}
#savedBox .it.editing{background:none;cursor:default}
#savedBox .it button.rn-ok{all:unset;cursor:pointer;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--rte);border:1px solid var(--rte);border-radius:6px;padding:4px 8px}
#savedBox .rn-in{all:unset;font:600 14px var(--he);color:var(--ink);border-bottom:1px solid var(--rte);min-width:0;flex:1}
#savedBox .it button.sure{color:#fff;background:#C62828}
#savedBox .empty{font:400 13px var(--he);color:var(--muted);margin:0;line-height:1.5}
/* Top left, over the sea: the route being built, then the saved ones. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08);width:100%;box-sizing:border-box}
#route{display:grid;gap:6px}
#route .rn{display:flex;align-items:flex-end;gap:8px} #route .rn time{margin-left:auto} #rEnds{cursor:text}
#route time,#savedBox time{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
#rEnds,#rEnds2{display:flex;align-items:flex-end;gap:10px;font:600 13px var(--mono);color:var(--ink)}
#rEnds div,#rEnds2 div{display:grid;gap:1px} #rEnds small,#rEnds2 small{font:600 9px var(--mono);letter-spacing:.1em;color:var(--muted)}
#rEnds .arr,#rEnds2 .arr{color:var(--muted);padding-bottom:1px}
#route .ra{display:flex;gap:6px;margin-top:6px}
#route button{all:unset;cursor:pointer;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 10px;border:1px solid var(--line);border-radius:7px}
#savedBox{overflow:auto;min-height:0;padding-bottom:6px}
#route button{all:unset;cursor:pointer;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px;border:1px solid var(--line);border-radius:7px}
.btn.clr{width:auto;height:auto;padding:0 14px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#C62828}
#confirm{position:fixed;inset:0;z-index:10;background:rgba(10,14,20,.35);display:grid;place-items:center;padding:16px}
#confirm .dlg{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:320px;width:100%;display:grid;gap:8px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
#confirm b{font:600 17px var(--he)}
#confirm p{margin:0;color:var(--muted);font:400 14px var(--he);line-height:1.45}
#confirm .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
#confirm button{all:unset;cursor:pointer;font:600 14px var(--he);padding:9px 14px;border-radius:8px;border:1px solid var(--line);color:var(--ink)}
#confirm button.danger{background:#C62828;border-color:#C62828;color:#fff}
#confirm button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#scale{position:fixed;z-index:2;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);font:500 11px var(--mono);color:var(--ink)}
#scale i{display:block;height:5px;border:1.5px solid var(--ink);border-top:none;margin-top:2px}


/* Undo/redo note: bottom centre, gone after a moment. */
#toast{position:fixed;z-index:6;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--panel);color:var(--ink,inherit);border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.14);padding:7px 14px;font:500 13px/1.2 Rubik,system-ui,sans-serif;white-space:nowrap;transition:opacity .25s}
#toast.out{opacity:0}

/* Keyboard shortcuts panel (the button only shows where there's a mouse, i.e. likely a keyboard). */
#keys{width:min(330px,calc(100vw - 86px))}
#keys dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0;align-items:center;font-size:14px}
#keys dt{margin:0} #keys dd{margin:0;display:flex;gap:3px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
#keys dd span{font-size:12px;color:var(--muted);margin:0 3px}
#keys kbd{font:600 12px var(--mono);min-width:22px;height:22px;padding:0 5px;display:inline-grid;place-items:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--bg,transparent);color:var(--ink)}
@media (hover:none){#bKeys{display:none}}

/* Find a point (2026-11-12): Hebrew or English, typos allowed; the list filters as you type. */
#find{position:relative;width:100%}
#find>svg{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
#q{all:unset;box-sizing:border-box;width:100%;height:40px;padding:0 12px 0 34px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font:500 14px var(--he);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#q::placeholder{color:var(--muted)} #q:focus{border-color:var(--rte)}
#q::-webkit-search-cancel-button{cursor:pointer}
#qList{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.16);max-height:min(60vh,420px);overflow:auto}
#qList li{display:grid;grid-template-columns:1fr auto;gap:1px 10px;padding:7px 9px;border-radius:7px;cursor:pointer}
#qList li[aria-selected="true"]{background:var(--sea)}
#qList li b{font:600 15px var(--he);direction:rtl;text-align:right;grid-column:1/-1;overflow-wrap:anywhere}
#qList li span{font:400 12px var(--he);color:var(--muted);overflow-wrap:anywhere}
#qList li i{font:600 10px var(--mono);font-style:normal;letter-spacing:.05em;color:var(--muted);align-self:center}
#qList li.none{display:block;cursor:default;font:400 13px var(--he);color:var(--muted)}