/* ROOT036 :: Waarom is mijn internet klote -- style.css */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root{
  --void:#050508;
  --panel:#0a0d10;
  --panel-2:#0d1114;
  --line:#152128;
  --orange:#ff6600;
  --orange-dim:#a34400;
  --cyan:#00ffcc;
  --cyan-dim:#037a63;
  --red:#ff2b4d;
  --amber:#ffb700;
  --green:#00ff9c;
  --txt:#c9e8e2;
  --txt-dim:#5c7c78;
  --mono: 'Share Tech Mono', monospace;
  --disp: 'Chakra Petch', sans-serif;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--void);
  color:var(--txt);
  font-family:var(--mono);
  overflow:hidden;
}

/* ---------- CRT / scanline overlay ---------- */
.crt-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0.18) 2px,
      rgba(0,0,0,0) 3px
    );
  mix-blend-mode:overlay;
}
.crt-vignette{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.scan-sweep{
  position:fixed; left:0; right:0; height:120px; z-index:9997; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,255,204,0) 0%, rgba(0,255,204,0.035) 50%, rgba(0,255,204,0) 100%);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ 0%{ top:-120px; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .scan-sweep{ animation:none; display:none; } }

::selection{ background:var(--orange); color:#000; }
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:var(--panel); }
::-webkit-scrollbar-thumb{ background:var(--cyan-dim); }

/* ---------- Layout shell ---------- */
#app{
  display:grid;
  grid-template-rows: 52px auto 1fr 170px;
  grid-template-columns: 1fr;
  height:100vh;
  width:100vw;
}

/* ---------- Top bar ---------- */
#topbar{
  background:linear-gradient(180deg, #0b0f12, #070a0c);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:0 16px;
  font-size:12px;
  position:relative;
  flex-wrap:wrap;
  min-height:56px;
}
#topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0.5;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:700; letter-spacing:1.5px;
  color:var(--orange); font-size:14px; white-space:nowrap;
}
.brand small{ color:var(--txt-dim); font-family:var(--mono); font-weight:400; letter-spacing:1px; font-size:10px; }
.brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:blink 2s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

.topbar-location{ display:flex; align-items:center; gap:8px; flex:0 1 260px; min-width:180px; padding:8px 0; }
.topbar-select{ width:100%; margin:0; }

.clocks{ display:flex; gap:22px; }
.clock-block{ text-align:center; }
.clock-block .lbl{ color:var(--txt-dim); font-size:9px; letter-spacing:2px; }
.clock-block .val{ color:var(--cyan); font-size:14px; letter-spacing:1px; text-shadow:0 0 6px rgba(0,255,204,0.4); }

.gs-info{ text-align:right; color:var(--txt-dim); font-size:10px; line-height:1.5; }
.gs-info b{ color:var(--txt); }
.gs-info .rf{ color:var(--amber); }

.bookmark-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--line); color:var(--txt-dim);
  font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:7px 12px;
  cursor:pointer; white-space:nowrap; flex:0 0 auto;
}
.bookmark-btn:hover{ border-color:var(--amber); color:var(--amber); }
.bookmark-icon{ font-size:12px; line-height:1; }

.bookmark-popover{
  position:fixed; inset:0; z-index:2000;
  background:rgba(2,3,4,0.75);
  display:flex; align-items:flex-start; justify-content:flex-end;
}
.bookmark-popover.hidden{ display:none; }
.bookmark-popover-inner{
  width:min(320px, 90vw); margin:64px 16px 0 0;
  background:var(--panel); border:1px solid var(--amber);
  box-shadow:0 0 30px rgba(255,183,0,0.15);
  padding:16px 18px;
}
.bookmark-popover-title{
  font-family:var(--disp); font-weight:700; letter-spacing:2px; font-size:12px;
  color:var(--amber); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;
}
.bookmark-popover-close{ cursor:pointer; color:var(--txt-dim); font-size:18px; line-height:1; padding:0 4px; }
.bookmark-popover-close:hover{ color:var(--red); }
.bookmark-popover-text{ font-size:11px; color:var(--txt-dim); line-height:1.6; margin-bottom:10px; }
.bookmark-popover-shortcut{
  font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:1px;
  color:var(--cyan); text-align:center; padding:10px; margin-bottom:10px;
  background:var(--panel-2); border:1px solid var(--cyan-dim);
}

.topbar-stat{ text-align:center; }
.topbar-stat .lbl{ color:var(--txt-dim); font-size:9px; letter-spacing:2px; }
.topbar-stat .val{ font-family:var(--disp); font-weight:700; font-size:18px; color:var(--orange); }

/* ---------- Verdict banner (compact signal-gauge indicator) ---------- */
#verdict-wrap{
  padding:8px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #08090b, #050608);
}
#verdict-banner{
  display:flex; align-items:center; gap:14px;
  padding:8px 16px; border:1px solid var(--line);
  transition:all .3s ease;
}

.verdict-ring-wrap{ position:relative; width:52px; height:52px; flex:0 0 auto; }
.verdict-ring{ width:52px; height:52px; transform:rotate(-90deg); }
.verdict-ring-track{
  fill:none; stroke:var(--line); stroke-width:5;
}
.verdict-ring-fill{
  fill:none; stroke:var(--txt-dim); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:170; stroke-dashoffset:170;
  transition:stroke-dashoffset .6s ease, stroke .3s ease;
}
.verdict-ring-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:700; font-size:13px; color:var(--txt);
  transform:none;
}

.verdict-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.verdict-word{
  font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:2px;
  line-height:1.1;
}
.verdict-sub{ font-size:11px; color:var(--txt-dim); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw; }

.verdict-unknown .verdict-word{ color:var(--txt-dim); }
.verdict-unknown .verdict-ring-fill{ stroke:var(--txt-dim); }

.verdict-good{ border-color:var(--cyan); box-shadow:0 0 16px rgba(0,255,204,0.12) inset; }
.verdict-good .verdict-word{ color:var(--cyan); text-shadow:0 0 10px rgba(0,255,204,0.5); }
.verdict-good .verdict-ring-fill{ stroke:var(--cyan); filter:drop-shadow(0 0 4px rgba(0,255,204,0.7)); }

.verdict-ok{ border-color:var(--green); box-shadow:0 0 16px rgba(0,255,156,0.1) inset; }
.verdict-ok .verdict-word{ color:var(--green); text-shadow:0 0 8px rgba(0,255,156,0.4); }
.verdict-ok .verdict-ring-fill{ stroke:var(--green); filter:drop-shadow(0 0 4px rgba(0,255,156,0.6)); }

.verdict-rough{ border-color:var(--amber); box-shadow:0 0 16px rgba(255,183,0,0.1) inset; }
.verdict-rough .verdict-word{ color:var(--amber); text-shadow:0 0 8px rgba(255,183,0,0.4); }
.verdict-rough .verdict-ring-fill{ stroke:var(--amber); filter:drop-shadow(0 0 4px rgba(255,183,0,0.6)); }

.verdict-dead{ border-color:var(--red); box-shadow:0 0 18px rgba(255,43,77,0.14) inset; animation:pulseDead 1.4s ease-in-out infinite; }
.verdict-dead .verdict-word{ color:var(--red); text-shadow:0 0 12px rgba(255,43,77,0.6); }
.verdict-dead .verdict-ring-fill{ stroke:var(--red); filter:drop-shadow(0 0 5px rgba(255,43,77,0.8)); }
@keyframes pulseDead{ 0%,100%{ box-shadow:0 0 12px rgba(255,43,77,0.1) inset; } 50%{ box-shadow:0 0 26px rgba(255,43,77,0.22) inset; } }

/* ---------- Main row: map + side panel ---------- */
#mainrow{
  display:grid;
  grid-template-columns: 280px 1fr 340px;
  overflow:hidden;
}

/* ---------- Map area ---------- */
#mapwrap{ position:relative; border-right:1px solid var(--line); border-left:1px solid var(--line); }
#map{ width:100%; height:100%; background:#03040a; filter:saturate(1) brightness(1.05) contrast(1.05); }
.leaflet-container{ background:#03040a; font-family:var(--mono); }

.map-hud{
  position:absolute; top:10px; left:10px; z-index:500;
  background:rgba(5,7,9,0.75); border:1px solid var(--line);
  padding:6px 10px; font-size:10px; color:var(--txt-dim); letter-spacing:1px;
  pointer-events:none;
}
.map-hud b{ color:var(--cyan); }

.crosshair-corner{
  position:absolute; width:22px; height:22px; z-index:400; pointer-events:none;
  border-color:var(--orange); opacity:0.55;
}
.cc-tl{ top:6px; left:6px; border-top:2px solid; border-left:2px solid; }
.cc-tr{ top:6px; right:6px; border-top:2px solid; border-right:2px solid; }
.cc-bl{ bottom:6px; left:6px; border-bottom:2px solid; border-left:2px solid; }
.cc-br{ bottom:6px; right:6px; border-bottom:2px solid; border-right:2px solid; }

.sat-label{
  font-family:var(--mono); font-size:9px; color:var(--cyan);
  background:rgba(3,5,7,0.75); padding:1px 4px; border:1px solid var(--cyan-dim);
  white-space:nowrap;
}

/* ---------- Left panel (weather) + right panel (sky geometry) ---------- */
#leftcol, #side{
  background:var(--panel);
  overflow-y:auto; display:flex; flex-direction:column;
}
.panel-block{ border-bottom:1px solid var(--line); padding:12px 14px; }
.panel-title{
  font-family:var(--disp); font-weight:600; letter-spacing:2px; font-size:11px;
  color:var(--orange); margin:0 0 10px 0; display:flex; align-items:center; justify-content:space-between;
}
.panel-title .hr{ flex:1; height:1px; background:var(--line); margin-left:8px; }

.sat-select{
  width:100%; background:var(--panel-2); color:var(--cyan); border:1px solid var(--line);
  font-family:var(--mono); font-size:12px; padding:7px 8px; letter-spacing:0.5px;
}
.sat-select:focus{ outline:1px solid var(--cyan); }

.custom-coords-row{ display:flex; gap:6px; margin-top:8px; }
.custom-coords-row.hidden{ display:none; }
.custom-coord-input{
  flex:1; min-width:0; background:var(--panel-2); color:var(--txt); border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; padding:6px 8px;
}
.custom-coord-input:focus{ outline:1px solid var(--cyan); }
.custom-coords-apply{
  background:var(--cyan); color:#00110c; border:none; font-family:var(--disp);
  font-weight:700; letter-spacing:1px; font-size:11px; padding:6px 12px; cursor:pointer; white-space:nowrap;
}
.custom-coords-apply:hover{ background:#33ffdd; }

.readout-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ro-cell{ background:var(--panel-2); border:1px solid var(--line); padding:8px; }
.ro-cell .lbl{ font-size:9px; color:var(--txt-dim); letter-spacing:1px; }
.ro-cell .val{ font-family:var(--disp); font-size:20px; color:var(--txt); margin-top:2px; }
.ro-cell .unit{ font-size:9px; color:var(--txt-dim); margin-left:4px; display:block; margin-top:2px; }
.ro-cell.hot{ border-color:var(--cyan-dim); }
.ro-cell.hot .val{ color:var(--cyan); text-shadow:0 0 6px rgba(0,255,204,0.4); }
.ro-cell.warn{ border-color:var(--amber); }
.ro-cell.warn .val{ color:var(--amber); }

.explainer{ font-size:11px; line-height:1.6; color:var(--txt-dim); }

.weather-status{
  font-family:var(--disp); font-weight:700; letter-spacing:1px; font-size:14px;
  padding:8px; border:1px solid var(--line); background:var(--panel-2); text-align:center;
}
.weather-status.tier-none{ color:var(--cyan); border-color:var(--cyan-dim); }
.weather-status.tier-light{ color:var(--cyan); border-color:var(--cyan-dim); }
.weather-status.tier-moderate{ color:var(--amber); border-color:var(--amber); }
.weather-status.tier-heavy{ color:var(--red); border-color:var(--red); }
.weather-note{ font-size:10.5px; line-height:1.6; color:var(--txt-dim); margin-top:8px; }

.nearest-list{ display:flex; flex-direction:column; gap:6px; }
.nearest-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel-2); border:1px solid var(--line); padding:6px 8px; font-size:11px;
}
.nearest-row .name{ color:var(--txt); }
.nearest-row .el{ font-family:var(--disp); font-weight:600; }
.nearest-row.tier-good .el{ color:var(--cyan); }
.nearest-row.tier-marginal .el{ color:var(--amber); }
.nearest-row.tier-low .el{ color:var(--red); }
.nearest-empty{ font-size:11px; color:var(--txt-dim); text-align:center; padding:10px 0; }

.legend-row{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--txt-dim); margin-top:6px; }
.legend-dot{ width:8px; height:8px; border-radius:50%; }

/* ---------- Bottom event terminal ---------- */
#term{
  background:#020304; border-top:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.term-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 12px; border-bottom:1px solid var(--line); font-size:10px; color:var(--txt-dim);
  letter-spacing:2px; font-family:var(--disp); font-weight:600;
}
.term-head .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 6px var(--red); display:inline-block; margin-right:6px; animation:blink 1.4s infinite; }
#termlog{ flex:1; overflow-y:auto; padding:6px 12px; font-size:11.5px; line-height:1.65; }
#termlog .tline{ white-space:pre-wrap; }
#termlog .ts{ color:var(--txt-dim); }
#termlog .t-good{ color:var(--cyan); }
#termlog .t-warn{ color:var(--amber); }
#termlog .t-bad{ color:var(--red); }
#termlog .t-sys{ color:var(--orange); }

/* small screens */
@media (max-width: 900px){
  html, body{ height:auto; min-height:100%; overflow-y:auto; overflow-x:hidden; }
  #app{
    height:auto; min-height:100vh;
    grid-template-rows: auto auto auto auto;
    overflow:visible;
  }
  #mainrow{ grid-template-columns:1fr; grid-template-rows:auto auto auto; overflow:visible; }
  #leftcol, #side{ max-height:none; overflow-y:visible; }
  #mapwrap{ border-right:none; border-left:none; height:min(70vh, 420px); min-height:280px; }
  #term{ height:min(45vh, 260px); }
  .clocks{ display:none; }
  .topbar-location{ flex:1 1 100%; order:10; }
  .topbar-stat{ order:9; }
  .verdict-word{ font-size:18px; }
  .verdict-sub{ max-width:none; white-space:normal; }
  #verdict-banner{ flex-wrap:wrap; }

  /* Popovers/modals: full-width sheet instead of a desktop-style corner
     anchor, so they're reachable and readable on a narrow screen. */
  .bookmark-popover{ align-items:flex-end; justify-content:center; }
  .bookmark-popover-inner{ width:100%; margin:0; border-radius:12px 12px 0 0; max-height:80vh; overflow-y:auto; }

  /* Custom-coordinates row can crowd a narrow topbar row -- stack it. */
  .custom-coords-row{ flex-wrap:wrap; }
  .custom-coord-input{ flex:1 1 45%; }
}

/* very small phones */
@media (max-width: 420px){
  .brand{ font-size:12px; }
  .brand small{ display:block; font-size:9px; margin-top:2px; }
  .verdict-ring-wrap{ width:44px; height:44px; }
  .verdict-ring{ width:44px; height:44px; }
  .verdict-word{ font-size:16px; }
  .bookmark-label{ display:none; } /* icon-only on tiny screens */
}