:root {
/* WilderCode — night sky + meadow green */
--bg: #0d1117; --surface: #161b22; --surface-2: #1f2937; --border: #2d3748;
--rung-bg: #1a212b;
--text: #f0f4f8; --muted: #8b9ab3; --graphite: #ffd24a;
--green: #a9d15c; --green-dark: #6f8f38; --green-glow: rgba(169,209,92,.15);
/* The logo's two leaf greens, fixed at these exact values regardless of
theme -- unlike --green/--green-dark, which themselves shift under
the light theme for contrast. Used where the brand color itself is
the point (e.g. the Help subheading icons), not just "a green that
reads on this background". */
--leaf-light: #a9d15c;
--leaf-dark: #6f8f38;
--glow: rgba(40,200,64,.35); --field: #0d1117;
/* Search box at rest: darker than both the card and the page behind it, so
it reads as a fine recessed rim rather than a drawn line. Separate from
--border so the resting edge can be quiet without lightening every other
divider on the page. */
--field-border: #070a0e;
/* Dark mode's --surface already reads as a distinct input well against
--bg, so the field just reuses it here; only light mode needs its own
tint (see below). */
--field-bg: var(--surface);
/* Wilder orange (the "ER" in the wordmark) — call-to-action accent */
--orange: #f0891f; --orange-dark: #d1741a; --orange-glow: rgba(240,137,31,.32);
--danger: #ff6b5b;
/* Shared "filled button" look: every solid CTA (Rhyme, Scan, active
toggles) pulls from these two instead of a flat color-fill, so they
read as one soft family rather than each button being its own flat
block of pure accent color. A narrower range than before -- both
stops stay close to the true accent hue (only a light touch of white
up top, a light touch of --muted down low) so the color doesn't wash
out grey, while the gradient itself stays gentle instead of a
high-contrast, eye-grabbing sweep. */
--btn-orange: linear-gradient(180deg,
color-mix(in srgb, var(--orange) 78%, white) 0%,
color-mix(in srgb, var(--orange) 90%, var(--muted) 10%) 100%);
--btn-orange-hover: linear-gradient(180deg,
color-mix(in srgb, var(--orange-dark) 78%, white) 0%,
color-mix(in srgb, var(--orange-dark) 90%, var(--muted) 10%) 100%);
--btn-green: linear-gradient(180deg,
color-mix(in srgb, var(--green) 78%, white) 0%,
color-mix(in srgb, var(--green) 90%, var(--muted) 10%) 100%);
/* Softened text for all filled buttons -- a slightly transparent white
reads gentler than flat near-black, less of a hard-edged stamp. */
--btn-text: rgba(255, 255, 255, .88);
/* closure ramp: meadow green (resolved) -> faint slate (open) */
--c-identity: #9b93b0; /* identity: a muted tone, outside the green rhyme spectrum */
--c-perfect: #a9d15c; --c-partner: #9cc856; --c-family: #8fbf4f; --c-additive: #6f8f38;
--c-subtractive: #8a936a; --c-assonance: #8b9ab3; --c-consonance: #5f6b7a;
/* word-underline ramp: shades of orange fading to grey, intensity tracking
closure. Uses var()+color-mix so it re-resolves under the light theme. */
--u-perfect: var(--orange);
--u-partner: color-mix(in srgb, var(--orange) 92%, var(--muted));
--u-family: color-mix(in srgb, var(--orange) 84%, var(--muted));
--u-additive: color-mix(in srgb, var(--orange) 70%, var(--muted));
--u-subtractive: color-mix(in srgb, var(--orange) 58%, var(--muted));
--u-assonance: color-mix(in srgb, var(--orange) 44%, var(--muted));
--u-consonance: color-mix(in srgb, var(--orange) 30%, var(--muted));
--u-identity: var(--muted);
/* Row-background gradient: the app's existing closure ramp (--c-* above,
meadow green fading to faint slate) reused as the one shared gradient
for both the Rhyme type filter rows and the Rhyme categories table in
Help -- one gradient, two places, instead of each inventing its own. */
--rt-perfect: var(--c-perfect);
--rt-partner: var(--c-partner);
--rt-family: var(--c-family);
--rt-additive: var(--c-additive);
--rt-subtractive: var(--c-subtractive);
--rt-assonance: var(--c-assonance);
--rt-consonance: var(--c-consonance);
--rt-identity: var(--muted);
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.09);
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
:root[data-theme="light"] {
--bg: #fbfbf8; --surface: #ffffff; --surface-2: #f1f5f0; --border: #d7ddd0;
--rung-bg: #f4f6ef;
--text: #0f172a; --muted: #5a6a82; --graphite: #000000;
--green: #6f8f38; --green-dark: #4a6025; --green-glow: rgba(111,143,56,.12);
--glow: rgba(111,143,56,.28); --field: #ffffff;
--field-border: #eaeee5;
/* Light mode's --surface (white) is indistinguishable from the page card
it sits on, so the search box reads as a flat panel rather than a
field to type into. A neutral (untinted) light grey -- dark mode's
near-black --surface already carries this contrast on its own -- gives
it the look of a shallow recessed well instead. Tinted toward the
page's own olive hue (#e6eadf, not neutral #e5e5e5) so the well
belongs to the cards around it instead of reading as a grey,
disabled-looking box. */
--field-bg: #e6eadf;
--orange: #e07d16; --orange-dark: #c26a12; --orange-glow: rgba(224,125,22,.22);
--danger: #c0392b;
--c-identity: #7a6f96;
--c-perfect: #6f8f38; --c-partner: #678634; --c-family: #5f7d30; --c-additive: #4a6025;
--c-subtractive: #6f7658; --c-assonance: #64748b; --c-consonance: #98a3b2;
/* Underline ramp on the light page starts from --orange-dark. Bare
--orange is 2.71:1 against this background, under the 3:1 floor for
a graphical mark; --orange-dark clears it and still reads as the
brand orange, richer instead of washed out. */
--u-perfect: var(--orange-dark);
--u-partner: color-mix(in srgb, var(--orange-dark) 92%, var(--muted));
--u-family: color-mix(in srgb, var(--orange-dark) 84%, var(--muted));
--u-additive: color-mix(in srgb, var(--orange-dark) 70%, var(--muted));
--u-subtractive: color-mix(in srgb, var(--orange-dark) 58%, var(--muted));
--u-assonance: color-mix(in srgb, var(--orange-dark) 44%, var(--muted));
--u-consonance: color-mix(in srgb, var(--orange-dark) 30%, var(--muted));
--shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.09);
}
/* The shared --btn-orange/--btn-green (Scan buttons, Copy-hover, the
pronunciation toggle -- NOT #go, which has its own full-saturation
gradient) read fine against light theme's bright page, but the same
--muted-blended fill reads murky against dark theme's near-black
backdrop. Dark theme gets an almost-white (~90%) tint instead -- just
enough accent color to hint at orange/green -- with matching dark text
(--btn-text stays translucent white; that's #go's alone, and swapping it
here too would vanish against this near-white fill). Light theme's own
look is untouched. */
:root[data-theme="dark"] {
--btn-orange: linear-gradient(180deg,
color-mix(in srgb, var(--orange) 12%, white) 0%,
color-mix(in srgb, var(--orange) 22%, white) 100%);
--btn-orange-hover: linear-gradient(180deg,
color-mix(in srgb, var(--orange-dark) 12%, white) 0%,
color-mix(in srgb, var(--orange-dark) 22%, white) 100%);
--btn-green: linear-gradient(180deg,
color-mix(in srgb, var(--green) 12%, white) 0%,
color-mix(in srgb, var(--green) 22%, white) 100%);
--btn-text-onlight: #16181c;
}
/* High contrast: a deliberate accessibility choice, not a fourth point on
the light/dark spectrum -- true black/white, thick always-visible
borders (every card already has `border: 1px solid var(--border)`
underneath its accent styling, so this alone outlines everything), and
the closure/rhyme-gender ramps replaced outright rather than derived
from color-mix() blends, since several of the original blend endpoints
(the faint end of each ramp, meant to read as "barely there" against a
soft dark backdrop) drop below AA text contrast against true black.
Every color below was chosen bright enough to clear ~7:1 against #000
on its own, not just tuned by feel. */
:root[data-theme="hc"] {
--bg: #000000; --surface: #000000; --surface-2: #141414; --border: #ffffff;
--rung-bg: #000000;
--text: #ffffff; --muted: #dcdcdc; --graphite: #ffffff;
--green: #6bff4d; --green-dark: #3ecc23; --green-glow: rgba(107,255,77,.3);
--glow: rgba(107,255,77,.55); --field: #000000;
--field-border: #ffffff; --field-bg: #000000;
--orange: #ffb347; --orange-dark: #ff9500; --orange-glow: rgba(255,179,71,.45);
--danger: #ff8a80;
--btn-orange: linear-gradient(180deg, #ffc670 0%, #ffb347 100%);
--btn-orange-hover: linear-gradient(180deg, #ffd794 0%, #ffc670 100%);
--btn-green: linear-gradient(180deg, #8dff70 0%, #6bff4d 100%);
--btn-text: #000000; --btn-text-onlight: #000000;
/* closure ramp: kept the same "green, closest -> faded, most distant"
direction as the default theme, but each stop is its own bright hue
(not one hue fading to grey) so adjacent rungs stay distinguishable
even for a viewer who can't rely on subtle saturation differences. */
--c-identity: #eab8f7;
--c-perfect: #7cfc6b; --c-partner: #79e8a0; --c-family: #7bd6c4;
--c-additive: #7cc3e8; --c-subtractive: #9ab4e0; --c-assonance: #b7a6e0;
--c-consonance: #d6d6e6;
--u-identity: var(--muted);
--shadow: 0 0 0 1px #ffffff;
}
/* Focus is otherwise mostly the browser default outline, which is too
thin/low-contrast against a stark black-and-white page to trust here. */
:root[data-theme="hc"] *:focus-visible {
outline: 3px solid #ffe600; outline-offset: 2px;
}
/* The dark-theme photo backdrop (see the body rule below) reintroduces
exactly the low-contrast, hard-to-predict-luminance backdrop this theme
exists to remove. */
:root[data-theme="hc"] body {
background-image: none !important; background-attachment: scroll;
}
/* Same intent as [data-theme="hc"] above (true, deliberate contrast rather
than a themed palette), just inverted -- black text/borders on white
for whoever finds a bright field easier to read than a dark one. Same
ramp *direction* per rung (green -> teal -> blue -> lavender -> grey,
identity its own magenta-ish outlier) as the dark HC theme, just each
stop darkened instead of brightened so it clears ~7:1 against #fff
instead of #000. */
:root[data-theme="hc-light"] {
--bg: #ffffff; --surface: #ffffff; --surface-2: #efefef; --border: #000000;
--rung-bg: #ffffff;
--text: #000000; --muted: #3a3a3a; --graphite: #000000;
--green: #146608; --green-dark: #0e4a06; --green-glow: rgba(20,102,8,.12);
--glow: rgba(20,102,8,.3); --field: #ffffff;
--field-border: #000000; --field-bg: #ffffff;
--orange: #a04e00; --orange-dark: #7a3c00; --orange-glow: rgba(160,78,0,.22);
--danger: #a3170e;
--btn-orange: linear-gradient(180deg, #a04e00 0%, #7a3c00 100%);
--btn-orange-hover: linear-gradient(180deg, #7a3c00 0%, #5c2d00 100%);
--btn-green: linear-gradient(180deg, #146608 0%, #0e4a06 100%);
--btn-text: #ffffff; --btn-text-onlight: #ffffff;
--c-identity: #7a1069;
--c-perfect: #146608; --c-partner: #12603f; --c-family: #10594f;
--c-additive: #0e4a68; --c-subtractive: #1b3a70; --c-assonance: #42267a;
--c-consonance: #4a4560;
--u-identity: var(--muted);
--shadow: 0 0 0 1px #000000;
}
:root[data-theme="hc-light"] *:focus-visible {
outline: 3px solid #0033cc; outline-offset: 2px;
}
:root[data-theme="hc-light"] body {
background-image: none !important; background-attachment: scroll;
}
/* Settings > Colorblind-friendly colors. Deliberately NOT a theme: colour
vision is independent of whether you want a light, dark or high-contrast
page, so folding it into the Theme select would have forced a choice
between the two. It overrides only the eight rung colours -- the one
place in the app where meaning is carried by hue.
The default ramp walks green -> olive -> slate, which is close to the
axis red-green colour blindness collapses: Perfect, Partner and Family
sit within a few percent of each other in hue AND lightness, so for a
deuteranope or protanope those three rungs are effectively one colour.
These eight are anchored on the Okabe-Ito palette (the literature-
standard categorical set verified distinguishable under protanopia,
deuteranopia and tritanopia), then lightness/saturation-tuned per theme
-- hue held fixed -- against three measured constraints, not eyeballed:
minimum pairwise CIE76 ΔE >=10 after simulating all three CVD types
(Brettel/Viénot transform), WCAG contrast >=4.5:1 (>=7:1 for the two
high-contrast themes, matching their own stricter promise) against that
theme's rung background, and >=10 ΔE from the theme's own body text
colour so a rung tint never reads as plain text. One set per theme,
not one set reused everywhere: a colour clearing contrast on a
near-black page is nowhere near 4.5:1 on a near-white one, so hue
identity carries across themes but the actual values don't. */
:root[data-cb="on"] {
--c-identity: #aa7a94;
--c-perfect: #00ffb9;
--c-partner: #1d95d9;
--c-family: #68c3f5;
--c-additive: #ffc94f;
--c-subtractive: #ec791e;
--c-assonance: #c5b1b1;
--c-consonance: #fff89b;
}
:root[data-cb="on"][data-theme="light"] {
--c-identity: #48313e;
--c-perfect: #1c7c62;
--c-partner: #006fad;
--c-family: #02466c;
--c-additive: #966800;
--c-subtractive: #783705;
--c-assonance: #110808;
--c-consonance: #252303;
}
:root[data-cb="on"][data-theme="hc"] {
--c-identity: #c1acb8;
--c-perfect: #a3f4de;
--c-partner: #93c9e7;
--c-family: #4bbcfb;
--c-additive: #ffebbd;
--c-subtractive: #ecb68c;
--c-assonance: #d28888;
--c-consonance: #9e9954;
}
:root[data-cb="on"][data-theme="hc-light"] {
--c-identity: #390b24;
--c-perfect: #33564c;
--c-partner: #07547f;
--c-family: #2a3a43;
--c-additive: #402e06;
--c-subtractive: #231204;
--c-assonance: #5c3030;
--c-consonance: #615a05;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans);
padding: 30px 20px 80px; display: flex; justify-content: center;
background-image: radial-gradient(60% 45% at 50% -5%, var(--green-glow), transparent 70%);
}
/* Dark mode: night-meadow photo behind everything, under a heavy dark scrim
so the cards and text keep their contrast. (Experiment — easy to remove.) */
:root[data-theme="dark"] body {
background-image:
radial-gradient(60% 45% at 50% -5%, var(--green-glow), transparent 70%),
linear-gradient(rgba(13,17,23,.78), rgba(13,17,23,.9)),
url("/assets/pexels-shijin-cm-177081536-11128041.jpg");
background-size: auto, auto, cover;
background-position: top, top, center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* iOS repaints a fixed background-attachment every frame instead of
compositing it, visibly janky on scroll -- small screens are almost
always a phone, so fall back to scroll there. */
@media (max-width: 768px) {
:root[data-theme="dark"] body { background-attachment: scroll; }
}
/* Light mode: no full-cover photo -- just soft glows behind the content. */
:root[data-theme="light"] body {
background-image:
radial-gradient(65% 50% at 50% -5%, var(--green-glow), transparent 70%),
radial-gradient(55% 45% at 88% 12%, rgba(224,125,22,.09), transparent 70%),
radial-gradient(70% 55% at 10% 105%, rgba(111,143,56,.10), transparent 70%);
background-attachment: fixed;
}
/* Settings > Display background image, off. Same mechanism the two
high-contrast themes already use above, for the same reason stated
differently: some readers just want a flat field behind the text. It
also stops the dark theme's 442 KB photo being downloaded at all --
`background-image: none` means the browser never requests the URL. */
:root[data-bgimg="off"] body {
background-image: none !important; background-attachment: scroll;
}
.wrap { width: 100%; max-width: 760px; }
header { text-align: center; margin-bottom: 18px; }
/* Header lockup: the leaf mark and the wordmark are one unit, not two
elements that happen to sit near each other. Everything inside is sized in
em off the single font-size below -- change that one number and the mark,
the gap and the optical nudge all scale with it in step, which is what
keeps the relationship between them fixed at any size. */
/* A COLUMN. The h1 and the .subtitle under it are both children here, so
the default row direction laid the scope line out BESIDE the wordmark,
vertically centered against it, instead of under it. Harmless while the
subtitle was short enough to read as a tagline to the right; obvious
once the copy widened to "for the page and the stage". The stacking is
the container's job -- .subtitle's own margin-top only spaces it. */
.brand {
display: inline-flex; flex-direction: column; align-items: center;
justify-content: center;
font-size: 22px;
}
/* Sized off .brand-top's own em (the small "Wilder" line), not the
bigger "Rhymes" line below -- the mark is a small eyebrow over the
product name, not scaled to match it. */
.logo {
width: .9em; height: .9em; flex: none;
}
/* Stacked lockup: logo + "Wilder" share a baseline on a small top line;
"Rhymes" -- the actual product name -- sits centered underneath, much
larger. One considered mark instead of a single-line wordmark next to
a leaf icon. h1 stays the single accessible heading (both lines are
inside it); the two lines are plain spans so the column layout and
independent sizing live on them, not on separate headings. */
h1 {
display: flex; flex-direction: column; align-items: center;
font: 400 1em/1 var(--serif); letter-spacing: -.2px; margin: 0;
color: var(--graphite);
}
.brand-top { display: flex; align-items: center; gap: .25em; font-size: .95em; color: inherit; text-decoration: none; }
/* The small "Wilder" line tracks --text rather than --graphite: white on
the dark themes instead of the wordmark's marigold, so the name reads as
the company signature above the title rather than a second gold element
competing with "Rhyme Dictionary" underneath it. Light themes are
unaffected -- --text and --graphite are both near-black there. */
.wilder { font-size: 1em; color: var(--text); }
/* --graphite: near-black in light theme, warm gold in dark -- the
wordmark's own ink color rather than the leaf-green accent. Underline
matches it exactly, so it's one solid color, not two. */
.rhymes {
font-size: 1.8em; margin-top: .06em;
text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px;
text-decoration-color: var(--graphite);
}
/* The scope line, directly under the lockup. Serif like the title and the
tagline so the three read as one unit, but upright rather than italic:
the tagline below is the aside, this is a claim, and setting both in
italic would flatten them into one voice. Sized between the two --
bigger than the tagline because it carries "complete", smaller than the
title because it is not the name. */
.subtitle {
color: var(--muted); font: 400 15px/1.4 var(--serif);
margin: 6px 0 0; letter-spacing: .1px;
}
/* Serif + italic, matching h1's family rather than the page's system
sans -- reads as one considered lockup (mark + name + credit) instead
of a headline in one type system with a caption bolted on in another.
Names only now (no "for poets, playwrights and lyricists" slogan) --
Wood and Pattison are the names this audience actually recognizes. */
.tag { color: var(--muted); font: italic 13px/1.5 var(--serif); margin-top: 4px; }
/* Keep a proper noun whole across a line break. Without this the credit
line split the institution itself on a phone -- "...of Berklee" /
"College of Music" -- which reads as two separate places rather than
one name. Breaking BEFORE "Berklee" is always the better seam. */
.nb { white-space: nowrap; }
/* Early-preview badge: calibrates a first-time visitor's expectations
(this is being actively built, not a finished product) and points
straight at the feedback channel instead of leaving that to the footer.
Sits on its own centered line below the lockup. .badge-row is a
block-level flex wrapper rather than an inline sibling, so the badge is on
its own line unconditionally instead of relying on it and .brand happening
to run out of room at a given width. */
.badge-row { display: flex; justify-content: center; margin-top: 6px; }
/* An outline box, no fill -- same rounded-rectangle treatment and neutral
--border line color as the app's other small popovers (e.g. .layerdd
.layermenu), rather than a fully-rounded pill in its own one-off green
outline, so the badge doesn't look like a unique control. Text/bullets
use --muted (slightly darker than --border itself, which is too low-
contrast to read as text) instead of brand green, so the whole badge
reads as one quiet, neutral marker rather than a colored callout. */
.preview-badge {
display: flex; align-items: center; justify-content: center; gap: 6px;
/* A narrow, shallow box that hugs its text -- not a wide bar competing
with the wordmark above it. */
width: 20%; min-width: fit-content; max-width: 200px;
margin: 0; padding: 3px 14px; border-radius: 10px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font: 400 12px var(--sans); letter-spacing: .1px;
text-transform: none; text-decoration: none;
}
.preview-badge::before, .preview-badge::after { content: "\2022"; opacity: .6; }
/* Search field + filter summary as ONE card: the field is a recessed well
inside it, the filter bar is its footer row. */
.searchgroup {
background: color-mix(in srgb, var(--surface) 80%, var(--border) 20%);
border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow); padding: 8px 8px 0;
transition: border-color .15s;
}
.searchgroup:hover, .searchgroup:focus-within { border-color: var(--green); }
.searchgroup .search { box-shadow: none; border-radius: 9px; }
.searchgroup .search:focus-within { box-shadow: 0 0 0 3px var(--green-glow); }
.searchgroup .filterspanel,
.searchgroup .filterspanel:hover,
.searchgroup .filterspanel[data-open="true"] {
margin: 0 -8px; border: 0; border-radius: 0 0 11px 11px;
background: transparent; box-shadow: none;
}
.search {
display: flex; gap: 10px; align-items: center; background: var(--field-bg);
border: 1px solid var(--field-border); border-radius: 12px;
padding: 8px 8px 8px 18px; box-shadow: var(--shadow);
transition: border-color .15s, box-shadow .15s;
}
.search:focus-within {
border-color: var(--green);
box-shadow: var(--shadow), 0 0 0 3px var(--green-glow);
}
/* Safe for All Ages: lives inside the Filters drawer now, styled like an
ordinary checkbox row (same size/weight as the .layermenu labels it
sits above) rather than the loud standalone pill it started as -- it's
one filter among several here, not a banner. The accent color still
tracks checked state so on/off reads at a glance without relying on
the checkbox alone. */
.safetoggle-inline {
display: flex; align-items: center; gap: 7px; cursor: pointer;
font: 600 13px var(--sans); color: var(--text);
/* .filterspanel-inner uses align-items: flex-start so wrapped rows of
unequal-height items don't stretch -- fine for the dropdown "select
boxes" (all the same height as each other), but it left this plain
checkbox+label sitting top-aligned against them instead of centered
in the row. align-self overrides just this one item back to center. */
align-self: center;
}
.safetoggle-inline input { accent-color: var(--green); }
.safetoggle-inline abbr { text-decoration: none; cursor: help; display: inline-flex; }
.safetoggle-inline:hover .fhelp { color: var(--green); }
#word {
/* min-width:0 overrides the flex item default (min-width:auto), which
Safari/iOS in particular respects for elements: without it,
the input refuses to shrink below its own intrinsic content width
and pushes #go out past the edge of the screen on a narrow phone --
Chromium is more forgiving here, so this didn't show up in earlier
desktop-browser testing. */
flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
font: 400 24px/1.2 var(--serif); outline: none; padding: 6px 0;
}
/* --muted alone (used everywhere else for real secondary text -- hints,
labels) still reads as too solid at 24px serif for something that's
pure placeholder, competing with an actually-typed word instead of
obviously giving way to it. Dial it back further here specifically,
rather than lightening --muted itself and under-weighting real UI text
that uses it elsewhere. */
#word::placeholder { color: var(--muted); opacity: .65; }
/* 24px serif reads fine on desktop, but a narrow phone (or any touch
device, which is never far from narrow) squeezes #word between the
nav arrows and the Rhyme button -- the placeholder was landing right
at the edge of legible. Small screens AND touch, not just one: a
touch tablet in landscape has the width but not the precision for a
tiny target, so this only shrinks the text, never the tap area. */
@media (max-width: 480px), (hover: none) {
#word { font-size: 19px; }
}
/* Below ~440px the nav arrows + Rhyme button alone can eat most of the
bar's width, leaving #word only a few characters of room (it can shrink
to min-width:0 but has nothing left to shrink INTO). Wrap into two rows
instead: the input gets the full width on its own top row, nav arrows
and Rhyme sit together on the row underneath -- still one bar visually
(shared border/background/padding via .search), just tall instead of
wide. */
@media (max-width: 440px) {
.search { flex-wrap: wrap; padding: 10px 10px 8px; }
#word { flex-basis: 100%; order: 1; padding: 4px 0 8px; }
.navbtns { order: 2; }
/* Needs an explicit order like everything else here: unordered flex items
default to 0, which put the clear button on its own row ABOVE the input
it belongs to. Sits with the nav arrows instead -- the small round
buttons together on the left, Rhyme still pushed right. */
#wordClear { order: 3; }
#go { order: 4; margin-left: auto; }
}
/* The shared muted-gradient button fill (see --btn-orange in :root) --
reads as a soft, pressable surface rather than a stark block of pure
orange. The main CTA gets its own full-saturation gradient rather than
the shared muted --btn-orange token -- true brand orange at the bottom
stop in both themes, just a light touch of white up top, no blend
toward --muted. */
#go {
flex-shrink: 0; border: 1px solid var(--orange); color: var(--btn-text); cursor: pointer;
background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 70%, white) 0%, var(--orange) 100%);
font: 600 15px var(--sans); padding: 11px 20px; border-radius: 10px;
}
#go:hover {
background: linear-gradient(180deg, color-mix(in srgb, var(--orange-dark) 70%, white) 0%, var(--orange-dark) 100%);
border-color: var(--orange-dark);
}
#go:active { transform: translateY(1px); }
/* Busy state while a lookup is in flight -- blocks a double-submit and
gives a visible cue beyond the "…" status text alone. */
#go:disabled { opacity: .55; cursor: default; transform: none; }
/* Back / forward through the words you've looked at. */
.navbtns { display: inline-flex; flex-shrink: 0; gap: 4px; }
.navbtn {
border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
border-radius: 8px; cursor: pointer; font: 500 16px var(--sans);
width: 32px; height: 32px; line-height: 1; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .12s, color .12s, opacity .12s;
}
.navbtn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
/* Disabled keeps its shape (dashed outline, no fill) at full strength, so
the arrows read as "nothing that way yet", not as missing. */
.navbtn:disabled {
opacity: 1; cursor: default; background: transparent;
border-style: dashed; color: var(--muted);
}
/* Clears the text in #word only -- the last-run results stay on screen
until a new word is actually searched, so this is a typing shortcut
for backspace-holding, not a "start over" action. Hidden (not just
dimmed) while the field is empty: an always-visible clear button next
to an empty field has nothing to do. */
/* Wears .navbtn's border, fill and hover so it belongs to the same family
as the arrows beside it, but sized to its label instead of a 32px square.
It started as a bare "×" and that failed: unlabelled, sat next to two
other small square buttons, and cleared only the field -- so clicking it
looked like nothing had happened. The word says what it does.
Height deliberately left to .navbtn, which grows to 44px on touch --
an id rule pinning it to 32px would quietly undo that touch target. */
#wordClear {
flex-shrink: 0; width: auto; padding: 0 12px;
font: 600 12px var(--sans);
}
#wordClear[hidden] { display: none; }
.viewbar {
display: flex; flex-wrap: wrap; gap: 14px 22px;
color: var(--muted); font-size: 13px; align-items: center;
}
/* Simplified view (permanent, no longer a toggle -- always carries
.simple): for someone who just wants to type a word and get rhymes, the
Help row is overhead, not something they're choosing between -- hiding
it puts the search box directly above the results/Your list for free,
since that's already their document order. Filters stays put as a
permanent drawer trigger under the search box either way (see
.filterspanel below) -- nothing disabled, just out of the way. */
body.simple .viewbar { display: none; }
/* Filters: the status line doubles as the drawer's toggle -- always on
screen (not swapped for a separate summary once opened), showing the
live filter summary whether the drawer below it is open or closed. Not
a native , which snaps open/closed with no animation and its
own inconsistent marker -- the chevron rotates in place instead of
swapping glyphs, and the slide itself is a CSS grid-row transition.
One box, not two: the card look (background/border/radius/shadow) lives
ONLY on .filterspanel, the outermost element -- the trigger and the
slide-open content beneath it are both plain, unstyled regions inside
that single box, so opening it reads as the box itself growing taller,
not a second card arriving underneath the first with a gap in between.
A thin border-top on the content (see .filterspanel-inner/.helpinner
below) is the only seam between the two regions. */
.filterspanel {
/* Side margins were 4px, which inset Filters and Help from the search box
and "Your list" either side of them -- four stacked cards on three
different left edges. They all share one edge now. */
margin: 6px 0 0;
/* A touch toward --border, not plain --surface -- --surface is pure white
in light theme (identical to popovers/tooltips, which are meant to
pop), so a box this size in that exact color read as a stark, separate
card rather than a quiet home for settings. --bg was tried first and
didn't move the needle (light theme's --bg is #fbfbf8, itself nearly
white); --border has enough tonal distance from --surface in both
themes to actually read as toned down at a small blend ratio. */
background: color-mix(in srgb, var(--surface) 80%, var(--border) 20%);
border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow);
transition: border-color .15s;
}
.filterspanel:hover { border-color: var(--green); }
/* Help gets a more muted background than Filters, on top of its own
border/icon accent -- same ingredients, just leaned further toward
--border, so the two panels read as different at rest, not just when
open or hovered. */
#helpPanel { background: color-mix(in srgb, var(--surface) 65%, var(--border) 35%); }
#helpPanel:hover { border-color: var(--green-dark); }
.filterstatus-row { display: flex; align-items: center; gap: 4px; }
.filterstatus {
display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: left;
cursor: pointer; user-select: none;
margin: 0; padding: 8px 12px;
background: transparent; border: 0;
color: var(--text); font: 600 13px var(--sans);
}
/* Sits just outside the status button (a button can't nest another
button), opening downward -- unlike .fmt-pop's upward-opening popover,
this bar sits near the top of the page, so there's room below it. */
.filterstatus-qmark { flex: none; margin-right: 10px; }
#filterstatus-pop {
bottom: auto; top: 26px; right: 10px;
font: 400 13px var(--sans);
}
#filterstatus-pop div + div { margin-top: 4px; }
.filterstatus-text {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
color: var(--muted); font-weight: 400;
}
.filterstatus b { font-weight: 600; color: var(--muted); }
/* Phone: let the summary wrap onto a second line so nothing is cut to
"Groups:..."; the i popover still has the one-per-line version. */
@media (max-width: 600px) {
.filterstatus { height: auto; min-height: 34px; align-items: flex-start; }
.filterstatus-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
}
.filterschevron { color: var(--muted); flex: none; transition: transform .2s ease; }
.filtersicon { color: var(--muted); flex: none; margin-left: auto; }
/* Help is the secondary bar next to Filters -- quieter at rest, full
contrast on hover/open so it's never actually hard to find or read.
The quieting rides on the chevron alone, not an opacity on the whole
button: fading the button faded its "Help" label with it, which put the
label at 2.3:1 against the panel. The panel's own tinted background is
what makes this bar read as secondary now. */
#helpToggle .filterschevron { opacity: .55; transition: opacity .15s ease; }
#helpToggle:hover .filterschevron,
#helpPanel[data-open="true"] #helpToggle .filterschevron { opacity: 1; }
/* Help's own accent -- a darker, more subdued green than Filters' own
--green border, in both themes -- otherwise the two bars are only told
apart by their label text, and an open Help drawer looked identical to
an open Filters drawer at a glance. Orange was tried first and read as
too loud/alarm-colored for a passive reference panel. */
#helpToggle .filtersicon { color: var(--green-dark); }
.filterspanel[data-open="true"] { border-color: var(--green); }
#helpPanel[data-open="true"] { border-color: var(--green-dark); }
.filterspanel[data-open="true"] .filterschevron { transform: rotate(180deg); }
/* The slide itself: a 0fr/1fr grid-row animates height without ever
measuring the content's pixel height in JS. .filterspanel-body (the grid
item) needs overflow:hidden + min-height:0 so it actually clips down to
nothing while the row collapses -- padding can't live on that same
element, since a box's own padding never shrinks below its set value no
matter how far its content collapses, which left a permanent sliver at
rest. Padding (and the divider border-top) instead lives on
.filterspanel-inner, one level down, which has no min-height override
and so is free to be clipped away entirely by its overflow:hidden
parent. No margin-top here any more -- see the note above the outer
.filterspanel rule for why the gap that used to sit here is gone. */
.filterspanel-wrap {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .25s ease;
}
.filterspanel[data-open="true"] .filterspanel-wrap { grid-template-rows: 1fr; }
.filterspanel-body { overflow: hidden; min-height: 0; }
/* ...but overflow:hidden also clips the Part of speech/Rhyme type/Layers
popovers below, which pop out past the drawer's own edge via
position:absolute (see .layerdd .layermenu). Once the drawer is fully
open (not mid-transition), let it overflow again so those popovers
aren't cut off -- closing snaps data-open back to false immediately, so
the collapse animation is still clipped correctly the instant it
starts. */
.filterspanel[data-open="true"] .filterspanel-body {
overflow: visible;
/* Hold the clip until the slide has finished (same .25s as the grid-rows
transition above). Switching to visible the instant data-open flips let
the drawer's content spill out over Help and Your list while the row
was still growing, then snap into place -- the page seemed to jump.
allow-discrete is what lets `overflow` take a delay; a browser without
it just falls back to the old immediate switch. */
transition: overflow 0s linear .25s allow-discrete;
}
.filterspanel-inner {
padding: 14px 16px; border-top: 1px solid var(--border);
}
/* General Audiences sits above this as a plain toggle; .ga-scope is the
literal bracket around the three filters it applies to (Part of
speech, Rhyme type, Groups) -- drawn with ::before rather than left to
a tooltip, so "this wraps everything below it" reads as a shape, not
just a sentence. A square-bracket line ([, not a curly brace -- easier
to render crisply at this size and just as legible as "encloses this
group") in three border segments (top/left/bottom, no right), colored
by JS toggling .ga-active to match the toggle's own on/off state:
green while General Audiences is actively filtering everything inside,
muted the moment it's off (nothing extra being held back). */
.ga-scope {
position: relative; margin-top: 10px; padding: 4px 0 4px 18px;
display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start;
}
/* A real element, not ::before -- pseudo-element computed style proved
unreliable to query/verify (reported stale border-color after a class
change even though classList and the underlying var were both
confirmed correct), so this uses an actual empty, aria-hidden span
instead. Same visual result, but its style is directly inspectable. */
.ga-bracket {
position: absolute; left: 2px; top: 1px; bottom: 1px; width: 9px;
border-radius: 5px 0 0 5px;
border-top: 2px solid var(--border); border-left: 2px solid var(--border);
border-bottom: 2px solid var(--border);
transition: border-color .15s; pointer-events: none;
}
.ga-scope.ga-active .ga-bracket { border-color: var(--green); }
.fcount { color: var(--muted); font-weight: 500; }
/* Each filter group's checklist stacks in a single column inside its
dropdown -- consistent with the Layers dropdown this pattern was lifted
from, and a popover is narrow enough that multiple columns would just
wrap anyway. */
.fdd .layermenu { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 13px; min-width: 210px; }
.fdd .layermenu label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.fdd .layermenu label abbr { text-decoration: none; cursor: help; display: inline-flex; }
/* WCAG 1.4.3: these examples sit on the Rhyme-categories rows, which are
tinted with the closure ramp itself -- so this is green text on a green
wash, and it measured 2.34-2.79:1 depending on how strong that row's tint
is. Seated harder toward --text than the other accents (50/50, not 80/20)
because the backdrop is doing the same thing the foreground is; 50/50
clears 4.5:1 against the strongest tint in the table with room to spare
and still reads green rather than black. The row colour, not this text,
is what carries the rung identity here. */
.rt-ex {
background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
font-style: italic; white-space: nowrap; cursor: pointer;
color: color-mix(in srgb, var(--green) 50%, var(--text));
border-bottom: 1px dotted currentColor;
}
.rt-ex:hover { color: var(--orange); }
#rungDD .layermenu { min-width: 266px; gap: 4px; }
/* Same closure-strength color ramp the results underline already uses
(orange fading to grey) -- reused here as each row's own background
tint so the relative strength of each rhyme type reads at a glance,
without having to parse "very strong closure" vs. "weakest closure"
as text each time. Full-bleed via negative margin so the tint reads as
a row, not just a pill hugging the text. */
.rt-row { width: 100%; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; box-sizing: border-box; }
/* Marks where the rhymes that share only a vowel (assonance) or only the
ending consonants (consonance) begin. A plain labelled rule: text, not
color, carries the meaning, and it holds no input so the filter
script (which collects inputs only) never sees it. */
.rt-divider { margin: 6px 0 2px; padding-top: 6px; border-top: 1px solid var(--border);
font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fhelp { color: var(--muted); vertical-align: -1px; transition: color .12s; }
.fdd .layermenu label:hover .fhelp { color: var(--green); }
/* Floats above the (narrow, 175-260px) checklist instead of squeezing into
it -- an inline banner inside .layermenu had to wrap its own text across
several lines just to fit the dropdown's width. Positioned relative to
.layermenu (nearest positioned ancestor) but sized by its own content,
so it reads as a small modal card centered over the checklist, wide
enough to hold its message on one or two lines regardless of which of
the three (differently-sized) dropdowns it belongs to. Dismissible by
click -- see the delegated listener near FILTER_SECTIONS. */
.filtererr {
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
width: max-content; max-width: 240px; z-index: 50; cursor: pointer;
text-align: center; color: var(--danger); font-size: 12px;
padding: 9px 14px; border: 1px solid var(--danger); border-radius: 8px;
background: var(--surface); box-shadow: var(--shadow);
}
/* Same anchored-under-the-checklist shape as .filtererr, but advisory
(orange) rather than a hard stop (red/--danger) -- checking Vulgar
while General Audiences is on is a valid, allowed combination, just
one worth a heads-up: some of what Vulgar would otherwise show stays
hidden until General Audiences is off too. Never blocks the checkbox
itself, only informs. */
/* [hidden] must win here: an author `display` rule always beats the
browser's own `[hidden] { display: none }` UA rule regardless of
selector specificity, so without this override toggling the `hidden`
attribute in JS (see syncGaState()) has no visual effect at all --
the note shows unconditionally no matter what state it's set to. */
.filternote[hidden] { display: none; }
.filternote {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
color: var(--orange-dark); font-size: 12px; margin-top: 2px;
padding: 6px 8px; border: 1px solid var(--orange); border-radius: 6px;
background: color-mix(in srgb, var(--orange) 12%, transparent);
}
.filternote button {
font: 600 12px var(--sans); color: var(--orange-dark);
background: none; border: 1px solid var(--orange); border-radius: 5px;
padding: 2px 7px; cursor: pointer; white-space: nowrap;
}
.filternote button:hover { background: color-mix(in srgb, var(--orange) 18%, transparent); }
/* .viewbar is permanently hidden now -- Theme lives in the gear dropdown
and Help is its own drawer, so there's nothing left to show here. */
.viewbar { margin: 12px 4px 0; }
/* Help drawer: reuses .filterspanel/.filterstatus/.filterspanel-wrap
wholesale for the outer toggle+slide (same component as Filters, just a
static "Help" label instead of a live summary) -- only the inside is
different. Each topic stacks as a plain accordion row instead of the
wrapping pill layout .ga-scope uses for checklists. */
/* Was 6px, deliberately tighter than .filterspanel's own top margin, to
read Filters and Help as a related pair rather than two unrelated
sections. Reversed on purpose: at four stacked cards the varied gaps
(0 / 10 / 6 / 14) read as drift rather than grouping, and an even
rhythm is what makes a reference tool look considered. If the pairing
needs saying again, say it with something other than 4px. */
/* Help is reference, not a control: closed, it is just a quiet text row
(no card chrome) that gains its border on hover and while open. A bigger
gap above separates it from the search card. */
#helpPanel { margin-top: 14px; }
#helpPanel[data-open="false"] { background: transparent; border-color: transparent; box-shadow: none; }
#helpPanel[data-open="false"]:hover { border-color: var(--green-dark); }
.helpinner {
padding: 6px 16px; border-top: 1px solid var(--border);
display: flex; flex-direction: column;
/* Capped, so an open Help does not push the results a page away: it
scrolls inside itself instead. */
max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain;
}
.helpacc { border-top: 1px solid var(--border); }
.helpacc:first-child { border-top: 0; }
.helpacc > summary {
cursor: pointer; list-style: none;
padding: 12px 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
font: 600 14px var(--sans); color: var(--text);
}
.helpacc > summary::-webkit-details-marker { display: none; }
.helpacc > summary:hover { color: var(--green); }
.helpacc-chevron { color: var(--muted); flex: none; transition: transform .2s ease; }
.helpacc[open] > summary .helpacc-chevron { transform: rotate(180deg); }
.helpacc-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.helpacc-icon { flex: none; color: var(--leaf-dark); opacity: .9; }
.helptext { padding: 0 4px 18px; }
.helptext dl { margin: 14px 0; }
.helptext dt { font-weight: 700; color: var(--green); margin-top: 12px; }
/* A dt subordinate to the section's own green heading (e.g. author names
under "How this fits the Berklee Method") -- plain text color keeps it
from reading as a second, competing section title, especially now that
links share the same green. */
.helptext dt.dt-sub { color: var(--text); }
.helptext dt .dt-example { display: block; color: var(--text); font-weight: 400; font-style: italic; margin-top: 2px; }
/* Same shared gradient as .rt-row (the Rhyme type filter), applied to
this table's own rows via inline style per entry -- one gradient, one
source of truth (--rt-* in :root), two places it shows up. */
.helptext dt.cat-row { padding: 6px 10px; margin: 12px -10px 0; border-radius: 8px; }
.helptext dd { margin: 2px 0 0; color: var(--muted); }
.helptext dd b { color: var(--text); font-weight: 600; }
/* Plain links here (Wiktionary, book links, etc.) had no color of
their own, so they fell back to the browser's default blue -- unreadable
against the dark theme's near-black surface. Same green/orange pairing
as the footer's own links. */
.helptext a { color: var(--green); }
.helptext a:hover { color: var(--orange); }
/* Book links get the brand orange instead of the green used for reference
links (Wiktionary, WordNet, etc.) -- sets them apart as the one place
in Help that leads off-site to a purchase. Hover swaps to green, same
pairing as everywhere else, just inverted. */
.book-row a { color: var(--orange); }
.book-row a:hover { color: var(--green); }
/* Book links get a cover thumbnail instead of a bare underlined link --
the row wraps on narrow screens rather than clipping the title. Real
cover art isn't a uniform 2:3 ratio across editions, so the image sits
inside a fixed-size frame and is letterboxed (object-fit: contain)
rather than stretched to fill it -- every row lines up the same
regardless of each cover's actual shape. */
.book-row { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.book-row:last-child { border-bottom: 0; padding-bottom: 0; }
.book-thumb-frame { width: 46px; height: 66px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.book-thumb { max-width: 100%; max-height: 100%; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.book-note { display: block; font-size: 12px; font-style: italic; color: var(--muted); margin-top: 2px; }
.helptext dd table { border-collapse: collapse; margin: 8px 0 4px; font-size: 12px; }
.helptext dd th, .helptext dd td { padding: 3px 10px 3px 0; text-align: left; vertical-align: top; }
.helptext dd th { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--border); }
.helptext dd td { border-bottom: 1px solid var(--border); }
.helptext dd tr:last-child td { border-bottom: 0; }
select {
border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
border-radius: 8px; padding: 5px 8px; font-size: 13px;
}
/* Fixed to fit its longest option ("Entire dictionary") so picking a
shorter one doesn't shrink the box and shift anything next to it.
Shortened from 230px alongside the option labels themselves (dropped
"words"/the parenthetical count) specifically to get Part of speech +
Rhyme type + Groups to fit on one row instead of Groups wrapping to
its own line -- see .ga-scope's flex-wrap. */
.spacer { flex: 1; }
/* Layers: a select-look dropdown that opens to CHECKBOXES (layers combine,
so a single-choice select won't do). Plain , closed on outside
click by a small script. */
.layerdd { position: relative; display: inline-block; }
.layerdd summary {
list-style: none; cursor: pointer; user-select: none;
border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
border-radius: 8px; padding: 5px 8px; font-size: 13px;
}
.layerdd summary::-webkit-details-marker { display: none; }
/* A literal leading space in the ::after content rendered wider than the
8px right padding it was meant to match, so the button looked lopsided
even though the padding itself was symmetric. A fixed margin-left
instead of a space character keeps it exact. */
.layerdd summary::after { content: "▾"; color: var(--muted); font-size: 12px; margin-left: 5px; }
.layerdd[open] summary { border-color: var(--green); }
.layerdd .layermenu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
display: flex; flex-direction: column; gap: 8px; min-width: 175px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow);
}
.layerdd .layermenu label { color: var(--text); }
.layerdd .layermenu input { accent-color: var(--green); }
.layerdd .layermenu input:disabled { cursor: not-allowed; }
/* Opacity on the whole label (not just a recolored text) so the row reads
as disabled at a glance -- a muted-grey text color alone was too close
to the enabled rows' own text color to register as "off" here. */
.layerdd .layermenu label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Only the gear menu needs an internal heading -- Part of speech/Rhyme
type/Layers are already named by the visible label text next to their
trigger, but the gear button is icon-only, so its popover would open
with no indication of what it is. */
.menuhead {
font: 700 12px var(--sans); letter-spacing: .4px; text-transform: uppercase;
color: var(--muted); padding-bottom: 2px; margin-bottom: 2px;
border-bottom: 1px solid var(--border);
}
/* Gear trigger: same dropdown mechanics as the filter menus above, but an
icon-only button (Theme isn't a filter, so it doesn't belong in that
row) rather than a "value ▾" summary. Deliberately quiet -- it used to
carry a solid fill, border, and shadow (a bordered light-grey circle in
dark theme especially), which read as the single most prominent control
on the page for a settings menu nobody needs to open often. Transparent
at rest in both themes now, same "fades in toward the icon it actually
is" treatment as the per-word look/eye/thes icons, rather than looking
like a card floating over the page. */
.gearbtn summary {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0; color: var(--muted);
background: transparent; border: 1px solid transparent; border-radius: 10px;
opacity: .6; transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.gearbtn summary::after { content: none; }
.gearbtn summary:hover, .gearbtn[open] summary {
opacity: 1; color: var(--text); border-color: var(--border);
}
/* Config lives at the top-right of the page, like a settings icon in an
app's corner, instead of buried mid-page among the result filters.
Tracks the right edge of .wrap (max-width: 760px), not the browser
window -- on a wide monitor the content column sits far from the
viewport edge, and a viewport-relative `right` stranded the button out
in empty space past it. No fill/shadow of its own now -- the summary
above carries what little chrome the button has.
position: absolute, not fixed -- it used to stay pinned to the
viewport through the whole scroll, floating over results long after
the header it belongs with had scrolled away. Absolute anchors it to
the page instead (no positioned ancestor between it and , so
top/right measure from the document, not the viewport), so it scrolls
away with the header like any other part of the page. */
.gearbtn-fixed {
position: absolute; top: 16px; right: max(16px, calc((100vw - 760px) / 2));
z-index: 10;
}
.gearbtn-fixed .layermenu { left: auto; right: 0; }
@media (max-width: 480px) {
.gearbtn-fixed { top: 10px; right: 10px; }
}
.gearbtn .layermenu { min-width: 150px; }
/* Match the 13px used by the select and the other filter menus -- the
labels otherwise fall back to the body's 15px and read as a size bump
with no purpose next to the 13px control beside them. */
/* Text always left-aligned, control always right-aligned -- justify-content:
space-between alone doesn't do that here, since the Theme row has its
label text BEFORE the