/* /demos/backpressure-lab page chrome.
 *
 * Loaded only by this page, through Tags.PageCSS. Not a shell asset, so sw.js's
 * CACHE_VERSION has nothing to say about it — the ?v= in PageCSSHref is the
 * whole cache-busting story, and it is served with a 30-day max-age.
 *
 * COLORS ARE CURRENTCOLOR AND TWO ACCENTS. The shell owns the palette and this
 * page has a light and a dark theme to survive, so everything structural is
 * drawn from the inherited text color at reduced opacity rather than from a
 * hard-coded gray that reads as invisible in one of the two.
 */

.bpl__lede {
  max-width: 62ch;
}

.bpl__where,
.bpl__reading {
  max-width: 62ch;
  margin: 1.5rem 0;
}

.bpl__where h2,
.bpl__reading h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.bpl__reading li {
  margin-bottom: 0.5rem;
}

.bpl__panel {
  margin: 1.5rem 0;
  max-width: 62ch;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 6px;
  padding: 1rem;
}

.bpl__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}

.bpl__field {
  display: flex;
  flex-direction: column;
  min-width: 8rem;
  flex: 1 1 8rem;
}

.bpl__field--wide {
  flex: 1 1 100%;
}

.bpl__field label {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.bpl__field input,
.bpl__field select {
  padding: 0.35rem 0.5rem;
  font: inherit;
  border: 1px solid rgba(128, 128, 128, 0.55);
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

.bpl__policy-note {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0.4rem 0 0;
}

.bpl__actions {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 100%;
}

/* THE BUTTON RULE THAT USED TO LIVE HERE IS GONE. The two action buttons now
   carry the shared btn / btn-primary / btn-ghost classes from css.css, which
   already own padding, radius, type and the theme tokens. A page-scoped rule
   restating any of that would not merely duplicate it — it had the SAME
   specificity as .btn-primary and this sheet loads after css.css, so it won the
   cascade, and adding the class to the markup while leaving it here would have
   changed nothing on screen.

   [hidden] IS RE-ASSERTED, and it is not boilerplate — it is the one thing the
   shared class breaks. .btn sets a display, the UA's `[hidden] { display: none }`
   is a USER-AGENT rule, and any author rule beats a user-agent one whatever the
   specificity. Measured on the live site before this change: setting `hidden` on
   an existing .btn left display at `block`, not `none`. The page script toggles
   BOTH of these buttons through their .hidden property, so without this the Run
   it button would stay on screen for the whole session it started. No
   !important is needed — this selector ties with .btn on specificity and wins on
   source order, because this sheet loads second. */
[hidden] {
  display: none;
}

.bpl__capacity,
.bpl__status {
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}

.bpl__status {
  opacity: 0.85;
}

.bpl__clamps {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  border-left: 3px solid #b4531f;
}

.bpl__readout {
  margin-top: 1.25rem;
}

.bpl__queue-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.bpl__queue-head strong {
  font-size: 1.4rem;
}

.bpl__queue-cap {
  opacity: 0.7;
}

.bpl__queue-bar {
  height: 10px;
  border: 1px solid rgba(128, 128, 128, 0.55);
  border-radius: 5px;
  overflow: hidden;
  margin: 0.35rem 0;
}

.bpl__queue-fill {
  display: block;
  height: 100%;
  width: 0;
  background: currentColor;
  opacity: 0.55;
}

.bpl__spark {
  width: 100%;
  height: 60px;
  display: block;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 4px;
}

.bpl__spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.bpl__spark-caption {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0.3rem 0 0;
}

/* THE CONTRAST PAIR. Two tiles, side by side, always both present: one of them
 * is structurally zero for any policy and which one it is IS the policy, so a
 * layout that collapsed the empty one would take the comparison away. */
.bpl__contrast {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.bpl__tile {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

.bpl__tile--stall {
  border-left: 3px solid #2f6f4f;
}

.bpl__tile--shed {
  border-left: 3px solid #b4531f;
}

.bpl__tile-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.bpl__tile-value {
  font-size: 1.6rem;
  line-height: 1.2;
}

.bpl__tile-sub {
  font-size: 0.8rem;
  opacity: 0.75;
}

.bpl__verdict {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

.bpl__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0 0;
}

.bpl__stats div {
  min-width: 6rem;
}

.bpl__stats dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  font-weight: normal;
}

.bpl__stats dd {
  margin: 0;
  font-size: 1.15rem;
}

.bpl__footnote,
.bpl__provenance {
  font-size: 0.85rem;
  opacity: 0.85;
  max-width: 62ch;
}

.bpl__footnote {
  margin: 1rem 0 0;
}

@media (max-width: 640px) {
  .bpl__field {
    flex: 1 1 100%;
  }
}