/* ── Price Analysis (detail) ───────────────────────────────────────
Gas section v1 — terminal-split workspace fusing our ICE hub data
(explorer + forward curve + basis) with the HHP market sheet
(fundamentals + analyst commentary). Subtle elevation, no hard
borders (light = shadow, dark = lighter edge). Reuses tokens.css. */
/* Theme-aware: follows the app's light/dark mode. A softly tinted canvas (not
flat) so the white/raised cards lift off it — subtle tone + shadow elevation,
no hard borders. Light = soft shadow; dark = lighter edge. */
.pr-stage {
overflow-y: auto; /* the page scrolls; cards float freely on it */
color: var(--t0);
/* numbers/data use a clean grotesque (GT America-like) instead of mono */
--font-num: 'Inter', var(--font-sans);
}
body.light .pr-stage {
--bg0: #ffffff; --bg1: #ffffff; --bg2: #f2f4f8; --bg3: #e6e9ef;
--bdr: #e6e9ef; --bdr2: #c8cedb;
--t0: #1a1e2e; --t1: #4a5068; --t2: #8890aa;
--ok: #12824e; --err: #d23b3b;
--pr-kicker: #b52c1c; /* Weather "Forecaster Discussion" kicker */
background: #ffffff; /* white paper, like the Articles page */
}
body:not(.light) .pr-stage {
--bg0: #0e1118; --bg1: #171c26; --bg2: #1e2431; --bg3: #283041;
--bdr: #2a3142; --bdr2: #3a4356;
--t0: #e8ecf4; --t1: #9aa3bc; --t2: #6a7290;
--ok: #3dd68c; --err: #ff6b6b;
--pr-kicker: #e89379; /* Weather "Forecaster Discussion" kicker */
background: linear-gradient(180deg, #141925 0%, #0c0f16 100%);
}
/* full-bleed: KPI strip on top, then a 3-column grid; the page scrolls as a whole.
Generous side padding so the body breathes at the right edge too. */
.pr-inner { max-width: none; width: 100%; margin: 0; padding: 55px 82px 48px 32px; }
/* ── grid — left section (wide enough for a 4-card KPI row + price table) on
the left; fundamentals + analysis on the right. Wide gutters. ── */
.pr-cols { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1.15fr) minmax(0, 1.1fr); gap: 60px; align-items: start; }
.pr-col { display: flex; flex-direction: column; gap: 16px; }
/* the rail's card shadow separates it from the flat body — no extra divider needed */
/* ── Markets rail: KPIs + price list + detail unified in one card ──── */
.pr-rail { display: flex; flex-direction: column; height: auto; padding: 16px 16px; }
.pr-rail-sep { height: 1px; background: var(--bdr); margin: 24px -16px; flex: 0 0 auto; }
/* commodity selector — buttons inside the rail (no grey container);
active = accent-filled pill, inactive = plain text. Filters the price list below. */
.pr-ctabs { display: inline-flex; gap: 6px; margin: -2px 0 14px -4px; }
.pr-ctab { font-size: 13px; font-weight: 600; color: var(--t1); padding: 6px 14px;
border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.pr-ctab:hover:not(.active):not(.disabled) { background: var(--bg2); color: var(--t0); }
.pr-ctab.active { color: #fff; background: var(--acc); }
.pr-ctab.disabled { color: var(--t2); opacity: .55; cursor: default; }
.pr-ctab.disabled::after { content: 'soon'; font-family: var(--font-num); font-size: 8px;
margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--bg3);
color: var(--t2); vertical-align: middle; letter-spacing: .05em; }
/* card surface (used by the left markets rail) — subtle elevation.
Light = soft shadow; dark = lighter edge. */
.pr-card { background: var(--bg1); border-radius: 14px; padding: 16px 18px; }
body.light .pr-card { box-shadow: 0 2px 8px rgba(16,24,40,.10), 0 16px 40px rgba(16,24,40,.13); }
body:not(.light) .pr-card { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 40px rgba(0,0,0,.6); }
/* the body (fundamentals + analysis + commentary) is flat — no card chrome,
content sits on the page with section labels as header rules (Articles-like) */
.pr-col-funds, .pr-col-analysis { gap: 20px; }
.pr-col-funds .pr-card, .pr-col-analysis .pr-card {
background: transparent; box-shadow: none !important; padding: 0; border-radius: 0; }
.pr-col-funds .pr-section-label, .pr-col-analysis .pr-section-label {
margin: 0; border-bottom: 1px solid var(--bdr); padding-bottom: 9px; }
.pr-card-h { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600;
color: var(--t0); margin-bottom: 12px; }
.pr-dim { font-size: 11px; font-weight: 400; color: var(--t2); font-family: var(--font-num); }
/* ── KPI strip — FLAT grey tiles, row fills the column so its total width
matches the panel below; bigger type, taller, slim cards (wide gap) ──── */
.pr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pr-kpi { background: var(--bg2); border-radius: 11px; padding: 18px 12px; min-width: 0; }
.pr-kpi-l { font-size: 11.5px; font-weight: 500; color: var(--t1); margin-bottom: 11px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-kpi-v { font-size: 22px; font-weight: 600; color: var(--t0); font-family: var(--font-num);
line-height: 1.05; white-space: nowrap; }
.pr-kpi-u { font-size: 11px; font-weight: 400; color: var(--t1); margin-top: 4px; }
.pr-kpi-s { font-size: 12px; color: var(--t1); margin-top: 10px; white-space: nowrap; }
/* tabular (fixed-width) digits so number columns line up cleanly */
.pr-kpi-v, .pr-table tbody td, .pr-hh-v, .pr-snap-v, .pr-snap-d,
.pr-date-btn, .pr-detail-foot { font-variant-numeric: tabular-nums; }
.up { color: var(--ok); } .down { color: var(--err); }
/* ── Zone 2: price list + detail (stacked in the markets rail) ─────── */
.pr-explorer { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }
/* controls row: search grows, region + date dropdowns sit beside it */
.pr-controls { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pr-search { flex: 1 1 130px; min-width: 0; background: var(--bg2); color: var(--t0); border: none;
border-radius: 8px; padding: 8px 11px; font-size: 12.5px; font-family: var(--font-sans);
outline: none; box-shadow: inset 0 0 0 1px var(--bdr); }
.pr-search:focus { box-shadow: inset 0 0 0 1px var(--acc); }
.pr-search::placeholder { color: var(--t2); }
.pr-select { flex: 0 0 auto; background: var(--bg2); color: var(--t0); border: none;
border-radius: 8px; padding: 8px 28px 8px 11px; font-size: 12.5px;
font-family: var(--font-sans); cursor: pointer; outline: none;
box-shadow: inset 0 0 0 1px var(--bdr); -webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 9px center; }
.pr-select:focus { box-shadow: inset 0 0 0 1px var(--acc); }
/* trade-date picker: a control-styled button that opens the shared Price Hubs
calendar (.price-cal-* classes, defined globally in pipeline_db.css). */
.pr-cal-wrap { position: relative; flex: 0 0 auto; }
.pr-date-btn { font-family: var(--font-num); text-align: left; min-width: 132px; }
.pr-date-btn::after { content: '▾'; position: absolute; right: 10px; top: 50%;
transform: translateY(-50%); color: var(--t2); font-size: 10px; pointer-events: none; }
.pr-date-btn { position: relative; padding-right: 26px; background-image: none; }
.pr-stage .price-calendar { right: 0; left: auto; box-shadow: 0 8px 24px rgba(16,24,40,.16); }
/* fixed height ≈ 6 rows: stays put whether fewer/more hubs match (more → scroll) */
.pr-table-wrap { overflow: auto; height: 252px; margin: 0 -6px; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pr-table thead th { position: sticky; top: 0; background: var(--bg1); z-index: 1;
font-size: 10.5px; font-weight: 500; color: var(--t2); text-align: right;
padding: 4px 6px 7px; cursor: pointer; user-select: none; white-space: nowrap; }
.pr-table thead th:first-child { text-align: left; }
.pr-table thead th.sorted { color: var(--acc); }
.pr-table tbody td { padding: 5px 6px; text-align: right; font-family: var(--font-num);
color: var(--t1); border-top: 1px solid var(--bdr); white-space: nowrap; }
.pr-table tbody td:first-child { text-align: left; font-family: var(--font-sans); color: var(--t0); }
.pr-table tbody tr { cursor: pointer; }
.pr-table tbody tr:hover td { background: var(--bg2); }
.pr-table tbody tr.active td { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.pr-rg { font-size: 9.5px; color: var(--t2); font-family: var(--font-sans);
display: block; margin-top: 1px; }
/* selected hub detail — compact (price/Δ/basis live in the table above) */
.pr-detail { display: flex; flex-direction: column; flex: 0 0 auto; }
.pr-d-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-d-name { font-size: 14px; font-weight: 600; color: var(--t0); }
.pr-d-meta { font-size: 11px; color: var(--t2); }
.pr-chart-tabs { display: flex; gap: 5px; margin: 10px 0 8px; }
.pr-ctf { font-size: 11.5px; color: var(--t1); background: var(--bg2); padding: 4px 11px;
border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.pr-ctf.active { background: var(--bg3); color: var(--t0); }
.pr-tfs { display: flex; gap: 4px; margin-left: auto; }
.pr-tf { font-size: 11px; color: var(--t2); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.pr-tf.active { color: var(--acc); background: var(--bg2); }
.pr-chart-box { height: 280px; min-height: 0; position: relative; }
.pr-detail-foot { font-size: 10.5px; color: var(--t2); margin-top: 8px; font-family: var(--font-num); }
/* ── Zone 3: fundamentals ────────────────────────────────────────── */
/* section titles match Weather's "Forecaster Discussion": 16px, brick-red kicker */
.pr-section-label { display: flex; align-items: baseline; gap: 10px; font-size: 16px;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pr-kicker);
margin: 6px 0 12px; }
.pr-credit { font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
color: var(--t2); margin-left: auto; }
.pr-credit a { color: var(--t1); text-decoration: none; }
.pr-credit a:hover { color: var(--acc); }
.pr-section-label:not(:first-child) { margin-top: 4px; }
/* Supply / Demand toggle — segmented control (accent-filled active pill) that
swaps the two flow-chart panes below, so the column holds 3 charts at a time.
A hairline above + extra top gap separates it from the storage graph. */
.pr-ftabs { display: flex; gap: 6px; margin: 32px 0 2px; padding-top: 18px;
border-top: 1px solid var(--bdr); }
/* both segments sit on a faint grey fill so they read as one paired control;
the active one fills solid accent, the other stays a neutral grey tint. */
.pr-ftab { font-size: 13px; font-weight: 600; color: var(--t1); padding: 6px 16px;
border-radius: 8px; cursor: pointer; transition: color .15s, background .15s;
background: var(--bg3); }
.pr-ftab:hover:not(.active) { background: color-mix(in srgb, var(--t2) 18%, var(--bg3)); color: var(--t0); }
.pr-ftab.active { color: #fff; background: var(--acc); }
.pr-fpane { display: flex; flex-direction: column; gap: 40px; }
.pr-fpane[hidden] { display: none; }
/* each graph gets a faint outline so the charts read as discrete panels */
.pr-fund-box { height: 200px; position: relative;
border: 1px solid var(--bdr); border-radius: 10px; padding: 8px; }
.pr-snap { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 11.5px; }
.pr-snap-i { display: flex; align-items: baseline; gap: 6px; }
.pr-snap-r { color: var(--t2); }
.pr-snap-v { font-family: var(--font-num); color: var(--t0); font-weight: 600; }
.pr-snap-d { font-family: var(--font-num); font-size: 10.5px; }
/* HH futures mini strip */
.pr-hh { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-hh-i { flex: 1 1 70px; background: var(--bg2); border-radius: 8px; padding: 9px 11px; }
.pr-hh-l { font-size: 10.5px; color: var(--t2); }
.pr-hh-v { font-size: 17px; font-weight: 600; font-family: var(--font-num); color: var(--t0); }
/* ── Column 3: Analysis & forecast — 3 views (Analysis / AI review / Supply &
demand) behind one selector styled like the Articles section nav: uppercase,
divider-separated links, active in the brick-red kicker. ── */
.pr-analysis-card { display: flex; flex-direction: column; }
.pr-anav { display: flex; flex-wrap: wrap; align-items: center; gap: 0;
margin-bottom: 51px; }
.pr-anav-link { font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase; color: var(--t1);
cursor: pointer; padding: 2px 14px; border-left: 1px solid var(--bdr);
white-space: nowrap; transition: color .12s; }
.pr-anav-link:first-child { padding-left: 0; border-left: none; }
.pr-anav-link:hover { color: var(--t0); }
.pr-anav-link.active { color: var(--pr-kicker); }
.pr-atab-body { font-size: 14px; color: var(--t1); line-height: 1.6; }
/* source / timestamp line under the HHP-authored analysis text */
.pr-ai-foot { margin-top: 12px; display: flex; gap: 10px; align-items: center;
font-size: 10.5px; color: var(--t2); font-family: var(--font-num); }
.pr-ai-foot a { color: var(--t1); text-decoration: none; }
.pr-ai-foot a:hover { color: var(--acc); }
/* commentary — stacked supply / demand */
.pr-comm { display: flex; flex-direction: column; gap: 12px; }
.pr-comm-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pr-comm-t { font-size: 13px; font-weight: 600; color: var(--t0); }
.pr-comm-d { font-size: 10.5px; color: var(--t2); font-family: var(--font-num); }
.pr-comm-body { font-size: 14px; line-height: 1.7; color: var(--t1); }
.pr-comm-body strong { color: var(--t0); font-weight: 600; }
.pr-comm-body div { margin: 2px 0; }
.pr-loading { color: var(--t2); font-size: 12px; padding: 18px 4px; }
/* ── loading skeletons (shimmer) — pure perceived-perf, no backend warming ──── */
@keyframes pr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pr-skel {
border-radius: 6px;
background: linear-gradient(90deg,
rgba(135,140,165,.10) 25%, rgba(135,140,165,.22) 37%, rgba(135,140,165,.10) 63%);
background-size: 200% 100%;
animation: pr-shimmer 1.5s ease-in-out infinite;
}
.pr-skel-bar { height: 11px; margin: 7px 0; }
.pr-skel-line { height: 12px; margin: 11px 0; }
.pr-skel-kpi { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.pr-skel-row td { padding: 9px 8px; }
.pr-skel-host { position: relative; }
.pr-skel-fill { position: absolute; inset: 10px; } /* overlays the empty