/* ============================================================ Master Electrician App - shared stylesheet ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --orange: #FF6B00; --orange-dim: rgba(255,107,0,0.12); --orange-border: rgba(255,107,0,0.25); --amber: #FFAA00; --yellow: #FBBF24; --red: #EF4444; --green: #34D399; --bg: #0a0a0a; --bg2: #111111; --bg3: #181818; --surface: #1e1e1e; --border: #2a2a2a; --border2: #333; --text: #f0f0f0; --text2: #aaaaaa; --text3: #666; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--orange); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── NAV ───────────────────────────────────────────────── */ /* Scoped to a class on purpose. A bare `nav {}` selector also matches the breadcrumb, the table of contents and the category row, which are all semantic