/* legal-ui — shared visual system for WebsNP legal documents */
:root {
  --lg-ink:#0f172a; --lg-body:#3f4c5f; --lg-muted:#7c8798;
  --lg-line:#e6eaf0; --lg-teal:#0d9488; --lg-teal-dark:#0f766e;
  --lg-bg:#f6f8fa;
}
.lg-page { font-family:'Inter',system-ui,sans-serif; color:var(--lg-body); background:var(--lg-bg); }

/* ── Masthead ── */
.lg-head { background:linear-gradient(135deg,#0f172a 0%,#134e4a 58%,#0f766e 100%); padding:56px 0 46px; position:relative; overflow:hidden; }
.lg-head::after { content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:rgba(20,184,166,.16); }
.lg-head-inner { max-width:1140px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.lg-crumb { font-size:.78rem; color:rgba(255,255,255,.6); margin-bottom:14px; }
.lg-crumb a { color:rgba(255,255,255,.82) !important; text-decoration:none !important; }
.lg-crumb a:hover { color:#5eead4 !important; }
.lg-head h1 { font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:900; color:#fff; margin:0 0 10px; letter-spacing:-.5px; line-height:1.15; }
.lg-head p.sub { font-size:1rem; color:rgba(255,255,255,.78); max-width:720px; margin:0 0 20px; }
.lg-meta { display:flex; flex-wrap:wrap; gap:10px; }
.lg-chip { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9); border-radius:20px;
  padding:6px 14px; font-size:.78rem; font-weight:600; }
.lg-chip i { color:#2dd4bf; font-size:.75rem; }
.lg-chip.act { background:#0f766e; border-color:#0f766e; cursor:pointer; } /* teal-700: #0d9488 with white-ish text was ~3.6:1, fails WCAG AA (needs 4.5:1) */
.lg-chip.act:hover { background:#0b7f74; }

/* ── Layout ── */
.lg-wrap { max-width:1140px; margin:0 auto; padding:34px 24px 70px; display:grid; grid-template-columns:262px 1fr; gap:32px; align-items:start; }
.lg-toc { position:sticky; top:90px; background:#fff; border:1px solid var(--lg-line); border-radius:14px; padding:18px 16px; max-height:calc(100vh - 120px); overflow-y:auto; }
.lg-toc h4 { font-size:.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--lg-muted); margin:0 0 12px; }
.lg-toc ol { list-style:none; margin:0; padding:0; counter-reset:toc; }
.lg-toc li { counter-increment:toc; }
.lg-toc a { display:block; font-size:.83rem; line-height:1.4; color:var(--lg-body) !important; text-decoration:none !important;
  padding:7px 10px 7px 30px; border-radius:8px; position:relative; }
.lg-toc a::before { content:counter(toc); position:absolute; left:8px; top:7px; font-size:.7rem; font-weight:800; color:var(--lg-muted); }
.lg-toc a:hover { background:#f0fdfa; color:var(--lg-teal-dark) !important; }
.lg-toc a.on { background:#0f766e; color:#fff !important; font-weight:700; } /* teal-700: #0d9488 with white text was 3.74:1, fails WCAG AA (needs 4.5:1) */
.lg-toc a.on::before { color:rgba(255,255,255,.75); }

.lg-body { background:#fff; border:1px solid var(--lg-line); border-radius:16px; padding:38px 42px 46px; box-shadow:0 1px 3px rgba(15,23,42,.04); }
.lg-body > section { scroll-margin-top:96px; padding-bottom:6px; }
.lg-body > section + section { border-top:1px solid #f1f4f8; margin-top:30px; padding-top:30px; }
.lg-body h2 { font-size:1.32rem; font-weight:800; color:var(--lg-ink); margin:0 0 16px; letter-spacing:-.3px; line-height:1.3; }
.lg-body h2 .num { color:var(--lg-teal); margin-right:8px; }
.lg-body h3 { font-size:1.02rem; font-weight:700; color:#1f2937; margin:24px 0 10px; }
.lg-body p, .lg-body li { font-size:.95rem; line-height:1.75; color:var(--lg-body); }
.lg-body p { margin:0 0 15px; }
.lg-body ul, .lg-body ol { margin:0 0 16px; padding-left:20px; }
.lg-body li { margin-bottom:8px; }
.lg-body a { color:var(--lg-teal-dark); font-weight:600; }
.lg-body strong { color:var(--lg-ink); font-weight:700; }

/* ── Callouts ── */
.lg-note, .lg-warn, .lg-key { border-radius:12px; padding:15px 18px; margin:0 0 18px; font-size:.9rem; line-height:1.7; border:1px solid; }
.lg-note { background:#f0f9ff; border-color:#bae6fd; color:#075985; }
.lg-warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.lg-key  { background:#f0fdfa; border-color:#99f6e4; color:#0f766e; }
.lg-note b, .lg-warn b, .lg-key b { display:block; margin-bottom:4px; font-weight:800; }

/* ── Tables ── */
.lg-table-wrap { overflow-x:auto; margin:0 0 20px; }
.lg-table { width:100%; border-collapse:collapse; font-size:.88rem; min-width:460px; }
.lg-table th { background:#f8fafc; text-align:left; font-weight:800; color:var(--lg-ink);
  padding:11px 14px; border-bottom:2px solid var(--lg-line); font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; }
.lg-table td { padding:11px 14px; border-bottom:1px solid #f1f4f8; color:var(--lg-body); }
.lg-table tr:last-child td { border-bottom:none; }
.lg-table tbody tr:hover { background:#fafcfd; }

/* ── Related docs ── */
.lg-related { max-width:1140px; margin:0 auto; padding:0 24px 70px; }
.lg-related h3 { font-size:.78rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--lg-muted); margin:0 0 14px; }
.lg-related-grid { display:flex; flex-wrap:wrap; gap:10px; }
.lg-related a { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--lg-line);
  border-radius:10px; padding:11px 16px; font-size:.87rem; font-weight:600; color:#374151 !important; text-decoration:none !important; }
.lg-related a:hover { border-color:var(--lg-teal); color:var(--lg-teal-dark) !important; box-shadow:0 3px 10px rgba(13,148,136,.1); }
.lg-related a i { color:var(--lg-teal); }

@media (max-width:960px) {
  .lg-wrap { grid-template-columns:1fr; gap:20px; }
  .lg-toc { position:static; max-height:none; }
  .lg-body { padding:26px 22px 32px; }
}
@media print {
  .lg-head { background:none !important; padding:0 0 18px; }
  .lg-head h1, .lg-head p.sub, .lg-crumb { color:#000 !important; }
  .lg-toc, .lg-related, .lg-chip.act, header, footer, nav { display:none !important; }
  .lg-wrap { display:block; padding:0; }
  .lg-body { border:none; box-shadow:none; padding:0; }
  .lg-body > section { page-break-inside:avoid; }
}