/* ===========================================================================
* enhancements.css — additive polish + subtle, clarity-focused motion
*
* Loaded AFTER style.css via a in . It NEVER edits app.js or
* style.css; everything here is layered on top using the existing design
* tokens (--paper / --ink / --accent / --sage / --g-* / --radius / --shadow-*)
* so it tracks all three reading themes (paper / obsidian / linen).
*
* Safety contract
* ---------------
* - The scroll-reveal HIDDEN state is gated on the `.enh-js` class, which is
* added to only by enhancements.js. If the JS never runs (or throws),
* `.enh-js` is absent and NOTHING is ever hidden — content is fully visible
* without JS. The reveal classes (.enh-reveal / .enh-shown) are applied
* exclusively by the JS, never by markup.
* - All motion lives inside `@media (prefers-reduced-motion: no-preference)`,
* and a global kill-switch neutralises any residual motion for users who
* opt out. Durations stay in the 180–400ms band; translations stay <=12px.
* ========================================================================= */
/* ---------------------------------------------------------------------------
* 0. Global reduced-motion kill-switch (safety net for ALL motion, old + new)
* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===========================================================================
* 1. Non-motion polish (applies in every motion preference)
* ========================================================================= */
/* 1a. Tell the browser each theme's nature so native scrollbars / form
* controls / mobile chrome match the surface (no white scrollbar on the
* dark Obsidian theme). */
:root { color-scheme: light; }
[data-theme="obsidian"] { color-scheme: dark; }
[data-theme="linen"] { color-scheme: light; }
/* 1b. One clear, theme-aware focus ring for keyboard users everywhere.
* :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* 1c. Reusable screen-reader-only utility. */
.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;
}
/* 1d. Long URLs / inline code wrap inside the reading column instead of
* forcing a sideways scroll on narrow phones. Block
is left alone
* (it keeps its own horizontal scroll). */
.markdown { overflow-wrap: break-word; }
.markdown :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
/* 1e. Quiet, theme-safe frame for figures. The inline `max-width:70%` on each
* plot still wins (inline styles beat selectors), so this only adds the
* frame + a max-width:100% safety net for any future un-styled image. */
.markdown img {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--rule);
background: var(--card);
}
@media (max-width: 520px) {
/* On phones, let capped figures fill the column (beats the inline 70%). */
.markdown img { max-width: 100% !important; }
}
/* 1f. Re-theme the ai-stats callouts with design tokens so they read in all
* three themes (the page-local