/* ---------- identification section: satellite map · FoV sky plot · obstruction panels ----------
   Only pages carrying <section id="idsection"> load this. It inserts a content row into the
   #app grid, so the base rule in layout.css is re-stated with the extra track. */
#app{grid-template-rows:auto minmax(0,1.05fr) minmax(0,0.95fr) auto auto}
#idsection{display:grid; grid-template-columns:1fr 2.1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); min-height:0}

/* Sky plot + obstruction maps, grouped so the full-screen button expands them together.
   1.1fr:1fr inside a 2.1fr track makes the effective three-column split 1 : 1.1 : 1 — the sky
   plot takes width from the satellite map while the obstruction panels keep theirs (it was
   1.2 : 0.9 : 1). The sky plot's circle is sized by the panel's *height* (R = min(w,h)/2 − pad)
   and centred on its width, so a wider panel does not grow the circle, it slides it right, away
   from the legend pinned to the top-left corner. The nested gap keeps the same two 1px rules
   across the section. position:relative anchors #idexpand — absolutely positioned children are
   taken out of the grid flow, so the button does not become a third cell. */
#idpanels{position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:1px; background:var(--line); min-width:0; min-height:0}

/* satellite map (js/identification/sat-map.js) */
#satwrap{position:relative; background:var(--bg1); min-width:0; min-height:0}
#satmap{position:absolute; inset:0}
.satlegend{position:absolute; left:10px; top:10px; z-index:5; background:rgba(15,18,26,.9); border:1px solid var(--line2); border-radius:8px; padding:7px 10px; font-size:12px; color:var(--ink2); max-width:280px; line-height:1.5}
.satlegend b{color:var(--ink); font-family:var(--mono)}
.satlegend .k{display:inline-block; width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
#satkey,#idexpand{position:absolute; bottom:12px; right:10px; z-index:5; background:rgba(15,18,26,.9); border:1px solid var(--line2); color:var(--ink2); border-radius:7px; padding:5px 9px; cursor:pointer; font-size:12px; font-family:var(--font)}
#satkey:hover,#idexpand:hover{color:#fff}

/* FoV sky plot (js/identification/sky-plot.js) */
#skywrap{position:relative; background:var(--bg1); min-width:0; min-height:0}
#skyplot{position:absolute; inset:0; width:100%; height:100%; display:block}
/* Sits over the dome rather than beside it, so it is deliberately see-through: the blur keeps the
   text legible where a bright dot passes behind it, which plain alpha at this level would not. */
.skylegend{position:absolute; left:10px; top:10px; z-index:5; background:rgba(15,18,26,.58); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); border:1px solid var(--line2); border-radius:8px; padding:7px 10px; font-size:12px; color:var(--ink2); max-width:230px; line-height:1.6; pointer-events:none}
.skylegend b{color:var(--ink); font-family:var(--mono)}
.skylegend .k{display:inline-block; width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* obstruction map panels (js/identification/obstruction-panels.js) */
.obsgrid{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:var(--line); min-width:0; min-height:0}
.obspanel{position:relative; background:#000; min-width:0; min-height:0; overflow:hidden}
.obspanel canvas{position:absolute; inset:0; width:100%; height:100%}
.obspanel .plab{position:absolute; left:6px; top:5px; z-index:2; font-size:11px; color:var(--ink2); letter-spacing:.02em; pointer-events:none; text-shadow:0 1px 3px #000}
.obspanel .pinfo{position:absolute; right:6px; top:5px; z-index:2; font-size:11px; color:var(--bore); font-family:var(--mono); pointer-events:none; text-shadow:0 1px 3px #000}

/* Full screen: sky plot and the 2x2 map grid expand together, keeping them comparable.
   Kept as separate rules — one unknown pseudo-class would invalidate a whole selector list. */
#idpanels:fullscreen{width:100%; height:100%}
#idpanels:-webkit-full-screen{width:100%; height:100%}
/* fallback for when the Fullscreen API is unavailable or refused (e.g. an embedded frame):
   an in-page overlay above everything else, including #drop (z-index 40) */
#idpanels.idpanels-faux-full{position:fixed; inset:0; z-index:200}

@media (max-width:880px){
  #idsection{grid-template-columns:1fr; grid-auto-rows:minmax(240px,auto)}
  #idpanels{grid-template-columns:1fr; grid-auto-rows:minmax(240px,auto)}
}