/* ---------------------------------------------------------------- type ---- */
/* Source Serif 4 and Source Sans 3 — Adobe, SIL OFL, self-hosted. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------- tokens ---- */

:root {
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --ink: #16181c;
  --ink-soft: #4a5058;
  --ink-faint: #767d87;
  --rule: #d9dce1;
  --rule-soft: #e9ebee;
  --paper: #fbfbfa;
  --panel: #ffffff;

  --measure: 66ch;
  --masthead-h: 3.25rem;
  /* The slice of the report the map leaves at its lower stop: the report's
     top padding, the preview's fixed height and its margin, the tab strip,
     and the report's top rule. The strip is in the slice so the rest of the
     report names itself — Fields, Charts, Operators — rather than hiding
     behind a small tab; choosing one raises the report. The map's height is
     the viewport less the masthead less this. */
  --preview-h: calc(9.75rem + 1px);
  /* One hue per rung of the ladder, for the search results. None of these is
     a status family or a production axis, so a coloured edge on a result
     cannot be read as a reading. */
  --rung-state: #3b4994;
  --rung-county: #2e6e8f;
  --rung-rung: #8a6d1f;
  --rung-well: #4a5058;

  /* Five steps, and nothing between them.
     The explorer had accumulated twelve sizes — 10, 11, 12, 13, 14, 15, 17, 18,
     24, 36px and two more — each chosen against whatever happened to be beside
     it. A reader cannot learn a hierarchy that has twelve levels, so there are
     five, on a 1.15-1.25 ratio, and every rule below picks one of them. */
  --t-xs: 0.75rem;    /* 12px — captions, axis labels, caveats */
  --t-sm: 0.875rem;   /* 14px — labels, controls, table cells */
  --t-md: 1rem;       /* 16px — the report's content, the path */
  --t-lg: 1.25rem;    /* 20px — a section's subject, a headline figure */
  --t-xl: 1.625rem;   /* 26px — the subject of the page */

  --shadow: 0 1px 2px rgb(22 24 28 / 0.08), 0 4px 16px rgb(22 24 28 / 0.10);
}

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

/* ----------------------------------------------------------- masthead ---- */

/* Three tracks so the centre is the true centre of the page rather than
   whatever is left after the wordmark. */
.masthead {
  height: var(--masthead-h);
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  /* Stays put. The path back up and the search box are the two things a
     reader should never have to scroll to find; the map sticks beneath it. */
  position: sticky;
  top: 0;
  z-index: 500;
}

.masthead__section {
  grid-column: 2;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Clicking the section title returns to the whole country, which is what a
   section title should do. Undecorated until hovered so it does not read as
   navigation competing with the breadcrumb. */
.masthead__section a {
  text-decoration: none;
}

.masthead__section a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.masthead__wordmark {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  align-self: center;
}

/* -------------------------------------------------------------- search --- */
/* In the masthead's third track, so it is there before a reader knows where
   to click. The results hang below it as a panel over whatever the page is
   showing. */
.masthead__search {
  grid-column: 3;
  justify-self: end;
  position: relative;
  margin: 0;
}

.masthead__search input {
  width: 16rem;
  max-width: 40vw;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ink);
}

.masthead__search input:focus-visible {
  outline: 2px solid #3b4994;
  outline-offset: 1px;
}

.search__results {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  width: 28rem;
  max-width: 92vw;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.35;
  z-index: 600;
}

.search__results[hidden] {
  display: none;
}

/* Places, then wells: a result says what kind of thing it is and where. */
.search__group {
  padding: 0.4rem 0.5rem 0.15rem;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.search__result {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  padding: 0.35rem 0.5rem 0.35rem 0.6rem;
  border-left: 3px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

.search__result[aria-selected="true"],
.search__result:hover {
  background: var(--rule-soft);
}

/* The rung, as a hue on the edge and on the word. */
.search__result[data-rung="state"] { border-left-color: var(--rung-state); }
.search__result[data-rung="county"] { border-left-color: var(--rung-county); }
.search__result[data-rung="rung"] { border-left-color: var(--rung-rung); }
.search__result[data-rung="well"] { border-left-color: var(--rung-well); }
.search__result[data-rung="state"] .search__kind { color: var(--rung-state); }
.search__result[data-rung="county"] .search__kind { color: var(--rung-county); }
.search__result[data-rung="rung"] .search__kind { color: var(--rung-rung); }
.search__result[data-rung="well"] .search__kind { color: var(--rung-well); }

.search__name {
  color: var(--ink);
}

.search__where {
  grid-column: 1;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.search__kind {
  font-weight: 600;
}

.search__figure {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.search__figure small {
  color: var(--ink-faint);
  margin-left: 0.15rem;
}

.search__empty {
  padding: 0.5rem;
  color: var(--ink-faint);
}

/* Beside the wordmark and the section title, a phone has about 7.5rem left. */
@media (max-width: 40rem) {
  .masthead__search input {
    width: 7.5rem;
  }

  .search__results {
    width: 20rem;
  }
}

/* -------------------------------------------------------------- prose ---- */

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4rem 1.25rem;
}

.prose h1 {
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}

.prose p {
  margin: 0 0 1rem;
}

/* ----------------------------------------------------------- explorer ---- */

/* The page scrolls once the report is raised. At the lower stop it does not:
   the preview is the report there, whole by construction, and scrolling only
   slid the rest of it up under the map and the masthead away with it. */
body.explorer-page {
  min-height: 100dvh;
}

body.explorer-page.report-down {
  height: 100dvh;
  /* Stops the reader scrolling — wheel, touch, keys, scrollbar. A script
     could still scroll the viewport (clip is treated as hidden there), and
     none does at this stop; the sizer scrolls to the top before it applies. */
  overflow: hidden;
}

/* Sticky, because navigating and reading interleave, so the map stays put
   while the report scrolls under it. The height is the reader's, set by the
   Report tab and remembered.

   There was a max-height: 34rem here from when the map was a fixed-size
   component. It clamped the map to 544px, which is below the 84dvh stop on any
   window taller than about 650px — so "Report v" gave the map nothing back and
   the report sat a third of the way up the screen whatever the tab said. The
   stops are the answer to how tall the map should be; a second, invisible
   answer only made the control a lie. min-height still guards a short window,
   where 45dvh would leave a strip too thin to navigate. */
.explorer {
  position: sticky;
  top: var(--masthead-h);
  z-index: 10;
  height: var(--map-h, 84dvh);
  /* The report slides up over the map and back down, rather than the boundary
     teleporting. Leaflet's own ResizeObserver fires throughout, so the tiles
     and the marks follow the edge instead of snapping when it lands. */
  transition: height 0.28s ease;
  min-height: 17rem;
  background: #eceff2;
  display: flex;
  flex-direction: column;
}

/* The map and its floating panels. A separate box from .explorer so the rails
   position against the map rather than against the map plus the filter band. */
.explorer__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Its own stacking context, so Leaflet's panes stack inside it and the tab
     rising out of the seam is not buried under a tile layer. */
  z-index: 1;
}

/* The reading. Scrolls under the map, and is the only thing here that is
   allowed to be as tall as it needs to be. */
.report {
  position: relative;
  z-index: 5;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 1.25rem 1.5rem 4rem;
}

/* The report's header: the focused scope's own row, in the list's cells. A
   fixed height, because the map's lower stop is sized to it and a subject
   with a long name must not move the map. Wider than the window it scrolls
   sideways rather than wrapping, since a wrapped row is no longer a row. */
.report__preview {
  box-sizing: border-box;
  height: 4.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  overflow-y: hidden;
  font-family: var(--sans);
  scrollbar-width: thin;
}

.preview__subject {
  display: flex;
  flex-direction: column;
  flex: none;
  min-width: 12rem;
}

.preview__kind {
  font-size: var(--t-xs);
  line-height: 1.3;
  color: var(--ink-faint);
}

.preview__name {
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.preview__where {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink-soft);
  white-space: nowrap;
}

.preview__cell {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0.2rem;
}

.preview__label {
  font-size: var(--t-xs);
  line-height: 1.3;
  color: var(--ink-faint);
  white-space: nowrap;
}

.preview__label small {
  font-weight: 400;
}

.preview__value {
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.preview__value .clist__wells {
  text-align: left;
}

.preview__value .spark {
  width: 5rem;
  height: 1.1rem;
}

.report__empty {
  color: var(--ink-faint);
  font-size: var(--t-sm);
  margin: 0;
  font-weight: 400;
}




.report__note {
  margin: 0.6rem 0 0;
  font-size: var(--t-sm);
  color: var(--ink-faint);
  font-weight: 400;
}

/* Three readings side by side while there is room, stacked when there is not.
   Deliberately not a fixed three-column grid: the operator block is the one
   that grows, and it should get the slack rather than being boxed to a third. */
.report__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
}

.report__section {
  font-family: var(--sans);
  font-size: var(--t-sm);
  min-width: 0;
}

/* Inside the report these headings open a section rather than label a panel,
   so the first one does not need the panel's top spacing. */
.report__section > .panel__title:first-child,
.report__section .panel__title--spaced:first-child {
  margin-top: 0;
}

/* The report's own header. Understated: the selected tab is marked by a rule
   and a darker ink, not by weight — a bold tab in a row of light ones reads as
   two type sizes. 1rem, because this is the handle on the whole report and the
   strip is the first thing visible in the peek above the fold. */
.rtabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.25rem;
}

.rtabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.4rem 0.75rem 0.5rem;
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.rtabs__tab:hover {
  color: var(--ink);
}

.rtabs__tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.rtabs__tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.explorer__map {
  position: absolute;
  inset: 0;
  background: #eceff2;
}

/* --------------------------------------------------------------- sizer --- */
/* The boundary between the map and the reading, which the reader owns. Three
   sizes a click apart: a well pad wants height, a list of fields does not. */
/* A folder tab, rising out of the seam into the map.
   It hung below the edge before, which read as part of the report rather than
   as the handle on the boundary between the two. */
.sizer {
  flex: none;
  display: flex;
  justify-content: center;
  height: 0;
  position: relative;
  z-index: 2;
}

.sizer__tab {
  appearance: none;
  position: absolute;
  bottom: 0;
  padding: 0.3rem 1rem 0.35rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.2;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 -1px 3px rgb(22 24 28 / 0.06);
}

.sizer__tab:hover {
  color: var(--ink);
  background: var(--rule-soft);
}

.sizer__tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* -------------------------------------------------------------- chipbar --- */
/* The status filter, above the map and inside the sticky block. It was in the
   report, below the fold, which meant the control that changes the map lived
   somewhere you could not see the map from. */
/* The status filter, floating in the gap between the two rails.

   One line, always. Twelve statuses is 1,741px of chips and the gap between
   the rails is 796px at 1280 — wrapping that is three ragged lines over the
   map, so the tail collapses into a +n chip instead and the row stays a row.
   Expanding is a deliberate act, and then it may wrap. */
/* In flow by default — a row above the map, which is what it can always be.
   The float is the enhancement, and it is the wide layout that earns it. */
.chipbar {
  flex: none;
  align-self: center;
  margin: 0.45rem 0.875rem 0;
  width: fit-content;
  max-width: calc(100% - 1.75rem);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  font-family: var(--sans);
}

.chipbar[hidden] {
  display: none;
}

/* Expanded is the one state allowed to wrap, because the reader asked for it.
   Centred rows rather than left-ragged, since the box itself is centred. */
.chipbar.chipbar--open {
  flex-wrap: wrap;
}

/* Measured out of the row, not display:none — the fit pass needs their widths,
   and a chip that is only visually gone is still reachable by tab. */
.chipbar .chip[hidden] {
  display: none;
}

/* Above the breakpoint it lifts out of flow into the gap the rails leave.
   .explorer is the containing block, and since this is then out of flow the
   stage starts at the top of it, so the inset matches the rails' own.

   Bounded by the chips, not by the gap: spanning the whole 796px left a mostly
   empty panel over the map on the scopes that file three statuses. The insets
   are the bounds and auto margins centre whatever is narrower, which puts an
   equal clearance either side rather than an equal inset — the rails are not
   the same width, and it is the clearance a reader sees. */
@media (min-width: 40.0625rem) {
  .chipbar {
    position: absolute;
    z-index: 450;
    top: 0.875rem;
    left: calc(16rem + 1.75rem);
    right: calc(12.5rem + 1.75rem);
    max-width: none;
    margin: 0 auto;
  }
}

/* The tail, and the way back. Marked so it reads as a count of what is folded
   away rather than as another status. */
.chip--more {
  border-style: dashed;
  color: var(--ink-faint);
}

.chip--more:hover {
  color: var(--ink);
}

.chipbar__label {
  font-size: var(--t-sm);
  color: var(--ink-faint);
  margin-right: 0.15rem;
  flex: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  appearance: none;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.chip i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}

.chip b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.chip[aria-pressed="true"] b {
  color: var(--paper);
}

/* Leaflet defaults to a UI font stack; keep it on ours. */
.leaflet-container {
  font-family: var(--sans);
  font-size: var(--t-xs);
}

.leaflet-control-attribution {
  font-family: var(--sans);
  font-size: var(--t-xs);
  background: rgb(255 255 255 / 0.82);
}

/* Zoom, scale and attribution all sit bottom-right, which is where the right
   rail is. They were rendering on top of the operator list — the zoom control
   at x=1236 against a rail whose left edge is x=1066. Stand them off by the
   rail's width so the two stop sharing a column.

   The mobile rule below moves them again: there the rail is a bottom sheet and
   the right-hand side is free. */
.leaflet-bottom.leaflet-right {
  right: 13.375rem;
}

/* --------------------------------------------------------------- panels --- */

/* Stacked columns of panels down each side, so panels never collide with each
   other or with Leaflet's own controls. */
.rail {
  position: absolute;
  z-index: 450;
  top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-height: calc(100% - 1.75rem);
  /* max-height without an overflow rule is a promise the layout does not keep:
     the box stops growing and the content carries on past the viewport. At
     county level the right rail wants 1,154px inside 640, and the Map panel —
     basemap, opacity, the colour-vision toggle — ends up somewhere below the
     fold with no way to reach it.

     This is the holding fix. The rail is the wrong home for a scope's whole
     reading, and the report layout is what actually solves it. */
  overflow-y: auto;
  /* overflow-y alone would clip the panels' shadows against the sides, since
     a scroll container cannot keep overflow-x visible. */
  padding-inline: 0.375rem;
  margin-inline: -0.375rem;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  pointer-events: none;
}

.rail > * {
  pointer-events: auto;
}

.rail--left {
  left: 0.875rem;
  width: 16rem;
}

.rail--right {
  right: 0.875rem;
  width: 12.5rem;
}

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.panel__title {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

/* Context, top of the left rail */

.panel--context {
  padding: 0.75rem 0.875rem;
}

.panel--context p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--t-xs);
}

/* The ladder back up. Replaces the static description, which the crumbs say
   better — "United States › Texas › Midland" is the subtitle. */
/* The path, and the only way back up the ladder. It was 0.75rem — smaller than
   every label around it — which made the primary navigation the least visible
   thing in its own panel. It is the first item there now that the section title
   has moved to the masthead, so it gets the size that implies. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.4rem;
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--ink-soft);
  margin-top: 0;
}

.crumbs button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

.crumbs button:hover {
  color: var(--ink);
}

.crumbs__sep {
  color: var(--ink-faint);
}

.crumbs__here {
  color: var(--ink);
  font-weight: 600;
}

.crumbs__sep {
  color: var(--ink-faint);
  font-weight: 400;
}

/* An author display value outranks the UA rule for [hidden], so say it here. */
.placeholder-flag[hidden] {
  display: none;
}

.placeholder-flag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid #d8c48a;
  background: #fdf6e3;
  color: #7a5c12;
  border-radius: 2px;
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Controls, top right */

.panel--controls {
  padding: 0.75rem 0.875rem 0.875rem;
}

.control + .control {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule-soft);
}

/* The measure control sits under the key it selects; unit follows it, the
   same question one step on, so they stack without a divider. */
.segmented--measure {
  margin-top: 0.6rem;
}

.segmented--unit {
  margin-top: 0.4rem;
}

/* Under the measure, with the fills it governs. */
.control--fill {
  margin-top: 0.5rem;
}

/* Below the national view there is no state alternative to offer, so the
   control leaves rather than sitting there dead. */
.segmented--unit[hidden] {
  display: none;
}

/* Basemap and opacity, always in reach. They collapsed under a disclosure
   as set-once settings, and were reached for constantly. */
.panel--map-options {
  padding: 0.625rem 0.875rem 0.75rem;
}

.panel--map-options .control:first-of-type {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.segmented label {
  position: relative;
  text-align: center;
  padding: 0.3rem 0.25rem;
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-soft);
  background: #fff;
  transition: background 0.12s, color 0.12s;
}

.segmented label + label {
  border-left: 1px solid var(--rule);
}

/* Hidden visually but still focusable and hit-testable, so keyboard and
   assistive tech reach the control the same way a pointer does. */
.segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented label:hover {
  background: #f3f4f6;
}

.segmented input:checked + span {
  color: var(--ink);
  font-weight: 600;
}

.segmented label:has(input:checked) {
  background: #eceef1;
}

.segmented input:focus-visible + span {
  outline: 2px solid #3b4994;
  outline-offset: 2px;
}

.stack {
  display: grid;
  gap: 0.25rem;
}

.stack label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--ink-soft);
}

.stack label:hover {
  color: var(--ink);
}

.stack input {
  accent-color: #3b4994;
  margin: 0;
}

.control__label {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
  font-weight: 400;
}

/* Beside its slider rather than above it: one row where there were two. */
.control__label--inline {
  margin: 0;
  flex: none;
}

/* The register's own record. The one link on the page that leaves the site,
   so it is allowed to look like a link. */
.sources {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.sources__link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sources__when {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
}

.sources__note {
  margin: 0.2rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--ink-faint);
  font-weight: 400;
}

/* Marks a name the importer rebuilt from an identifier. Quiet, because it
   qualifies the name rather than competing with it. */
.op-approx {
  color: var(--ink-faint);
  cursor: help;
}

.control__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--ink-soft);
}

.control__check:hover {
  color: var(--ink);
}

.control__check input {
  accent-color: #3b4994;
  margin: 0;
}

/* Says what the toggle does rather than making the reader turn it on to find
   out. Sized down because it is a footnote to the control, not a second one. */
.control__note {
  margin: 0.35rem 0 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink-faint);
  font-weight: 400;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-row input[type="range"] {
  flex: 1;
  accent-color: #3b4994;
  min-width: 0;
}

.slider-row output {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--ink-faint);
  width: 2.5rem;
  text-align: right;
}

/* Legend, bottom left */

/* The legend sits at the top of the controls panel, and the measure control
   directly under it: the key and the control that changes it are one thing. */
.legend {
  margin-bottom: 0;
}

/* Turned on its corner so "most of both" reads at the top, which is the cell
   everyone looks for first. Oil increases up the right edge, gas up the left.
   Geometry lives in the SVG; this only sizes and colours it. */
.bivariate {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.1rem 0 0.2rem;
  overflow: visible;
}

/* currentColor feeds the arrowheads, which are markers and inherit nothing else. */
.bivariate__axis {
  color: var(--ink-soft);
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

.bivariate__label {
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 400;
  fill: var(--ink-soft);
}

/* Five equal columns of whatever the panel allows: at 2.25rem each the five
   ran 8 px past the rail's edge. */
.ramp-legend__swatches {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 0.85rem;
}

.ramp-legend__ticks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  margin-top: 0.2rem;
  font-weight: 400;
}

.ramp-legend__ticks span {
  transform: translateX(-50%);
  white-space: nowrap;
}

.ramp-legend__ticks span:first-child {
  transform: none;
}

/* These say what the map is not claiming, which matters as much as what it is.
   They were grey on grey at 11px, which read as a footnote. */
.legend-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--ink-faint);
  font-weight: 400;
}

.legend-note i {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--rule);
  flex: none;
}

.legend-note--tight {
  margin-top: 0.3rem;
  padding-top: 0;
  border-top: 0;
}

/* Outside the release: the map shows the basemap, so the swatch shows nothing. */
.swatch-empty {
  background: transparent;
  border-style: dashed;
}

/* Readout, below the context panel */

.panel--readout {
  padding: 0.75rem 0.875rem 0.875rem;
}

/* The path as a column. Each rung a line; the ones above the subject small
   and clickable, the way back up. */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* One track no wider than the panel: an auto track sizes itself to the
     widest line, and a name that must not wrap then widens the column past
     the rail instead of being cut. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
}

.ladder__rung {
  min-width: 0;
}

.ladder__rung button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

.ladder__rung button:hover {
  color: var(--ink);
}

.ladder__rung--here {
  margin-top: 0.3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* A well's name is an identifier — "RADEMACHER SOUTH 12-34-5-67 1H" — and
   at the place size it was cut off almost at once. A size down, and up to
   two lines, so it can be read whole. */
.ladder__rung--well .readout__name {
  font-size: var(--t-lg);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* On desktop the readout's column is the path; the strip at the top of the
   rail is for the phone, where the readout is a sheet that peeks and the
   path has to stay in sight above the map. */
@media (min-width: 40.0625rem) {
  .panel--context {
    display: none;
  }
}

/* The largest type on the map: this is where the ladder is standing, and it
   was the smallest thing on the page. On hover the same column carries what
   is pointed at, so only the facts come and go beneath it. */
.readout__name {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  /* One line, whatever the name: a wrap would move every row beneath it. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readout__where {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0.1rem 0 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* What kind of thing the name below is. The page was full of names with
   nothing saying which were counties and which were fields, and position in
   the breadcrumb is no clue if you arrived by link. */
.readout__kind {
  margin: 0 0 0.05rem;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* The well, under the place it is in. The rule that sets it apart is the
   list's own top rule, so a well's rows and a place's start at the same
   height under the same header. */
.readout__well {
  margin: 0;
}



/* One list, one technique.
   Label left, value right, one size, one alignment. The rule marks a change of
   subject — counts to volumes — rather than a change of presentation. */
.facts {
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
  display: grid;
  /* As the ladder's: a row holds a value that does not wrap, and the track
     must not grow to fit it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.05rem;
}

/* Tighter than the panel's body text: eight of these and the header set the
   map's raised height, since the panel must fit inside it on hover. */
.facts__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.08rem 0;
  line-height: 1.35;
  min-width: 0;
}

.facts dt {
  flex: none;
}

.facts__row--rule {
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule-soft);
}

.facts dt {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.facts dd {
  margin: 0 0 0 auto;
  /* Operator names run long — "KERR MCGEE OIL & GAS ONSHORE LP" in a 16rem
     panel — so a value is cut with an ellipsis rather than wrapped: a wrap
     would move every row beneath it, and the full name is in the report. */
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.facts dd small {
  margin-left: 0.25rem;
  color: var(--ink-soft);
}

.readout__figures {
  display: grid;
  gap: 0.35rem;
}

.readout__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.35rem;
}

.readout__label {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 400;
}

.readout__value {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: var(--t-sm);
  white-space: nowrap;
  color: var(--ink);
}

.readout__value small {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: var(--t-xs);
  margin-left: 0.15rem;
}

.readout__hint {
  margin: 0.4rem 0 0;
  color: var(--ink-faint);
  font-size: var(--t-sm);
  font-weight: 400;
}

/* -------------------------------------------------------------- mobile --- */

/* The sheet is empty and inert on a wide screen; JS moves the readout and
   legend into it below the breakpoint. */
.sheet {
  display: none;
}

.context__controls-toggle {
  display: none;
}

@media (max-width: 40rem) {
  /* --- top bar: the breadcrumb is the only way back up on touch, so it stays
     visible at all times rather than living in a panel that can be collapsed. */
  .rail--left {
    right: 0.875rem;
    width: auto;
  }

  .panel--context {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
  }

  .crumbs {
    margin-top: 0;
    flex: 1;
    min-width: 0;
  font-size: var(--t-md);
  color: var(--ink-soft);
}

  .placeholder-flag {
    margin-top: 0;
    flex: none;
  font-size: var(--t-xs);
  font-weight: 400;
}

  .context__controls-toggle {
    display: block;
    flex: none;
    appearance: none;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: #fff;
    padding: 0.35rem 0.65rem;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
  }

  .explorer.controls-open .context__controls-toggle {
    background: #eceef1;
    color: var(--ink-soft);
  }

  /* --- controls: off screen until asked for --- */
  .rail--right {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 70dvh;
    overflow-y: auto;
    padding: 0.75rem 0.875rem calc(0.875rem + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 20px rgb(22 24 28 / 0.12);
    z-index: 1110;
    transform: translateY(100%);
    transition: transform 0.18s ease-out;
    /* The rail is click-through on desktop so it never blocks the map. As a
       full-width sheet it has to catch its own taps, or they land on counties
       underneath it. */
    pointer-events: auto;
  }

  .explorer.controls-open .rail--right {
    transform: translateY(0);
  }

  .rail--right .panel {
    border: 0;
    box-shadow: none;
    background: none;
  }

  /* --- the sheet: readout peeking, legend behind the grab handle --- */
  .sheet {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: var(--panel);
    border-top: 1px solid var(--rule);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgb(22 24 28 / 0.12);
    padding-bottom: env(safe-area-inset-bottom);
    max-height: 60dvh;
    overflow-y: auto;
  }

  .sheet__grab {
    display: block;
    width: 100%;
    appearance: none;
    border: 0;
    background: none;
    padding: 0.5rem 0;
    cursor: pointer;
  }

  .sheet__grab::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.25rem;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--rule);
  }

  .sheet .panel {
    border: 0;
    box-shadow: none;
    background: none;
    border-radius: 0;
  }

  .sheet .panel--readout {
    padding: 0 0.875rem 0.875rem;
  }

  /* The legend is reference rather than reading, so it waits behind the handle
     — but it is reachable, which beats being hidden outright as it was. */
  .sheet .legend {
    position: static;
    display: none;
    padding: 0.875rem;
    border-top: 1px solid var(--rule-soft);
  }

  .sheet.is-open .legend {
    display: block;
  }

  /* Only one sheet at a time. Both rise from the same edge, so showing the
     readout underneath the controls just stacks two panels on one another. */
  .explorer.controls-open .sheet {
    transform: translateY(100%);
  }

  .sheet {
    transition: transform 0.18s ease-out;
  }

  /* Clear of the collapsed sheet. Expanding a sheet covers the attribution,
     which is how every map app behaves — it is present and visible at rest.
     The right edge is free here, so the desktop stand-off is given back. */
  .leaflet-bottom.leaflet-right {
    bottom: 4.5rem;
    right: 0;
  }
}

/* ----------------------------------------------------------- basemap ------ */
/* OSM's own tiles, desaturated here rather than fetched pre-styled. Slightly
   lifted and softened so the choropleth sits on top of it rather than competing
   — the basemap is context, and at a well pad it is the whole point. */

.tiles--grey {
  filter: grayscale(1) brightness(1.06) contrast(0.92);
}

/* ------------------------------------------------------------- sparkline -- */
/* Sits directly under the figure it belongs to, indented to the value column so
   the eye reads number-then-shape as one item. No axis and no labels: at this
   size a gridline is noise, and the two marks carry the reading. */

.spark {
  display: block;
  width: 100%;
  height: 1.25rem;
  margin: 0.05rem 0 0.4rem;
  overflow: visible;
}

.spark__area {
  fill: currentColor;
  /* The axis tops are mid-tones rather than darks, so the fill needs a little
     more weight than it would under a heavier ink to read at 20 px. */
  opacity: 0.22;
}

.spark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  /* The viewBox is stretched to the panel width, so an ordinary stroke would
     stretch with it and read thicker than it is. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.spark__peak {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.spark__now {
  fill: currentColor;
}

/* Colour is set inline from OIL_RAMP / GAS_RAMP — the same constants the legend
   draws its axes from — so a change to the palette reaches both at once. */

/* ------------------------------------------------------- well composition -- */
/* The status mix of the focused field, in the panel the production key uses
   elsewhere. It informs when untouched and winnows when clicked, so no separate
   filter control exists. */

.composition__bar {
  display: flex;
  height: 0.7rem;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.composition__denominator {
  margin: 0.15rem 0 0.5rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-faint);
  font-weight: 400;
}

.composition__denominator b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.composition__band--static {
  display: block;
  cursor: default;
}

.composition__row--static {
  cursor: default;
}

.composition__row--static:hover {
  color: var(--ink-soft);
}

.panel__title--spaced {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-soft);
}

.composition__band {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.12s;
}

.composition__band:hover {
  opacity: 0.75;
}

.composition__key {
  display: grid;
  gap: 0.2rem;
}

.composition__row {
  display: grid;
  grid-template-columns: 0.65rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  appearance: none;
  border: 0;
  background: none;
  padding: 0.1rem 0;
  font: inherit;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}

.composition__row:hover {
  color: var(--ink);
  background: var(--rule-soft);
}

.composition__row[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
}

/* A row that filters has to look like it does.
   A coloured dot beside a label reads as a legend key, and a legend key is not
   something anyone thinks to click — so where the rows are controls they get a
   box, a hover ground and a pressed state, and the list says so above itself. */
.composition__key--control .composition__row {
  padding: 0.2rem 0.4rem;
  margin-inline: -0.4rem;
  border-radius: 3px;
  border: 1px solid transparent;
}

.composition__key--control .composition__row:hover {
  border-color: var(--rule);
}

.composition__key--control .composition__row[aria-pressed="true"] {
  background: var(--rule-soft);
  border-color: var(--rule);
}

.composition__key--control .composition__row[aria-pressed="true"]::after {
  content: "×";
  position: absolute;
  right: 0.45rem;
  color: var(--ink-faint);
  font-weight: 400;
}

.composition__key--control .composition__row {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink);
}

.composition__hint {
  margin: 0.15rem 0 0.4rem;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
}

.composition__swatch--square {
  border-radius: 1px;
}

.composition__swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}

.composition__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--ink);
}

.composition__note {
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--ink-faint);
  font-weight: 400;
}

/* Operator tenure. Three columns so the dates line up and the eye can run down
   them; the filing count is what separates a real tenure from a one-month
   artefact, so it is present but quiet. */
.spans {
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.spans__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 400;
}

.spans__when {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

.spans__n {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  font-weight: 400;
}

/* Wells fade for the length of a zoom. A well's radius is in pixels, so no
   scaled version of it is correct — better absent than briefly wrong. Out fast
   so the swell never lands, back gently so it does not blink.

   No pointer events of their own: the well layer hit-tests from the map
   container in the capture phase, and a miss has to reach the field polygons
   beneath. A canvas that caught events here covered the whole map and kept
   every neighbouring field from being hovered or clicked while wells were
   drawn. */
.leaflet-overlay-pane canvas.well-canvas {
  pointer-events: none;
  transition: opacity 0.16s ease-out;
}

.leaflet-overlay-pane canvas.well-canvas.is-zooming {
  opacity: 0;
  transition-duration: 0.04s;
}

/* ---------------------------------------------------------------- trend --- */
/* A well's trailing windows as annual averages. Bars rather than numbers alone
   because the question is direction, and three numbers of different magnitudes
   do not answer it at a glance. */

.trend + .trend {
  margin-top: 0.7rem;
}

.trend__label {
  margin: 0 0 0.25rem;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.trend__label small {
  font-weight: 400;
  color: var(--ink-faint);
}

.trend__row {
  display: grid;
  grid-template-columns: 2.6rem 1fr 3.2rem;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 400;
}

.trend__track {
  height: 6px;
  background: var(--rule-soft);
  border-radius: 1px;
  overflow: hidden;
}

.trend__track i {
  display: block;
  height: 100%;
  background: var(--ink);
  opacity: 0.55;
}

.trend__rate {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------------------------------------------------------------- chart --- */
/* The reading, at the size of a reading. */

.report__section--wide {
  grid-column: 1 / -1;
}

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 0.5rem;
}

.measure__label {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

/* The number the section exists to report. Tabular so a column of them lines
   up, and large enough that it is read before the chart under it. */
.measure__value {
  margin: 0.1rem 0 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.measure__value small {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 0.3rem;
}

/* Plot and labels are separate: the SVG stretches, the type does not. */
.plot {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.4rem;
  font-family: var(--sans);
}

/* 5rem rather than 6.5: with the preview above and the strip between, the
   three charts and their span note fit the raised report on a 900 px window
   without a scroll, which is what the panel is for. On a 720 px window the
   rails set the map's height and the panel scrolls. */
.plot__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 5rem;
  font-size: var(--t-xs);
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.plot__area {
  position: relative;
}

.plot__area svg {
  display: block;
  width: 100%;
  height: 5rem;
}

.plot__fill {
  fill: currentColor;
  opacity: 0.15;
}

.plot__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.plot__grid line {
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.plot__peak,
.plot__now {
  position: absolute;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
}

.plot__peak {
  margin-bottom: -3.5px;
  border: 1.5px solid currentColor;
  background: var(--paper);
}

.plot__now {
  margin-bottom: -3.5px;
  background: currentColor;
}

.plot__years {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
}

/* ------------------------------------------------------------ operators --- */
/* Cards rather than a list. A name and a count says almost nothing; the status
   mix of the wells an operator holds is the thing that distinguishes one
   company in a field from another. */

.opcards {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.opcard {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--panel);
}

.opcard__name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}

.opcard__held {
  margin: 0.1rem 0 0;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 400;
}

.opcard__bar {
  display: flex;
  height: 7px;
  margin: 0.4rem 0 0.35rem;
  border-radius: 1px;
  overflow: hidden;
  background: var(--rule-soft);
}

.opcard__bar i {
  display: block;
  height: 100%;
}

.opcard__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 400;
}

.opcard__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.opcard__stat i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}

.opcard__stat b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Three volumes, one row. Label, figure, unit — the readout's technique, since
   this answers the same kind of question. */
.opcard__vol {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-right: 0.75rem;
  white-space: nowrap;
}

.opcard__vol b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.opcard__vol small {
  color: var(--ink-faint);
}

/* The folded tail of the status readings, marked like the chip bar's. */
.opcard__stat--rest {
  color: var(--ink-faint);
}

.opcard__vols {
  margin: 0.35rem 0 0;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
}

/* --------------------------------------------------------- constituents --- */
/* What the current scope contains. A plain table: the rows are the rung below
   and clicking one descends, so this is the way down the ladder that does not
   require finding a polygon. */

.clist__count {
  margin: 0.1rem 0 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
}

.clist__scroll {
  overflow-x: auto;
  max-height: 26rem;
  overflow-y: auto;
}

.clist {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--t-sm);
}

.clist thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  text-align: left;
  font-weight: 600;
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.clist th.num,
.clist td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.clist thead button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: var(--ink-soft);
  cursor: pointer;
}

.clist thead button:hover {
  color: var(--ink);
  text-decoration: underline;
}

.clist th[aria-sort="descending"] button::after {
  content: " \2193";
  color: var(--ink-faint);
}

.clist th[aria-sort="ascending"] button::after {
  content: " \2191";
  color: var(--ink-faint);
}

.clist thead small {
  font-weight: 400;
  color: var(--ink-faint);
}

.clist tbody td {
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.clist__row {
  cursor: pointer;
}

/* Lit by the pointer over the row, or by the pointer over its shape on the
   map — the same ground either way, since it is the same fact. */
.clist__row:hover td,
.clist__row--lit td,
.clist__row:focus-visible td {
  background: var(--rule-soft);
}

.clist__row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* A figure and the series it came from, in one cell: the number sorts, the
   shape is read. The sparkline is the readout's own, held to a fixed width so
   the column does not stretch with it. */
.clist__figure {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.clist__figure .spark {
  width: 4.5rem;
  height: 1rem;
  margin: 0;
  flex: none;
}

/* The well count with the status mix beneath it, coloured by family as the
   map is. The family columns' swatches are its key. */
.clist__wells {
  display: inline-block;
  min-width: 4.5rem;
  text-align: right;
}

.clist__mix {
  display: flex;
  height: 0.35rem;
  margin-top: 0.2rem;
  border-radius: 1px;
  overflow: hidden;
}

.clist__mix i {
  display: block;
  height: 100%;
}

.clist__swatch {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.3rem;
}

/* What the list is not showing. At the foot, because it is a consequence of
   the report's position rather than a label for the table. */
.clist__more {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* Someone who has asked for less motion gets the new size immediately. */
@media (prefers-reduced-motion: reduce) {
  .explorer {
    transition: none;
  }
}