/* analysis.css — the /analysis page: the group toggle and the bars.

   Layered on top of styles.css + book.css + methodology.css, the same stack the
   methodology page uses; only what is new to this page lives here. A bar is a
   div with a width (no chart library ships on this site), so all of this is
   flexbox and one background colour. */

/* ---------------------------------------------------------------- totals */
.an-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 0 22px;
}
.an-totals div {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 140px;
}
.an-totals dt {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.an-totals dd {
  margin: 2px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- the toggle */
.an-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  padding: 5px;
  /* the strip is as wide as its buttons, not as wide as the page */
  width: fit-content;
  max-width: 100%;
}
.an-seg button {
  /* a transparent border, not none: the selected state adds a real one and the
     row must not jog sideways when the selection moves. */
  border: var(--border-w) solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.an-seg button:hover { color: var(--ink); }
.an-seg button.is-on {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  border-color: var(--hairline-strong);
}

.an-axis {
  margin: 14px 0 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- the bars */
.an-bars {
  list-style: none;
  margin: 0;
  padding: 0;
}
.an-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
.an-label {
  flex: 0 0 auto;
  width: 108px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
.an-track {
  flex: 1 1 auto;
  /* min-width: 0 keeps the flex item from refusing to shrink below its
     content width — the classic phone-overflow trap in a row like this. */
  min-width: 0;
  height: 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.an-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  border-radius: var(--radius-pill);
  transition: width 0.35s ease;
}
.an-value {
  flex: 0 0 auto;
  width: 62px;
  text-align: right;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.an-error {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 480px) {
  .an-totals { gap: 8px 14px; }
  .an-totals div { padding: 8px 12px; min-width: 0; flex: 1 1 auto; }
  .an-totals dd { font-size: 1.15rem; }
  .an-seg { width: 100%; }
  .an-seg button { flex: 1 1 auto; padding: 8px 10px; font-size: 0.82rem; }
  /* wide enough for the longest bucket label ("Afternoon · 2–6") to stay
     on one line at 360px; the track keeps whatever is left. */
  .an-label { width: 104px; font-size: 0.78rem; }
  .an-value { width: 54px; font-size: 0.8rem; }
  .an-bar { gap: 8px; }
}

/* ============================================================ key predictors
   (hkz-45) One row per model term: a label, a bar that diverges from a centre
   line because the SIGN is the point, the effect in dB(A), and a word saying
   whether it can be told apart from zero. A not-significant row is drawn hollow
   — the number is still printed, but nothing about it should read as solid. */
.an-caveat {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.an-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.an-legend-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.an-plist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.an-p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
/* These labels are sentences ("Farther from an elevated train"), not one-word
   borough names, so they get a wider column than the hours bars do. */
.an-p .an-label { width: 200px; }
/* An interval plot, not a bar chart. Every row shares one linear scale that
   always contains zero (set in analysis.js), so the zero rule lands at the same
   x on every row and "does this interval touch the line" is answerable by eye.
   No overflow:hidden — the dot sits on the track edge and must not be clipped. */
.an-ptrack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
}
/* the rail the interval is drawn on, so an empty row still reads as an axis */
.an-ptrack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: var(--hairline);
}
/* ZERO. The reference the whole section is about, so it is the one line drawn
   full height and in ink rather than hairline grey. */
.an-pzero {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink-soft);
  opacity: 0.55;
}
/* the 95% interval */
.an-pci {
  position: absolute;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 2.5px;
  /* hollow by default: an effect we cannot distinguish from zero gets an
     outline, not a solid block of brand colour. */
  background: transparent;
  border: var(--border-w) solid var(--hairline-strong);
}
.an-p.is-sig .an-pci {
  background: var(--brand);
  border-color: var(--brand);
  opacity: 0.35;
}
/* the estimate itself */
.an-pdot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--hairline-strong);
}
.an-p.is-sig .an-pdot {
  background: var(--brand);
  border-color: var(--brand);
}
/* the legend's miniature of the same marks */
.an-legend-key {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 10px;
  vertical-align: middle;
}
.an-legend-key .an-pci {
  left: 0;
  width: 100%;
  background: var(--brand);
  border-color: var(--brand);
  opacity: 0.35;
}
.an-legend-key .an-pdot {
  left: 50%;
  background: var(--brand);
  border-color: var(--brand);
}
.an-legend-key-zero { width: 10px; }
.an-legend-key-zero .an-pzero { left: 50%; }
.an-pvalue {
  flex: 0 0 auto;
  width: 74px;
  text-align: right;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.an-p.is-sig .an-pvalue { color: var(--ink); }
.an-psig {
  flex: 0 0 auto;
  width: 62px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  text-align: center;
  white-space: nowrap;
}
.an-p.is-sig .an-psig,
.an-psig.is-sig {
  color: var(--brand);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.an-legend .an-psig { width: auto; flex: 0 0 auto; }

.an-summary {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  /* At 390px the four-column row does not fit, so the label takes its own line
     above the bar and the numbers sit under it — nothing is dropped. */
  .an-p {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "label label label" "track value sig";
    gap: 4px 8px;
    padding: 7px 0;
  }
  .an-p .an-label { grid-area: label; width: auto; font-size: 0.82rem; }
  .an-ptrack { grid-area: track; }
  .an-pvalue { grid-area: value; width: 66px; font-size: 0.82rem; }
  .an-psig { grid-area: sig; width: auto; font-size: 0.68rem; padding: 3px 7px; }
}

/* ============================================================
   HELD-OUT CALIBRATION (the third block)

   Deliberately the same vocabulary as the predictor plot above — a range, a
   filled dot, a fixed reference mark — so a reader who has learned to read one
   can read the other. What differs is the axis: this one is pinned to the full
   0 to 100 score rather than fitted to the data, because a calibration chart on
   a zoomed axis flatters the model by hiding the range it never reaches.
   ============================================================ */
.an-clist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an-c {
  display: flex;
  align-items: center;
  gap: 12px;
}
.an-c .an-clabel {
  flex: 0 0 auto;
  width: 96px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.an-ctrack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
}
.an-ctrack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: var(--hairline);
}
/* the middle half of what was actually measured */
.an-cband {
  position: absolute;
  top: 50%;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 3.5px;
  background: var(--brand);
  opacity: 0.3;
}
/* the measured median */
.an-cmed {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--brand);
}
/* what the model predicted: a tick, not a dot, so it never reads as another
   measurement — it is the claim the measurements are being judged against */
.an-cpred {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  opacity: 0.75;
}
.an-c .an-cvalue {
  flex: 0 0 auto;
  width: 40px;
  text-align: right;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.an-legend-key-pred { width: 10px; }
.an-legend-key-pred .an-cpred { left: 50%; }
.an-legend-key .an-cband { left: 0; width: 100%; }
.an-legend-key-med { width: 10px; }
.an-legend-key-med .an-cmed { left: 50%; }

@media (max-width: 640px) {
  .an-c { gap: 8px; }
  .an-c .an-clabel { width: 68px; font-size: 0.8rem; }
  .an-c .an-cvalue { width: 32px; }
}
/* A bin clipped at the score floor: square the open end and fade it, so it does
   not read as a measured boundary the way a rounded cap does. */
.an-c.is-clipped .an-cband {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), #000 18%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), #000 18%);
}

/* ============================================================
   KEY EVENTS (the fourth block, hkz-46)

   The one block on this page with NO TRACK. Every other section compares
   quantities in a single unit, so a bar earns its place; these rows are honks
   beside minutes over three different thresholds, and a shared axis would
   assert a comparability that does not exist. So: a label on the left, a number
   on the right, and nothing between them. `tabular-nums` is what does the work a
   bar would have done — the digits line up down the column, so the eye can still
   read the numbers against each other without the layout claiming they are the
   same kind of thing.
   ============================================================ */
.an-elist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.an-e {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.an-e:last-child {
  border-bottom: 0;
}
.an-elabel {
  flex: 1 1 auto;
  /* the classic phone-overflow trap in a two-column row: without this the
     label refuses to shrink below its longest word-run and pushes the number
     off the right edge. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.an-ename {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
/* Each row's OWN denominator. It is smaller than the label but it is not a
   footnote: for four of these five rows the hours at the top of the page are
   the wrong number to divide by. */
.an-eexp {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.an-evalue {
  flex: 0 0 auto;
  width: 82px;
  text-align: right;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .an-e { gap: 10px; }
  .an-ename { font-size: 0.84rem; }
  .an-eexp { font-size: 0.72rem; }
  .an-evalue { width: 64px; font-size: 1.1rem; }
}