/* ======================================================================
   visual.css — THE LEDGER
   Signature move for /property-management/. Replaces the decorative route
   rail with a hairline ledger that accrues one verifiable figure per
   waypoint and never un-earns, then sets down above the CTA at the finale.

   Owned by web-visual. Link AFTER the page's inline <style> block.
   Reuses --sc-* tokens only. One new colour value, scoped to the ledger.
   ====================================================================== */

[data-ledger] {
  /* The one new value on the page: the brighter gold a row flashes at the
     instant it lands, decaying back to --sc-accent over 900ms. */
  --lg-stamped: #E0C06A;

  position: fixed;
  z-index: var(--sc-z-chrome, 60);
  right: var(--sc-gutter, 1.5rem);
  top: 50%;
  transform: translate3d(0, -50%, 0);

  display: grid;
  gap: var(--sc-3, 0.75rem);
  width: max-content;
  max-width: 15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;

  /* Chrome, never a target. It must not eat a click meant for the CTA. */
  pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out, ease-out),
              transform 160ms var(--sc-ease-out, ease-out);
}

[data-ledger-slot] {
  display: grid;
  gap: 0.3em;
  padding-bottom: var(--sc-2, 0.5rem);
  border-bottom: 1px solid var(--sc-hairline, rgba(242, 237, 228, 0.12));
  font-family: var(--sc-font-text, system-ui, sans-serif);
}

/* The inversion the direction asks for: the proof is the smallest type on
   the page, against an --sc-t-3xl headline. Roughly a 6:1 drop. */
[data-ledger-fig] {
  display: block;
  min-width: 7ch;          /* holds the column so an empty row does not jump */
  min-height: 1.05em;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--sc-track-wide, 0.08em);
  color: var(--sc-ink, #F2EDE4);
}

[data-ledger-lab] {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft, #B3A996);
  transition: color 900ms var(--sc-ease-out, ease-out),
              opacity 900ms var(--sc-ease-out, ease-out);
}

/* ---- JS-on: rows start empty and stay dead still until stamped ---------
   Without [data-ledger-on] every rule above renders the ledger complete and
   correct, which is exactly the no-JS state. visual.js opts the page into
   the unstamped start only once it knows it can stamp. */
[data-ledger][data-ledger-on] [data-ledger-fig] {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 420ms var(--sc-ease-out, ease-out),
              transform 420ms var(--sc-ease-out, ease-out);
}
[data-ledger][data-ledger-on] [data-ledger-lab] {
  opacity: 0.4;
}

/* They never pulse, shimmer or hint. They sit there being empty, and that
   emptiness is what makes the stamp land. */

@keyframes lg-land-fig { from { color: var(--lg-stamped); } to { color: var(--sc-ink, #F2EDE4); } }
@keyframes lg-land-lab { from { color: var(--lg-stamped); } to { color: var(--sc-accent, #C9A84C); } }

[data-ledger][data-ledger-on] .is-stamped [data-ledger-fig] {
  opacity: 1;
  transform: none;
  animation: lg-land-fig 900ms var(--sc-ease-out, ease-out) both;
}
[data-ledger][data-ledger-on] .is-stamped [data-ledger-lab] {
  opacity: 1;
  color: var(--sc-accent, #C9A84C);
  animation: lg-land-lab 900ms var(--sc-ease-out, ease-out) both;
}

/* A pending label with no figure beside it reads as a table that failed to
   load. Hold it until its figure stamps. Gated on [data-ledger-on], so the
   no-JS ledger still renders every label. */
[data-ledger][data-ledger-on] .ledger__row:not(.is-stamped) [data-ledger-lab] {
  opacity: 0;
}
[data-ledger][data-ledger-on] .ledger__row [data-ledger-lab] {
  transition: opacity 420ms ease;
}

/* ---- the handoff ------------------------------------------------------
   The ledger moves parent once, at the finale, inside a 160ms opacity-0
   window. One layout pass, invisible, no seam. */
[data-ledger].is-moving { opacity: 0; transform: translate3d(0, calc(-50% + 8px), 0); }

/* ---- set down: the ask arrives on top of the evidence ------------------ */
[data-ledger][data-ledger-state="docked"] {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  margin: var(--sc-5, 1.5rem) 0 0;
  padding-top: var(--sc-4, 1rem);
  border-top: 1px solid var(--sc-hairline, rgba(242, 237, 228, 0.12));
  text-align: center;
}
[data-ledger][data-ledger-state="docked"] .ledger__rows {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sc-4, 1rem) var(--sc-6, 2rem);
}
[data-ledger][data-ledger-state="docked"] .ledger__leg { display: none; }
[data-ledger][data-ledger-state="docked"] .ledger__row:not([data-ledger-slot]) { display: none; }
[data-ledger][data-ledger-state="docked"] [data-ledger-slot] {
  border-bottom: 0;
  padding-bottom: 0;
}
[data-ledger][data-ledger-state="docked"] [data-ledger-fig] { min-width: 0; }
[data-ledger][data-ledger-state="docked"].is-moving { transform: translate3d(0, 8px, 0); }

/* ---- phone -------------------------------------------------------------
   The old route rail was display:none below 700px, which would have shipped
   the signature move to desktop only. Here it becomes a hairline strip under
   the header: figures only, dividers between, accruing left to right. The
   labels come back when it sets down in the close block. */
@media (max-width: 700px) {
  /* Phone layout lives in index.html (bottom lower-third). Overriding its
     position here pinned the rail mid-photo. Left to the page. */
  [data-ledger] [data-ledger-slot] {
    border-bottom: 0;
    padding: 0 0.8rem;
    border-left: 1px solid var(--sc-hairline, rgba(242, 237, 228, 0.12));
  }
  [data-ledger] [data-ledger-slot]:first-child { border-left: 0; }
  [data-ledger] [data-ledger-fig] { min-width: 5ch; font-size: 0.82rem; }
  [data-ledger] [data-ledger-lab] { font-size: 0.5rem; letter-spacing: 0.08em; }
  [data-ledger].is-moving { transform: translate3d(0, 8px, 0); }

  [data-ledger][data-ledger-state="docked"] {
    padding: var(--sc-4, 1rem) 0 0;
    gap: var(--sc-4, 1rem) var(--sc-5, 1.5rem);
  }
  [data-ledger][data-ledger-state="docked"] [data-ledger-slot] {
    border-left: 0;
    padding: 0;
  }
  [data-ledger][data-ledger-state="docked"] [data-ledger-lab] {
    position: static;
    width: auto; height: auto;
    clip-path: none;
  }
}

/* ---- reduced motion: figures appear, they just do not animate in ------- */
@media (prefers-reduced-motion: reduce) {
  [data-ledger],
  [data-ledger] [data-ledger-fig],
  [data-ledger] [data-ledger-lab] {
    transition-duration: 1ms;
    animation: none;
  }
  [data-ledger][data-ledger-on] [data-ledger-fig] { transform: none; }
  [data-ledger].is-moving { transform: translate3d(0, -50%, 0); }
  [data-ledger][data-ledger-state="docked"].is-moving { transform: none; }
}