/* ============================================================================
   Worklane — Legal template (Terms / Privacy / Cookies)
   FSE templates/page.html. Sticky TOC + long-form content. Scroll-spy.
   Consumes tokens/components. No hardcoded hex.
   ========================================================================== */

.lg-wrap { width: min(100% - 2.5rem, var(--container-max)); margin-inline: auto; }

/* page header */
.lg-head { padding-block: var(--spacing-70) var(--spacing-50); border-bottom: 1px solid var(--color-neutral); }
/* xl = clamp(2rem, 1.55rem + 1.95vw, 3rem) — matches design-mock h1 48px at 1440px */
.lg-head__title { font-size: var(--font-size-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: 0; }
.lg-head__updated { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin: var(--spacing-30) 0 0; }
.lg-head__intro { font-size: var(--font-size-md); color: var(--color-contrast-muted); margin: var(--spacing-40) 0 0; max-width: 60ch; line-height: var(--lh-relaxed); }

/* layout */
.lg-layout { display: grid; grid-template-columns: 15rem 1fr; gap: var(--spacing-70); align-items: start; padding-block: var(--spacing-60) var(--spacing-80); }
@media (max-width: 900px) { .lg-layout { grid-template-columns: 1fr; gap: var(--spacing-40); } }

/* TOC sidebar */
.lg-toc { position: sticky; top: 5.5rem; }
@media (max-width: 900px) { .lg-toc { position: static; } }
.lg-toc__label { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-contrast-subtle); font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-40); }
.lg-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; counter-reset: toc; }
.lg-toc__link { display: block; padding: var(--spacing-20) var(--spacing-30); border-left: 2px solid var(--color-neutral); color: var(--color-contrast-muted); text-decoration: none; font-size: var(--font-size-sm); line-height: var(--lh-normal); transition: color var(--transition), border-color var(--transition), background var(--transition); }
.lg-toc__link::before { counter-increment: toc; content: counter(toc) ". "; color: var(--color-contrast-subtle); }
.lg-toc__link:hover { color: var(--color-contrast); border-left-color: var(--color-neutral-strong); }
.lg-toc__link[aria-current="true"] { color: var(--color-accent-1); border-left-color: var(--color-accent-1); background: var(--color-accent-weak); font-weight: var(--fw-medium); }
.lg-toc__link[aria-current="true"]::before { color: var(--color-accent-1); }

/* mobile TOC: horizontal pill scroller */
.lg-toc--mobile { display: none; }
@media (max-width: 900px) {
  .lg-toc { display: none; }
  .lg-toc--mobile { display: block; position: sticky; top: 4.5rem; z-index: 20; width: 100vw; margin-left: calc(50% - 50vw); padding: var(--spacing-30) var(--spacing-50); background: color-mix(in srgb, var(--color-base) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-neutral); overflow: hidden; }
  .lg-toc__scroller { display: flex; gap: var(--spacing-20); overflow-x: auto; scrollbar-width: none; }
  .lg-toc__scroller::-webkit-scrollbar { display: none; }
  .lg-toc__pill { flex: none; height: 2rem; padding: 0 var(--spacing-40); display: inline-flex; align-items: center; border: 1px solid var(--color-neutral-strong); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-contrast-muted); text-decoration: none; font-size: var(--font-size-sm); white-space: nowrap; }
  .lg-toc__pill[aria-current="true"] { background: var(--color-accent-weak); border-color: var(--color-accent-border); color: var(--color-accent-1); }
}

/* content */
.lg-content { min-width: 0; max-width: 70ch; }
.lg-section { padding-top: var(--spacing-30); margin-bottom: var(--spacing-70); scroll-margin-top: 6rem; }
.lg-section__h { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--spacing-40); }
/* h2 inside post_content — matches design-mock 28px at 1440 */
.lg-content h2 { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: var(--spacing-70) 0 var(--spacing-40); }
.lg-content h3 { font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: var(--spacing-50) 0 var(--spacing-30); }
.lg-content p { font-size: var(--font-size-base); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--spacing-40); }
.lg-content a { color: var(--color-accent-1); text-decoration: none; font-weight: var(--fw-medium); }
.lg-content a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.lg-content ul, .lg-content ol { margin: 0 0 var(--spacing-40); padding-left: var(--spacing-50); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); }
.lg-content li { margin-bottom: var(--spacing-20); }
.lg-content li::marker { color: var(--color-contrast-subtle); }

/* FIX-4: table mobile overflow wrapper.
 * .lg-table has width:100% which alone isn't enough to prevent overflow when
 * the table content (many columns) exceeds the viewport at ≤480px.
 * Wrap usage: the table is inside .lg-content; we make the table itself
 * a block that scrolls horizontally when its content width > container width. */
.lg-content .lg-table,
.lg-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (min-width: 481px) {
  .lg-content .lg-table,
  .lg-table {
    display: table; /* restore table layout on wider viewports */
    overflow-x: visible;
  }
}

/* policy table */
.lg-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); margin: 0 0 var(--spacing-40); border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-sm) * var(--radius-scale)); overflow: hidden; }
.lg-table th { text-align: left; padding: var(--spacing-30) var(--spacing-40); background: var(--color-surface-2); color: var(--color-contrast); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--color-neutral); }
.lg-table td { padding: var(--spacing-30) var(--spacing-40); color: var(--color-contrast-muted); border-bottom: 1px solid var(--color-neutral); vertical-align: top; }
.lg-table tbody tr:nth-child(odd) td { background: var(--color-surface-2); }
.lg-table tr:last-child td { border-bottom: 0; }

.lg-backtotop { display: inline-flex; align-items: center; gap: var(--spacing-20); font-size: var(--font-size-sm); color: var(--color-contrast-subtle); text-decoration: none; margin-top: var(--spacing-40); }
.lg-backtotop:hover { color: var(--color-accent-1); }