/* site-polish.css — small fixes for cleanliness on Material-themed
pages, specifically targeted at mobile/narrow viewports.
The big stylesheet (assets/styles.css) is intentionally not loaded
on Material pages, so these are stand-alone rules that don't depend
on the godding palette / typography. They use Material's own CSS
custom properties (--md-*) where colors matter. */
/* --- Floating topbar (godding-init.js) ----------------------------
The init script appends a fixed-position .topbar at top-right. On
mobile, Material's own header takes the full width and exposes the
hamburger + search buttons in the same corner — collision risk.
Below 76em (Material's drawer breakpoint) we tuck our topbar a row
below Material's header so the auth pill is still visible without
overlapping the search icon. */
/* The topbar is appended to with inline `position:fixed`. On iOS
Safari, fixed-position children can detach from the viewport during
momentum scrolling and appear to drift with the page — fix by forcing
a compositor layer (translateZ + backface-visibility). Reported by a
phone user: "the personal login name scrolls down along with the
phone." */
body > .topbar {
position: fixed !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}
@media (max-width: 76em) {
body > .topbar {
/* Material header is 2.4rem tall + ~.4rem padding, so 3rem clears it. */
top: 3.1rem !important;
right: .5rem !important;
/* Shrink slightly so the pill doesn't push past the viewport. */
font-size: 11px !important;
}
}
/* On very narrow screens, also clip the user's display name so the
pill stays compact. The inline styles in auth.js already cap at
14ch; this trims further when there's almost no horizontal room. */
@media (max-width: 380px) {
body > .topbar .auth-name {
max-width: 8ch !important;
}
}
/* Auth pill cursor + dropdown menu styling. styles.css covers this
on godding-themed pages but isn't loaded on Material, so without
these the pill looks click-dead and the dropdown ("your account /
sign out") stacks unstyled below the page content. */
.auth-pill {
cursor: pointer;
position: relative;
}
.auth-pill .auth-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--md-default-bg-color, #fff);
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 6px;
padding: 6px;
min-width: 180px;
box-shadow: 0 14px 36px -14px rgba(0,0,0,.22);
z-index: 9100;
display: flex;
flex-direction: column;
gap: 2px;
}
.auth-pill .auth-menu[hidden] { display: none; }
.auth-pill .auth-mi {
display: block;
padding: 7px 10px;
font: inherit;
font-size: 12px;
color: var(--md-default-fg-color, #222);
text-decoration: none;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
border-radius: 4px;
}
.auth-pill .auth-mi:hover {
background: var(--md-default-fg-color--lightest, rgba(0,0,0,.06));
color: var(--md-accent-fg-color, #6b4a8b);
}
/* --- Mermaid diagrams ---------------------------------------------
Mermaid renders absolute SVG widths that can exceed the article
column on phones. Container gets a horizontal scrollbar instead of
forcing the whole page to scroll. */
.md-content .mermaid,
.md-content .mermaid svg {
max-width: 100%;
height: auto;
}
.md-content .mermaid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* --- Long tables ---------------------------------------------------
TODO.md / FRONTIER.md tables get wide. Material wraps them in
.md-typeset__table; we make the wrapper scrollable so the whole
page doesn't reflow horizontally. */
@media (max-width: 600px) {
.md-typeset__table,
.md-typeset table:not([class]) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
}
/* --- Code blocks ---------------------------------------------------
Material already handles these reasonably, but very long single
lines occasionally still overflow. Force a horizontal scrollbar
instead of letting the line bleed past the viewport. */
.md-typeset pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* --- Vote box on mobile -------------------------------------------
vote-box.js renders unstyled markup on Material pages (the .vb-*
styles live in styles.css, which we don't load here). At minimum,
keep buttons from blowing up across the screen on small phones and
make the comment textarea fit the column. */
#vote-box-mount .vb-buttons {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: .8rem 0;
}
#vote-box-mount .vb-btn {
flex: 1 1 auto;
min-width: 7rem;
padding: .5rem .8rem;
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 100px;
background: var(--md-default-bg-color, #fff);
font: inherit;
cursor: pointer;
}
#vote-box-mount .vb-btn.on {
border-color: var(--md-accent-fg-color, #6b4a8b);
color: var(--md-accent-fg-color, #6b4a8b);
}
#vote-box-mount .vb-comment {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: .5rem .6rem;
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 4px;
font: inherit;
resize: vertical;
}
#vote-box-mount .vb-status {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
font-size: .8rem;
margin-top: .6rem;
color: var(--md-default-fg-color--light, rgba(0,0,0,.65));
}
/* --- Glossary popover sizing on phones ----------------------------
The popover's max-width is already 420px, but on a 360px phone we
want it to feel pinned to the column rather than floating. */
@media (max-width: 480px) {
.gd-term-popover {
/* Slightly larger touch target without dominating the screen. */
max-width: calc(100vw - 16px);
left: 8px !important; /* Pin near edge so JS-computed left can't push offscreen. */
right: 8px;
}
}
/* --- Navigation polish (added 2026-05-08) -------------------------
Two real complaints from a phone user:
(1) "When I open a page I don't know where I am in the nav."
(2) "Hard to track what I opened vs closed, especially on phone."
Plus: hardcoded purples were invisible against Material's slate (dark)
background. Replaced with color-mix overlays of --md-accent-fg-color,
so the same rules adapt to both palettes. Tunable per-scheme below. */
:root {
/* Light mode (default scheme). Subtle tints — the page bg is white,
so even 8% accent reads as a clear highlight. */
--gd-nav-active-bg: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent);
--gd-nav-active-bg-mobile: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
--gd-nav-hover-bg: color-mix(in srgb, var(--md-default-fg-color) 5%, transparent);
--gd-nav-row-border: color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
}
[data-md-color-scheme="slate"] {
/* Dark mode. Page bg is dark; same overlay opacities would disappear,
so push them up. Accent stripe stays at full saturation — that's
the one element that should never blend. */
--gd-nav-active-bg: color-mix(in srgb, var(--md-accent-fg-color) 18%, transparent);
--gd-nav-active-bg-mobile: color-mix(in srgb, var(--md-accent-fg-color) 26%, transparent);
--gd-nav-hover-bg: color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
--gd-nav-row-border: color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
}
/* Active page: solid accent stripe on the left + tinted background +
bolder weight. The stripe is the load-bearing signal; the background
is the secondary cue (helps on mobile thumb-scroll). */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
color: var(--md-accent-fg-color) !important;
font-weight: 600 !important;
position: relative;
background: var(--gd-nav-active-bg);
border-radius: 0 4px 4px 0;
}
.md-nav__link--active::before,
.md-nav__item--active > .md-nav__link::before {
content: "";
position: absolute;
left: -.6rem;
top: .15rem;
bottom: .15rem;
width: 3px;
background: var(--md-accent-fg-color);
border-radius: 2px;
}
/* Active section ancestors: dotted underline on the parent-group label,
so the user can trace from the active page up to its section. */
.md-nav__item--nested.md-nav__item--active > .md-nav__link,
.md-nav__item--section.md-nav__item--active > .md-nav__link {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Chevron rotation animates clearly between open/closed states. */
.md-nav__icon.md-icon {
transition: transform .18s ease-out;
}
.md-nav__toggle:checked ~ .md-nav__link .md-nav__icon.md-icon,
[data-md-toggle][type="checkbox"]:checked ~ label .md-nav__icon.md-icon {
transform: rotate(90deg);
}
/* Collapsible group label: hover signal so the row reads as tappable. */
.md-nav__item--nested > .md-nav__link:hover,
.md-nav__item--section > .md-nav__link:hover {
background: var(--gd-nav-hover-bg);
border-radius: 4px;
}
/* Mobile drawer: bigger touch targets, row separators, full-width active
highlight so a thumb-scrolling user sees "you are here" immediately. */
@media (max-width: 76em) {
.md-nav--primary .md-nav__link {
padding: .65rem .75rem !important;
line-height: 1.35;
}
.md-nav--primary .md-nav__item {
border-bottom: 1px solid var(--gd-nav-row-border);
}
.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__item--active > .md-nav__link {
background: var(--gd-nav-active-bg-mobile);
}
}
/* --- Page card (prototype, Maggie-Appleton-leaning) ---------------
Rendered immediately under the H1 on curated human-readable pages.
Folds the L0 punchline, epistemic status, tags, a 3-5 node L0
mermaid, and read-next links into one component. Same component
is intended to render as a search-result hit and as the related-
block sidebar — so styling lives here once. */
.md-typeset .page-card {
margin: 1rem 0 1.6rem;
padding: .95rem 1.05rem 1rem;
background: color-mix(in srgb, var(--md-accent-fg-color) 4%, var(--md-default-bg-color));
border: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 22%, transparent);
border-left: 3px solid var(--md-accent-fg-color);
border-radius: 6px;
}
[data-md-color-scheme="slate"] .md-typeset .page-card {
background: color-mix(in srgb, var(--md-accent-fg-color) 9%, var(--md-default-bg-color));
border-color: color-mix(in srgb, var(--md-accent-fg-color) 32%, transparent);
}
.md-typeset .page-card-l0 {
font-size: 1.02rem;
font-weight: 500;
line-height: 1.4;
color: var(--md-default-fg-color);
margin: 0;
}
.page-card-meta {
margin-top: .55rem;
display: flex;
flex-wrap: wrap;
gap: .35rem .4rem;
font-size: .72rem;
letter-spacing: .01em;
}
.pc-chip {
display: inline-block;
padding: .12rem .55rem;
border-radius: 100px;
background: color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
color: var(--md-default-fg-color--light, rgba(0,0,0,.65));
border: 1px solid transparent;
white-space: nowrap;
line-height: 1.5;
}
.pc-chip-status {
background: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
color: var(--md-accent-fg-color);
font-weight: 500;
}
.pc-chip-tended {
background: transparent;
border-color: color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
}
.page-card-bottom {
margin-top: .9rem;
padding-top: .85rem;
border-top: 1px dashed color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 1.1rem;
align-items: start;
}
.md-typeset .page-card-diagram .mermaid {
margin: 0;
}
.md-typeset .page-card-diagram .mermaid svg {
max-width: 100%;
height: auto;
}
.md-typeset .page-card-side {
font-size: .82rem;
line-height: 1.55;
}
.md-typeset .page-card-side-head {
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-default-fg-color--light, rgba(0,0,0,.65));
margin: 0 0 .4rem;
font-weight: 600;
}
.md-typeset .page-card-side-list {
list-style: none;
padding: 0;
margin: 0;
}
.md-typeset .page-card-side-list li {
margin: .2rem 0;
padding-left: 0;
}
.md-typeset .page-card-side-list li::before {
content: "→ ";
color: color-mix(in srgb, var(--md-accent-fg-color) 70%, transparent);
margin-right: .15rem;
}
.md-typeset .page-card-side a {
text-decoration: none;
color: var(--md-default-fg-color);
border-bottom: 1px dotted color-mix(in srgb, var(--md-accent-fg-color) 50%, transparent);
}
.md-typeset .page-card-side a:hover {
color: var(--md-accent-fg-color);
border-bottom-color: var(--md-accent-fg-color);
}
.md-typeset .page-card-source {
display: block;
margin: -.6rem 0 1.4rem;
font-size: .74rem;
color: var(--md-default-fg-color--light, rgba(0,0,0,.6));
}
@media (max-width: 600px) {
.page-card-bottom {
grid-template-columns: 1fr;
gap: .85rem;
}
.md-typeset .page-card-l0 {
font-size: .98rem;
}
}
/* --- Tags page jump strip -----------------------------------------
Auto-generated by tools/build_tags_page.py at the top of TAGS.md.
A dense set of chips (one per tag) — clicking jumps to the anchor
for that tag's section below. Lets a reader land on the topic
without scrolling the whole 161-tag index. */
.md-typeset .tag-jump {
margin: 1rem 0 1.4rem;
padding: .8rem .9rem;
background: color-mix(in srgb, var(--md-default-fg-color) 4%, transparent);
border-radius: 6px;
line-height: 1.9;
}
.md-typeset .tag-jump a {
display: inline-block;
padding: .12rem .55rem;
margin: .12rem .12rem .12rem 0;
border-radius: 100px;
background: var(--md-default-bg-color);
border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
color: var(--md-default-fg-color);
text-decoration: none;
font-size: .76rem;
letter-spacing: .01em;
}
.md-typeset .tag-jump a:hover {
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
}
.md-typeset .tag-jump .tag-jump-count {
display: inline-block;
margin-left: .25rem;
padding: 0 .35rem;
border-radius: 100px;
background: color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
color: var(--md-default-fg-color--light, rgba(0,0,0,.6));
font-size: .68rem;
font-weight: 500;
}
/* --- Page hero figure ---------------------------------------------
Hand-curated hero images sit between the page card and the body
prose. Constrain max-width so a tall portrait image doesn't
dominate the article column on desktop. */
.md-typeset .page-hero {
margin: 1.4rem auto 1.8rem;
max-width: 520px;
text-align: center;
}
.md-typeset .page-hero img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .25);
}
[data-md-color-scheme="slate"] .md-typeset .page-hero img {
box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .55);
}
.md-typeset .page-hero figcaption {
margin-top: .55rem;
font-size: .78rem;
color: var(--md-default-fg-color--light, rgba(0,0,0,.65));
font-style: italic;
line-height: 1.5;
}
/* Source / attribution line beneath the figcaption main. Smaller and
not italic, so it reads as metadata rather than caption prose. */
.md-typeset .page-hero figcaption .page-hero-credit {
display: block;
margin-top: .3rem;
font-size: .68rem;
font-style: normal;
letter-spacing: .015em;
color: var(--md-default-fg-color--light, rgba(0,0,0,.55));
}
.md-typeset .page-hero figcaption .page-hero-credit a {
color: inherit;
border-bottom: 1px dotted color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
text-decoration: none;
}
.md-typeset .page-hero figcaption .page-hero-credit a:hover {
color: var(--md-accent-fg-color);
border-bottom-color: var(--md-accent-fg-color);
}
/* --- Search result polish (lightweight, complements Material defaults) ---
Material's search results are clean but flat — every hit looks identical
regardless of how strong a match it is. With per-page boosts now in
effect, the highest-ranked items deserve a tiny visual cue so the eye
stops on the front-door pages first.
These rules only style hover/active state; the unhovered list keeps
Material's defaults so the styling can't fight a future Material update. */
.md-search-result__item {
border-left: 2px solid transparent;
transition: border-color .14s ease, background-color .14s ease;
}
.md-search-result__item:hover,
.md-search-result__item--active {
border-left-color: var(--md-accent-fg-color);
background: color-mix(in srgb, var(--md-accent-fg-color) 6%, transparent);
}
[data-md-color-scheme="slate"] .md-search-result__item:hover,
[data-md-color-scheme="slate"] .md-search-result__item--active {
background: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
}
/* Pull the title slightly heavier so it scans as the primary anchor when
the user is sweeping a long result list. */
.md-search-result__title {
font-weight: 500;
}
/* Trim the teaser line-height a bit and clamp to 3 lines so a long
prose page doesn't dominate the panel. */
.md-search-result__teaser {
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Breadcrumbs (navigation.path) — Material renders them with low contrast
by default; a touch more weight makes them feel like real orientation. */
.md-path {
font-size: .72rem;
margin-bottom: .8rem;
}
.md-path__link,
.md-path__link:hover {
color: var(--md-default-fg-color--light);
}
.md-path__item:last-child .md-path__link {
color: var(--md-accent-fg-color);
font-weight: 500;
}
/* --- Inline link affordance (light + slate) ----------------------
Reported: with `primary: black`, Material's default
--md-typeset-a-color resolves to black, so inline links blend
into body text on the homepage and the Explore tables read as
plain code chips. Light scheme used to keep Material's defaults
(invisible); now both schemes route the link color through the
indigo accent, with always-on underline and an explicit
tasks/TODO.md) — Material's
default background swallows the link color, so chips read
as inert references. Tint them with the link color, give them a
border, and lift on hover so the eye lands on them in a table. */
.md-typeset a > code {
color: var(--md-typeset-a-color);
background: color-mix(in srgb, var(--md-typeset-a-color) 6%, var(--md-default-bg-color));
border: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 22%, transparent);
padding: 1px 6px;
border-radius: 4px;
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.md-typeset a:hover > code,
.md-typeset a:focus > code {
color: var(--md-accent-fg-color);
background: color-mix(in srgb, var(--md-accent-fg-color) 12%, var(--md-default-bg-color));
border-color: color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
}
/* Body tables (homepage Explore + similar): nudge the first-column
link weight so the link reads as the row anchor, not the prose. */
.md-typeset table:not([class]) td:first-child a {
font-weight: 500;
}
/* Slate (dark) scheme: brighter link tone for contrast on dark bg.
Chip styling rebases on the slate link color via the cascaded
--md-typeset-a-color, so the rules above already follow. */
[data-md-color-scheme="slate"] {
--md-typeset-a-color: #b8a7ff;
}
[data-md-color-scheme="slate"] .md-typeset a {
text-underline-offset: 2px;
}
[data-md-color-scheme="slate"] .md-typeset a:hover,
[data-md-color-scheme="slate"] .md-typeset a:focus {
color: #d8ccff;
text-decoration-color: #d8ccff;
}
[data-md-color-scheme="slate"] .md-typeset a:hover > code,
[data-md-color-scheme="slate"] .md-typeset a:focus > code {
color: #d8ccff;
background: color-mix(in srgb, #d8ccff 16%, var(--md-default-bg-color));
border-color: color-mix(in srgb, #d8ccff 45%, transparent);
}
[data-md-color-scheme="slate"] .md-typeset a:visited {
color: color-mix(in srgb, var(--md-typeset-a-color) 78%, #c7a4ff 22%);
}
/* --- Zoomable diagrams (mermaid + inline SVG infographics) -------
Reported: diagrams are hard to read on phone and on a small laptop.
Click any .mermaid or .infographic to open a fullscreen modal with
pinch- (mobile) and wheel-zoom (desktop). JS in assets/zoom.js. */
.md-content .mermaid,
.md-content .infographic {
cursor: zoom-in;
position: relative;
}
/* Subtle "click to zoom" affordance on hover, top-right of the figure.
Only renders on devices with a hover capability so it doesn't take
up touch real estate. */
@media (hover: hover) {
.md-content .mermaid::after,
.md-content .infographic::after {
content: "⤢";
position: absolute;
top: .25rem;
right: .25rem;
width: 1.4rem;
height: 1.4rem;
line-height: 1.4rem;
text-align: center;
font-size: .9rem;
color: var(--md-default-fg-color--light);
background: color-mix(in srgb, var(--md-default-bg-color) 80%, transparent);
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 4px;
opacity: 0;
transition: opacity .12s ease-out;
pointer-events: none;
}
.md-content .mermaid:hover::after,
.md-content .infographic:hover::after {
opacity: 1;
}
}
.gd-zoom-modal {
position: fixed;
inset: 0;
z-index: 9500;
background: color-mix(in srgb, var(--md-default-bg-color) 92%, black);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Kill double-tap browser zoom inside the modal so our pinch-zoom
is the only handler that fires. */
touch-action: none;
}
.gd-zoom-modal[hidden] { display: none; }
.gd-zoom-stage {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.gd-zoom-content {
/* The transform origin is the geometric center so zoom feels symmetric. */
transform-origin: center center;
transition: transform .08s ease-out;
will-change: transform;
max-width: 96vw;
max-height: 92vh;
display: flex;
align-items: center;
justify-content: center;
}
.gd-zoom-content svg {
max-width: 96vw;
max-height: 92vh;
width: auto;
height: auto;
}
.gd-zoom-close {
position: absolute;
top: .6rem;
right: .8rem;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.18));
background: var(--md-default-bg-color);
color: var(--md-default-fg-color);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
z-index: 1;
}
.gd-zoom-controls {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: .35rem;
background: var(--md-default-bg-color);
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.18));
border-radius: 100px;
padding: .25rem .35rem;
box-shadow: 0 12px 28px -12px rgba(0,0,0,.4);
}
.gd-zoom-controls button {
border: none;
background: transparent;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
font-size: 1.05rem;
color: var(--md-default-fg-color);
cursor: pointer;
}
.gd-zoom-controls button:hover {
background: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
color: var(--md-accent-fg-color);
}
/* --- Just godding glyph sheet ------------------------------------
docs/JUST-GODDING.md renders ~24 inline SVG glyphs in a grid, one
per OmegaL atom. The glyph svgs themselves use ig-* classes from
infographics.css; this section only handles layout + label. */
.md-typeset .gd-glyph-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .8rem;
margin: 1.2rem 0 1.6rem;
padding: 0;
list-style: none;
}
.md-typeset .gd-glyph-grid > li {
margin: 0;
padding: .8rem .6rem .65rem;
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.10));
border-radius: 6px;
text-align: center;
background: color-mix(in srgb, var(--md-default-fg-color) 2%, transparent);
}
.md-typeset .gd-glyph-grid > li::before {
content: none; /* override Material's default ::before on */
}
.md-typeset .gd-glyph-grid svg {
width: 44px;
height: 44px;
display: block;
margin: 0 auto .4rem;
}
.md-typeset .gd-glyph-grid .gd-glyph-name {
display: block;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .78rem;
color: var(--md-default-fg-color);
font-weight: 600;
letter-spacing: .02em;
}
.md-typeset .gd-glyph-grid .gd-glyph-gloss {
display: block;
font-size: .7rem;
color: var(--md-default-fg-color--light);
margin-top: .15rem;
line-height: 1.35;
}
.md-typeset .gd-glyph-grid .gd-glyph-cat {
font-size: .62rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-default-fg-color--light);
display: block;
margin-top: .25rem;
opacity: .7;
}
/* --- Appearance menu (appearance.js) ------------------------------
Wikipedia Vector 2022-style reading-prefs panel. Provides the two
axes Material's palette toggle doesn't cover: text size and content
width. Pref values land on as data-* attributes; the rules
below respond. localStorage persists across pages. */
/* Text-size axis — Wikipedia raised the default from 14px to 16px for
WCAG AA and offers Small / Standard / Large. Material reads font-size
from html, so adjusting it on isn't enough — but Material's
typography is built on the --md-text-font-size-base custom property
exposed on .md-typeset. Override that property for body[data-*]. */
body[data-text-size="small"] .md-typeset { font-size: .72rem; }
body[data-text-size="standard"] .md-typeset { font-size: .8rem; } /* Material default */
body[data-text-size="large"] .md-typeset { font-size: .92rem; }
/* Width axis — Material's .md-grid caps at 61rem (~976px). Wikipedia
"Wide" stretches to ~1440px on large screens. Use min() so we don't
force horizontal scroll on smaller laptops. */
body[data-content-width="wide"] .md-grid {
max-width: min(1440px, 92vw);
}
/* The button sits in .topbar alongside the search chip and auth pill.
Style mirrors .qsearch so the three controls read as a unit. */
.topbar .appearance-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
height: 1.6rem;
padding: 0 .55rem;
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 100px;
background: var(--md-default-bg-color, #fff);
color: var(--md-default-fg-color, #222);
font: 600 11px/1 "Inter", system-ui, sans-serif;
letter-spacing: .04em;
cursor: pointer;
}
.topbar .appearance-btn:hover,
.topbar .appearance-btn[aria-expanded="true"] {
border-color: var(--md-accent-fg-color, #6b4a8b);
color: var(--md-accent-fg-color, #6b4a8b);
}
.appearance-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 240px;
padding: 10px 12px 12px;
background: var(--md-default-bg-color, #fff);
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 8px;
box-shadow: 0 14px 36px -14px rgba(0,0,0,.22);
z-index: 9100;
font: 12px/1.4 "Inter", system-ui, sans-serif;
color: var(--md-default-fg-color, #222);
text-align: left;
cursor: default;
}
.appearance-panel[hidden] { display: none; }
.appearance-title {
font-weight: 700;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-default-fg-color--light, rgba(0,0,0,.65));
margin-bottom: 8px;
}
.appearance-row { margin-bottom: 10px; }
.appearance-label {
font-size: 11px;
font-weight: 600;
margin-bottom: 4px;
color: var(--md-default-fg-color--light, rgba(0,0,0,.7));
}
.appearance-seg {
display: inline-flex;
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 6px;
overflow: hidden;
}
.appearance-seg-btn {
padding: 5px 10px;
font: inherit;
font-size: 12px;
background: transparent;
color: var(--md-default-fg-color, #222);
border: none;
border-right: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
cursor: pointer;
}
.appearance-seg-btn:last-child { border-right: none; }
.appearance-seg-btn:hover {
background: var(--md-default-fg-color--lightest, rgba(0,0,0,.06));
}
.appearance-seg-btn.on {
background: var(--md-accent-fg-color, #6b4a8b);
color: var(--md-accent-bg-color, #fff);
}
.appearance-reset {
margin-top: 4px;
padding: 4px 10px;
font: inherit;
font-size: 11px;
background: transparent;
color: var(--md-default-fg-color--light, rgba(0,0,0,.6));
border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.12));
border-radius: 4px;
cursor: pointer;
}
.appearance-reset:hover {
color: var(--md-accent-fg-color, #6b4a8b);
border-color: var(--md-accent-fg-color, #6b4a8b);
}
/* On mobile the topbar lives below Material's header (rule at top of
this file). Anchor the panel to the right edge so it doesn't overflow
narrow screens. */
@media (max-width: 76em) {
.topbar .appearance-btn { font-size: 10px; min-width: 1.6rem; height: 1.4rem; }
.appearance-panel { right: -.25rem; min-width: 220px; }
}