/* Tweak overrides — driven by data-* attributes on set by the Tweaks panel. Defaults (surface=cards, accent=vivid, density=regular) match the shipped design, so enabling Tweaks changes nothing until a control is moved. */ /* ── SURFACE ─────────────────────────────────────────────── */ /* Flat: kill elevation, crisp near-square edges — a document, not a stack of cards */ html[data-surface="flat"] .search-panel, html[data-surface="flat"] .quick-strip article, html[data-surface="flat"] .contents-card, html[data-surface="flat"] .contents-head, html[data-surface="flat"] .page-card, html[data-surface="flat"] .glossary-term, html[data-surface="flat"] .word-table, html[data-surface="flat"] .standards-requirements li, html[data-surface="flat"] .appendix-head, html[data-surface="flat"] .check-item, html[data-surface="flat"] .feedback-panel, html[data-surface="flat"] .search-result-card { box-shadow: none !important; border-radius: 3px; } html[data-surface="flat"] .page-card, html[data-surface="flat"] .glossary-term { background: transparent; } /* Bold: pronounced elevation, thicker accents, opaque cards — an app, not a page */ html[data-surface="bold"] .search-panel, html[data-surface="bold"] .quick-strip article, html[data-surface="bold"] .contents-card, html[data-surface="bold"] .page-card, html[data-surface="bold"] .glossary-term, html[data-surface="bold"] .word-table, html[data-surface="bold"] .appendix-head, html[data-surface="bold"] .feedback-panel { box-shadow: 0 19px 44px rgba(2, 29, 50, 0.19) !important; border-radius: 13px; } html[data-surface="bold"] .page-card { background: #fff; border-left-width: 8px; } html[data-surface="bold"] .quick-strip article { border-left-width: 8px; } html[data-surface="bold"] .contents-card { border-top-width: 10px; } /* ── ACCENT MOOD ─────────────────────────────────────────── */ /* Calm: collapse the decorative green/orange borders down to the blue, keeping red (warnings), yellow (attention) and the green "correct" badge intact */ html[data-accent="calm"] { --green: #006f95; --orange: #006f95; } html[data-accent="calm"] .contents-card { --accent: #006f95 !important; } /* Mono: austere navy — every decorative accent resolves to the brand navy */ html[data-accent="mono"] { --green: #042f4f; --orange: #042f4f; --blue: #042f4f; } html[data-accent="mono"] .contents-card { --accent: #042f4f !important; } /* ── DENSITY ─────────────────────────────────────────────── */ /* Compact: tighten the vertical rhythm into an efficient reference tool */ html[data-density="compact"] .contents-band, html[data-density="compact"] .guide-band, html[data-density="compact"] .appendix-band, html[data-density="compact"] .checklist-band, html[data-density="compact"] .feedback-bottom-band { padding-top: 2.4rem; padding-bottom: 2.4rem; } html[data-density="compact"] .hero-inner { padding-top: 3.4rem; padding-bottom: 2.6rem; } html[data-density="compact"] .standards-copy, html[data-density="compact"] .feature-copy { padding-top: 2.4rem; padding-bottom: 2.4rem; } html[data-density="compact"] .page-stack { gap: 0.55rem; } html[data-density="compact"] .page-card { padding: 0.95rem 1rem; } html[data-density="compact"] .glossary-grid { gap: 0.45rem; } html[data-density="compact"] .checklist { gap: 0.5rem; } /* Spacious: open the rhythm right up for an unhurried, editorial pace */ html[data-density="spacious"] .contents-band, html[data-density="spacious"] .guide-band, html[data-density="spacious"] .appendix-band, html[data-density="spacious"] .checklist-band, html[data-density="spacious"] .feedback-bottom-band { padding-top: 6.5rem; padding-bottom: 6.5rem; } html[data-density="spacious"] .hero-inner { padding-top: 7.5rem; padding-bottom: 6rem; } html[data-density="spacious"] .standards-copy, html[data-density="spacious"] .feature-copy { padding-top: 6rem; padding-bottom: 6rem; } html[data-density="spacious"] .page-stack { gap: 1.7rem; } html[data-density="spacious"] .glossary-grid { gap: 1.1rem; }