/** * ╔══════════════════════════════════════════════════════════════╗ * ║ style.css ║ * ║ IETM — Application stylesheet ║ * ╠══════════════════════════════════════════════════════════════╣ * ║ CONTENTS ║ * ║ 1. Font declaration Arial Narrow system stack ║ * ║ 2. CSS variables Light theme (default) ║ * ║ 3. Dark theme data-theme="dark" overrides ║ * ║ 4. System theme OS prefers-color-scheme ║ * ║ 5. Reset / base Box model, body defaults ║ * ║ 6. Layout Top bar + app body flex ║ * ║ 7. Top bar Three panes + burger ║ * ║ 8. Left panel Nav list, search, states ║ * ║ 9. Main panel Content area, headers, prose ║ * ║ 10. Tables IETM data tables ║ * ║ 11. Notices Danger / Caution / Advice ║ * ║ 12. Steps Procedure steps + progress ║ * ║ 13. Fault list Severity badges + table ║ * ║ 14. Settings drawer Slide-in panel + themes ║ * ║ 15. Utilities Hidden, loading, error states ║ * ║ 16. Scrollbars Custom thin scrollbars ║ * ╠══════════════════════════════════════════════════════════════╣ * ║ FONT ║ * ║ Arial Narrow — system font, no external load required. ║ * ║ Present on Windows, macOS, and most Linux distributions. ║ * ║ Critical for air-gapped deployment — zero network calls. ║ * ╠══════════════════════════════════════════════════════════════╣ * ║ THEME SYSTEM ║ * ║ All colours are CSS custom properties on :root. ║ * ║ Switching theme = setting data-theme on . ║ * ║ Three values: ║ * ║ light → always light (explicit overrides) ║ * ║ dark → always dark (explicit overrides) ║ * ║ system → follows OS prefers-color-scheme media query ║ * ╚══════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════════════════ 1. FONT ══════════════════════════════════════════════════════════════ Arial Narrow system font stack applied universally. No @font-face — no external font files needed. 'ArialNarrow' (no space) catches some Linux/Android variants. */ * { font-family: 'Arial Narrow', ArialNarrow, Arial, sans-serif; } /* ══════════════════════════════════════════════════════════════ 2. CSS VARIABLES — LIGHT THEME (default) ══════════════════════════════════════════════════════════════ Every colour in the stylesheet references a variable. No hardcoded hex values appear in rules below this section. Changing a theme means overriding these variables only. */ :root { /* ── Backgrounds ── */ --bg-primary : #ffffff; /* main panel, cards */ --bg-secondary : #f4f4f2; /* alternating rows, surfaces */ --bg-tertiary : #eae9e4; /* page / body background */ --bg-top-bar : #1e2a3a; /* header background */ --bg-left-panel : #f0efe9; /* sidebar background */ --bg-active : #dde8f5; /* selected nav item */ --bg-hover : #e8e7e1; /* hovered nav item */ --bg-drawer : #ffffff; /* settings drawer */ --bg-step-done : #eaf3de; /* completed step row */ --bg-code : #f0efe9; /* inline code background */ /* ── Text ── */ --text-primary : #1a1a18; /* headings, body */ --text-secondary : #5a5a56; /* supporting text */ --text-muted : #8a8a84; /* hints, counts, metadata */ --text-top-bar : #f0efe9; /* top bar labels */ --text-active : #0c447c; /* selected nav item */ --text-link : #185fa5; /* hyperlinks */ --text-step-done : #27500a; /* completed step text */ /* ── Borders ── */ --border-primary : #c8c7c0; /* strong borders */ --border-secondary : #e0dfd8; /* subtle dividers */ --border-panel : #d4d3cc; /* panel edge borders */ /* ── Semantic — notices ── */ --danger-bg : #fcebeb; --danger-border : #e24b4a; --danger-text : #791f1f; --caution-bg : #faeeda; --caution-border : #ba7517; --caution-text : #633806; --advice-bg : #e6f1fb; --advice-border : #378add; --advice-text : #0c447c; /* ── Severity badges ── */ --badge-critical-bg : #f7c1c1; --badge-critical-text : #791f1f; --badge-major-bg : #fac775; --badge-major-text : #633806; --badge-minor-bg : #d3d1c7; --badge-minor-text : #444441; /* ── Progress bar ── */ --progress-track : #d4d3cc; --progress-fill : #1d9e75; /* ── Spacing ── */ --space-xs : 4px; --space-sm : 8px; --space-md : 12px; --space-lg : 16px; --space-xl : 24px; --space-2xl : 40px; /* ── Sizing ── */ --top-bar-height : 48px; --left-panel-width : 240px; --radius-sm : 3px; --radius-md : 6px; --radius-lg : 10px; /* ── Typography ── */ --font-size-xs : 11px; --font-size-sm : 12px; --font-size-base : 14px; --font-size-lg : 16px; --font-size-h3 : 15px; --font-size-h2 : 18px; --font-size-h1 : 22px; --font-weight-normal: 400; --font-weight-bold : 600; --line-height : 1.65; /* ── Transitions ── */ --t-fast : 0.15s ease; --t-med : 0.25s ease; } /* ══════════════════════════════════════════════════════════════ 3. DARK THEME ══════════════════════════════════════════════════════════════ Applied when . Overrides colour variables only — all spacing, sizing, and typography variables remain unchanged from :root. */ [data-theme="dark"] { --bg-primary : #1a1a18; --bg-secondary : #242422; --bg-tertiary : #2c2c2a; --bg-top-bar : #0d1520; --bg-left-panel : #202020; --bg-active : #1a2e45; --bg-hover : #2a2a28; --bg-drawer : #242422; --bg-step-done : #0d2008; --bg-code : #2c2c2a; --text-primary : #e8e7e1; --text-secondary : #a8a7a0; --text-muted : #6a6a64; --text-top-bar : #d4d3cc; --text-active : #85b7eb; --text-link : #85b7eb; --text-step-done : #c0dd97; --border-primary : #3a3a38; --border-secondary : #2e2e2c; --border-panel : #303030; --danger-bg : #2d1414; --danger-border : #a32d2d; --danger-text : #f09595; --caution-bg : #281e08; --caution-border : #854f0b; --caution-text : #fac775; --advice-bg : #091929; --advice-border : #185fa5; --advice-text : #85b7eb; --badge-critical-bg : #501313; --badge-critical-text : #f09595; --badge-major-bg : #412402; --badge-major-text : #fac775; --badge-minor-bg : #2c2c2a; --badge-minor-text : #b4b2a9; --progress-track : #3a3a38; --progress-fill : #1d9e75; } /* ══════════════════════════════════════════════════════════════ 4. SYSTEM THEME ══════════════════════════════════════════════════════════════ Applied when . Inherits :root (light) by default. When OS reports dark mode, the @media block overrides with the same dark variables as [data-theme="dark"]. */ [data-theme="system"] { /* inherits :root light variables */ } @media (prefers-color-scheme: dark) { [data-theme="system"] { --bg-primary : #1a1a18; --bg-secondary : #242422; --bg-tertiary : #2c2c2a; --bg-top-bar : #0d1520; --bg-left-panel : #202020; --bg-active : #1a2e45; --bg-hover : #2a2a28; --bg-drawer : #242422; --bg-step-done : #0d2008; --bg-code : #2c2c2a; --text-primary : #e8e7e1; --text-secondary : #a8a7a0; --text-muted : #6a6a64; --text-top-bar : #d4d3cc; --text-active : #85b7eb; --text-link : #85b7eb; --text-step-done : #c0dd97; --border-primary : #3a3a38; --border-secondary : #2e2e2c; --border-panel : #303030; --danger-bg : #2d1414; --danger-border : #a32d2d; --danger-text : #f09595; --caution-bg : #281e08; --caution-border : #854f0b; --caution-text : #fac775; --advice-bg : #091929; --advice-border : #185fa5; --advice-text : #85b7eb; --badge-critical-bg : #501313; --badge-critical-text : #f09595; --badge-major-bg : #412402; --badge-major-text : #fac775; --badge-minor-bg : #2c2c2a; --badge-minor-text : #b4b2a9; --progress-track : #3a3a38; --progress-fill : #1d9e75; } } /* ══════════════════════════════════════════════════════════════ 5. RESET / BASE ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing : border-box; margin : 0; padding : 0; } html, body { height : 100%; overflow : hidden; /* panels scroll independently */ } body { background-color : var(--bg-tertiary); color : var(--text-primary); font-size : var(--font-size-base); font-weight : var(--font-weight-normal); line-height : var(--line-height); display : flex; flex-direction : column; } a { color : var(--text-link); text-decoration : none; } a:hover { text-decoration : underline; } button { cursor : pointer; background : none; border : none; font-size : var(--font-size-base); font-family : inherit; color : inherit; } ul, ol { list-style : none; } code { font-family : 'Courier New', Courier, monospace; font-size : var(--font-size-sm); background-color : var(--bg-code); padding : 1px var(--space-xs); border-radius : var(--radius-sm); color : var(--text-secondary); } /* ══════════════════════════════════════════════════════════════ 6. LAYOUT ══════════════════════════════════════════════════════════════ */ #top-bar { height : var(--top-bar-height); min-height : var(--top-bar-height); background-color : var(--bg-top-bar); color : var(--text-top-bar); display : flex; align-items : center; padding : 0 var(--space-lg); gap : var(--space-lg); z-index : 100; border-bottom : 1px solid rgba(255, 255, 255, 0.07); flex-shrink : 0; } #app-body { flex : 1; display : flex; overflow : hidden; min-height: 0; /* required for flex children to scroll */ } /* ══════════════════════════════════════════════════════════════ 7. TOP BAR ══════════════════════════════════════════════════════════════ */ .top-pane { display : flex; align-items : center; } /* Left pane — IETM name */ #top-left { flex : 0 0 auto; font-size : var(--font-size-lg); font-weight : var(--font-weight-bold); white-space : nowrap; overflow : hidden; text-overflow : ellipsis; max-width : 220px; } /* Centre pane — number + version/date */ #top-centre { flex : 1; justify-content : space-between; padding : 0 var(--space-xl); font-size : var(--font-size-sm); color : var(--text-muted); } /* Right pane — burger */ #top-right { flex : 0 0 auto; margin-left : auto; } .top-separator { margin : 0 var(--space-sm); opacity : 0.45; } /* Burger button */ #burger-btn { display : flex; flex-direction : column; justify-content : space-between; width : 26px; height : 18px; padding : 0; cursor : pointer; } .burger-bar { display : block; width : 100%; height : 2px; background-color : var(--text-top-bar); border-radius : 1px; transition : opacity var(--t-fast); } #burger-btn:hover .burger-bar { opacity : 0.65; } #burger-btn:focus-visible { outline : 2px solid var(--text-top-bar); outline-offset : 3px; border-radius : var(--radius-sm); } /* ══════════════════════════════════════════════════════════════ 8. LEFT PANEL ══════════════════════════════════════════════════════════════ */ #left-panel { width : var(--left-panel-width); min-width : var(--left-panel-width); background-color : var(--bg-left-panel); border-right : 1px solid var(--border-panel); display : flex; flex-direction : column; overflow : hidden; } /* ── Search bar ── */ #search-wrap { padding : var(--space-md); border-bottom : 1px solid var(--border-secondary); flex-shrink : 0; } #nav-search { width : 100%; padding : var(--space-sm) var(--space-md); background-color : var(--bg-primary); color : var(--text-primary); border : 1px solid var(--border-primary); border-radius : var(--radius-md); font-size : var(--font-size-sm); outline : none; transition : border-color var(--t-fast); } #nav-search:focus { border-color : var(--text-active); } #nav-search::placeholder { color : var(--text-muted); } /* ── Nav list ── */ #nav-contents { flex : 1; overflow-y : auto; padding : var(--space-sm) 0; } .nav-separator { border : none; border-top : 1px solid var(--border-secondary); margin : var(--space-sm) var(--space-lg); } /* ── Nav items — base ── */ .nav-item { display : block; padding : var(--space-sm) var(--space-lg); cursor : pointer; font-size : var(--font-size-base); color : var(--text-secondary); border-left : 3px solid transparent; user-select : none; transition : background-color var(--t-fast), color var(--t-fast); white-space : nowrap; overflow : hidden; text-overflow : ellipsis; } .nav-item.active { font-weight: var(--font-weight-bold); } .nav-item:hover { background-color : var(--bg-hover); color : var(--text-primary); } .nav-item.active { background-color : var(--bg-active); color : var(--text-active); font-weight : var(--font-weight-bold); border-left-color: var(--text-active); } .nav-item:focus-visible { outline : 2px solid var(--text-active); outline-offset : -2px; } /* Home entry */ .nav-item:first-child { font-weight : var(--font-weight-bold); color : var(--text-primary); } /* Group header (Components ▾) */ .nav-group { font-weight : var(--font-weight-normal); color : var(--text-primary); } /* Component entry — one indent level */ .nav-component { padding-left : calc(var(--space-lg) + 10px); } /* Procedure / sub-section — two indent levels */ .nav-sub-item { padding-left : calc(var(--space-lg) + 22px); font-size : var(--font-size-sm); color : var(--text-muted); } .nav-sub-item:hover { color : var(--text-primary); } .nav-sub-item.active { color : var(--text-active); font-weight : var(--font-weight-bold); } /* Sub-lists */ .nav-sublist { padding : 0; } .nav-sublist.hidden { display : none; } /* ══════════════════════════════════════════════════════════════ 9. MAIN PANEL ══════════════════════════════════════════════════════════════ */ #main-panel { flex : 1; background-color : var(--bg-primary); overflow-y : auto; padding : var(--space-xl); min-width : 0; } /* ── Section header ── */ .section-header { margin-bottom : var(--space-xl); padding-bottom : var(--space-md); border-bottom : 1px solid var(--border-secondary); } .section-header h1 { font-size : var(--font-size-h1); font-weight : var(--font-weight-bold); color : var(--text-primary); margin-bottom : var(--space-xs); } .section-header h2 { font-size : var(--font-size-h2); font-weight : var(--font-weight-bold); color : var(--text-primary); margin-bottom : var(--space-xs); } /* ── Headings ── */ h3 { font-size : var(--font-size-h3); font-weight : var(--font-weight-bold); color : var(--text-primary); margin-bottom : var(--space-sm); margin-top : var(--space-xl); } h3:first-child { margin-top : 0; } /* ── Prose blocks ── */ .prose { margin-bottom : var(--space-xl); } .prose p { color : var(--text-secondary); margin-bottom : var(--space-md); max-width : 72ch; /* comfortable reading width */ } .prose p:last-child { margin-bottom : 0; } /* ── Utility text ── */ .muted { color : var(--text-muted); font-size : var(--font-size-sm); } .ietm-meta { font-size : var(--font-size-sm); color : var(--text-muted); margin-top : var(--space-sm); } .meta-sep { opacity : 0.45; } /* ── Home screen ── */ .home-header h1 { font-size : var(--font-size-h1); } .home-prose { margin-top : var(--space-xl); } /* ── Line drawing ── */ .line-drawing-wrap { margin-bottom : var(--space-xl); } .line-drawing { max-width : 100%; height : auto; border : 1px solid var(--border-secondary); border-radius : var(--radius-md); background : var(--bg-secondary); padding : var(--space-md); display : block; } /* ── Table wrapper (horizontal scroll on narrow screens) ── */ .table-wrap { overflow-x : auto; margin-bottom : var(--space-xl); } /* ── Table hints ── */ .table-hint { margin-top : calc(var(--space-md) * -1); margin-bottom: var(--space-xl); } /* ── Empty state ── */ .empty-state { color : var(--text-muted); font-size : var(--font-size-sm); padding : var(--space-xl); text-align : center; font-style : italic; } /* ── Connector block (pinouts) ── */ .connector-block { margin-bottom : var(--space-xl); } .connector-block h3 { margin-top : 0; } /* ══════════════════════════════════════════════════════════════ 10. TABLES ══════════════════════════════════════════════════════════════ */ .ietm-table { width : 100%; border-collapse : collapse; font-size : var(--font-size-sm); margin-bottom : 0; } .ietm-table th { background-color : var(--bg-secondary); color : var(--text-primary); font-weight : var(--font-weight-bold); text-align : left; padding : var(--space-sm) var(--space-md); border-bottom : 2px solid var(--border-primary); white-space : nowrap; } .ietm-table td { padding : var(--space-sm) var(--space-md); color : var(--text-secondary); border-bottom : 1px solid var(--border-secondary); vertical-align : top; } .ietm-table tbody tr:hover { background-color : var(--bg-hover); } /* Alternating row shading on changelog (long rows) */ .ietm-table.changelog-table tbody tr:nth-child(even) { background-color : var(--bg-secondary); } /* Specs table — narrower parameter column */ .specs-table .spec-param { font-weight : var(--font-weight-bold); color : var(--text-primary); white-space : nowrap; width : 40%; } .specs-table .spec-value { color : var(--text-secondary); } /* Pinout table column widths */ .pinout-table .pin-number { width: 60px; white-space: nowrap; } .pinout-table .pin-signal { width: 120px; font-weight: var(--font-weight-bold); color: var(--text-primary); } .pinout-table .pin-voltage { width: 80px; white-space: nowrap; } /* Fault table */ .fault-table .fault-row { cursor : pointer; } /* Fault index table — component column */ .fault-index-table .fault-component { white-space : nowrap; color : var(--text-secondary); font-weight : var(--font-weight-bold); } .fault-table .fault-row:hover td { color : var(--text-primary); } .fault-table .fault-code { font-weight : var(--font-weight-bold); white-space : nowrap; color : var(--text-primary); } .fault-table .fault-symptom { max-width : 320px; } /* Description column — allow wrapping */ .col-desc, .col-note { white-space : normal; } /* ══════════════════════════════════════════════════════════════ 11. NOTICES — DANGER / CAUTION / ADVICE ══════════════════════════════════════════════════════════════ Left-border accent style used for all three notice types. No rounded corners on single-sided borders. */ .notice { padding : var(--space-sm) var(--space-md); margin-bottom : var(--space-sm); font-size : var(--font-size-sm); font-weight : var(--font-weight-bold); border-left : 4px solid; border-radius : 0; line-height : var(--line-height); } .notice-danger { background-color : var(--danger-bg); border-color : var(--danger-border); color : var(--danger-text); } .notice-caution { background-color : var(--caution-bg); border-color : var(--caution-border); color : var(--caution-text); } .notice-advice { background-color : var(--advice-bg); border-color : var(--advice-border); color : var(--advice-text); } /* Note text inside notices */ .notice-note { font-weight : var(--font-weight-normal); opacity : 0.85; } /* Reference notice — clickable cross-link */ .ref-notice { cursor : pointer; font-weight : var(--font-weight-normal); transition : opacity var(--t-fast); } .ref-notice:hover { opacity : 0.8; } .ref-link-hint { font-weight : var(--font-weight-normal); opacity : 0.6; font-style : italic; } /* Pre/post procedure notices */ .prereq-notice, .followed-notice { margin-bottom : var(--space-lg); } /* ══════════════════════════════════════════════════════════════ 12. STEPS — PROCEDURES ══════════════════════════════════════════════════════════════ */ /* Tools required summary bar */ .tools-summary { background-color : var(--bg-secondary); border : 1px solid var(--border-secondary); border-radius : var(--radius-md); padding : var(--space-sm) var(--space-md); font-size : var(--font-size-sm); color : var(--text-secondary); margin-bottom : var(--space-lg); display : flex; flex-wrap : wrap; align-items : center; gap : var(--space-sm); } .tools-label { font-weight : var(--font-weight-bold); color : var(--text-primary); flex-shrink : 0; } .tool-ref { background-color : var(--bg-primary); border : 1px solid var(--border-primary); border-radius : var(--radius-sm); padding : 1px var(--space-sm); font-size : var(--font-size-xs); font-weight : var(--font-weight-bold); color : var(--text-primary); white-space : nowrap; } /* Progress bar */ .progress-wrap { margin-bottom : var(--space-lg); } .progress-bar-wrap { height : 8px; background-color : var(--progress-track); border-radius : 4px; overflow : hidden; margin-bottom : var(--space-xs); } .progress-bar { height : 100%; background-color : var(--progress-fill); border-radius : 4px; transition : width var(--t-med); /* Width set via inline style by progress.js */ } .progress-label { font-size : var(--font-size-sm); color : var(--text-muted); } /* Steps container */ .steps-list { margin-bottom : var(--space-xl); } /* Individual step */ .step { margin-bottom : var(--space-md); cursor : pointer; border-radius : var(--radius-md); transition : background-color var(--t-fast); outline : none; } .step:hover { background-color : var(--bg-hover); } .step:focus-visible { outline : 2px solid var(--text-active); outline-offset : 1px; } /* Step body — tick + number + text row */ .step-body { display : flex; align-items : flex-start; gap : var(--space-md); padding : var(--space-sm) var(--space-md); } /* Tick indicator ✓ or ○ */ .step-tick { min-width : 22px; font-size : var(--font-size-lg); color : var(--text-muted); line-height : 1.4; flex-shrink : 0; } /* Step number label */ .step-num { min-width : 56px; font-weight : var(--font-weight-bold); color : var(--text-secondary); white-space : nowrap; flex-shrink : 0; padding-top : 1px; } /* Step instruction text */ .step-text { flex : 1; color : var(--text-primary); } /* Completed step */ .step.step-done { background-color : var(--bg-step-done); } .step.step-done .step-tick { color : var(--progress-fill); } .step.step-done .step-text { color : var(--text-step-done); text-decoration : line-through; text-decoration-color: var(--progress-fill); } /* Read-only remedy steps (fault detail) — no hover/pointer */ .step.step-readonly { cursor : default; } .step.step-readonly:hover { background-color : transparent; } /* Caution popup — progressive rule violation */ .step-caution-popup { margin : 0 var(--space-md) var(--space-sm); animation : fadeIn var(--t-fast); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Reset button */ .reset-wrap { margin-top : var(--space-lg); } .btn-reset { padding : var(--space-sm) var(--space-lg); background-color : var(--bg-secondary); color : var(--text-secondary); border : 1px solid var(--border-primary); border-radius : var(--radius-md); font-size : var(--font-size-sm); font-weight : var(--font-weight-bold); transition : background-color var(--t-fast), color var(--t-fast); } .btn-reset:hover { background-color : var(--bg-hover); color : var(--text-primary); } .btn-reset:focus-visible { outline : 2px solid var(--text-active); outline-offset : 2px; } /* Back button (fault detail → fault list) */ .btn-back { display : block; font-size : var(--font-size-sm); color : var(--text-link); margin-bottom : var(--space-md); padding : 0; cursor : pointer; } .btn-back:hover { text-decoration : underline; } .btn-back:focus-visible { outline : 2px solid var(--text-active); outline-offset : 2px; border-radius : var(--radius-sm); } /* ══════════════════════════════════════════════════════════════ 13. FAULT BADGES ══════════════════════════════════════════════════════════════ */ .badge { display : inline-block; padding : 2px var(--space-sm); border-radius : var(--radius-sm); font-size : var(--font-size-xs); font-weight : var(--font-weight-bold); text-transform : capitalize; white-space : nowrap; vertical-align : middle; } .badge-critical { background-color : var(--badge-critical-bg); color : var(--badge-critical-text); } .badge-major { background-color : var(--badge-major-bg); color : var(--badge-major-text); } .badge-minor { background-color : var(--badge-minor-bg); color : var(--badge-minor-text); } /* ══════════════════════════════════════════════════════════════ 14. SETTINGS DRAWER ══════════════════════════════════════════════════════════════ */ /* Overlay */ #settings-overlay { position : fixed; inset : 0; background-color : rgba(0, 0, 0, 0.35); z-index : 200; transition : opacity var(--t-med); } #settings-overlay.hidden { display : none; } /* Drawer panel */ #settings-drawer { /* * Fixed panel anchored to the right edge. * translate(100%) = fully off-screen right. * Class 'open' added by settings.js slides it in. */ position : fixed; top : 0; right : 0; width : 280px; height : 100%; background-color : var(--bg-drawer); border-left : 1px solid var(--border-primary); z-index : 300; display : flex; flex-direction : column; transform : translateX(100%); transition : transform var(--t-med); } #settings-drawer.open { transform : translateX(0); } /* Drawer header */ #settings-header { display : flex; align-items : center; justify-content : space-between; padding : var(--space-lg); background-color : var(--bg-top-bar); color : var(--text-top-bar); border-bottom : 1px solid rgba(255, 255, 255, 0.07); flex-shrink : 0; } #settings-title { font-size : var(--font-size-lg); font-weight : var(--font-weight-bold); } #settings-close { font-size : var(--font-size-lg); color : var(--text-top-bar); opacity : 0.65; padding : var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); transition: opacity var(--t-fast); } #settings-close:hover { opacity : 1; } #settings-close:focus-visible { outline : 2px solid var(--text-top-bar); outline-offset : 2px; } /* Drawer body */ #settings-body { flex : 1; overflow-y : auto; padding : var(--space-lg); } /* Settings sections */ .settings-section { margin-bottom : var(--space-xl); } .settings-section-toggle { width : 100%; text-align : left; font-size : var(--font-size-base); font-weight : var(--font-weight-bold); color : var(--text-primary); padding : var(--space-sm) 0; border-bottom : 1px solid var(--border-secondary); margin-bottom : var(--space-md); cursor : pointer; } .settings-section-toggle::after { content : ' \25BE'; /* ▾ */ opacity : 0.45; font-weight: var(--font-weight-normal); } .settings-section-toggle[aria-expanded="false"]::after { content : ' \25B8'; /* ▸ */ } .settings-section-toggle:focus-visible { outline : 2px solid var(--text-active); outline-offset : 2px; border-radius : var(--radius-sm); } /* Theme options row */ .theme-options { display : flex; gap : var(--space-md); margin-bottom: var(--space-md); } .theme-option { display : flex; flex-direction : column; align-items : center; gap : var(--space-xs); cursor : pointer; } /* Hide radio input visually — label is fully clickable */ .theme-option input[type="radio"] { position : absolute; opacity : 0; width : 0; height : 0; } /* Swatch rectangle */ .theme-swatch { width : 52px; height : 36px; border-radius : var(--radius-md); border : 2px solid var(--border-primary); transition : border-color var(--t-fast), border-width var(--t-fast); } /* Swatch colours — hardcoded so they always show the correct preview regardless of current theme */ .theme-swatch-light { background-color : #ffffff; border-color : #c8c7c0; } .theme-swatch-dark { background-color : #1a1a18; border-color : #3a3a38; } .theme-swatch-system { background : linear-gradient(135deg, #ffffff 50%, #1a1a18 50%); border-color: #888780; } /* Active swatch — thicker coloured border */ .theme-option input[type="radio"]:checked + .theme-swatch { border-color : var(--text-active); border-width : 3px; } .theme-option:focus-within .theme-swatch { outline : 2px solid var(--text-active); outline-offset : 2px; } .theme-label { font-size : var(--font-size-sm); color : var(--text-secondary); } .theme-hint { font-size : var(--font-size-xs); color : var(--text-muted); font-style : italic; margin-top : var(--space-xs); } /* ══════════════════════════════════════════════════════════════ 14b. HELP DRAWER ITEMS ══════════════════════════════════════════════════════════════ */ /* Help item row */ .help-item { display : flex; align-items : center; gap : var(--space-sm); padding : var(--space-sm) var(--space-sm); margin-bottom : var(--space-xs); border-radius : var(--radius-md); cursor : pointer; font-size : var(--font-size-base); color : var(--text-secondary); transition : background-color var(--t-fast), color var(--t-fast); user-select : none; } .help-item:hover { background-color : var(--bg-hover); color : var(--text-primary); } .help-item:focus-visible { outline : 2px solid var(--text-active); outline-offset : 1px; border-radius : var(--radius-md); } .help-item-icon { font-size : var(--font-size-lg); flex-shrink : 0; width : 24px; text-align : center; } .help-item-label { flex : 1; } /* Download button inside the Author Guide row */ .help-download-btn { display : flex; align-items : center; justify-content : center; width : 28px; height : 28px; border-radius : var(--radius-sm); background-color : var(--bg-secondary); border : 1px solid var(--border-primary); color : var(--text-secondary); font-size : var(--font-size-lg); text-decoration : none; flex-shrink : 0; transition : background-color var(--t-fast), color var(--t-fast); } .help-download-btn:hover { background-color : var(--bg-active); color : var(--text-active); text-decoration : none; } /* Author Guide download block in main panel */ .help-download-block { display : flex; align-items : center; gap : var(--space-lg); padding : var(--space-lg); background-color : var(--bg-secondary); border : 1px solid var(--border-primary); border-radius : var(--radius-md); margin-bottom : var(--space-xl); } .help-download-icon { font-size : 36px; flex-shrink : 0; } .help-download-info { flex : 1; min-width: 0; } .help-download-title { font-weight : var(--font-weight-bold); color : var(--text-primary); font-size : var(--font-size-base); margin-bottom : var(--space-xs); } .btn-help-download { display : inline-flex; align-items : center; gap : var(--space-xs); padding : var(--space-sm) var(--space-lg); background-color : var(--bg-top-bar); color : var(--text-top-bar); border-radius : var(--radius-md); font-size : var(--font-size-sm); font-weight : var(--font-weight-bold); text-decoration : none; white-space : nowrap; flex-shrink : 0; transition : opacity var(--t-fast); } .btn-help-download:hover { opacity : 0.85; text-decoration : none; } /* Help prose content */ .help-prose h3 { margin-top : var(--space-xl); } .help-list { list-style : disc; padding-left : var(--space-xl); margin-bottom : var(--space-lg); } .help-list li { color : var(--text-secondary); font-size : var(--font-size-base); margin-bottom : var(--space-xs); line-height : var(--line-height); } .help-toc { list-style : decimal; padding-left : var(--space-xl); margin-bottom : var(--space-lg); } .help-toc li { color : var(--text-secondary); font-size : var(--font-size-base); margin-bottom : var(--space-xs); line-height : var(--line-height); } .help-code { background-color : var(--bg-secondary); border : 1px solid var(--border-secondary); border-radius : var(--radius-md); padding : var(--space-md); font-family : 'Courier New', Courier, monospace; font-size : var(--font-size-sm); color : var(--text-secondary); white-space : pre-wrap; margin-bottom : var(--space-lg); overflow-x : auto; } /* ══════════════════════════════════════════════════════════════ 15. UTILITIES ══════════════════════════════════════════════════════════════ */ .hidden { display : none !important; } /* Loading placeholder */ .loading { color : var(--text-muted); font-size : var(--font-size-sm); padding : var(--space-2xl); text-align : center; font-style : italic; } /* Error panel */ .error-panel { padding : var(--space-xl); background-color : var(--danger-bg); border-left : 4px solid var(--danger-border); border-radius : 0; margin : var(--space-xl); } .error-title { color : var(--danger-text); font-weight : var(--font-weight-bold); font-size : var(--font-size-lg); margin-bottom : var(--space-sm); } .error-detail { color : var(--danger-text); font-size : var(--font-size-sm); opacity : 0.85; margin-bottom: var(--space-xs); } .error-detail code { background-color : rgba(0, 0, 0, 0.08); color : var(--danger-text); } /* ══════════════════════════════════════════════════════════════ 16. SCROLLBARS ══════════════════════════════════════════════════════════════ Thin custom scrollbars for left panel, main panel, and settings drawer. Webkit-specific — Firefox uses scrollbar-width. */ #nav-contents::-webkit-scrollbar, #main-panel::-webkit-scrollbar, #settings-body::-webkit-scrollbar { width : 5px; } #nav-contents::-webkit-scrollbar-track, #main-panel::-webkit-scrollbar-track, #settings-body::-webkit-scrollbar-track { background : transparent; } #nav-contents::-webkit-scrollbar-thumb, #main-panel::-webkit-scrollbar-thumb, #settings-body::-webkit-scrollbar-thumb { background-color : var(--border-primary); border-radius : 3px; } /* Firefox */ #nav-contents, #main-panel, #settings-body { scrollbar-width : thin; scrollbar-color : var(--border-primary) transparent; } /* ══════════════════════════════════════════════════════════════ 17. PROCEDURE IMAGES ══════════════════════════════════════════════════════════════ */ /* Image gallery grid */ .image-gallery { display : grid; grid-template-columns : repeat(auto-fill, minmax(200px, 1fr)); gap : var(--space-md); margin-bottom : var(--space-xl); } /* Individual figure */ .proc-figure { margin : 0; border : 1px solid var(--border-secondary); border-radius : var(--radius-md); overflow : hidden; background : var(--bg-secondary); cursor : zoom-in; transition : border-color var(--t-fast); } .proc-figure:hover { border-color : var(--text-active); } /* Image inside figure */ .proc-image { width : 100%; height : 160px; object-fit : contain; display : block; padding : var(--space-xs); background : var(--bg-secondary); } /* Enlarged state — click to toggle */ .proc-figure.enlarged { grid-column : 1 / -1; cursor : zoom-out; } .proc-figure.enlarged .proc-image { height : auto; max-height : 600px; object-fit : contain; } /* Line drawing enlarged state */ .line-drawing-wrap.enlarged .line-drawing { max-width : 100%; } /* ══════════════════════════════════════════════════════════════ PRINT STYLES (basic — future enhancement) ══════════════════════════════════════════════════════════════ Hide navigation and controls when printing. Main panel content prints full width. */ @media print { #top-bar, #left-panel, #settings-drawer, #settings-overlay, .btn-reset, .btn-back, .progress-bar-wrap, .progress-label, .reset-wrap { display : none !important; } #app-body { display : block; } #main-panel { overflow : visible; padding : 0; } .notice { border-left-width : 2px; } }