/* Price Watch — operational tool, not a marketing page. Palette: ink navy surfaces, signal-amber for "needs review", cool teal for confirmed/accepted. Monospace for anything numeric — prices and IDs are data, not prose, and should look like it. */ /* Fonts are linked from each template's , not @import-ed here. An @import can only be discovered after this file downloads and parses, which serialises the font request behind it; a in the document head starts both in parallel (paired with preconnect to the two font hosts). */ :root { /* Dark-only design (no light theme, no toggle) -- tell the browser so native chrome CSS can't restyle (select dropdown listboxes, number-input spinners, scrollbars, default focus rings) renders dark too instead of following the OS/browser light/dark preference (GitHub #36). */ color-scheme: dark; --ink-900: #10141a; --ink-800: #171d26; --ink-700: #1f2733; --ink-600: #2a3441; --line: #313c4a; /* Border for interactive controls (inputs, selects, ghost buttons). WCAG 1.4.11 wants 3:1 for the boundary that identifies a UI component, and --line only manages 1.34:1 against --ink-700, so a form field's edge is effectively invisible. Same hue and saturation as --line, lifted to 46% lightness: 3.05:1 on --ink-700, 3.43:1 on --ink-800, 3.74:1 on --ink-900. Deliberately NOT applied to cards, dividers, thumbnails or panels -- 1.4.11 governs component identification, not decorative surfaces, and raising all 27 --line uses would restyle the app for no a11y gain. */ --line-control: #5d728d; --text-hi: #e8ecf1; --text-mid: #9aa7b8; --text-lo: #7c8898; --amber: #e0a955; --amber-dim: #6b5732; --teal: #4fb8a8; --teal-dim: #2c5751; --coral: #d9755f; --coral-dim: #5c3830; --radius: 6px; font-family: 'IBM Plex Sans', -apple-system, sans-serif; } * { box-sizing: border-box; } /* !important is deliberate: this utility must force-hide regardless of any other rule's specificity or source order (e.g. .extra-photo-slot and .more-photo-options both set their own `display`, which would otherwise win the cascade tie by appearing later in this file). */ .hidden { display: none !important; } /* Visually hidden but still reachable by screen readers -- used for the page

on pages where a second visible title would be redundant with the existing .section-heading/.auth-title text (GitHub #21). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* One keyboard-focus ring for every interactive control. Previously only .hist-bar and .cost-basis-input defined one, so every button, link, menu item and summary fell back to whatever ring the UA draws -- which varies by browser and is easy to lose against these ink surfaces. :focus-visible (not :focus) keeps it off mouse clicks, so nothing changes at rest. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; } body { margin: 0; background: var(--ink-900); color: var(--text-hi); min-height: 100vh; overflow-x: hidden; } /* "Skip to main content" link -- visually hidden until focused, so keyboard/screen-reader users can bypass the topbar instead of tabbing through every nav link and menu button on every page load (GitHub #31). */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; } .skip-link:focus { left: 8px; top: 8px; padding: 10px 16px; background: var(--ink-800); color: var(--amber); border: 1px solid var(--amber-dim); border-radius: var(--radius); font-weight: 600; text-decoration: none; } .topbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; border-bottom: 1px solid var(--line); background: var(--ink-800); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { color: var(--amber); font-size: 18px; } .brand-name { font-weight: 600; font-size: 16px; letter-spacing: 0.2px; } .env-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.6px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-mid); } .env-sandbox { color: var(--amber); border-color: var(--amber-dim); } .env-production { color: var(--teal); border-color: var(--teal-dim); } .status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-mid); text-decoration: none; } .status-badge--ok { color: var(--teal); border-color: var(--teal-dim); background: rgba(79, 184, 168, 0.08); } a.status-badge:hover { filter: brightness(1.15); } .topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } /* Dashboard's topbar-actions mixes nav links with action buttons/menus, so only the actual nav links are wrapped in a