/* © 2026 Tymur Savruk. All rights reserved. */
/* Field IMPACT Solo (TODO 87). The look of the new navigator - dark, one amber accent, big touch targets, few words -
   with the values COPIED here (from css/theme.css and track.html) instead of linking the app's own style sheets:
   this page is public, and the fewer of the app's files it needs, the smaller what the public can reach. */
:root{--bg:#0f1217;--panel:rgba(25,29,37,.96);--solid:#191d25;--line:#424a5a;--text:#fff;--dim:#aab3c0;
      --accent:#ffa832;--accent-text:#1a1000;--go:#2fe08a;--stop:#ff4d4d;--info:#4db8ff;--bh:238px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Roboto,-apple-system,Arial,sans-serif;font-size:15px;overflow:hidden;overscroll-behavior:none}
button,input,textarea{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
svg .f{fill:currentColor;stroke:none}
#map{position:fixed;inset:0;background:#0b0f14}
.card{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mono{font-family:Consolas,Menlo,ui-monospace,monospace;letter-spacing:.4px}
.dim{color:var(--dim);font-size:13px}

/* ---- top: brand + project, the "go to" card, notices */
#top{position:fixed;left:10px;right:68px;top:calc(10px + env(safe-area-inset-top));z-index:5;display:flex;flex-direction:column;gap:8px;align-items:flex-start;pointer-events:none}
#top > *{pointer-events:auto}
#brand{border-radius:14px;padding:6px 12px;min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;cursor:pointer;max-width:100%;text-align:left}
#brand .bn{font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.02em;white-space:nowrap}
#brand .bn b{color:var(--accent)}
#brand .bp{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;max-width:100%}
#brand .bp svg{width:16px;height:16px;flex:none;color:var(--accent)}
#projName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#guide{border-radius:20px;padding:10px 6px 10px 12px;display:flex;gap:12px;align-items:center;width:100%;max-width:420px}
#arrow{width:58px;height:58px;border-radius:16px;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;flex:none}
#arrow svg{width:38px;height:38px;fill:currentColor;stroke:none;transition:transform .2s}
#arrow.nodir{background:#5a6170;color:#fff}
.gt{flex:1;min-width:0}
#gname{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
#gbig{font-size:32px;font-weight:700;line-height:1;white-space:nowrap}
#gbig small{font-size:16px;font-weight:600;color:var(--dim);margin-left:4px}
#gsub{color:var(--dim);font-size:13.5px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#note{border-radius:14px;padding:9px 12px;font-size:13.5px;line-height:1.35;max-width:420px;border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}

/* ---- right column */
#side{position:fixed;right:10px;top:calc(10px + env(safe-area-inset-top));z-index:5;display:flex;flex-direction:column;gap:8px}
.rb{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;user-select:none}
.rb svg{width:25px;height:25px;display:block}
.rb.on{border-color:var(--accent);color:var(--accent)}
.rb.away{border-color:var(--info);box-shadow:0 0 0 3px rgba(77,184,255,.45)}
.ib{flex:none;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0;border-radius:12px}
.ib svg{width:22px;height:22px;display:block}
.ib:active{background:rgba(127,140,150,.25)}

/* ---- bottom card */
#bottom{position:fixed;left:0;right:0;bottom:0;z-index:5;border-radius:22px 22px 0 0;border-bottom:0;padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
#attr{position:absolute;left:8px;right:8px;bottom:100%;margin-bottom:3px;font-size:10.5px;line-height:1.25;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 0 2px #000;pointer-events:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#attr a{color:#fff}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.v{font-size:25px;font-weight:700;margin-top:1px;white-space:nowrap}
.v small{font-size:13px;color:var(--dim);font-weight:600;margin-left:3px}
#stripBox{margin-top:7px}
#strip{display:block;width:100%;height:38px;border-radius:9px;background:rgba(127,140,150,.12)}
#stripKey{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:2px}
#coord{margin-top:7px;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}
#utm{font-family:Consolas,Menlo,ui-monospace,monospace;font-size:17px;font-weight:600;letter-spacing:.4px;white-space:nowrap}
#ll{grid-column:1;color:var(--dim);font-family:Consolas,Menlo,ui-monospace,monospace;font-size:12.5px;white-space:nowrap}
#acc{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:#6b7482;flex:none}
.dot.g{background:var(--go)} .dot.w{background:var(--accent)} .dot.s{background:var(--stop)}
#recNote{margin-top:7px;font-size:12px;line-height:1.35;color:var(--dim)}
#btns{display:flex;gap:8px;margin-top:9px}
.btn{flex:1;min-height:48px;border-radius:13px;border:1px solid var(--line);background:transparent;font-size:15px;font-weight:600;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn.main{background:var(--accent);border-color:var(--accent);color:var(--accent-text);flex:1.5}
.btn.main svg{fill:currentColor;stroke:none}
.btn.main.rec{background:var(--stop);border-color:var(--stop);color:#fff}
.btn.danger{border-color:var(--stop);color:var(--stop)}
.btn:disabled{opacity:.45;cursor:default}
.btn:active{filter:brightness(.88)}
.row{display:flex;gap:8px;align-items:center;margin-top:10px}

/* ---- the marks on the map */
.me{width:44px;height:44px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.me svg{display:block;width:100%;height:100%;overflow:visible;stroke:none}
.me .cone{fill:rgba(77,184,255,.35)}
.me.nodir .cone{display:none}
.me.stale .core{fill:#8b979c}
.tgt{width:34px;height:34px;color:var(--accent);filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.tgt svg{width:100%;height:100%;stroke-width:2.2}
.wp{display:flex;flex-direction:column;align-items:center;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.75))}
.wp i{width:32px;height:32px;border-radius:50%;background:var(--solid);border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center}
.wp i svg{width:19px;height:19px}
.wp span{margin-top:2px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(15,18,23,.8);border-radius:6px;padding:0 5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- keeping an area */
#frame{position:fixed;z-index:4;left:18px;right:18px;top:calc(72px + env(safe-area-inset-top));bottom:calc(292px + env(safe-area-inset-bottom));border:3px dashed var(--accent);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.38);pointer-events:none}
#frame span{position:absolute;left:8px;top:6px;font-size:12px;font-weight:700;color:var(--accent);text-shadow:0 0 3px #000,0 0 3px #000}
#keepBar{position:fixed;left:0;right:0;bottom:0;z-index:6;border-radius:22px 22px 0 0;border-bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));height:calc(280px + env(safe-area-inset-bottom))}
.kh{display:flex;justify-content:space-between;align-items:baseline;font-size:16px}
.kh span{color:var(--dim);font-size:13px}
input[type=text],textarea{width:100%;min-height:44px;padding:9px 11px;background:#12151b;border:1px solid var(--line);border-radius:10px;font-size:16px;margin-top:8px}
textarea{min-height:76px;resize:vertical}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent)}
.seg{display:flex;gap:6px;margin-top:8px}
.seg button{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:14px;font-weight:600;cursor:pointer}
.seg button.on{border-color:var(--accent);color:var(--accent);background:rgba(255,168,50,.1)}
#keepInfo{margin-top:8px;font-size:13.5px;line-height:1.35;min-height:37px}
body.keeping #guide,body.keeping #note,body.keeping #toast{display:none}
#keepInfo.bad{color:var(--stop);font-weight:600}

/* ---- the card of a pressed place */
#pick{position:fixed;left:10px;right:10px;bottom:calc(var(--bh) + 26px + env(safe-area-inset-bottom));z-index:7;border-radius:16px;padding:11px 12px;max-width:420px}
#pickUtm{font-size:17px;font-weight:600}

/* ---- sheets (lists) */
#sheet{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column}
#sheet header{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 8px 8px 16px;border-bottom:1px solid var(--line)}
#sheet h2{margin:0;font-size:19px}
#sheetBody{overflow:auto;padding:8px 14px calc(30px + env(safe-area-inset-bottom));flex:1;overscroll-behavior:contain}
.it{padding:11px 12px;border:1px solid var(--line);border-radius:14px;margin-top:9px;background:var(--solid)}
.it.tap{cursor:pointer}
.it.on{border-color:var(--accent)}
.it .h{display:flex;justify-content:space-between;align-items:center;font-weight:700;gap:10px}
.it .h > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it .d{color:var(--dim);font-size:13.5px;margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.it .acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.it .acts .btn{flex:1 1 auto;min-height:44px;font-size:13.5px;padding:0 10px}
.tag{font-size:11px;border:1px solid var(--accent);border-radius:6px;padding:1px 6px;color:var(--accent);font-weight:600;flex:none}
.bar{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.mi{display:flex;align-items:center;gap:13px;min-height:54px;padding:6px 4px;font-size:16px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.mi svg{width:24px;height:24px;flex:none;color:var(--accent)}
.mi small{display:block;font-size:12.5px;font-weight:400;color:var(--dim);margin-top:1px}
.txt{color:var(--dim);font-size:13.5px;line-height:1.5;margin:12px 2px 0}
.txt b{color:var(--text)}
.txt a{color:var(--info)}
.lnk{color:var(--info);text-decoration:none;font-weight:600}
.icons{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.icons button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.icons button svg{width:21px;height:21px}
.icons button.on{border-color:var(--accent);color:var(--accent);background:rgba(255,168,50,.1)}

/* ---- questions asked inside the page (never a browser alert) */
#dlg{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:14px}
#dlg .box{width:100%;max-width:400px;border-radius:18px;padding:16px;max-height:calc(100dvh - 28px);overflow:auto}
#dlg h3{margin:0 0 4px;font-size:18px}
#dlgBody{font-size:14px;line-height:1.45;color:var(--dim)}
#dlgBody .err{color:var(--stop);font-weight:600;min-height:19px;margin-top:6px}
#dlgBody .okv{color:var(--text);min-height:19px;margin-top:6px;font-family:Consolas,Menlo,ui-monospace,monospace;font-size:13.5px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bh) + 30px + env(safe-area-inset-bottom));z-index:40;background:#000;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;max-width:calc(100vw - 30px);text-align:center}

.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{display:none}

@media (max-width:359px){#coord{grid-template-columns:1fr} #acc{grid-column:1;grid-row:auto;margin-top:3px} #utm{font-size:16px}}
/* ---- a phone held sideways: the card stands at the left, the map keeps the rest */
@media (orientation:landscape) and (max-height:520px){
  :root{--bh:0px}
  #bottom{left:0;top:0;bottom:0;right:auto;width:292px;border-radius:0 20px 20px 0;border-left:0;border-top:0;border-bottom:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px calc(12px + env(safe-area-inset-left));display:flex;flex-direction:column}
  #bottom .v{font-size:21px}
  #stripBox{margin-top:5px} #strip{height:30px}
  #coord{grid-template-columns:1fr} #acc{grid-column:1;grid-row:auto;margin-top:3px}
  #btns{margin-top:auto;flex-wrap:wrap}
  #btns .btn{min-height:44px}
  #btns .btn.main{flex:1 1 100%}
  #recNote{font-size:11px;margin-top:4px}
  #attr{left:calc(100% + 8px);right:auto;bottom:4px;width:calc(100vw - 380px)}
  #top{left:calc(302px + env(safe-area-inset-left));right:68px}
  #keepBar{left:0;top:0;bottom:0;right:auto;width:292px;height:auto;border-radius:0 20px 20px 0;border-left:0;border-top:0;border-bottom:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px calc(12px + env(safe-area-inset-left))}
  #frame{left:310px;right:74px;top:14px;bottom:26px}
  #pick{left:302px;right:68px;bottom:26px}
  #toast{bottom:30px;left:calc(50% + 146px);max-width:calc(100vw - 330px)}
  #side{gap:6px}
  .rb{width:46px;height:46px}
}
/* ---- a laptop: the card is a panel at the lower left; lists open as a drawer at the right */
@media (min-width:900px){
  :root{--bh:0px}
  #bottom{left:14px;bottom:14px;right:auto;width:380px;border-radius:20px;border-bottom:1px solid var(--line)}
  #keepBar{left:14px;bottom:14px;right:auto;width:380px;border-radius:20px;border-bottom:1px solid var(--line);height:auto}
  #attr{left:calc(100% + 10px);right:auto;bottom:0;margin:0;width:calc(100vw - 500px)}
  #frame{left:420px;right:90px;top:80px;bottom:40px}
  #sheet{left:auto;width:440px;border-left:1px solid var(--line)}
  #pick{left:14px;right:auto;width:380px;bottom:330px}
  #toast{bottom:30px}
  #top{left:14px;top:14px} #side{right:14px;top:14px}
}