/* The two-column shell for the four legal documents.
   Loads AFTER /legal.css, which is shared with seventeen other pages and is
   therefore never edited for these four — it keeps supplying the .doc
   typography, and this file only adds the layout around it.

   ⚠️ No tokens are redefined here. The design this implements hardcodes its
   palette in hex and pulls Inter from Google Fonts; both refused, as on /app
   and /contact. */

.lg {
  max-width: 1140px; width: 100%; margin: 0 auto;
  padding: 72px 28px 40px;
  display: grid; grid-template-columns: 250px 1fr; gap: 0 72px;
  align-items: start;
}

/* ⚠️ .doc carries `max-width: 780px; margin: 0 auto` from legal.css, which
   inside a grid column would centre the text and leave the sidebar looking
   detached from it. The measure is kept — long legal prose needs one — but it
   starts at the column's left edge. Padding is dropped because .lg owns it now,
   otherwise the two stack up and the page loses 56px a side. */
.lg-doc { max-width: 74ch; margin: 0; padding: 0; }

/* ── sidebar ────────────────────────────────────────────────────────────── */
/* ⚠️ top: 48px and NOT offset for a header, because the site header is not
   sticky — site.css:110 declares it so and :2419 re-declares position:relative
   on the same element at the same specificity, later, so it scrolls away. */
.lg-side {
  position: sticky; top: 48px;
  /* ⚠️ A sticky block taller than the viewport has its bottom CLIPPED, and the
     clipped part is unreachable — you cannot scroll a sticky element by
     scrolling the page. /terms already has 14 contents entries and measures
     721px, which on a 768px laptop overflows by 1px TODAY; one more clause and
     the last entries simply vanish. So it scrolls within itself instead.
     96px = the 48px offset, twice, so it is inset top and bottom. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  /* Room for the scrollbar so it never sits on top of the link text. */
  scrollbar-gutter: stable;
}

.lg-lbl {
  font-family: "Geist Mono", ui-monospace, Consolas, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--eyebrow); margin: 0 0 12px; padding: 0 12px;
}
.lg-lbl-2 {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ⚠️⚠️ BOTH OF THESE ARE BARE-ELEMENT RESETS, NOT DECORATION.
   site.css styles bare elements, and a class only beats them for the properties
   it actually declares. Two of them land here:

     nav      position:sticky; top:0; z-index:100; background:var(--bg-chrome);
              border-bottom:1px solid var(--line)   — the SITE HEADER's chrome.
              Both link lists are <nav>, so each was drawing a header background
              and a rule under itself. That is the line under the contents.
     section  padding:140px 0 (84px at this width) — the homepage's landing
              rhythm, applied to all 42 legal sections, inflating the document
              and opening a chasm before the first heading.

   Measured, not guessed: computed padding-top on .lg-sec was 84px and
   border-bottom on .lg-toc was 1px solid before this. /features hit the same
   trap by setting only padding-top and leaving 140px hanging off the bottom. */
.lg-docs, .lg-toc {
  position: static; top: auto; z-index: auto;
  background: none; border-bottom: 0;
}
.lg-sec { padding: 0; }

.lg-docs { display: flex; flex-direction: column; gap: 2px; }
.lg-doc-link {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text-mut);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.lg-doc-link:hover { color: var(--text); background: oklch(1 0 0 / 0.04); }
.lg-doc-link.is-on { color: var(--gold); background: var(--gold-faint); }

/* ── contents ───────────────────────────────────────────────────────────── */
/* The left rule is the progress indicator: it is the only thing that moves as
   you read, so it has to be the thing that carries the highlight. */
.lg-toc { display: flex; flex-direction: column; }
.lg-toc-link {
  padding: 7px 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-dim); border-left: 2px solid var(--line);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.lg-toc-link:hover { color: var(--text-soft); border-left-color: var(--line-hi); }
.lg-toc-link.is-here { color: var(--text); border-left-color: var(--gold); }

/* ── the document ───────────────────────────────────────────────────────── */
/* scroll-margin so a jumped-to section lands with air above it rather than
   welded to the top edge. Works with the CSS smooth scrolling site.css sets. */
.lg-sec { scroll-margin-top: 24px; }
.lg-sec + .lg-sec { margin-top: 6px; }

@media (max-width: 940px) {
  /* One column. The sidebar stops sticking — a sticky block above the content
     it describes is just a block. */
  .lg { grid-template-columns: 1fr; gap: 0; padding: 48px 22px 30px; }
  .lg-side { position: static; margin-bottom: 34px; }
  .lg-doc { max-width: none; }

  /* The switcher becomes a scrollable row: four links stacked vertically above
     a legal document is a wall before the document even starts. */
  .lg-docs {
    flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .lg-docs::-webkit-scrollbar { display: none; }
  .lg-doc-link { white-space: nowrap; border: 1px solid var(--line); }
  .lg-doc-link.is-on { border-color: var(--gold-soft); }

  /* ⚠️ The contents is hidden here, not shrunk. Fourteen entries above the
     document pushes the document itself off the first screen entirely, and the
     headings are only a scroll away on a phone anyway. */
  .lg-lbl-2, .lg-toc { display: none; }
}