/* texas.css — the Texas crude pipelines page (/flows/texas/, UI-03).
 *
 * The gas pages' look (natgas-sd-b11-ui, web/b11/css/b11.css) on this site's
 * own components: tokens.css declares the palette, app.css builds .panel,
 * .badge, .chip, .seg and .data-table, and this sheet only lays the page out
 * and quietens what the gas pages quieten (cards without shadows, figures in
 * a row with hairlines, folds for the long detail). No colour literal and no
 * custom property: tests/test_web_tokens.py holds both.
 */

/* THE PAGE GROUND. The body carries no `.app` class, so this sheet owns the
 * font, ink and background (the lesson of W's live QA on the old page,
 * 2026-10-24). font-size on body, never html. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); margin: 0; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input { font-family: var(--font-ui); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--ink); }
.muted { color: var(--ink-faint); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* The crude sub-bar the emitter puts above the page (partials/flows-tabs.html)
 * is css/shell.css's, full width under the site's bar, since UI-04. */

.tx { max-width: 1240px; margin: 0 auto; padding: var(--sp-3) var(--sp-4) var(--sp-5); }

/* ------------------------------------------------------------ head */
/* The trail ("Texas / BridgeTex") is the sub-bar's since UI-04; the title
 * row keeps the × that goes back the same way (js/shell.js goBack). */
.title { display: flex; align-items: flex-start; justify-content: space-between;
         gap: var(--sp-3); }
.title h1 { font-family: var(--font-display); font-weight: 400;
            font-size: var(--t-display); line-height: 1.2; margin: 0; }
.status { color: var(--ink-body); font-size: var(--t-data); margin: var(--sp-1) 0 var(--sp-3); }

/* Key figures in a row, label over value: no boxes, a hairline between. */
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) 0; margin: 0 0 var(--sp-4); padding: 0; }
.stats:empty { display: none; }
.stats > div { flex: 1 1 180px; min-width: 0; padding: 0 var(--sp-4) 0 var(--sp-3);
               border-left: 1px solid var(--line); }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats dt { font-size: var(--t-label); font-weight: 600; text-transform: uppercase;
            letter-spacing: var(--label-tracking); color: var(--ink-faint); }
.stats dd { margin: var(--sp-1) 0 0; font-family: var(--font-display);
            font-size: var(--t-display); line-height: 1.2; color: var(--ink);
            font-variant-numeric: tabular-nums; }
.stats dd.stats-sub { font-family: var(--font-ui); font-size: var(--t-data);
                      line-height: 1.4; color: var(--ink-body); }
.stats .unit { font-family: var(--font-data); font-size: var(--t-data); color: var(--ink-body); }

/* ------------------------------------------------------------ cards */
/* Quiet cards, as the gas pages: a hairline, the header on the card's own
 * surface, no shadow. */
.tx .panel { box-shadow: none; margin: 0 0 var(--sp-4); }
.tx .panel-header { flex-wrap: wrap; background: var(--surface); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.tx .panel-header h2 { font-size: var(--t-title); font-weight: 600; margin: 0; }
.tx .panel-header .sub { color: var(--ink-faint); font-size: var(--t-data); }
.tx .panel-header .tx-range { margin-left: auto; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.state { padding: var(--sp-2) var(--sp-3); margin: 0; color: var(--ink-body); font-size: var(--t-data); }

.tx-search {
  min-width: 0; width: 260px; max-width: 100%; margin-left: auto;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--t-data); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
}

.tx-tabs { margin: 0 0 var(--sp-3); }
.tx-tabs .seg-btn, .tx-range .seg-btn { padding: var(--sp-1) var(--sp-3); }

/* ------------------------------------------------------------ map */
.mapbox { height: 440px; background: var(--surface); }
/* The key card (css/shell.css) on this map's left edge (UI-04): narrower than
 * the US map's, three sections, and its body capped inside the 440px box
 * (10px margin, 2px border, 30px header, 26px off the map's foot, slack). */
.mapbox .map-key { width: 232px; }
.mapbox .map-key-body { max-height: 330px; }
.sw { display: inline-block; vertical-align: middle; margin-right: var(--sp-1); }
.sw-flow { width: 14px; height: 0; border-top: 2px solid var(--series-1); }
.sw-cap { width: 14px; height: 0; border-top: 2px dashed var(--ink-faint); }
.leaflet-container { font-family: var(--font-ui); }
.leaflet-tooltip { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
                   box-shadow: none; font-size: var(--t-data); }

/* ------------------------------------------------------------ tables */
.tx-table td { vertical-align: middle; }
.tx-table td:first-child { white-space: normal; min-width: 160px; }
.tx-table td .muted { font-family: var(--font-ui); font-size: var(--t-label); }
.tx-table td a { text-decoration: none; }
.tx-table td a:hover { text-decoration: underline; }
.tx-row { cursor: pointer; }
.tx-row:focus-visible td { background: var(--surface-2); }
.th-sort { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
           color: inherit; letter-spacing: inherit; text-transform: inherit; }
.th-sort:hover { color: var(--ink); }
.chg { cursor: help; }
.chg.none { color: var(--ink-faint); }

svg.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--series-1); stroke-width: 1.5;
              stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--series-1); }

.tx-novol { border-top: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); font-size: var(--t-data); }
.tx-novol > summary { cursor: pointer; color: var(--ink-body); }
.tx-novol-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0 0; }
.tx-novol-list .chip { font-size: var(--t-label); }

.tx-list { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: var(--sp-5); }
.tx-list li { break-inside: avoid; padding: var(--sp-1) 0; border-bottom: 1px solid var(--line);
              display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--t-data); }
.tx-list a { text-decoration: none; }

table.kv { border-collapse: collapse; font-size: var(--t-data); width: 100%; }
table.kv th { text-align: left; color: var(--ink-faint); font-weight: 500; white-space: nowrap;
              padding: var(--sp-1) var(--sp-3) var(--sp-1) 0; vertical-align: top; width: 1%; }
table.kv td { padding: var(--sp-1) 0; color: var(--ink); }

.tx-also, .tx-more { font-size: var(--t-data); color: var(--ink-body); margin: 0 0 var(--sp-3); }

/* ------------------------------------------------------------ chart */
.tx-chart { min-height: 200px; }
svg.chart { display: block; width: 100%; height: auto; outline: none; touch-action: pan-y; }
svg.chart:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
svg.chart .tick { fill: var(--ink-faint); font-family: var(--font-data); font-size: var(--t-label); }
svg.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .c-flow { stroke: var(--series-1); }
svg.chart .dot.c-flow { fill: var(--series-1); stroke: none; }
svg.chart .c-cap { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 5 4; }
svg.chart .dot.c-cap { fill: var(--ink-faint); stroke: none; }
svg.chart .cross { stroke: var(--line-strong); stroke-width: 1; }
.tx-readout { margin: var(--sp-2) 0 0; font-family: var(--font-data); font-size: var(--t-data);
              color: var(--ink-body); }

/* ------------------------------------------------------------ folds */
details.fold > summary { cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-faint); }
details.fold[open] > summary h2::before { content: "▾"; }
details.fold:not([open]) > summary { border-bottom: 0; }
details.about { margin: var(--sp-4) 0 0; font-size: var(--t-data); color: var(--ink-body); }
details.about > summary { cursor: pointer; color: var(--ink-faint); }
details.about ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
details.about li { margin: 0 0 var(--sp-1); }

.tx-foot { max-width: 1240px; margin: 0 auto; padding: var(--sp-3) var(--sp-4) var(--sp-5);
           border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--t-data); }
.tx-foot p { margin: 0 0 var(--sp-1); }

/* ------------------------------------------------------------ narrow */
@media (max-width: 900px) {
  .hide-md { display: none; }
}
@media (max-width: 560px) {
  .tx { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
  .stats > div { flex-basis: 50%; border-left: 0; padding-left: 0; }
  .mapbox { height: 320px; }
  .mapbox .map-key-body { max-height: 210px; }
  .hide-sm { display: none; }
  .tx-search { width: 100%; margin-left: 0; }
}
@media (forced-colors: active) {
  svg.chart .line, .spark-line { stroke: CanvasText; }
}