/* door.css — the way in: the front door (/) and the natural gas page
   (/natgas/); the crude hub (/crude/) was retired by UI-01 WP3. Sources were
   web/home.html, web/crude.html and
   web/natgas.html; model/site_build.py derives the governed copies and the
   injector puts the shared bar over them.

   One job: get a reader from the address they were given to a map in two
   clicks. The front door's hero map is the only part that shows figures,
   and it draws them from the published balance (js/home.js).

   Every class is door-* so nothing here can collide with app.css, which the
   injected bar needs and which loads alongside. Colours are tokens only. */

body.door {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.door-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 3vw, 40px) 40px;
  box-sizing: border-box;
}

.door-eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-data);
  font-size: var(--t-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.door-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  color: var(--ink);
}

.door-lede {
  margin: var(--sp-4) 0 0;
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-body);
}

.door-head { margin-bottom: clamp(20px, 3vw, 36px); }

/* ---- the tiles ------------------------------------------------------- */

.door-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease);
}
.door-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.door-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.door-tile-text { position: relative; z-index: 1; max-width: 30rem; }

.door-tile-kicker {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-data);
  font-size: var(--t-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.door-tile-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.1;
}

.door-tile-blurb {
  margin: var(--sp-3) 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-body);
}

.door-tile-go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: var(--r-ctl);
  /* The ink ramp's top, so the button is the strongest thing on the tile in
     both themes and matches the bar's tabs (UI-08, Thomas 2026-10-29: "their
     colours are off"). It was --pine, a green nothing else on the page used.
     Not the market's map colour: crude's gold sits beside --warn, and a gold
     button would read as the warning. --bg on --ink is 17:1 light, 15:1 dark. */
  background: var(--ink);
  color: var(--bg);
  font-size: .9rem;
  font-weight: 500;
}
.door-tile-go-arrow { transition: transform var(--dur-ui) var(--ease); }
.door-tile:hover .door-tile-go-arrow { transform: translateX(3px); }

.door-tile-pill {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-data);
  font-size: var(--t-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--ink-faint);
}

/* The map in a tile's corner: the hero's shapes cropped to the lower 48
   (js/home.js drawTiles). A motif, not a chart — no axis, no figure.
   THE TEXT SITS CLEAN (Thomas, 2026-10-30): the map takes the right 60% and
   is transparent across its first third, so it is fully clear until 59% of
   the tile; the blurb stops at 44% (below), the title and button well
   before. The map never runs under a word. */
.door-tile-art {
  position: absolute;
  right: 1.5%;
  bottom: 4%;
  width: 60%;
  /* both set: the viewBox meets the smaller, so on a short tile the map
     shrinks toward its corner instead of climbing into the text */
  height: 88%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 32%);
  mask-image: linear-gradient(to right, transparent, var(--ink) 32%);
}
@media (min-width: 761px) {
  .door-tile-blurb { max-width: 44%; }
}
.door-tile-art path, .door-tile-art circle { vector-effect: non-scaling-stroke; }
.door-tile-art .dt-land path { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; stroke-linejoin: round; }
/* the /flows/us/ PADD washes, a little stronger: no basemap under them here */
.door-tile-art .dt-padds path { fill-opacity: calc(var(--map-padd-fill) * 1.5); stroke: var(--surface); stroke-width: .8; }
.door-tile-art .dt-padd-1 { fill: var(--map-padd-1); }
.door-tile-art .dt-padd-2 { fill: var(--map-padd-2); }
.door-tile-art .dt-padd-3 { fill: var(--map-padd-3); }
.door-tile-art .dt-padd-4 { fill: var(--map-padd-4); }
.door-tile-art .dt-padd-5 { fill: var(--map-padd-5); }
/* gas has no PADD story to tell: a faint blue wash under its network */
.door-tile-art[data-art="gas"] .dt-padds path { fill: var(--map-hub); fill-opacity: calc(var(--map-padd-fill) * .4); }
/* every EIA gas pipeline, one path (site_build _TILE_GAS_TOL), fetched after
   the page loads (home.js loadGas), so it fades in rather than pops */
.door-tile-art .dt-gas { fill: none; stroke: var(--map-hub); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .75; }
.door-tile-art .dt-pipes path { fill: none; stroke: var(--map-pipe); stroke-width: 1.1; stroke-linecap: round; stroke-opacity: .8; }
.door-tile-art .dt-hubs circle { fill: var(--map-hub); stroke: var(--surface); stroke-width: 1; }
/* crude in the pipes: dashes that run while the tile is pointed at */
.door-tile-art .dt-flow path {
  fill: none; stroke: var(--map-pipe); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 1.5 12; opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);
}
.door-tile-art .dt-lng-dot { fill: var(--map-hub); stroke: var(--surface); stroke-width: 1.2; }
.door-tile-art .dt-lng-ring { fill: none; stroke: var(--map-hub); stroke-width: 1.4; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .door-tile:hover .door-tile-art .dt-flow path,
  .door-tile:focus-visible .door-tile-art .dt-flow path {
    opacity: 1;
    animation: door-flow 1.6s linear infinite;
  }
  .door-tile-art .dt-lng-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: door-pulse 2.8s ease-out infinite;
  }
  .door-tile-art .dt-lng g:nth-child(2) .dt-lng-ring { animation-delay: .35s; }
  .door-tile-art .dt-lng g:nth-child(3) .dt-lng-ring { animation-delay: .7s; }
  .door-tile-art .dt-lng g:nth-child(4) .dt-lng-ring { animation-delay: 1.05s; }
  .door-tile-art .dt-lng g:nth-child(5) .dt-lng-ring { animation-delay: 1.4s; }
  .door-tile-art .dt-lng g:nth-child(6) .dt-lng-ring { animation-delay: 1.75s; }
  .door-tile-art .dt-lng g:nth-child(7) .dt-lng-ring { animation-delay: 2.1s; }
  .door-tile-art .dt-lng g:nth-child(8) .dt-lng-ring { animation-delay: 2.45s; }
  .door-tile-art .dt-gas { animation: door-fade .6s var(--ease) both; }
}
@keyframes door-flow { to { stroke-dashoffset: -13.5; } }
@keyframes door-fade { from { opacity: 0; } }
@keyframes door-pulse {
  0%   { transform: scale(1);   opacity: .9; }
  80%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* ---- front door hero: text and stage chips left, the map right --------
   The panel, the chip chain and the source strip are the Barrel/Ledger
   landing's (landing.css), ported under door-* names rather than linked:
   landing.css restyles h1-h4, body and .btn for the whole page, and the
   injected bar needs app.css's .btn. */

.door-hero {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(24px, 4vw, 44px);
}

.door-stages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(22px, 3vw, 32px);
}
.door-stage {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface-2);
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease);
}
.door-stage:hover { border-color: var(--line-strong); }
.door-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.door-stage[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-panel);
  border-color: var(--line-strong);
}
.door-stage-conn { width: clamp(10px, 2vw, 26px); height: 1px; background: var(--line-strong); flex: none; }

.door-stage-what {
  margin: var(--sp-3) 0 0;
  min-height: 2.8em;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

.door-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-3) 0 0; }
.door-stats dt {
  font-family: var(--font-data);
  font-size: var(--t-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.door-stats dd {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--ink);
}
.door-stats .door-stat-unit {
  font-family: var(--font-data);
  font-size: var(--t-label);
  color: var(--ink-faint);
}

/* the instrument: dot grid, a pine glow, corner brackets */
.door-instrument {
  position: relative;
  margin: 0;
  padding: 22px 18px 16px;
  background:
    radial-gradient(ellipse 65% 55% at 55% 45%,
      color-mix(in oklab, var(--pine) 6%, transparent), transparent 70%),
    radial-gradient(circle, var(--line-strong) 1.1px, transparent 1.3px);
  background-size: auto, 26px 26px;
}
.door-instrument::before, .door-instrument::after,
.door-instrument-bk::before, .door-instrument-bk::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--line-strong);
}
.door-instrument::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.door-instrument::after { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.door-instrument-bk::before { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.door-instrument-bk::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.door-instrument-top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: var(--font-data);
  font-size: var(--t-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.door-instrument-foot { margin: var(--sp-2) 0 0; font-size: .8rem; color: var(--ink-faint); }

/* the map — layers fade in and out by stage, nothing else moves */
.door-na { display: block; width: 100%; height: auto; overflow: hidden; }
.door-na .na-land path { fill: var(--surface); stroke: none; }
.door-na .na-outline path { fill: none; stroke: var(--ink-faint); stroke-width: .9; stroke-linejoin: round; }
.door-na .na-padds path {
  stroke: var(--surface);
  stroke-width: 1.4;
  transition: fill var(--dur-theme) var(--ease);
}
.door-na .na-basins path { fill: var(--map-basin); fill-opacity: .1; stroke: var(--map-basin); stroke-width: .6; stroke-opacity: .45; stroke-dasharray: 2 2; }
.door-na .na-pipes path { fill: none; stroke: var(--map-pipe); stroke-width: .9; stroke-linecap: round; }
.door-na .na-hubs circle { fill: var(--map-hub); stroke: var(--surface); stroke-width: 1.2; }
.door-na .na-hubs text,
.door-na .na-lab-name,
.door-na .na-lab-sub {
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--ink-body);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.door-na .na-refineries circle { fill: var(--map-refinery-region); fill-opacity: .6; stroke: var(--surface); stroke-width: .6; }
.door-na .na-labels text { text-anchor: middle; }
.door-na .na-lab-val {
  font-family: var(--font-display);
  font-size: 19px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.door-na .na-basins, .door-na .na-pipes, .door-na .na-hubs, .door-na .na-refineries {
  transition: opacity var(--dur-theme) var(--ease);
}

/* upstream: production ramp, basins on, pipes faint */
.door-instrument[data-stage="up"] .na-shade-1 { fill: var(--prod-1); }
.door-instrument[data-stage="up"] .na-shade-2 { fill: var(--prod-2); }
.door-instrument[data-stage="up"] .na-shade-3 { fill: var(--prod-3); }
.door-instrument[data-stage="up"] .na-shade-4 { fill: var(--prod-4); }
.door-instrument[data-stage="up"] .na-shade-5 { fill: var(--prod-5); }
.door-instrument[data-stage="up"] .na-basins { opacity: 1; }
.door-instrument[data-stage="up"] .na-pipes { opacity: .25; }
.door-instrument[data-stage="up"] .na-hubs { opacity: 0; }
.door-instrument[data-stage="up"] .na-refineries { opacity: 0; }

/* midstream: PADDs go quiet, pipelines and hubs carry the picture */
.door-instrument[data-stage="mid"] .na-padds path {
  fill: color-mix(in oklab, var(--map-pipe) 9%, var(--surface));
  stroke: var(--line-strong);
}
.door-instrument[data-stage="mid"] .na-basins { opacity: 0; }
.door-instrument[data-stage="mid"] .na-pipes { opacity: 1; }
.door-instrument[data-stage="mid"] .na-hubs { opacity: 1; }
.door-instrument[data-stage="mid"] .na-refineries { opacity: 0; }

/* downstream: the refinery ramp, refineries sized by operating capacity */
.door-instrument[data-stage="down"] .na-shade-1 { fill: color-mix(in oklab, var(--map-refinery-region) 10%, var(--surface)); }
.door-instrument[data-stage="down"] .na-shade-2 { fill: color-mix(in oklab, var(--map-refinery-region) 18%, var(--surface)); }
.door-instrument[data-stage="down"] .na-shade-3 { fill: color-mix(in oklab, var(--map-refinery-region) 27%, var(--surface)); }
.door-instrument[data-stage="down"] .na-shade-4 { fill: color-mix(in oklab, var(--map-refinery-region) 36%, var(--surface)); }
.door-instrument[data-stage="down"] .na-shade-5 { fill: color-mix(in oklab, var(--map-refinery-region) 46%, var(--surface)); }
.door-instrument[data-stage="down"] .na-basins { opacity: 0; }
.door-instrument[data-stage="down"] .na-pipes { opacity: .2; }
.door-instrument[data-stage="down"] .na-hubs { opacity: 0; }
.door-instrument[data-stage="down"] .na-refineries { opacity: 1; }

/* ---- front door: two choices ---------------------------------------- */

.door-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
}
.door-tile-tall { min-height: clamp(220px, 30vh, 320px); }

/* ---- secondary links under the tiles --------------------------------- */

/* the front door's footer, outside <main>: the same column as the page */
.door-page-foot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px) 40px;
  box-sizing: border-box;
}
.door-page-foot .door-more { margin-top: 0; }

.door-more {
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.door-more-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .92rem;
}
.door-more-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.door-more-list a:hover { border-bottom-color: var(--ink); }
.door-more-note { margin: var(--sp-1) 0 0; color: var(--ink-faint); font-size: .85rem; }

.door-foot {
  margin-top: clamp(28px, 4vw, 48px);
  color: var(--ink-faint);
  font-size: .82rem;
  line-height: 1.5;
}

/* ---- narrow screens: everything stacks, the map tile first ----------- */

@media (max-width: 760px) {
  .door-hero, .door-choices { grid-template-columns: 1fr; }
  .door-tile-tall { min-height: 240px; }
  .door-tile-art { width: auto; height: 34%; max-width: 48%; right: 10px; bottom: 10px; }
}