*, *::before, *::after { box-sizing: border-box; } /* C2 — canonical SVG affordance icons (icons.js + inline markup). Non-shrinking, * vertically centred when placed inline next to text. Colour flows from the * parent (stroke=currentColor); the fillable star sets its own fill inline. */ .skt-icon { flex: 0 0 auto; vertical-align: middle; } /* Keyboard focus ring — global baseline (WCAG 2.4.7). Zero-specificity * :where() so it applies only where a component hasn't defined its own * :focus-visible treatment — it never overrides existing focus styles. * :focus-visible fires for keyboard / AT only, so pointer clicks stay quiet. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft); } html { scroll-behavior: smooth; /* Sticky masthead is ~64px tall; anchor jumps (skip link, in-page links) * would otherwise land under it. Padding applies to the scroll container * so `#main-content` stays visible after focus moves there. */ scroll-padding-top: 80px; } body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } /* (Glass Terminal, Wave 2) Mobile scroll-chain containment (spec §1.6). Kill the whole-page rubber-band / pull-to-refresh on the document scroller so an overscroll never flashes background or the fixed globe hero past the glass UI. `none` (not `contain`) because the root has no parent to chain to — the goal here is suppressing the bounce/PTR; inner scrollers (.page__col--left, .msel__list, watchlist panels) keep their own `overscroll-behavior: contain`. */ html, body { overscroll-behavior-y: none; } a { color: var(--link); text-decoration: none; } /* Hover affordances are only meaningful with a pointer. On touch devices * they get "stuck" after a tap, which this media gate prevents. */ @media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } mark { background: var(--mark-bg); color: var(--mark-fg); padding: 0 2px; border-radius: 2px; } /* (Glass Terminal, 2026-07-11) ── Base element polish ───────────────────────── Selection tint, custom scrollbars, kbd, shared input metrics. All at the base tier (specificity 0-1) so component rules always win over these. */ /* Text selection = accent tint (both themes; --accent is themed). */ ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); } /* Custom scrollbars — thin translucent thumb that widens + darkens on hover. Firefox uses the inherited scrollbar-width/color on ; WebKit/Blink use the pseudo-elements, which apply to every scroll container (incl. body). */ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border: 3px solid transparent; /* transparent border → thin thumb via padding-box */ background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 40%, transparent); border-width: 2px; /* widen on hover */ } ::-webkit-scrollbar-corner { background: transparent; } /* Keyboard hint chips — mono face + tabular figures = terminal grammar. */ kbd { font-family: var(--font-mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; line-height: 1; padding: 2px 6px; color: var(--ink-muted); background: var(--bg-elev-2); border: 1px solid var(--glass-hairline); border-radius: var(--r-sm); box-shadow: 0 1px 0 var(--glass-hairline); } /* Shared input metrics — font inheritance + themed native accent + text colour. Component rules own background/border; this is only the safe base fallback. */ input, select, textarea { font: inherit; color: var(--ink); accent-color: var(--accent); } .masthead { position: sticky; top: 0; z-index: var(--z-masthead); display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-3) var(--sp-page-x); background: var(--masthead-bg); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); } .masthead__brand { display: flex; align-items: baseline; gap: var(--sp-3); /* Wordmark uses the display serif (Playfair Display) in bold (700). */ font-family: var(--font-wordmark); font-size: calc(var(--text-lg) * 1.15); font-weight: 700; letter-spacing: 0.005em; line-height: 1; /* When the wordmark is wrapped in , kill the default link chrome and inherit the ink colour. Hover gets a soft fade to signal interactivity without a full underline rule. */ color: var(--ink); text-decoration: none; } a.masthead__brand { cursor: pointer; } a.masthead__brand:hover, a.masthead__brand:focus-visible { color: var(--ink); opacity: 0.78; } a.masthead__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .masthead__tagline { /* Tagline shares the wordmark font for visual unity with the logo, at a lighter weight so it reads as secondary text. Uppercased + wider letter-spacing so it sits as a label, not a headline. */ color: var(--ink-muted); font-family: var(--font-wordmark); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; } .masthead__search { flex: 1 1 auto; max-width: 560px; margin-left: auto; position: relative; } .masthead__search input { width: 100%; padding: var(--sp-2) 34px var(--sp-2) 38px; background: var(--bg-elev-1); border: 1px solid var(--border); color: var(--ink); border-radius: var(--r-md); font-size: var(--text-sm); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } /* Hide native browser UI for — we render our own × so * the control is consistent across Chromium, Firefox and Safari. */ .masthead__search input::-webkit-search-cancel-button, .masthead__search input::-webkit-search-decoration { appearance: none; } .search-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-dim); display: grid; place-items: center; cursor: pointer; line-height: 1; font-size: 16px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .search-clear:hover { background: var(--bg-elev-2); color: var(--ink); } .search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .search-clear.is-hidden { display: none; } .masthead__search input::placeholder { color: var(--ink-dim); } .masthead__search input:hover { border-color: var(--border-strong); } /* A1: outline:none removed so the :where() :focus-visible baseline (~226) * supplies the keyboard ring; border/bg stay for mouse-focus feedback. */ .masthead__search input:focus { border-color: var(--link); background: var(--bg-elev-2); } .masthead__search::before { content: ""; position: absolute; top: 50%; left: 14px; width: 14px; height: 14px; margin-top: -7px; opacity: 0.7; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .masthead__actions { display: flex; align-items: center; gap: var(--sp-3); } .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); font-size: var(--text-sm); /* (Glass Terminal, 2026-07-11) hover LIFTS (shadow + 1px up), active COMPRESSES (0.5px down, shadow off). transform/box-shadow are compositor-only (no layout thrash); background/border-color keep animating. --ease-out for the settle. transform is never written inline by JS, so this can't fight app.js. */ transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:hover { border-color: var(--link); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .btn:active:not(:disabled) { transform: translateY(0.5px); box-shadow: none; } /* (Glass Terminal, 2026-07-11) W#7 — the PRIMARY call-to-action: the ONE accent-filled action in the system, so the brand red stays scarce and meaningful. Meant to sit alongside .btn (`class="btn btn--primary"`) so it inherits the base padding + the hover LIFT (translateY -1px + --shadow-2) + the active COMPRESS; this rule only repaints the fill/border/ink and adds a hover brighten. White-on-accent is AA-checked: light --accent #c8231f vs #fff = 5.66:1. Dark --accent is a brighter coral (#e63946) that gives only 4.17:1 with white, so the theme override below grounds it toward --bg to clear AA (~5.4:1) and stay ≥4.5:1 even after the +5% hover brighten. Routed through var(--on-accent) with a #fff fallback — the house on-accent convention (audit #73; also .preset-bar__btn--primary, .ai-upsell__submit) — so the ink resolves to the token once 00-tokens defines it (see the --on-accent request) and to a literal-identical #fff until then. */ .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); font-weight: 600; } .btn--primary:hover { border-color: var(--accent); filter: brightness(1.05); } .btn--primary:active:not(:disabled) { filter: brightness(0.97); } .btn--primary:disabled { filter: none; } [data-theme="dark"] .btn--primary { background: color-mix(in srgb, var(--accent) 85%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 85%, var(--bg)); } .icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); font-size: var(--text-xs); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .icon-btn:hover { border-color: var(--link); background: var(--bg-elev-2); } .icon-btn__glyph { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--ink-muted); } .lang-select { appearance: none; -webkit-appearance: none; padding: 6px 28px 6px 12px; background: var(--bg-elev-1); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--text-xs); cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 10px; /* background-COLOR only on hover (below) so the chevron background-image survives — the shorthand would wipe it. */ transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .lang-select:hover { border-color: var(--link); background-color: var(--bg-elev-2); } .stats { color: var(--ink-muted); font-size: var(--text-xs); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* A2 (2026-07-07): the feed stats line carries a LIVE data-stamp — a pulsing dot + an "updated {t}" fragment appended in refreshStats(). */ .stats__sep { color: var(--ink-dim); } .stats .live-dot { vertical-align: middle; margin-right: 1px; } .stats__updated { color: var(--ink-muted); font-variant-numeric: tabular-nums; } /* ----- User menu (masthead) ---------------------------------------------- */ .user-menu { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); } /* Anonymous state: two compact links */ .user-menu[data-auth-state="anon"] .user-menu__link { padding: 6px 10px; font-size: var(--text-xs); color: var(--ink-muted); text-decoration: none; border: 1px solid transparent; border-radius: var(--r-md); } .user-menu[data-auth-state="anon"] .user-menu__link:hover { color: var(--ink); border-color: var(--border); } .user-menu[data-auth-state="anon"] .user-menu__cta { padding: 6px 12px; font-size: var(--text-xs); text-decoration: none; background: var(--ink); color: var(--bg-elev-1); border-color: var(--ink); } .user-menu[data-auth-state="anon"] .user-menu__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* Authenticated state: avatar + email + caret */ .user-menu__toggle { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 10px 4px 4px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-size: var(--text-xs); cursor: pointer; max-width: 260px; transition: border-color var(--dur-fast) var(--ease); } .user-menu__toggle:hover { border-color: var(--link); } .user-menu__toggle[aria-expanded="true"] { border-color: var(--link); } .user-menu__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev-1)); color: var(--accent); border-radius: 50%; font-weight: 600; font-size: var(--text-xs); flex: none; } .user-menu__email { max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-muted); } .user-menu__dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; /* (Glass Terminal, 2026-07-11) tier-3 glass (popover/dropdown). Opaque fallback first; @supports below adds translucency + blur. */ background: var(--glass-3-fallback); border: 1px solid var(--glass-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-highlight); padding: var(--sp-2); z-index: var(--z-dropdown); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .user-menu__dropdown { background: var(--glass-3-bg); -webkit-backdrop-filter: blur(var(--glass-3-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-3-blur)) saturate(var(--glass-sat)); } } .user-menu__dropdown.is-hidden { display: none; } /* (Glass Terminal, 2026-07-11) Panel-enter for the tier-3 glass dropdown: 8px drop + fade on show (transform/opacity only). Wrapped in no-preference to match the house convention (cmdk-in / brief-in); the global reduced-motion reset (`* { animation: none !important }`) also neutralises it. Re-triggers each time JS removes .is-hidden (display none -> block restarts the anim). */ @media (prefers-reduced-motion: no-preference) { .user-menu__dropdown:not(.is-hidden) { animation: umDropIn var(--dur-fast) var(--ease-out) both; } @keyframes umDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } } .user-menu__dropdown-header { padding: var(--sp-2) var(--sp-3) var(--sp-3); /* hairline separator = glass-family grammar (was the opaque --border). */ border-bottom: 1px solid var(--glass-hairline); margin-bottom: var(--sp-2); } .user-menu__dropdown-label { display: block; font-size: var(--text-xs); color: var(--ink-dim); margin-bottom: 2px; } .user-menu__dropdown-email { display: block; font-size: var(--text-sm); color: var(--ink); word-break: break-all; } .user-menu__item { display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink); font-size: var(--text-sm); cursor: pointer; } .user-menu__item:hover, .user-menu__item:focus-visible { /* Translucent ink tint (not opaque --bg-elev-2) so the tier-3 backdrop blur still reads through the hovered row — glass discipline: children tint, they don't re-blur. */ background: color-mix(in srgb, var(--ink) 8%, transparent); } /* Sign-out is the one destructive-ish item — hover/focus flip it to danger semantics. ID-scoped (no markup change); #id beats the .user-menu__item tint above on specificity. */ #user-menu-logout:hover, #user-menu-logout:focus-visible { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } /* ----- Anonymous banner -------------------------------------------------- */ /* B7 (audit U2#4): the banner now lives inside the results column, directly * above the results header — so it's a self-contained card, not a full-bleed * strip under the hero. Drop the page-wide max-width / auto-margin / page-x * padding; give it a rounded border on all sides and a bottom margin to sit * above the header. Left-aligned to read as part of the column content. */ /* (Glass Terminal, 2026-07-11) W#9 — this gate fires at a conversion-critical moment, so it's a proper tier-2 tinted card now, not unstyled body text: a whisper of accent wash, a solid accent left edge (brand tie-in + eye anchor), a hairline elsewhere, a soft lift, and tabular figures. The shown/total count emphasises via .anon-banner__count once the markup wraps it (see the html_js_request); tabular-nums here means the bare digits already align. */ .anon-banner { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev-1)); border: 1px solid var(--glass-hairline); border-left: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: 0 1px 3px var(--scrim-10); color: var(--ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .anon-banner.is-hidden { display: none; } /* Count emphasis — mono + tabular so the "shown / total" figures read as data (terminal grammar). Applied once app.js wraps the numbers (html_js_request). */ .anon-banner__count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); } .anon-banner__link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .anon-banner__link:hover { color: var(--accent); } /* ----- Preset bar (saved filter bundles) --------------------------------- */ .preset-bar { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--sp-4); box-shadow: var(--shadow-1); } .preset-bar.is-hidden { display: none; } .preset-bar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .preset-bar__title { font-size: var(--text-xs); color: var(--ink-dim); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .preset-bar__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .preset-bar__btn { font-size: var(--text-xs); padding: 6px 10px; } .preset-bar__btn--primary { /* (audit #73) Active-state recipe `background: var(--accent); color: #fff` is intentionally repeated across ~11 components (chips, tabs, toggles). NOT extracted into a shared class (churn risk); the #fff literal is kept consistent (never #ffffff) across every occurrence. */ background: var(--accent); color: #fff; border-color: var(--accent); } .preset-bar__btn--primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.05); } [data-theme="dark"] .preset-bar__btn--primary, [data-theme="dark"] .preset-bar__btn--primary:hover { /* Ground the coral dark --accent (only 4.17:1 with #fff) so it clears AA (~5.4:1) and holds >=4.5:1 through the +5% hover brighten — mirrors the .btn--primary dark treatment. */ background: color-mix(in srgb, var(--accent) 85%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 85%, var(--bg)); } /* The chip row is a flex wrap; empty state shows the hint instead. */ .preset-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-height: 28px; align-items: center; } .preset-chips__empty { font-size: var(--text-xs); color: var(--ink-dim); font-style: italic; } .preset-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; background: var(--bg-elev-2); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-sm); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .preset-chip__apply { background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preset-chip:hover { border-color: var(--link); } .preset-chip__apply:hover { color: var(--link); } .preset-chip__apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .preset-chip__delete { width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 0; color: var(--ink-muted); display: grid; place-items: center; font-size: 15px; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .preset-chip__delete:hover { background: var(--accent-soft); color: var(--accent); } .preset-chip__delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* When a preset's filters exactly match the current state, highlight it. */ .preset-chip--active { background: var(--accent-soft); border-color: var(--accent); } .preset-chip--active .preset-chip__apply { color: var(--accent); font-weight: 500; } /* Transient toast used by showToast() for save/default confirmations. */ .toast { /* bottom lifted 2026-07-08: clears the feedback FAB (bottom:--sp-5, ~40px tall → top ~64px) so a wide toast on a narrow screen can't render behind it. */ position: fixed; left: 50%; bottom: calc(var(--sp-5) + 48px); /* C4c — rises 8px into place on show (translate composes X-centre + Y-rise). */ transform: translate(-50%, 8px); padding: var(--sp-2) var(--sp-4); /* (Glass Terminal, 2026-07-11) Toast keeps its high-contrast INVERSE fill (--ink on --bg-elev-1) for max legibility of transient messages over a busy globe — deliberately NOT translucent. It gains only the 1px top inset highlight so its edge matches the glass family. */ background: var(--ink); color: var(--bg-elev-1); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 500; /* Tier-3 float shadow lifts the transient clearly off the busy globe; the 1px inset top sheen keeps its edge in the glass family. The toast's inverse --ink fill makes the panel highlight (--glass-highlight) read wrong here, so the sheen routes through a dedicated --toast-sheen token (raw-white fallback preserves the current pixels until 00-tokens defines it). */ box-shadow: var(--shadow-3), inset 0 1px 0 var(--toast-sheen, rgba(255, 255, 255, 0.12)); /* collision (audit #71): toast shares 1000 with .modal — a toast fired while a modal is open stacks at the same level. Kept identical (zero visual change); flagged for a future strata pass. */ z-index: var(--z-modal); opacity: 0; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); pointer-events: none; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* (Glass Terminal, Wave 2) Error variant — admin.js emits `toast(msg, "error")` → `.toast--error`. Keep the high-contrast inverse fill for legibility over the busy globe, and add a danger scan-edge so the semantic reads at a glance. Full box-shadow stack re-declared (base sheen + tier-3 lift) plus the inset bar. */ .toast--error { box-shadow: var(--shadow-3), inset 0 1px 0 var(--toast-sheen, rgba(255, 255, 255, 0.12)), inset 3px 0 0 0 var(--danger); } /* iOS home-bar safe area: lift the toast above the home indicator where present. @supports-guarded; `bottom` is class/CSS-owned (JS only writes opacity/transform via .is-visible), so overriding it here can't fight runtime styles. */ @supports (padding: env(safe-area-inset-bottom)) { .toast { bottom: calc(var(--sp-5) + 48px + env(safe-area-inset-bottom, 0px)); } } /* --------------------------------------------------------------------------- Anonymous-visitor gating --------------------------------------------------------------------------- Elements tagged with `data-anon-gate` in the markup are visually dimmed and get a hover tooltip nudging the visitor to log in, but only while is set by applyAnonGating() in app.js. Actual click suppression is handled by JS (capture-phase interceptor + disabled on form controls) — this block is purely the visual + tooltip layer. */ body[data-auth-state="anon"] [data-anon-gate] { position: relative; opacity: 0.55; cursor: not-allowed; } /* The tooltip uses an ::after pseudo-element so we don't have to add any wrapper markup. `attr(data-anon-hint)` is refreshed on locale change by applyAnonGating() so the text follows the UI language. */ body[data-auth-state="anon"] [data-anon-gate]::after { content: attr(data-anon-hint); position: absolute; left: 50%; bottom: calc(100% + var(--sp-2, 8px)); transform: translateX(-50%); padding: var(--sp-2) var(--sp-3); background: var(--ink); color: var(--bg-elev-1); border-radius: var(--r-md); font-size: var(--text-xs); white-space: nowrap; box-shadow: 0 4px 12px var(--scrim-15); z-index: var(--z-masthead); opacity: 0; pointer-events: none; transition: opacity 140ms var(--ease); } body[data-auth-state="anon"] [data-anon-gate]:hover::after, body[data-auth-state="anon"] [data-anon-gate]:focus-within::after { opacity: 1; } /* When the gated region is the pager (bottom of the page), flip the tooltip to sit below so it doesn't get clipped by page-edge overflow. */ body[data-auth-state="anon"] .pager[data-anon-gate]::after { bottom: auto; top: calc(100% + var(--sp-2, 8px)); } /* Task #20 follow-up: same flip for the new masthead pagesize. Sitting at the top of the page means a tooltip above would render above the viewport edge; drop it below the select instead. */ /* (Glass Terminal, Wave 2) Coarse-pointer ergonomics. Touch targets >=40px for the user-menu rows. Gated to pointer:coarse so the desktop mouse UI keeps its compact metrics untouched. `display` here is CSS-owned on these elements (JS toggles the dropdown's .is-hidden, never the items' inline style), so no !important is needed. */ @media (pointer: coarse) { .user-menu__item { min-height: 40px; display: flex; align-items: center; } }