/* Directory pages: the summary tiles and the facility table.
 *
 * Everything here rides on the tokens in styles.css rather than naming its own
 * colours, so a theme change reaches this page too. */

/* ── summary tiles ───────────────────────────────────────────────────────── */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tile-value {
    /* Sized to the longest real value ("1,682 MW"), not to taste: at 1.5rem it
     * overflowed a five-across tile and clipped the unit off "14.7 TWh". */
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.15;
    color: var(--brand-bright);
    font-variant-numeric: tabular-nums;
}

.tile-label {
    font-size: 0.9rem;
    color: var(--text);
}

.tile-note {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-faint);
}

.tiles-note {
    font-size: 0.95rem;
    color: var(--text-dim);
}

/* ── facility table ──────────────────────────────────────────────────────── */

.article table.facilities {
    font-size: 0.88rem;
}

.article table.facilities td {
    vertical-align: top;
}

/* Without explicit widths the browser sizes columns to the longest unbroken
 * string, which put this table at 2,163px inside a 724px column — legal,
 * scrollable, and hiding every number the page exists to show. Fixed layout
 * plus wrapping keeps all five columns on screen. Measured, not eyeballed. */
.article table.facilities {
    table-layout: fixed;
    width: 100%;
}

.article table.facilities th:nth-child(1) { width: 28%; }
.article table.facilities th:nth-child(2) { width: 17%; }
.article table.facilities th:nth-child(3) { width: 19%; }
.article table.facilities th:nth-child(4) { width: 18%; }
.article table.facilities th:nth-child(5) { width: 18%; }

/* article.css sets `white-space: nowrap` on every .article th and td, which
 * suits a four-column reference table and not a 36-row directory of facility
 * names. Nothing could wrap until this was turned back off — the table sat at
 * 2,163px in a 724px column with every derived number off-screen. */
.article table.facilities th,
.article table.facilities td {
    white-space: normal;
    overflow-wrap: break-word;
}

/* No nowrap here: the value and its unit are already joined by  , so
 * "15.0 MW" cannot split, while the word after it is free to wrap. Forcing
 * the whole cell nowrap pushed the table 56px past its column. */
.article table.facilities .figure {
    font-variant-numeric: tabular-nums;
}

.article table.facilities .sub {
    color: var(--text-faint);
    font-size: 0.82em;
}

.article table.facilities .unknown {
    color: var(--text-faint);
    font-style: italic;
}

/* Status is a word, not a colour — the colour only reinforces it, so the
 * table still reads correctly in monochrome or to a screen reader. */
/* No nowrap: "Under construction" is 151px of mono in a 101px column, and
 * the cell overflow was the last 56px of a table that would not fit. */
.status {
    display: inline-block;
    font-size: 0.82em;
}

.status-operational { color: var(--ok); }
.status-under_construction,
.status-permitted { color: var(--pending); }
.status-proposed { color: var(--text-dim); }
.status-cancelled { color: var(--text-faint); text-decoration: line-through; }

.tag {
    display: inline-block;
    padding: 0.05em 0.45em;
    border: 1px solid var(--border-solid);
    border-radius: 999px;
    font-size: 0.72em;
    line-height: 1.5;
    color: var(--text-dim);
    white-space: nowrap;
    /* A tag carries meaning the row would lose without it, so it must not be
     * mistaken for a link and must survive a long facility name wrapping. */
    vertical-align: baseline;
}

.tag-soft {
    border-style: dashed;
    color: var(--text-faint);
}

.tag-ai {
    border-color: var(--brand);
    color: var(--brand-bright);
}

.sources {
    font-size: 0.95rem;
}

.sources li {
    margin-bottom: 0.35rem;
}

@media (max-width: 540px) {
    .tile-value { font-size: 1.3rem; }
    /* Five columns will not fit a phone honestly, so the table keeps its
     * horizontal scroll there rather than shrinking the type to unreadable.
     * .table-scroll already provides it. */
    .article table.facilities { font-size: 0.78rem; }
    .article table.facilities th,
    .article table.facilities td { padding-left: 0.4rem; padding-right: 0.4rem; }
}