/* ==================================================================================================
 * legal.css — /privacy and /terms in Candidate B ("the living board"). Owned by the PAGES agent.
 * Linked from the two views (routes/public.js sends public.css + maps.css only).
 * Uses b-foundation.css tokens (--b-*) and primitives (.b-board, .b-wash, .b-tab) only.
 *
 *   head — wash, ink eyebrow (not theme.css's red), h1, lead with the update date in tabular figures
 *   body — the ONE dark object is the section index, set as a numbered departure-board list;
 *          sticky left rail from 1024, reading column 70ch beside it.
 * No red on these pages: there is no primary action to spend it on.
 * ================================================================================================= */

.lg-head { padding: 28px 0 32px; border-bottom: var(--b-hair); }
.lg-eyebrow.eyebrow { font: 700 var(--b-t-sm)/1 var(--b-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--b-ink-3); margin: 0 0 14px; }
.lg-head h1 { margin: 0; font-size: var(--b-t-h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--b-navy); }
.lg-lead { margin: 14px 0 0; max-width: 60ch; font-size: var(--b-t-body); line-height: 1.6; color: var(--b-ink-2); }
.lg-lead time { color: var(--b-ink); font-weight: 600; }
@media (min-width: 768px) { .lg-head { padding: 40px 0 44px; } .lg-lead { font-size: var(--b-t-lead); } }

.lg-body { padding: 28px 0 56px; }
@media (min-width: 768px) { .lg-body { padding: 48px 0 72px; } }
.lg-layout { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .lg-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 64px; }
  .lg-toc { position: sticky; top: calc(var(--cc-header-h) + 24px); }
}

/* ---------- the index board ---------- */
.lg-toc .b-board__bar { padding: 14px 20px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: lg; }
.lg-toc li { counter-increment: lg; }
.lg-toc li + li { border-top: var(--b-hair-on); }
.lg-toc a {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: var(--b-tap); padding: 8px 20px;
  font-size: var(--b-t-ui); font-weight: 500; color: var(--b-bd-fg); text-decoration: none;
  transition: background .16s var(--b-e);
}
.lg-toc a::before {
  content: counter(lg, decimal-leading-zero); flex: none; width: 2ch;
  font: 600 var(--b-t-sm)/1 var(--b-sans); font-variant-numeric: tabular-nums; color: var(--b-bd-fg-3);
}
.lg-toc a:hover { background: var(--b-bd-2); color: #fff; }
/* the leading-edge keyline from the board row */
.lg-toc a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--b-bd-fg-2); transform: scaleY(0); opacity: 0; transition: transform .2s var(--b-e), opacity .2s var(--b-e); }
.lg-toc a:hover::after, .lg-toc a:focus-visible::after { transform: scaleY(1); opacity: .5; }
/* two columns of rows on a tablet, where a single column would be a long dark slab */
@media (min-width: 600px) and (max-width: 1023px) {
  .lg-toc ol { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 0; }
  .lg-toc li + li { border-top: 0; }
  .lg-toc li { border-bottom: var(--b-hair-on); }
  .lg-toc li:nth-child(n+5) { border-left: var(--b-hair-on); }
}

/* ---------- the reading column ---------- */
.lg-article { max-width: 70ch; min-width: 0; }
.lg-article .lg-intro { margin: 0 0 8px; font-size: var(--b-t-lead); line-height: 1.6; color: var(--b-ink); }
.lg-article h2 {
  margin: 36px 0 12px; padding-top: 20px; border-top: var(--b-hair);
  font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; color: var(--b-navy);
  scroll-margin-top: calc(var(--cc-header-h) + 16px);
}
.lg-article p, .lg-article li { font-size: var(--b-t-body); line-height: 1.65; color: var(--b-ink); }
.lg-article p { margin: 0 0 14px; }
.lg-article ul { list-style: none; margin: 0 0 14px; padding: 0; }
.lg-article li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.lg-article li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--b-navy); opacity: .55; }
.lg-article strong { color: var(--b-ink); font-weight: 650; }
.lg-article a { color: var(--b-navy); font-weight: 500; text-decoration-color: var(--b-line-2); }
.lg-article a:hover { color: var(--b-navy-700); text-decoration-color: currentColor; }

@media print {
  .lg-toc { display: none; }
  .lg-layout { display: block; }
}