/* ---------------------------------------------------------------------------
   GaforFinder — layout. Phone first, iPad second, desktop as a widened iPad.
   --------------------------------------------------------------------------- */

.app{max-width:900px;margin:0 auto;padding:0 0 calc(28px + var(--safe-b));}
@media (min-width:1100px){ .app{max-width:1180px;} }

/* ---------- header ---------- */
header.topbar{
  position:sticky;top:0;z-index:40;background:var(--bg);
  padding:calc(9px + var(--safe-t)) 12px 9px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.title-block{flex:1;min-width:0;}
.title-block h1{font-size:19px;margin:2px 0 0;font-weight:600;letter-spacing:-.01em;
  color:var(--text-strong);}
.title-block p{margin:2px 0 0;font-size:11.5px;color:var(--text-dim);}
.ver{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:var(--text-dim);background:transparent;border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;vertical-align:3px;cursor:pointer;}
.ver:hover{color:var(--amber);border-color:var(--amber);}
.ver.stale{color:var(--gafor-d);border-color:var(--gafor-d);}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;}
.modal-box{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;max-width:520px;width:100%;max-height:86vh;overflow-y:auto;
  padding:22px 20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.modal-box h2{margin:0 30px 4px 0;font-size:17px;color:var(--text-strong);}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:none;
  color:var(--text-dim);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;}
.modal-close:hover{color:var(--amber);}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-family:var(--mono);
  font-size:11.5px;margin:12px 0;}
.kv dt{color:var(--text-dim);white-space:nowrap;}
.kv dd{margin:0;color:var(--text);}
.kv dd.warn{color:var(--gafor-d);}
.header-logo{height:34px;width:auto;opacity:.94;object-fit:contain;flex:0 0 auto;}
.header-tools{display:flex;gap:6px;flex:0 0 auto;}

/* ---------- search ---------- */
.search-block{padding:12px 14px 0;}
.search-row{display:flex;gap:8px;}
.search-wrap{position:relative;flex:1;min-width:0;}
.search-results{
  position:absolute;top:44px;left:0;right:0;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  max-height:52vh;overflow-y:auto;box-shadow:0 12px 34px rgba(0,0,0,.42);
}
.search-results .row{padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line-soft);}
.search-results .row:last-child{border-bottom:none;}
.search-results .row:hover,.search-results .row.sel{background:var(--panel-2);}
.search-results .r1{font-size:14.5px;color:var(--text-strong);}
.search-results .r2{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:2px;}

/* ---------- map ---------- */
.map-block{padding:12px 14px 0;}
.map-wrap{position:relative;height:46vh;min-height:260px;max-height:520px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  /* Leaflet vergibt intern z-index bis 800; ohne eigenen Stapelkontext läge die
     Karte über Suchliste, Menü und Dialog */
  isolation:isolate;z-index:0;}
@media (min-width:900px){ .map-wrap{height:400px;} }
#map{position:absolute;inset:0;background:var(--panel-2);}
.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:500;}
.map-hint{position:absolute;left:8px;top:8px;z-index:500;pointer-events:none;max-width:62%;
  font-family:var(--mono);font-size:10px;color:var(--text);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;}
.map-btns{position:absolute;right:8px;top:8px;z-index:500;display:flex;flex-direction:column;gap:6px;}
.map-btns .btn{background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(4px);height:34px;width:34px;font-size:14px;}

/* GAFOR polygons */
.gafor-label{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text-strong);
  text-shadow:0 0 3px var(--bg),0 0 3px var(--bg);pointer-events:none;white-space:nowrap;}

/* ---------- region legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin:9px 14px 0;
  font-family:var(--mono);font-size:10.5px;color:var(--text-dim);align-items:center;}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;
  vertical-align:-1px;}
.legend .on{color:var(--text-strong);}

/* ---------- place bar ---------- */
.place-bar{display:flex;align-items:center;gap:10px;margin:10px 14px 0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 13px;}
.place-main{flex:1;min-width:0;}
.place-name{font-size:15px;color:var(--text-strong);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.place-coords{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:2px;}

/* ---------- the GAFOR area headline ---------- */
.area-head{margin:12px 14px 0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;display:flex;align-items:center;gap:14px;}
.area-num{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1;
  color:var(--amber);flex:0 0 auto;min-width:58px;text-align:center;}
.area-txt{flex:1;min-width:0;}
.area-name{font-size:17px;color:var(--text-strong);line-height:1.25;}
.area-sub{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:3px;}
.area-state{flex:0 0 auto;text-align:right;}
.area-state .badge{font-size:14px;padding:5px 10px;}
.area-state .t{font-family:var(--mono);font-size:9.5px;color:var(--text-dim);margin-top:4px;
  letter-spacing:.06em;text-transform:uppercase;}

/* ---------- content ---------- */
main.content{padding:12px 14px 0;}
@media (min-width:900px){
  main.content{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start;}
  main.content > .card.wide{grid-column:1 / -1;}
}

/* GAFOR code timeline */
.gafor-grid{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;}
.gafor-grid th{color:var(--text-dim);font-weight:500;text-align:center;padding:6px 4px;
  border-bottom:1px solid var(--line-soft);font-size:10px;letter-spacing:.04em;}
.gafor-grid td{text-align:center;padding:7px 4px;border-bottom:1px solid var(--line-soft);}
.gafor-grid td.rt{text-align:left;color:var(--text-dim);white-space:nowrap;padding-left:12px;}
.gafor-grid tr:last-child td{border-bottom:none;}
.cell{display:inline-block;min-width:26px;padding:3px 5px;border-radius:5px;font-weight:600;
  color:#0b1017;}
:root[data-theme="light"] .cell{color:#fff;}
.cell.c{background:var(--gafor-c);} .cell.o{background:var(--gafor-o);}
.cell.d{background:var(--gafor-d);} .cell.m{background:var(--gafor-m);}
.cell.x{background:var(--gafor-x);} .cell.none{background:var(--gafor-none);}

/* METAR list */
.metar-row{padding:11px 14px;border-bottom:1px solid var(--line-soft);}
.metar-row:last-child{border-bottom:none;}
.metar-top{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;}
.metar-id{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--amber);}
.metar-name{font-size:12px;color:var(--text-dim);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metar-dist{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);}
.metar-sum{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:11px;
  color:var(--text);margin-bottom:6px;}
.metar-sum b{color:var(--text-strong);font-weight:600;}

/* Open-Meteo forecast strip */
.fc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fc-table{border-collapse:collapse;font-family:var(--mono);font-size:11.5px;min-width:100%;}
.fc-table th{position:sticky;left:0;background:var(--panel);z-index:2;text-align:left;
  color:var(--text-dim);font-weight:500;padding:6px 12px 6px 14px;white-space:nowrap;
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);}
.fc-table td{padding:6px 9px;text-align:center;white-space:nowrap;color:var(--text);
  border-bottom:1px solid var(--line-soft);}
.fc-table tr:last-child td,.fc-table tr:last-child th{border-bottom:none;}
.fc-table td.hour{color:var(--text-dim);}
.fc-table td.now{color:var(--amber);}

/* freshness */
.age{font-family:var(--mono);font-size:10px;color:var(--text-dim);text-align:right;}
@media (max-width:520px){ .card-head{flex-wrap:wrap;gap:2px 10px;}
  .card-head .section-title{flex:1 0 100%;} .age{flex:1 0 100%;text-align:left;} }
.age.stale{color:var(--gafor-d);}
.age.old{color:var(--temp);}

/* footer */
footer{margin:18px 14px 0;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--text-dim);}
footer a{color:var(--text-dim);text-decoration:underline;}

/* menu */
.menu{position:absolute;right:12px;top:calc(52px + var(--safe-t));z-index:70;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  min-width:210px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45);}
.menu button{display:block;width:100%;text-align:left;background:transparent;border:none;
  color:var(--text);font-family:var(--mono);font-size:12px;padding:11px 14px;cursor:pointer;}
.menu button:hover{background:var(--panel-2);color:var(--amber);}
.menu .sep{height:1px;background:var(--line-soft);}