/* ============================================================
   INDIVIDUATION — legal documents  (lg-*)
   Privacy Policy + Terms of Use. A quiet, readable dialect of
   "Carbon & Flame": the sticky index is chrome, so it gets no
   offset shadow — hard shadows stay reserved for surfaces that
   lift. Tokens only, no literal colors, so night/dawn both work.
   ============================================================ */

/* Header is fixed (~4rem tall). Everything that an anchor can land on
   clears it by this much. One number, used in three places. */
:root { --lg-offset: 6rem; }

/* ---- Inline link TO a legal page, used from other components ----
   (contact form fine print, auth modal). There is no global <a> rule in
   style.css, so an unstyled link would render as browser-default blue. */
.lg-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.lg-link:hover { border-bottom-color: var(--accent); }

/* ---- Effective-date badge, sits under the hero lede ---- */
.lg-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.lg-updated::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---- Two-column shell: index rail + document ---- */
.lg-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ---- Sticky "on this page" rail ---- */
.lg-rail {
  position: sticky;
  /* sits a touch higher than the anchor offset and keeps a smaller bottom
     gap than a content block would — worth ~22px of usable index height. */
  top: calc(var(--lg-offset) - 0.4rem);
  /* A definite height, capped so a tall monitor doesn't shear the rows
     apart. This is what lets the list below distribute itself. */
  height: min(calc(100vh - var(--lg-offset) - 1rem), 40rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
/* The index is sized to fit without scrolling on any ordinary viewport; this
   is for short windows only, where the default chrome scrollbar would be a
   fat light slab against the carbon ground. Hairline, no track, no arrows. */
.lg-rail { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.lg-rail::-webkit-scrollbar { width: 3px; }
.lg-rail::-webkit-scrollbar-track { background: transparent; }
.lg-rail::-webkit-scrollbar-thumb { background: var(--line); }
.lg-rail:hover::-webkit-scrollbar-thumb { background: var(--muted); }
.lg-rail-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.8rem;
  margin-bottom: 0.35rem;
  border-bottom: 1.5px solid var(--line);
}
.lg-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lg-toc;
}

/* The index is shorter than the column it sits in, so rather than a tight
   list floating in dead space, the leftover height goes to the gaps.
   space-between measures the actual rows, so this self-adjusts per document
   AND per language — Georgian titles wrap and simply take a share of the
   slack instead of overflowing, which no fixed gap value could manage.
   flex-shrink 0 is the safety catch: when the rows genuinely don't fit
   (very short window) the list keeps its natural height and the rail
   scrolls with the hairline bar rather than crushing the rows together.
   Rail only — the mobile <details> index is not height-bound. */
.lg-rail .lg-toc {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Floor only. When the rows fit, space-between hands out far more than
     this; when they don't, a bigger floor would only deepen the overflow. */
  gap: 0.1rem;
}
.lg-toc a {
  display: flex;
  gap: 0.6rem;
  padding: 0.36rem 0 0.36rem 0.8rem;
  border-left: 2px solid transparent;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.lg-toc a:hover { color: var(--text); }
.lg-toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
/* the numeral column — intro has none, so it is written into the markup
   rather than generated, keeping the two cases aligned */
.lg-toc .lg-toc-n {
  flex-shrink: 0;
  min-width: 1.2rem;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  opacity: 0.7;
}

/* ---- Mobile index: same list, inside a <details> ---- */
.lg-index {
  border: 1.5px solid var(--line);
  background: var(--surface);
  padding: 0 1.2rem;
  margin-bottom: 2.5rem;
}
.lg-index > summary {
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.lg-index > summary::-webkit-details-marker { display: none; }
.lg-index > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease-out);
}
.lg-index[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lg-index .lg-toc { padding-bottom: 1rem; }

/* ---- Document body ---- */
.lg-doc { min-width: 0; }

.lg-intro { margin-bottom: 3.5rem; }

.lg-section {
  scroll-margin-top: var(--lg-offset);
  padding-top: 2.6rem;
  margin-bottom: 0.6rem;
  border-top: 1.5px solid var(--line);
}
.lg-section:first-of-type { border-top: 0; padding-top: 0; }

.lg-head {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.4rem;
  align-items: baseline;
  margin-bottom: 1.2rem;
}
.lg-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}
.lg-head h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  margin: 0;
}

/* Prose. Slightly looser than the site's 1.65 — legal text is denser
   and needs the extra air to stay readable in long runs. */
.lg-body p {
  max-width: 68ch;
  margin: 0 0 1.1rem;
  line-height: 1.75;
  color: var(--text-soft);
}
.lg-body p:last-child { margin-bottom: 0; }

.lg-body ul {
  max-width: 68ch;
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}
.lg-body li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
  color: var(--text-soft);
}
.lg-body li::marker { color: var(--accent); }

/* ---- Callout: the clauses that actually matter ---- */
.lg-callout {
  max-width: 68ch;
  margin: 0 0 1.4rem;
  padding: 1.2rem 1.5rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--accent);
}
.lg-callout strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
}
.lg-callout p { margin: 0; }

/* ---- Foot: cross-links + back to top ---- */
.lg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--line);
}
.lg-foot .chip { text-decoration: none; }
.lg-foot .lg-top {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.lg-foot .lg-top:hover { color: var(--accent); }

/* ---- Responsive: rail folds into the <details> index ---- */
@media (min-width: 900px) {
  .lg-index { display: none; }
}
@media (max-width: 899px) {
  .lg-layout { grid-template-columns: 1fr; }
  .lg-rail { display: none; }
  .lg-head { grid-template-columns: 2.6rem 1fr; }
  .lg-foot .lg-top { margin-left: 0; width: 100%; }
}