/* [ssr_listing_history] — Listing history. Design 14a (ledger) and 14b (timeline).
   Ported 2026-09-08 from the Additional CSS block FluentSnippet 155 relies on; the rules are the
   same with three changes: classes are .ssr-history__* so the two stylesheets cannot touch each
   other's markup, every global token is aliased locally with a literal fallback, and the mobile
   switch is 767px like the rest of the page. The section chrome at the top is new. */

.ssr-history {
  --hs-ink:      var(--text-on-light, #2f2e30);
  --hs-muted:    var(--text-on-light-muted, #6f6d73);
  --hs-dark:     var(--charcoal-700, #414042);
  --hs-gap-ink:  var(--charcoal-500, #6f6d73);   /* "20 days later" — the doc's charcoal-400 is 3.28:1 at 12px */
  --hs-node:     var(--charcoal-300, #b3b1b6);
  --hs-band:     var(--charcoal-200, #d6d5d8);
  --hs-border:   var(--border-on-light, #d6d5d8);
  --hs-line:     var(--charcoal-100, #ececed);
  --hs-surface:  var(--surface-light, #fff);
  --hs-now:      var(--accent-brand-strong, #8fa317); /* the one sanctioned green accent */
  --hs-link:     var(--text-link, #0a3a5c);
  --hs-focus:    var(--state-focus-ring, #ff5a5f);
  --hs-pill:     var(--radius-pill, 999px);
  --hs-display:  var(--font-display, Outfit, system-ui, sans-serif);
  --hs-body:     var(--font-body, 'Public Sans', system-ui, sans-serif);
  --hs-ease:     var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
  --hs-dur:      var(--duration-base, 200ms);
  --hs-max:      var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */

  /* Badge tones. brand/cta match about.css; success/warning are 14d's, with the foreground
     darkened so the 12px uppercase label clears WCAG AA on its own fill
     (#3fae6c on #e4f6ea = 2.50:1 -> #2d7c4d = 4.55:1; #93701f on #fbeed2 = 3.99:1 -> #7a5c14 = 5.42:1). */
  --hs-badge-brand-bg:   var(--green-100, #f4fad1);
  --hs-badge-brand-fg:   var(--accent-brand-strong, #8fa317);
  --hs-badge-cta-bg:     var(--coral-100, #ffe4e5);
  --hs-badge-cta-fg:     var(--coral-700, #c92e34);
  --hs-badge-success-bg: #e4f6ea;
  --hs-badge-success-fg: #2d7c4d;
  --hs-badge-warning-bg: #fbeed2;
  --hs-badge-warning-fg: #7a5c14;

  display: block;
  background: var(--hs-surface);
  padding: 64px 24px;
  font-family: var(--hs-body);
  color: var(--hs-ink);
}

/* wpautop wraps runs of inline elements in <p> and leaves a stray </p> after the collapse
   checkbox, which the parser turns into an empty paragraph. The paragraphs it injects carry no
   class; this section's own (.ssr-history__date, __row, __gap, __lhead, __source, __none) all
   do and keep their rules — no per-class restore needed. */
.ssr-history p:not([class]) { display: contents; margin: 0; padding: 0; }
.ssr-history p:empty { display: none; }

.ssr-history__inner {
  max-width: var(--hs-max);
  margin-inline: auto;
}

/* ---------- heading row (same treatment as the Location section) ---------- */

.ssr-history__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ssr-history .ssr-history__title {
  margin: 0;
  font-family: var(--hs-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--hs-ink);
}

.ssr-history__sub {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--hs-muted);
}

@media (max-width: 767px) {
  .ssr-history { padding: 40px 16px; }
  .ssr-history .ssr-history__title { font-size: 21px; }
}

/* ============================================================
   The event list — the port. .ssr-history__body is what the snippet called .ssr-hist.
   ============================================================ */

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

.ssr-history__body {
  --hs-rail: 22px;   /* node column */
  --hs-gap: 16px;    /* node column → content */
  --hs-step: 24px;   /* vertical space between events */

  font-family: var(--hs-body);
  color: var(--hs-ink);
}

/* ---- Summary line -------------------------------------------------- */
.ssr-history__summary {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hs-muted);
}

/* ---- The spine ----------------------------------------------------- */
.ssr-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssr-history__event {
  position: relative;
  padding-left: calc(var(--hs-rail) + var(--hs-gap));
  padding-bottom: var(--hs-step);
}

.ssr-history__event:last-child { padding-bottom: 0; }

/* Node: hollow ring, filled only on the current state. */
.ssr-history__event::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--hs-node);
  border-radius: 50%;
  background: var(--hs-surface);
  box-sizing: border-box;
}

/* Line: from under the node to the next node. */
.ssr-history__event::after {
  content: "";
  position: absolute;
  /* Flush with the bottom of the 12px ring (2px offset + 12px + 2x1.25 border),
     stopping at the row edge — the spec's spine joins the node it leaves. */
  top: 14px;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--hs-line);
}

.ssr-history__event:last-child::after { content: none; }

.ssr-history__event.is-current::before {
  border-color: var(--hs-dark);
  background: var(--hs-dark);
}

/* ---- Event content -------------------------------------------------- */
.ssr-history__date {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--hs-muted);
}

/* The one sanctioned green accent in this section. */
.ssr-history__now { color: var(--hs-now); }
.ssr-history__now::before { content: "· "; color: var(--hs-muted); }

.ssr-history__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 0;
}

.ssr-history__price {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hs-ink);
  font-variant-numeric: tabular-nums;
}

/* Deliberately neutral. Coral stays reserved for the CTA and this is
   data, not a stock ticker. */
.ssr-history__delta {
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--hs-muted);
  font-variant-numeric: tabular-nums;
}

.ssr-history__gap {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.2;
  /* The doc specifies --charcoal-400, but at 12px that is 3.28:1 on white and
     this line is real content ("20 days later"), not chrome. --charcoal-500 is
     the same family at 5.11:1 and still reads quieter than the price. */
  color: var(--hs-gap-ink);
}

.ssr-history__none {
  margin: 0;
  font-size: 14px;
  color: var(--hs-muted);
}

/* ---- Badges --------------------------------------------------------
   .ssr-badge base already exists (1d section). These add the tones 14d
   needs and the price-event arrow.
   -------------------------------------------------------------------- */
.ssr-history .ssr-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--hs-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Every tone is scoped: hero.css and about.css each define the site-wide .ssr-badge--* with
   different values, and whichever loads later wins on the page. Inside this section the
   answer should not depend on load order. */
.ssr-history .ssr-badge--brand   { background: var(--hs-badge-brand-bg); color: var(--hs-badge-brand-fg); }
.ssr-history .ssr-badge--cta     { background: var(--hs-badge-cta-bg); color: var(--hs-badge-cta-fg); }
.ssr-history .ssr-badge--neutral { background: var(--hs-line); color: var(--hs-dark); }
.ssr-history .ssr-badge--success { background: var(--hs-badge-success-bg); color: var(--hs-badge-success-fg); }
.ssr-history .ssr-badge--warning { background: var(--hs-badge-warning-bg); color: var(--hs-badge-warning-fg); }

.ssr-history .ssr-badge__arrow {
  margin-right: 5px;
  flex: none;
}

/* ---- Collapse the middle when the history is long -------------------
   Same no-JS pattern as the Description read-more: a visually hidden
   checkbox and a label element. Oldest-first is kept, and the band sits in the
   MIDDLE rather than clamping the top, so the first event and the current
   state are always on screen. Only fires when 3+ events would be hidden.
   -------------------------------------------------------------------- */
.ssr-history__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ssr-history__state:not(:checked) ~ .ssr-history__list .ssr-history__event.is-hidden {
  display: none;
}

.ssr-history__state:not(:checked) ~ .ssr-history__list .ssr-history__gap--prefold {
  display: none;
}

.ssr-history__more {
  position: relative;
  padding-left: calc(var(--hs-rail) + var(--hs-gap));
  padding-bottom: var(--hs-step);
}

/* The band reads as a break in the spine, not a button bolted on. */
.ssr-history__more::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  background-image: linear-gradient(var(--hs-band) 55%, transparent 0);
  background-size: 2px 7px;
  background-repeat: repeat-y;
}

.ssr-history__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  /* --text-link is part of the design system (= --ink-700) but the 1d section
     did not carry the ink scale into this site's :root, so it resolves to
     nothing here. The fallback keeps this file self-contained and picks up the
     global automatically if the scale is ever added. */
  color: var(--hs-link);
  border-bottom: 1px solid transparent;
}

.ssr-history__toggle:hover { border-bottom-color: currentColor; }

.ssr-history__state:focus-visible ~ .ssr-history__list .ssr-history__toggle {
  outline: 2px solid var(--hs-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.ssr-history__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hs-dur) var(--hs-ease);
}

.ssr-history__toggle-span {
  font-weight: 400;
  color: var(--hs-muted);
}

.ssr-history__toggle-hide { display: none; }

.ssr-history__state:checked ~ .ssr-history__list .ssr-history__toggle-show { display: none; }
.ssr-history__state:checked ~ .ssr-history__list .ssr-history__toggle-hide { display: inline; }
.ssr-history__state:checked ~ .ssr-history__list .ssr-history__toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .ssr-history__toggle::after { transition: none; }
}

/* ============================================================
   14a — LEDGER layout  [ss_listing_history layout="ledger"]
   Three columns, newest first, hairline rows. The charcoal header
   band from the old table is gone: column labels are the least
   important row on the card and were carrying the heaviest ink.
   Everything above still applies; this only re-lays the rows.
   ============================================================ */
.ssr-history__body--ledger .ssr-history__lhead,
.ssr-history__body--ledger .ssr-history__lrow {
  display: grid;
  grid-template-columns: 160px 1fr 200px;
  gap: 16px;
  align-items: center;
  margin: 0;
}

.ssr-history__body--ledger .ssr-history__lhead {
  padding: 0 0 9px;
  border-bottom: 1px solid var(--hs-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hs-muted);
}

.ssr-history__body--ledger .ssr-history__lhead > span:last-child { text-align: right; }

.ssr-history__body--ledger .ssr-history__lrow {
  padding: 13px 0;
  border-bottom: 1px solid var(--hs-line);
}

.ssr-history__body--ledger .ssr-history__lrow:last-child { border-bottom: 0; }

.ssr-history__body--ledger .ssr-history__ldate {
  font-size: 13.5px;
  color: var(--hs-muted);
}

/* Right-aligned column: price on its own line, delta beneath it. */
.ssr-history__body--ledger .ssr-history__lprice {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ssr-history__body--ledger .ssr-history__lprice .ssr-history__price { font-size: 14.5px; }

.ssr-history__body--ledger .ssr-history__lprice .ssr-history__delta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

/* Provenance. 49 listings have no ListingId, so this can be half a line
   or absent entirely — it must not leave a stray rule behind. */
.ssr-history__source {
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hs-border);
  font-size: 12px;
  color: var(--hs-muted);
}

/* The collapse band is a plain row here, not a break in a spine. */
.ssr-history__body--ledger .ssr-history__more {
  padding: 13px 0 0;
  border-bottom: 0;
}

.ssr-history__body--ledger .ssr-history__more::before { content: none; }

.ssr-history__body--ledger .ssr-history__state:not(:checked) ~ .ssr-history__list .ssr-history__lrow.is-hidden {
  display: none;
}

/* ---- Ledger on mobile ----------------------------------------------
   160px + 200px of fixed columns cannot fit a 375px screen. Drop the
   column labels and stack: date over badge on the left, price holding
   the right edge across both rows.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ssr-history__body--ledger .ssr-history__lhead { display: none; }

  .ssr-history__body--ledger .ssr-history__lrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 14px;
    padding: 12px 0;
  }

  .ssr-history__body--ledger .ssr-history__ldate   { grid-area: 1 / 1; }
  .ssr-history__body--ledger .ssr-history__lstatus { grid-area: 2 / 1; }
  .ssr-history__body--ledger .ssr-history__lprice  { grid-area: 1 / 2 / span 2 / 2; align-self: center; }
}

/* ---- Mobile ---------------------------------------------------------
   The rail stays — it is what makes a long history scannable — but the
   step tightens and the delta drops to its own line so a
   badge + price + delta row never wraps mid-value.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ssr-history__body {
    --hs-rail: 18px;
    --hs-gap: 12px;
    --hs-step: 20px;
  }

  .ssr-history__event::before { left: 3px; }
  .ssr-history__event::after { left: 8px; }

  .ssr-history__row { gap: 6px 10px; }
  .ssr-history__delta { flex-basis: 100%; margin-top: -2px; }
  .ssr-history__gap { margin-top: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ssr-history__event::before { transition: background var(--hs-dur) var(--hs-ease); }
}