/* ============================================================
   THE PLAT — cluster theme for homeproject.
   Loaded AFTER atlas.css. Keeps the structural system (plates,
   key/plate layout, ruled rows, clip-path bars, ghost trace,
   pinned mobile bar) and replaces the material world.

   The world: a surveyor's plat and the drafting sheet it is
   drawn on. Pale drafting stock, graphite linework, a fine
   sub-grid, and one surveyor's red reserved for the boundary
   that matters. It earns its place: every tool in this cluster
   is about a parcel — its assessed value, what can be built on
   it, what it costs to own — and a plat is the document that
   describes exactly that.

   Deliberately NOT blueprint-white-on-cyan, which is the cliché
   this reference usually collapses into. A plat is dark ink on
   pale stock; the blueprint was a reproduction process, not the
   drawing.

   Contrast is measured in the browser, not asserted here.
   ============================================================ */

:root{
  /* ground — drafting stock, cool and faintly green */
  --paper:#eef1f0;
  --paper-2:#e0e5e4;
  /* ink — graphite */
  --ink:#171a1a;
  --ink-2:#4c5354;
  --ink-3:#586062;
  --rule:#a4abab;
  --rule-2:#c7cdcc;
  /* plate inks — remapped so every atlas rule keeps working */
  --prussian:#17323d;       /* the drafting field */
  --vermillion:#c2451f;     /* surveyor's red — the boundary that matters */
  --vermillion-ink:#a63817;
  --ochre:#b4841c;
  --ochre-ink:#73530d;
  --olive:#40624a;
  --olive-ink:#35513d;

  /* the two plot series, validated with the dataviz checker against
     this surface: protan ΔE 19.7, normal-vision ΔE 27.9, both inside
     the lightness band and above the chroma floor. Not eyeballed. */
  --series-rent:#1f7ab5;
  --series-buy:#d0642e;
  --series-rent-ink:#12557f;   /* the text tone — a mark can be lighter than type */
  --series-buy-ink:#9c4519;
}

/* ── the sub-grid ────────────────────────────────────────────
   A drafting sheet is ruled before anything is drawn on it. One
   very faint grid behind the plate, and nowhere else — a texture
   used twice is a texture; used everywhere it is wallpaper. */
.plate.sheeted{
  background-image:
    repeating-linear-gradient(to right, var(--rule-2) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--rule-2) 0 1px, transparent 1px 28px);
  background-position:-1px -1px;
  background-color:var(--paper);
}
/* the drawing sits on the sheet, not in a box */
.plate.sheeted > *{ position:relative; }

/* ── masthead as the title block ─────────────────────────────
   Every plat carries a title block in the corner: sheet name,
   scale, date. Ruled, not filled — the sheet shows through. */
.masthead{
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  padding-block:.75rem;
  position:relative;
}
.masthead::after{
  content:"";
  position:absolute; inset-inline:0; bottom:-1px; height:1px;
  background:var(--rule);
}
.masthead .brand{ color:var(--ink); }
.masthead a{ color:var(--ink-2); }
.masthead a:hover,.masthead .brand:hover{ color:var(--vermillion-ink); border-color:var(--vermillion-ink); }

/* ── the break-even plot ─────────────────────────────────────*/
.plot-wrap{ margin-top:.9rem; }
.plot{
  display:block; width:100%; height:auto;
  touch-action:pan-y;              /* vertical scroll still works over the plot */
  cursor:crosshair;
}
.plot:focus-visible{ outline:2px solid var(--vermillion); outline-offset:2px; }

.plot-grid{ stroke:var(--rule-2); stroke-width:1; }
.plot-zero{ stroke:var(--rule); stroke-width:1.5; }
.plot-tick{
  font-size:10px; letter-spacing:.06em; fill:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums;
}
/* 2px lines, per the mark spec — thin enough to read as drawing,
   heavy enough to hold against the sub-grid */
.plot-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.plot-rent{ stroke:var(--series-rent); }
.plot-buy{ stroke:var(--series-buy); }
.plot-rent-ink{ fill:var(--series-rent-ink); }
.plot-buy-ink{ fill:var(--series-buy-ink); }
.plot-rent-fill{ fill:var(--series-rent); }
.plot-buy-fill{ fill:var(--series-buy); }
.plot-endlabel{ font-size:11px; font-weight:640; letter-spacing:-.01em; }

/* the crossing is the answer, so it is a rule through the whole
   plot rather than a dot to be hunted for */
.plot-cross{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3 4; }
.plot-crosslabel{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; fill:var(--ink);
}
.plot-cursor{ stroke:var(--ink-2); stroke-width:1; }
.plot-dot{ stroke:var(--paper); stroke-width:2; }   /* the 2px surface ring */

/* ── the readout strip ───────────────────────────────────────
   A fixed strip under the plot, not a floating tooltip: on a
   phone a floating box sits under the thumb that summoned it. */
.readout{
  display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; align-items:baseline;
  margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--rule);
  font-variant-numeric:tabular-nums lining-nums; font-size:.875rem;
  color:var(--ink-2); min-height:2.6rem;
}
.readout .ro-year{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3);
}
.readout .ro-pair b{ font-weight:640; margin-right:.3rem; }
.readout .ro-diff{ margin-left:auto; color:var(--ink); font-weight:640; }

/* ── the answer ──────────────────────────────────────────────
   One number, set on a ruled baseline like a dimension callout. */
.answer{
  font-size:clamp(1.9rem,5.5vw,2.9rem); line-height:1; font-weight:680;
  letter-spacing:-.03em; color:var(--ink);
  border-bottom:2px solid var(--ink); padding-bottom:.2rem; display:inline-block;
  font-variant-numeric:tabular-nums lining-nums;
}
.answer.never{ color:var(--vermillion-ink); border-color:var(--vermillion-ink); }
.answer-unit{
  display:block; margin-top:.45rem;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2);
}

/* ── the payment breakdown ───────────────────────────────────*/
.breakdown{ margin-top:1rem; border-top:1px solid var(--rule); }
.breakdown-row{
  display:grid; grid-template-columns:1fr auto; gap:.75rem;
  padding:.45rem 0; border-bottom:1px solid var(--rule-2);
  font-variant-numeric:tabular-nums lining-nums;
}
.breakdown-row .lbl{ font-size:.875rem; color:var(--ink-2); }
.breakdown-row .amt{ font-weight:600; color:var(--ink); }
.breakdown-row.sum{
  border-top:1.5px solid var(--ink); border-bottom:2px solid var(--ink);
  margin-top:.3rem; padding-top:.5rem;
}
.breakdown-row.sum .lbl,.breakdown-row.sum .amt{ font-weight:680; color:var(--ink); }
.breakdown-row.muted .amt{ color:var(--ink-3); font-weight:500; }

/* ── assumptions, stated rather than buried ──────────────────*/
.assume{
  margin-top:1rem; border-top:1px solid var(--rule); padding-top:.7rem;
  font-size:.8125rem; color:var(--ink-2);
}
.assume b{ color:var(--ink); font-weight:600; }

/* ── motion ──────────────────────────────────────────────────
   One authored moment, inherited: the plate redraws. The scrub
   cursor is not animated — it tracks the pointer, and easing a
   cursor makes it feel broken rather than smooth. */
@media (prefers-reduced-motion:reduce){
  .plot-line{ transition:none; }
}

/* ── touch targets ───────────────────────────────────────────*/
@media (max-width:60rem){
  .readout{ font-size:.8125rem; }
  .readout .ro-diff{ margin-left:0; width:100%; }
}