/* ============================================================================
   Legal — five documents behind one rail.

   The five are read one at a time and always from the same place, so they get
   the FAQ's shape rather than four unrelated pages: a rail on the left naming
   the documents, the document itself on the right. The rail's grammar IS the
   FAQ's — same height, same radius, same hover, same active treatment — because
   two rails a click apart that behave differently is the drift the header rule
   was written against.

   Note the departure from skiv.app, and it is deliberate. Skiv's legal pages
   run their own stylesheet with their own header (a wordmark, the word "Legal"
   and a back link). That was ruled out here on 2026-08-28: the founder's rule
   is that the header never changes between pages, and a route that swaps the
   bar for a smaller one is the exact thing the rule forbids. These pages carry
   the same topbar as every other route.
   ========================================================================== */

.lbody {
  display: grid;
  grid-template-columns: minmax(0, clamp(200px, 17.5vw, 262px)) minmax(0, 920px);
  gap: clamp(32px, 5vw, 96px);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: clamp(26px, 3vw, 44px) 0 0;
}

.lrail { display: flex; flex-direction: column; min-height: 0; padding-bottom: clamp(20px, 2.2vw, 34px); }
.lrail > .eyebrow { padding-left: 14px; }


.ltabs { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }

.ltabs a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 0.955rem;
  letter-spacing: -0.013em;
  line-height: 1.3;
  transition: background 240ms var(--ease-ui), border-color 240ms var(--ease-ui), color 240ms var(--ease-ui);
}

.ltabs a:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.ltabs a[aria-current="page"] { background: var(--paper); border-color: var(--line); color: var(--ink); font-weight: 620; }
.ltabs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.lread { padding: 0 12px 0 0; }

@media (max-width: 1024px) {
  .lbody { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 22px; }
  .lrail { padding-bottom: 0; }
  .lrail > .eyebrow { padding-left: 0; }
  .ltabs {
    flex-direction: row;
    gap: 8px;
    margin: 12px -21px 26px;
    padding: 0 21px 2px;
    overflow-x: auto;

    /* The rail scrolls, and nothing said so — the last chip was simply cut off
       at the edge (observed 2026-08-30). The mask fades the right end instead,
       which reads as "there is more" rather than as a truncation. Right only:
       a permanent fade on the left would dim the first chip, which is the
       active one on arrival. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent calc(100% - 4px));
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent calc(100% - 4px));
    scrollbar-width: none;
  }
  .ltabs::-webkit-scrollbar { display: none; }
  .ltabs a { flex: none; white-space: nowrap; border: 1px solid var(--line); min-height: 44px; padding: 9px 15px; }
  .ltabs a[aria-current="page"] { border-color: transparent; }
  .lread { padding-right: 0; }
}