/* ============================================================================
   Shared styles: US Nuclear Power Plants & US Energy Atlas
   Linked by all nine pages: Nuclear (index.html), Uranium Supply Chain,
   Geothermal, Coal, Biomass, Hydroelectric, Natural Gas, Wind and Solar.

   This stylesheet centralizes the cross-page concerns:
     1. the AdSense banner layout, and
     2. the Core Web Vitals (CLS) space-reservation rules for the map,
        table and ad slots,
   so the page does not shift while the map, table and ads load in.
   Stylesheets are render-blocking, so these reservations apply before the
   first paint, which is what keeps Cumulative Layout Shift near zero.
   ============================================================================ */

/* --- AdSense banner slots ---------------------------------------------------
   Two horizontal banner slots sit side by side (and stack on mobile).
   A FIXED height reserves the space up front so a slot never grows when its
   ad loads. Growth-on-load is the main cause of ad-driven layout shift. */
.ad-outer {
    margin: 0 96px;
    padding: 32px 0;
}

.ad-row {
    display: flex;
    gap: 16px;
}

.ad-slot {
    flex: 1;
    min-width: 320px;     /* minimum mobile banner width            */
    height: 100px;        /* reserved height, prevents layout shift */
    overflow: hidden;
    background: #f8f8f8;
    border: 1px dashed #ccc;
    border-radius: 6px;
}

.ad-slot .adsbygoogle {
    display: block;
    width: 100%;
    height: 100px;
}

@media (max-width: 700px) {
    .ad-outer { margin: 0 16px; }
    .ad-row   { flex-direction: column; }
}

/* --- CLS space reservation: map & table ------------------------------------
   Both pages draw the US map with JavaScript (d3) only after the map data
   loads, at a height of about 0.62 x its width, and they populate the data
   table after load. Reserving that space up front stops the rest of the page
   from jumping down when the map and rows appear. Both pages use the same
   #map-svg and #tbl-outer element IDs, so these live here once. */

/* Map: reserve the final height via aspect-ratio (height = 0.62 x width). */
#map-svg {
    width: 100%;
    aspect-ratio: 100 / 62;
}

/* Table: a fixed-height internal scroll region, so populating, filtering or
   sorting the table never changes the height of the content below it. */
#tbl-outer {
    overflow: auto;
    height: min(70vh, 640px);
}

/* --- Profile / information tiles: search + fixed-height scroll region --------
   The information tiles at the bottom of each page get (1) a search box that
   filters tiles by name, state, type or status, and (2) a fixed-height scroll
   region, like #tbl-outer, so the section shows a window of tiles (~the
   first 20) and scrolls for the rest instead of sprawling down the page.
   Height is refined by JS to fit ~20 visible tiles, capped at the value below;
   this CSS is the no-JS fallback. */
.tile-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}
#tile-search {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 14px;
    font: inherit;
    font-size: 0.95rem;
    color: #222;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
}
#tile-search::placeholder { color: #999; }
#tile-search:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.tile-count {
    color: #666;
    font-size: 0.85rem;
    white-space: nowrap;
}
#profiles-scroll {
    overflow: auto;
    height: min(70vh, 680px);
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fafafa;
    padding: 14px;
}
#profiles-scroll > #profile-grid { margin: 0; }
.tile-noresults {
    padding: 28px 12px;
    text-align: center;
    color: #777;
}
@media (max-width: 700px) {
    #profiles-scroll { height: min(70vh, 560px); }
}

/* --- Virtualized profile tiles: uniform absolutely-positioned cards ------- */
.vcard{position:absolute;box-sizing:border-box;height:184px;overflow:hidden;margin:0}
.vcard .plant-summary{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.vcard h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- Editorial content: trust pages, Insights articles, analytical outros, footer nav --- */
.prose-list{margin:10px 0 4px;padding-left:22px;line-height:1.65}
.prose-list li{margin:7px 0}
.byline{color:#666;font-size:.85rem;margin:-2px 0 18px}
.back-insights{margin:0}
.back-insights a{font-weight:600}
#analysis p{line-height:1.7}
.site-foot{margin:40px auto 0;padding:24px 16px 34px;border-top:1px solid #e6e6e6;text-align:center}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:12px}
.site-foot nav a{color:#374151;font-weight:600;font-size:.9rem;text-decoration:none}
.site-foot nav a:hover{text-decoration:underline}
.site-foot .foot-copy{color:#777;font-size:.8rem;line-height:1.6;max-width:780px;margin:0 auto}