/* ══════════════════════════════════════════════════════════════════
   SECTION B — THE VALUATION COLUMN
   Loaded only by valuation.html. The shared system lives in styles.css;
   these are the rules no other section needs. The spread figure is the
   one bold object on the page; everything around it stays quiet.
   ══════════════════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.spread { padding: 30px 0 8px; }
.spread-intro { max-width: 62ch; }

.spread-figure { margin: 26px 0 0; }

/* The readout sits ABOVE the strip and never moves — a fixed caption reads
   like print and needs none of the positioning a floating tooltip does. */
.spread-readout {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 2.6em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.readout-label,
.terms-list dt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.readout-label { white-space: nowrap; }
.readout-body {
  font-family: var(--serif-display);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.readout-body b { font-weight: 700; }
.readout-body .cheap,
.spread-finding .cheap { color: var(--up); }
.readout-body .dear,
.spread-finding .dear  { color: var(--down); }

.spread-frame { position: relative; margin-top: 14px; }

#spread-strip {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 200px);
  cursor: crosshair;
}
/* One orchestrated moment: the field prints left to right on load, the way the
   ranking itself reads — cheapest first. */
#spread-strip .field {
  animation: press 1.1s cubic-bezier(.3,.7,.2,1) both;
  animation-delay: .45s;
}
@keyframes press {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Axis labels are HTML, not SVG <text>: the strip stretches to fit its frame
   and would drag the lettering out of proportion with it. */
.spread-axis {
  position: relative;
  height: 4.6rem;
  margin-top: 2px;
}
.axis-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  max-width: 46vw;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.axis-mark.at-start { transform: translateX(0); text-align: left; }
.axis-mark.at-end   { transform: translateX(-100%); text-align: right; }
.axis-mark.anchor { color: var(--ink-soft); font-weight: 700; }
.axis-mark.void   { color: var(--oxblood); font-weight: 700; }
/* Own tier, clear of the glosses above it: the median lands close enough to
   fair value to overprint it. */
.axis-mark.median {
  color: var(--gold);
  font-weight: 700;
  /* rem, not em: the mark's own font is .58rem, so an em offset lands inside
     the gloss above rather than below it. */
  top: 2.7rem;
}
.axis-mark em {
  display: block;
  font-family: var(--serif-text);
  font-style: italic;
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 3px;
}

.spread-finding {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  font-family: var(--serif-display);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 300;
  line-height: 1.35;
  max-width: 46ch;
}
.spread-finding b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Terms ── */
.terms { padding: 34px 0 10px; }
.terms-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0 30px;
  border-top: 1px solid var(--ink);
}
.term {
  padding: 16px 22px 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.term:nth-child(odd) { border-right: 1px solid var(--rule-soft); padding-right: 28px; }
.term:nth-child(even) { padding-left: 28px; }
.terms-list dt { margin-bottom: 6px; }
.terms-list dd { font-size: .96rem; line-height: 1.5; color: var(--ink-soft); }
.terms-list dd b { color: var(--ink); font-weight: 600; }

.terms-models {
  columns: 2;
  column-gap: 46px;
  column-rule: 1px solid var(--rule-soft);
}
.terms-models p {
  break-inside: avoid;
  margin-bottom: 14px;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.run-in {
  font-family: var(--serif-display);
  font-weight: 700;
  color: var(--ink);
}
.run-in::after { content: ' — '; font-weight: 400; color: var(--ink-faint); }

/* Between phone and desktop the glosses still fit, but only just. */
@media (max-width: 1080px) {
  .axis-mark em { font-size: .66rem; }
}

@media (max-width: 720px) {
  .terms-list { grid-template-columns: 1fr; }
  .term:nth-child(odd) { border-right: none; padding-right: 0; }
  .term:nth-child(even) { padding-left: 0; }
  .terms-models { columns: 1; }
  .spread-readout { min-height: 3.6em; }
  /* The italic glosses do not fit a phone and collide with each other. The
     short marks still carry the scale. */
  .axis-mark em { display: none; }
  .axis-mark { font-size: .54rem; letter-spacing: .06em; }
  .axis-mark.median { top: 1.4rem; }
  .spread-axis { height: 3rem; }
  #spread-strip { height: 190px; }
  /* Let the filter box take the width that is left instead of forcing its own. */
  .search-input { min-width: 0; flex: 1 1 150px; }
}

@media (prefers-reduced-motion: reduce) {
  #spread-strip .field { animation: none; }
}