/* ===========================================================================
   site/legal.css -- the policy pages, and nothing else loads it.

   THE BAR (Law 0), named before the first rule was written: stripe.com/privacy,
   a currently shipping legal surface in the same category and better than what
   this project had, which was nothing at all. The one thing it does that this
   project did not: every provision carries a stable anchor and sits beside a
   plain-language reading, so a person can link to one clause and act on it
   without reading the document. This page takes that and goes one further,
   because it can: instead of describing CATEGORIES of data the way a policy
   normally must, it names the five literal keys that cross the wire, because
   server/validate.mjs refuses every key it was not told about and so the list
   is complete by construction rather than by promise. A policy that can be
   checked against the code is the thing this page has that the bar does not.

   The reader (Law 4) is a car salesperson or a dealer principal, not a lawyer.
   Second person, trade words, short sentences.

   Borderless throughout (Law 1): sections separate by fill and spacing, never
   by a rim. Every size comes off site.css's own tokens (Laws 7 and 8) and no
   rule here writes a literal font-size.
   ======================================================================== */

.lg-body { background: var(--lp-bg); color: var(--lp-ink); }

/* THE BAR WEARS ITS PLATE FROM FIRST PAINT, and on this page that is a rule
   rather than a script. site.css leaves .lp-mast transparent and site/lot.js
   adds .is-down past 24px of scroll; index.html carries a <noscript> copy of
   the plate for the same reason. This page loads NO script at all, so the
   scripted state would never arrive and a reader would scroll a whole policy
   underneath a transparent bar -- which is what the first phone render showed,
   body copy legible straight through the brand.

   SOLID, AND NOT THE MAST'S USUAL BLUR. `.lp-mast.is-down` finishes with
   `backdrop-filter: blur(18px) saturate(1.4)`, which is correct over the
   landing page's hero. Here the backdrop is a column of text that MOVES on
   every scrolled frame, and trap 121 is precisely that a backdrop-filter over a
   moving backdrop costs a full per-frame backdrop re-read and cannot be tuned
   down. A document page is scrolled end to end, so it pays that cost the whole
   way. An opaque plate is cheaper and, over text rather than a photograph,
   reads better: --lp-mast-fill-down is already the token for "the bar is over
   moving copy now", so this is that value with its alpha spent. */
.lg-mast { background: var(--lp-bg); }
.lg-mast.is-down { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lp-bg); }

/* The page head. -tight because a policy is not a marketing band and does not
   earn the full section rung above its own title. */
.lg-top { padding-block: calc(var(--lp-sec) * 0.75) 0; }
/* No kicker rule, and the absence is deliberate: an eyebrow reading "Privacy"
   over a heading reading "What LotPost knows about you" is Law 2's banned
   kicker and Law 5's same-thing-twice in one element. The title carries it. */
.lg-lede {
  font-size: var(--lp-mt-lead);
  line-height: 1.55;
  color: var(--lp-ink-2);
  max-width: 62ch;
  margin-block-start: var(--lp-m5);
  text-wrap: pretty;
}
.lg-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-m2) var(--lp-m5);
  margin-block-start: var(--lp-m6);
  font-size: var(--lp-mt-small);
  color: var(--lp-muted);
}

/* THE TWO-COLUMN SHELL. One column until 1024, where the contents rail earns
   its width; `minmax(0, 1fr)` on the reading column because a long unbroken
   token in a field name would otherwise set the min-content of the whole grid
   and push the rail off the page (Law 9). */
.lg-shell { padding-block: var(--lp-m8) var(--lp-sec); }
/* The head shares the shell's grid so the page runs down ONE left edge (Law 8).
   This cell is the rail's width, empty, above the contents list. It collapses
   with the grid itself under 1024, where there is no rail to align to. */
.lg-railpad { display: none; }
@media (min-width: 1024px) { .lg-railpad { display: block; } }
@media (min-width: 1024px) {
  .lg-shell-in {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--lp-m7) clamp(32px, 3.5vw, 64px);
    align-items: start;
  }
}

/* The contents rail. Sticky under the mast, and hidden below 1024 rather than
   reflowed into a second list at the top: the sections are short enough on a
   phone that a table of contents there would be one of the two things saying
   the same thing that Law 5 exists to remove. */
.lg-toc { display: none; }
@media (min-width: 1024px) {
  .lg-toc {
    display: block;
    position: sticky;
    top: calc(var(--lp-mast-h) + var(--lp-m5));
  }
}
.lg-toc-k {
  display: block;
  font-size: var(--lp-mt-small);
  font-weight: 600;
  color: var(--lp-muted);
  margin-block-end: var(--lp-m4);
}
.lg-toc-l {
  display: block;
  padding: var(--lp-m2) var(--lp-m3);
  border-radius: 10px;
  font-size: var(--lp-mt-small);
  line-height: 1.4;
  color: var(--lp-ink-2);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.lg-toc-l:hover { background: var(--lp-surface); color: var(--lp-ink); }
.lg-toc-l:focus-visible {
  outline: none;
  background: var(--lp-surface);
  color: var(--lp-ink);
  box-shadow: 0 0 0 3px var(--lp-halo);
}

/* A section. The gap between two of them is one rung, and the heading sits one
   rung off its own body, so the ladder reads m7 / m5 and never merges. */
.lg-sec + .lg-sec { margin-block-start: var(--lp-m8); }
.lg-sec[id] { scroll-margin-top: calc(var(--lp-mast-h) + var(--lp-m5)); }
.lg-h { font-size: var(--lp-mt-h3); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.lg-sec p, .lg-sec li { font-size: var(--lp-mt-body); line-height: 1.6; color: var(--lp-ink-2); }
.lg-sec p { margin-block-start: var(--lp-m4); max-width: 68ch; text-wrap: pretty; }
.lg-sec > .lg-h + p { margin-block-start: var(--lp-m5); }
.lg-sec strong { color: var(--lp-ink); font-weight: 600; }

.lg-list { margin-block-start: var(--lp-m5); display: grid; gap: var(--lp-m4); list-style: none; }
.lg-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--lp-m3); max-width: 68ch; }
.lg-list svg { width: 18px; height: 18px; margin-block-start: 3px; color: var(--lp-accent-ink); }
.lg-list .lg-no { color: var(--lp-muted); }

/* THE WIRE CARDS, which are the reason this page exists. One card per request
   the extension can make, its literal body beside it. Opaque fill, no rim
   (Law 10): a card separates from the page because it is a lighter surface,
   and the fields inside separate from the card because they are a darker one.
   That is the whole ladder, bg -> surface -> surface-2, and it is why nothing
   here needs a line drawn around it. */
.lg-wire { margin-block-start: var(--lp-m6); display: grid; gap: var(--lp-m5); }
.lg-card { background: var(--lp-surface); border-radius: var(--lp-r-tile); padding: var(--lp-m6); }
.lg-card-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lp-m3); }
.lg-verb {
  font-family: var(--lp-face-mono);
  font-size: var(--lp-mt-small);
  font-weight: 600;
  color: var(--lp-accent-on);
  background: var(--lp-accent-solid);
  border-radius: 7px;
  padding: 2px var(--lp-m2);
}
.lg-route { font-family: var(--lp-face-mono); font-size: var(--lp-mt-body); color: var(--lp-ink); }
.lg-when { font-size: var(--lp-mt-small); color: var(--lp-muted); width: 100%; margin-block-start: var(--lp-m1); }
/* ONE KEY COLUMN PER CARD, not one per row (Law 9: same-shape things are
   identical). Each .lg-field is its own filled box, so left to themselves the
   five rows of /api/events each sized their own key column and the descriptions
   started at five different x positions -- `target` is 6 characters and
   `vehicleHash` is 11. `subgrid` on the row makes every row adopt the LIST's
   track sizing, so the column is as wide as the widest key in that card and
   every value in it starts on the same line. The fallback above it is a plain
   two-track grid, so a renderer without subgrid gets the ragged-but-working
   version rather than a collapsed one. */
.lg-fields {
  margin-block-start: var(--lp-m5);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--lp-m3);
}
.lg-field {
  background: var(--lp-surface-2);
  border-radius: 12px;
  padding: var(--lp-m3) var(--lp-m4);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--lp-m2) var(--lp-m4);
  align-items: baseline;
  grid-column: 1 / -1;
}
@supports (grid-template-columns: subgrid) {
  .lg-field { grid-template-columns: subgrid; }
}
/* Under 560 the key sits above its value, so the card stops being two columns
   at all and the list's own tracks would fight that. One track, both stack. */
@media (max-width: 560px) {
  .lg-fields { grid-template-columns: minmax(0, 1fr); }
  .lg-field { grid-template-columns: minmax(0, 1fr); }
  @supports (grid-template-columns: subgrid) {
    .lg-field { grid-template-columns: subgrid; }
  }
}
/* `min-width: 0` and a wrap rule, because a grid item's default `min-width:auto`
   refuses to shrink below its content and a long unbroken mono string then
   paints straight over the column beside it. Found by eye, not by a gate: the
   permission row read `facebook.com/marketplace` across its 168px track and the
   description ran through it. The label was shortened as well -- this is the
   belt, that was the braces. */
.lg-key {
  font-family: var(--lp-face-mono);
  font-size: var(--lp-mt-small);
  color: var(--lp-accent-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.lg-say { font-size: var(--lp-mt-small); line-height: 1.45; color: var(--lp-ink-2); }
.lg-none { font-size: var(--lp-mt-small); color: var(--lp-muted); margin-block-start: var(--lp-m4); }

/* The permission ladder reuses the field shape at one lighter fill, because a
   permission and a wire field are the same kind of thing to the reader: a name
   the browser shows them, and what it is actually for. */
.lg-perms { margin-block-start: var(--lp-m6); display: grid; gap: var(--lp-m3); }
.lg-perm {
  background: var(--lp-surface);
  border-radius: 12px;
  padding: var(--lp-m4) var(--lp-m5);
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: var(--lp-m2) var(--lp-m5);
  align-items: baseline;
}
@media (max-width: 700px) { .lg-perm { grid-template-columns: minmax(0, 1fr); } }

/* The closing block. surface-3 so it reads as the last step up rather than a
   repeat of the cards above it. */
.lg-end { margin-block-start: var(--lp-m8); background: var(--lp-surface-3); border-radius: var(--lp-r-frame); padding: var(--lp-m7); }
.lg-end p { max-width: 60ch; }
.lg-addr { margin-block-start: var(--lp-m5); font-size: var(--lp-mt-small); line-height: 1.7; color: var(--lp-muted); font-style: normal; }

.lg-sec a, .lg-end a { color: var(--lp-accent-ink); text-underline-offset: 3px; }
.lg-sec a:focus-visible, .lg-end a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lp-halo); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .lg-toc-l { transition: none; }
}