/* MythScript Codex - shared stylesheet. Two accessible themes: light (default) * and dark, both tuned for WCAG AA contrast. Structure is theme-agnostic; each * theme is a palette of custom properties applied via [data-theme] on . * Accessibility is baked in: visible focus, skip link, reduced-motion and * high-contrast support, adequate tap targets, and non-color link cues. */ :root, [data-theme="light"] { --ms-bg: #fbfaf7; --ms-surface: #f1eee7; --ms-surface-line: #c9c2b2; --ms-ink: #23201b; --ms-ink-soft: #544e44; --ms-ink-faint: #635c50; --ms-accent: #8a3f1a; --ms-accent-strong: #6f3113; --ms-nav-bg: #23201b; --ms-nav-ink: #f4efe7; --ms-nav-ink-dim: #cfc7b8; --ms-focus: #b4551f; --ms-radius: 4px; color-scheme: light; } [data-theme="dark"] { --ms-bg: #16181c; --ms-surface: #1e2127; --ms-surface-line: #3a404b; --ms-ink: #e6e8ec; --ms-ink-soft: #b4b9c2; --ms-ink-faint: #9aa0aa; --ms-accent: #e0996a; --ms-accent-strong: #f0b183; --ms-nav-bg: #0f1013; --ms-nav-ink: #eceef2; --ms-nav-ink-dim: #b7bcc6; --ms-focus: #f0b183; --ms-radius: 4px; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ms-bg: #16181c; --ms-surface: #1e2127; --ms-surface-line: #3a404b; --ms-ink: #e6e8ec; --ms-ink-soft: #b4b9c2; --ms-ink-faint: #9aa0aa; --ms-accent: #e0996a; --ms-accent-strong: #f0b183; --ms-nav-bg: #0f1013; --ms-nav-ink: #eceef2; --ms-nav-ink-dim: #b7bcc6; --ms-focus: #f0b183; color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; color: var(--ms-ink); background: var(--ms-bg); line-height: 1.6; } /* Skip link - visible only when focused */ .ms-skip { position: absolute; left: .5rem; top: -3rem; z-index: 100; background: var(--ms-bg); color: var(--ms-accent); border: 2px solid var(--ms-focus); border-radius: var(--ms-radius); padding: .5rem .9rem; font-family: system-ui, sans-serif; font-size: .9rem; text-decoration: none; transition: top .15s ease; } .ms-skip:focus { top: .5rem; } .ms-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ms-nav { display: flex; align-items: center; gap: .5rem 1.25rem; flex-wrap: wrap; padding: .5rem 1.25rem; background: var(--ms-nav-bg); font-family: system-ui, -apple-system, sans-serif; font-size: .9rem; } .ms-nav a { color: var(--ms-nav-ink); text-decoration: none; padding: .5rem 0; display: inline-flex; align-items: center; min-height: 44px; } /* Nav hover/focus stays light on the dark bar - never inherits body accent. */ .ms-nav a:hover, .ms-nav a:focus-visible { color: var(--ms-nav-ink); text-decoration: underline; } .ms-nav-spacer { flex: 1 1 auto; } .ms-main { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .ms-main:focus { outline: none; } h1 { font-size: 2rem; line-height: 1.15; margin: .5rem 0 .25rem; } h2 { font-size: 1.2rem; margin-top: 2rem; } h1, h2, h3, [id] { scroll-margin-top: 1rem; } /* Body links: color plus underline so the cue is never color alone. */ a { color: var(--ms-accent); } a:hover { color: var(--ms-accent-strong); } .ms-main a { text-decoration: underline; text-underline-offset: .12em; } .ms-nav a, #ms-results a, .ms-toc a, .ms-skip { text-decoration: none; } #ms-results a:hover, .ms-toc a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--ms-focus); outline-offset: 2px; border-radius: 2px; } .ms-sub { color: var(--ms-ink-soft); } .ms-kind { font-family: system-ui, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ms-ink-faint); margin-top: 0; } .ms-crumb { font-family: system-ui, sans-serif; font-size: .85rem; margin-bottom: 0; } .ms-props { border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; width: 100%; } .ms-props th { text-align: left; padding: .3rem .9rem .3rem 0; font-family: system-ui, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ms-ink-faint); white-space: nowrap; vertical-align: top; } .ms-props td { padding: .3rem 0; } .ms-props tr { border-bottom: 1px solid var(--ms-surface-line); } .ms-relation { margin: .35rem 0; } .ms-relation-label { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--ms-ink-soft); } .ms-via { color: var(--ms-ink-faint); font-size: .85rem; } .ms-backlinks ul { padding-left: 1.1rem; } .ms-toc { margin: .35rem 0; } .ms-body pre { background: var(--ms-surface); border: 1px solid var(--ms-surface-line); border-radius: var(--ms-radius); padding: .75rem 1rem; overflow-x: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; } .ms-body code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; } .ms-body blockquote { margin: 1rem 0; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--ms-surface-line); color: var(--ms-ink-soft); } .ms-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; } .ms-body th, .ms-body td { border: 1px solid var(--ms-surface-line); padding: .35rem .6rem; text-align: left; } .ms-callout { background: var(--ms-surface); border: 1px solid var(--ms-surface-line); border-radius: var(--ms-radius); padding: .75rem 1rem; margin: 1rem 0; } .ms-empty { background: var(--ms-surface); border: 1px solid var(--ms-surface-line); padding: 1rem 1.25rem; border-radius: var(--ms-radius); font-family: system-ui, sans-serif; font-size: .95rem; } #ms-q { width: 100%; box-sizing: border-box; font-size: 1.05rem; padding: .6rem .8rem; margin: 1rem 0; border: 1px solid var(--ms-surface-line); border-radius: var(--ms-radius); font-family: system-ui, sans-serif; background: var(--ms-surface); color: var(--ms-ink); min-height: 44px; } #ms-facets { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: system-ui, sans-serif; font-size: .85rem; margin-bottom: 1rem; } .ms-facet { min-width: 9rem; } .ms-facet h3 { margin: .25rem 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ms-ink-faint); } .ms-facet label { display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .25rem 0; min-height: 32px; } .ms-facet input { width: 1.05rem; height: 1.05rem; } #ms-count { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--ms-ink-soft); margin: .5rem 0; } #ms-results { list-style: none; padding: 0; } #ms-results li { padding: .4rem 0; border-bottom: 1px solid var(--ms-surface-line); } #ms-results a { color: var(--ms-accent); } #ms-results .ms-kind-inline { font-family: system-ui, sans-serif; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ms-ink-faint); margin-left: .6rem; } .ms-theme-switch { display: inline-flex; align-items: center; gap: .4rem; font-family: system-ui, sans-serif; font-size: .8rem; color: var(--ms-nav-ink); } .ms-theme-switch label { color: var(--ms-nav-ink); } .ms-theme-switch select { font-family: inherit; font-size: inherit; color: var(--ms-nav-ink); background: transparent; border: 1px solid var(--ms-nav-ink-dim); border-radius: var(--ms-radius); padding: .3rem .4rem; cursor: pointer; min-height: 36px; } .ms-theme-switch select:focus-visible { outline: 3px solid var(--ms-focus); outline-offset: 2px; } .ms-theme-switch select option { color: #000; background: #fff; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } @media (prefers-contrast: more) { :root, [data-theme="light"] { --ms-ink-soft: #3a332a; --ms-ink-faint: #3a332a; --ms-surface-line: #8f846d; } [data-theme="dark"] { --ms-ink-soft: #d6dae1; --ms-ink-faint: #c3c8d1; --ms-surface-line: #5a616d; } a { text-decoration: underline; } .ms-props tr, #ms-results li, .ms-body th, .ms-body td { border-width: 2px; } }