/* zoom-guide — the lg-* legal layout, scoped per page */
[data-cmp="zoom-guide"] .lg, [data-cmp="zoom-guide"].lg { background: color-mix(in srgb, var(--surface-subtle) 60%, var(--surface-base)); }
[data-cmp="zoom-guide"] .lg-head, [data-cmp="zoom-guide"].lg-head { background: var(--surface-base); border-bottom: 1px solid var(--border-default); }
[data-cmp="zoom-guide"] .lg-head-inner, [data-cmp="zoom-guide"].lg-head-inner { max-width: 48rem; margin-inline: auto; padding: var(--space-6); }
[data-cmp="zoom-guide"] .lg-head-inner h1, [data-cmp="zoom-guide"].lg-head-inner h1 { margin: 0; font-size: 1.875rem; font-weight: 700; }
[data-cmp="zoom-guide"] .lg-head-inner p, [data-cmp="zoom-guide"].lg-head-inner p { margin: var(--space-2) 0 0; color: var(--text-muted); }
[data-cmp="zoom-guide"] .lg-main, [data-cmp="zoom-guide"].lg-main { max-width: 48rem; margin-inline: auto; padding: var(--space-12) var(--space-6); }
[data-cmp="zoom-guide"] .lg-card, [data-cmp="zoom-guide"].lg-card { background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--asio-shadow-soft); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-8); }
[data-cmp="zoom-guide"] .lg-card section h2, [data-cmp="zoom-guide"].lg-card section h2 { margin: 0 0 var(--space-3); font-size: 1.25rem; font-weight: 700; }
[data-cmp="zoom-guide"] .lg-card section h3, [data-cmp="zoom-guide"].lg-card section h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.125rem; font-weight: 600; }
[data-cmp="zoom-guide"] .lg-card section p, [data-cmp="zoom-guide"].lg-card section p { margin: 0 0 var(--space-3); line-height: 1.7; color: var(--text-secondary); }
[data-cmp="zoom-guide"] .lg-card section p:last-child, [data-cmp="zoom-guide"].lg-card section p:last-child { margin-bottom: 0; }
[data-cmp="zoom-guide"] .lg-card section ul, [data-cmp="zoom-guide"].lg-card section ul { margin: 0 0 var(--space-3); padding-left: var(--space-6); display: flex; flex-direction: column;
  gap: var(--space-1); color: var(--text-secondary); line-height: 1.7; list-style: disc; }
[data-cmp="zoom-guide"] .lg-card code, [data-cmp="zoom-guide"].lg-card code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-subtle);
  padding: 1px 5px; border-radius: 4px; }
[data-cmp="zoom-guide"] .lg-card a, [data-cmp="zoom-guide"].lg-card a { color: var(--accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { [data-cmp="zoom-guide"] .lg-card a:hover, [data-cmp="zoom-guide"].lg-card a:hover { text-decoration: underline; }}