/* nw-unit-pages.css — shared chrome for the three per-unit pages
   (Work Here / Outages & Power / Specs & Stats). See includes/nw_unit_pages.php.
   Colours come from the site tokens in nw-components.css, so dark mode follows. */

/* ---- Header ------------------------------------------------------------ */
.nwu-head {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 55%, #346699 100%);
    color: #fff;
    border-radius: 12px;
    padding: 20px 20px 0;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    text-align: center;
}
.nwu-head-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.nwu-head h1.nwu-name {
    margin: 0;
    font-size: 2em;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.nwu-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.95em;
    font-weight: 700;
    /* White pill, coloured dot: the status colours include a navy that would
       vanish against the header if the pill itself were painted with them. */
    background: #fff;
    color: #1a2a3a;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.nwu-status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.nwu-status-extra { font-weight: 600; color: #475569; }
.nwu-head a.nwu-tool,
.nwu-head a.nwu-tool:link,
.nwu-head a.nwu-tool:visited { color: rgba(255,255,255,0.65) !important; font-size: 0.95em; }
.nwu-head a.nwu-tool:hover { color: #fff !important; }
.nwu-facts {
    margin: 8px 0 0;
    font-size: 1em;
    color: rgba(255,255,255,0.92);
}
.nwu-sep { margin: 0 8px; opacity: 0.55; }
.nwu-meta {
    margin: 4px 0 0;
    font-size: 0.82em;
    color: rgba(255,255,255,0.78);
}
.nwu-meta .data-freshness { color: inherit; }

/* ---- Tab switch (attached to the bottom edge of the header) ------------- */
.nwu-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}
.nwu-head a.nwu-tab,
.nwu-head a.nwu-tab:link,
.nwu-head a.nwu-tab:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    font-size: 0.98em;
    font-weight: 700;
    text-decoration: none;
    color: #fff !important;
    background: rgba(255,255,255,0.12);
    transition: background 0.15s;
}
.nwu-head a.nwu-tab:hover { background: rgba(255,255,255,0.24); }
.nwu-head a.nwu-tab.is-active,
.nwu-head a.nwu-tab.is-active:link,
.nwu-head a.nwu-tab.is-active:visited {
    background: var(--bg-light, #f8f9fa);
    color: var(--nuke-blue-dark, #1e3c72) !important;
    cursor: default;
}
html[data-theme="dark"] .nwu-head a.nwu-tab.is-active,
html[data-theme="dark"] .nwu-head a.nwu-tab.is-active:link,
html[data-theme="dark"] .nwu-head a.nwu-tab.is-active:visited {
    background: var(--bg-white, #1b2430);
    color: var(--text-main, #d8dde3) !important;
}

/* ---- Section headings ---------------------------------------------------- */
h2.nwu-section {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 26px 0 12px;
    padding: 0 0 8px;
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--text-main, #2c3e50);
    border-bottom: 2px solid var(--border-color, #e1e4e8);
    background: none;
}
h2.nwu-section i { color: var(--nuke-blue, #346699); font-size: 0.95em; }

/* ---- One type family ------------------------------------------------------
   The page column inherited the browser's default sans-serif while headings
   asked for the system stack, so body and headings were two different faces.
   Scoped to the column that holds the unit header, not the site chrome. */
*:has(> .nwu-head) { font-family: var(--font-main, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); }
*:has(> .nwu-head) button,
*:has(> .nwu-head) input,
*:has(> .nwu-head) select,
*:has(> .nwu-head) textarea { font-family: inherit; }

/* Type scale used on these pages (rem, so nesting cannot compound it):
   0.7rem 11.2px micro labels · 0.75rem 12px captions · 0.8125rem 13px secondary
   0.875rem 14px body-small · 1rem 16px body · 1.0625rem 17px card titles
   1.8em KPI numbers · 2em page name */

/* ---- One card style -------------------------------------------------------
   White card, dark title, coloured icon, on all three pages. The facility
   cards used navy gradient header bars (and one purple); the outage page used
   plain white cards. .nwu-card-h is the facility header; the outage page's
   .chart-section h3 is matched to it. */
.nwu-card-h {
    margin: 0;
    padding: 13px 18px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main, #2c3e50);
    background: var(--bg-white, #fff);
    border-bottom: 1px solid var(--border-color, #e1e4e8);
}
.nwu-card-h > i:first-child { color: var(--nuke-blue, #346699); width: 1.15em; text-align: center; }
.nwu-card-h.nwu-card-h--b2b > i:first-child { color: var(--accent-purple, #8e44ad); }
.nwu-card-h > span { color: var(--text-muted, #6b7778); }
/* Chart rows wrap instead of squeezing a third chart into the row. */
*:has(> .nwu-head) .chart-row { flex-wrap: wrap; }
*:has(> .nwu-head) .chart-row > .chart-section { flex: 1 1 420px; }
/* Trend charts: always two across (2 x 2), never three in a row. */
.nwu-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.nwu-chart-grid > .chart-row { display: contents; }
.nwu-chart-grid .chart-section { margin-bottom: 0; min-width: 0; }
/* A chart with no partner for its line takes the whole line. */
.nwu-chart-grid .chart-section.nwu-span2,
.nwu-chart-grid > .nwu-span2 { grid-column: 1 / -1; }
/* Fuel-rod card as a grid item, beside Power History. */
.nwu-chart-grid > .nwu-facstyle { min-width: 0; display: flex; }
.nwu-chart-grid > .nwu-facstyle > .fuel-rod-card { margin: 0 !important; flex: 1 1 auto; }
@media (max-width: 900px) { .nwu-chart-grid { grid-template-columns: minmax(0, 1fr); } }
*:has(> .nwu-head) .chart-section h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
*:has(> .nwu-head) .chart-section,
*:has(> .nwu-head) .facility-info-card {
    border-radius: 12px;
    border: 1px solid var(--border-color, #e1e4e8);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.04));
}

/* ---- Cross-page teaser --------------------------------------------------- */
.nwu-teasers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
a.nwu-teaser,
a.nwu-teaser:link,
a.nwu-teaser:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color, #e1e4e8);
    border-left: 4px solid var(--nuke-blue, #346699);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.04));
    text-decoration: none;
    color: var(--text-main, #2c3e50) !important;
    transition: box-shadow 0.15s, transform 0.15s;
}
a.nwu-teaser:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); transform: translateY(-1px); }
.nwu-teaser-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--chip-bg, #e8f0fa);
    color: var(--nuke-blue, #346699);
    font-size: 1.05em;
}
.nwu-teaser-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nwu-teaser-body strong { font-size: 1em; }
.nwu-teaser-body span { font-size: 0.86em; color: var(--text-muted, #6b7778); }
.nwu-teaser-cta { flex: 0 0 auto; font-size: 0.86em; font-weight: 700; color: var(--nuke-blue, #346699); white-space: nowrap; }

/* ---- KPI strip: one neutral tile style on every unit page ----------------
   The tiles carry a per-metric accent colour inline (purple B2B, orange CF ...)
   that means nothing, next to red/green quartile labels that do. .nwu-kpis
   keeps colour for meaning only: tiles opt in with .nwu-kpi, and a tile whose
   colour IS the message (live power, the Excellence band) adds .nwu-kpi-keep. */
/* Compact tiles with a fixed footprint: they do not stretch on a wide monitor,
   and ten of them fit one row at laptop width. */
.nwu-kpi-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.nwu-kpi-grid > a { flex: 1 1 104px; max-width: 150px; min-width: 0; }
.nwu-kpis .nwu-kpi { padding: 9px 6px 8px !important; border-top-width: 3px !important; height: 100%; box-sizing: border-box; }
.nwu-kpis .nwu-kpi:not(.nwu-kpi-keep) { border-top-color: var(--gray-300, #cbd5e1) !important; }
.nwu-kpis .nwu-kpi .nwu-kpi-num { font-size: 1.35rem !important; line-height: 1.2; }
.nwu-kpis .nwu-kpi .nwu-kpi-num:not(.nwu-kpi-num--keep) { color: var(--text-main, #2c3e50) !important; }
.nwu-kpis .nwu-kpi .nwu-kpi-num + div { font-size: 0.7rem !important; letter-spacing: 0.2px; }
.nwu-kpis .fac-kpi-info, .nwu-kpis .kpi-info { top: 4px; right: 5px; width: 14px; height: 14px; font-size: 9px; line-height: 14px; opacity: 0.7; }
@media (max-width: 520px)  { .nwu-kpi-grid > a { flex-basis: 30%; max-width: none; } }

/* ---- Reliability record (outage page): two even columns of cards -------- */
.nwu-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-bottom: 24px; }
.nwu-records > * { margin: 0 !important; min-width: 0; }
:is(.nwu-records, .nwu-facstyle) .fuel-rod-card { border: 1px solid var(--border-color, #e1e4e8); border-radius: 12px; }
:is(.nwu-records, .nwu-facstyle) .fuel-rod-card .nwu-card-h > span { margin-left: auto; font-weight: 400; font-size: 0.75rem; }
:is(.nwu-records, .nwu-facstyle) .facility-info-card,
:is(.nwu-records, .nwu-facstyle) .chart-section { position: relative; background: var(--bg-white, #fff); overflow: hidden; padding: 0; margin: 0 0 24px; }
:is(.nwu-records, .nwu-facstyle) .has-link > h4, :is(.nwu-records, .nwu-facstyle) .has-link > a > h4, :is(.nwu-records, .nwu-facstyle) .chart-section > h4 { padding-right: 60px; }
:is(.nwu-records, .nwu-facstyle) .fac-link-icon,
:is(.nwu-records, .nwu-facstyle) .fac-info-icon,
:is(.nwu-records, .nwu-facstyle) .chart-info {
    position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--gray-200, #e2e8f0); color: var(--gray-600, #475569) !important; font-size: 10px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; z-index: 5; text-decoration: none; cursor: help;
}
:is(.nwu-records, .nwu-facstyle) .fac-link-icon { right: 36px; cursor: pointer; }
:is(.nwu-records, .nwu-facstyle) .fac-link-icon:hover,
:is(.nwu-records, .nwu-facstyle) .fac-info-icon:hover,
:is(.nwu-records, .nwu-facstyle) .chart-info:hover { background: var(--nuke-blue, #346699); color: #fff !important; }
:is(.nwu-records, .nwu-facstyle) .fac-info-tip,
:is(.nwu-records, .nwu-facstyle) .chart-info-tip {
    display: none; position: absolute; top: 36px; right: 12px; z-index: 60; width: 280px;
    background: #2c3e50; color: #fff; padding: 10px 14px; border-radius: 6px;
    font-size: 0.8125rem; line-height: 1.5; font-weight: 400; box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
:is(.nwu-records, .nwu-facstyle) .fac-info-icon:hover + .fac-info-tip,
:is(.nwu-records, .nwu-facstyle) .chart-info:hover + .chart-info-tip { display: block; }
@media (max-width: 900px) { .nwu-records { grid-template-columns: minmax(0, 1fr); } }

/* ---- Calmer canvas -------------------------------------------------------
   The tiled logo watermark shows through every gap between cards and competes
   with the data. Unit pages sit on a flat tint; the masthead keeps the pattern.
   Light theme only: the dark theme already paints a flat surface here. */
html:not([data-theme="dark"]) .wrapper:has(.nwu-head) {
    background-image: none;
    background-color: #eef2f7;
}

/* ---- Work Here: the facility cards flow in two balanced columns ---------- */
.facility-grid.nwu-work { display: block; }
.facility-grid.nwu-work > h2.nwu-section:first-child { margin-top: 10px; }
.facility-grid.nwu-work .facility-map-side { margin-bottom: 4px; }
.facility-grid.nwu-work .facility-map-side { columns: 2; column-gap: 24px; }
.facility-grid.nwu-work .facility-map-side > * { break-inside: avoid; }
.facility-grid.nwu-work .facility-map-side > .nwu-colbreak { break-before: column; height: 0; margin: 0; }
@media (max-width: 900px) {
    .facility-grid.nwu-work .facility-map-side { columns: 1; }
}

/* ---- Work Here: two explicit columns (order is set in the markup) ---------- */
.nwu-two { display: flex; gap: 24px; align-items: flex-start; }
.nwu-two-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) { .nwu-two { display: block; } }

/* ---- Reliability Record: Capacity Factor stacked over Outage Days ---------- */
.nwu-rec-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nwu-rec-stack > * { margin: 0 !important; }
.nwu-rec-stack > .chart-section { flex: 1 1 auto; }

/* ---- Dark mode: visible card edges -----------------------------------------
   The card and page surfaces are nearly the same navy in dark mode, so the
   cards ran together. A lighter hairline separates them. */
html[data-theme="dark"] *:has(> .nwu-head) .facility-info-card,
html[data-theme="dark"] *:has(> .nwu-head) .chart-section,
html[data-theme="dark"] *:has(> .nwu-head) .fuel-rod-card,
html[data-theme="dark"] *:has(> .nwu-head) .rxt-wrap,
html[data-theme="dark"] *:has(> .nwu-head) #b2b-champion,
html[data-theme="dark"] a.nwu-teaser { border: 1px solid rgba(255, 255, 255, 0.22); }
html[data-theme="dark"] a.nwu-teaser { border-left: 4px solid var(--nuke-blue-light, #5183b6); }
html[data-theme="dark"] *:has(> .nwu-head) #b2b-champion { border-left: 5px solid #8e44ad; }
html[data-theme="dark"] .nwu-kpis .nwu-kpi { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) !important; }
html[data-theme="dark"] .nwu-card-h { border-bottom-color: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] h2.nwu-section { border-bottom-color: rgba(255, 255, 255, 0.22); }

/* ---- Phones --------------------------------------------------------------- */
@media (max-width: 768px) {
    .nwu-head { padding: 16px 12px 0; }
    .nwu-head h1.nwu-name { font-size: 1.55em; }
    .nwu-facts { font-size: 0.9em; }
    .nwu-sep { margin: 0 5px; }
    .nwu-tabs { gap: 3px; margin-top: 14px; }
    .nwu-head a.nwu-tab { flex: 1 1 0; justify-content: center; padding: 10px 6px; font-size: 0.82em; gap: 5px; text-align: center; line-height: 1.2; }
    .nwu-head a.nwu-tab i { display: none; }
    .nwu-canvas { padding: 8px; }
    a.nwu-teaser { padding: 12px; gap: 10px; }
    .nwu-teaser-cta { display: none; }
    /* The section sub-nav stays put instead of following the reader down a long page. */
    nav.nw-t2-nav { position: static !important; }
}