:root { --bg: #15171a; --panel: #1c1f24; --panel-hover: #23262c; --border: #2a2e35; --text: #ece9e2; --text-dim: #8b8f98; --sharp: #4fd1c5; --sharp-bright: #6fe6da; --mid: #e8a33d; --soft: #e2574c; --keep: #6fcf87; --font-display: "Space Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --glow-sharp: rgba(79, 209, 197, 0.28); --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.45); /* The two ambient background washes and the sticky topbar fill were hardcoded inline before. They're variables now so an event theme (see the gallery-style section at the end of this file) can restate the whole palette in one block instead of re-declaring rules. */ --wash-1: rgba(79, 209, 197, 0.07); --wash-2: rgba(232, 163, 61, 0.05); --topbar-bg: rgba(28, 31, 36, 0.55); /* A handful of elements (comment rows, tag chips, the welcome banner, the speed-cull hint) want to look subtly "raised" off the surrounding panel/background - a plain white tint works for that in dark mode (lighter = raised), but the same rgba(255,255,255,x) against light mode's already near-white panels is invisible, so this flips direction per theme rather than using one fixed value (see body.theme-light below, and item #46's own dark-mode- consistency audit that found this). */ --surface-raise: rgba(255, 255, 255, 0.04); } /* Light theme override - same variable names, flipped palette. Applied via a class on (see the theme toggle button's JS) rather than prefers-color-scheme, so it's an explicit opt-in the person controls and remembers, not something that silently follows OS settings. */ body.theme-light { --bg: #f4f2ec; --panel: #ffffff; --panel-hover: #ece9e1; --border: #d9d5c9; --text: #1c1f24; --text-dim: #6b6f78; --sharp: #1f8f83; --sharp-bright: #17a396; --mid: #b9791f; --soft: #c2392e; --keep: #2f8f4e; --glow-sharp: rgba(31, 143, 131, 0.16); --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.10); --wash-1: rgba(31, 143, 131, 0.05); --wash-2: rgba(185, 121, 31, 0.04); --topbar-bg: rgba(255, 255, 255, 0.72); --surface-raise: rgba(0, 0, 0, 0.035); } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(1100px 620px at 12% -8%, var(--wash-1), transparent 60%), radial-gradient(900px 520px at 100% 0%, var(--wash-2), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-display); min-height: 100vh; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--panel-hover); border: 3px solid var(--bg); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--border); } /* ---------- global keyboard focus ring ---------- */ /* :focus-visible specifically (not :focus) - only shows for real keyboard navigation, never for a mouse click, which matters because plenty of elements already do their own `:focus { outline: none; border-color: var(--sharp); }` treatment and this must never fight that. It doesn't: those are element+pseudo-class selectors (e.g. `select:focus`), which are always higher specificity than this bare `:focus-visible`, so this only ever fills in the gaps - anything without its own explicit focus styling (plain buttons, links, checkboxes...) that previously fell back to the browser's stock blue outline, clashing with this app's whole dark/teal palette. */ :focus-visible { outline: 2px solid var(--sharp); outline-offset: 2px; } /* ---------- theme-switch page transition ---------- */ /* A "flash to solid, then fade away" reveal rather than a literal crossfade between old/new screenshots (which would need capturing the page as an image first) - .flashing is added BEFORE the .theme-light class toggles, so the overlay briefly shows solid using the OLD theme's --bg; the moment .theme-light toggles, --bg recomputes instantly everywhere (CSS custom properties update synchronously, no transition needed for that part) including on this overlay's own background, so by the time .flashing is removed a frame later the overlay is already sitting on the NEW color and simply fades itself out via opacity, revealing the newly-themed page underneath. The two-rAF delay in app.js/client.js before removing .flashing exists for the same reason the login-card entrance animation needs one: the browser needs a paint in between setting the starting (opaque) state and starting the transition, or the fade-out never visibly plays at all. */ .theme-transition-overlay { position: fixed; inset: 0; z-index: 500; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .theme-transition-overlay.flashing { opacity: 1; transition: none; } @media (prefers-reduced-motion: reduce) { .theme-transition-overlay { transition: none; } } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow 0.2s ease; } /* .scrolled is toggled in app.js's existing scroll listener once the page has moved even a few px - the topbar goes from "flush with the top of the page" to "floating over content that's now sliding under it", and a shadow is what actually communicates that visually; the border-bottom alone reads the same in both states. */ .topbar.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); } body.theme-light .topbar.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; } .brand-mark { color: var(--sharp); font-size: 1.1rem; filter: drop-shadow(0 0 6px var(--glow-sharp)); } .brand-logo-sm { height: 38px; width: auto; display: block; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .brand-logo-lg { height: 96px; width: auto; display: block; border-radius: 14px; box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 255, 255, 0.03); } /* ---------- theme toggle icon (sun/moon crossfade) ---------- One SVG holding both a sun group and a moon path, permanently overlaid in the same 24x24 viewBox rather than swapped in JS - an emoji glyph swap (the old 🌙/☀️ textContent approach) is an instant, un-animatable content change, so getting an actual transition required real vector shapes CSS can animate between instead. Toggled via .icon-light (see app.js/client.js's applyTheme) rather than a one-shot keyframe, since this reflects a persistent state (which theme is active right now), not a momentary event. */ .theme-toggle-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 6px; overflow: visible; } .theme-toggle-icon .theme-icon-sun, .theme-toggle-icon .theme-icon-moon { transform-origin: 12px 12px; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1); } .theme-toggle-icon .theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); } .theme-toggle-icon .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle-icon.icon-light .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle-icon.icon-light .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); } @media (prefers-reduced-motion: reduce) { .theme-toggle-icon .theme-icon-sun, .theme-toggle-icon .theme-icon-moon { transition: none; } } .topbar-actions { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; } /* The three actions that actually drive a culling session, kept visually together and ahead of everything else. Everything secondary now lives in a dropdown instead of competing with these for attention. */ .topbar-primary { display: flex; align-items: center; /* Wider than the 8px inside a group, so the three clusters read as three decisions rather than five equally-weighted buttons. The dividers come from .toolbar-group, which this reuses. */ gap: 18px; margin-right: 14px; } /* The menus at the end (activity, admin, account) are a different kind of thing from the queue controls beside them - they open panels rather than doing something - so the boundary between the two gets the same hairline the groups use. */ .topbar-actions > .topbar-menu:first-of-type::before { content: ""; align-self: center; height: 22px; margin-right: 4px; border-left: 1px solid color-mix(in srgb, var(--text-dim) 45%, transparent); } .topbar-actions > .topbar-menu:first-of-type { display: flex; align-items: center; gap: 10px; } .topbar-menu { position: relative; } .topbar-menu-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px; box-shadow: var(--shadow-lift); z-index: 45; min-width: 190px; } .topbar-menu-dropdown.open { display: flex; } .topbar-menu-dropdown .btn { width: 100%; text-align: left; border-color: transparent; background: transparent; } .topbar-menu-dropdown .btn:hover { background: var(--panel-hover); transform: none; } /* A section label inside a longer dropdown (Admin, Account) - purely organizational, not interactive. Introduced alongside consolidating several previously-separate topbar menus into fewer, longer ones (see the Admin/Account dropdown HTML) - flattening several menus into one only actually reduces clutter for a newcomer if the result still reads as organized groups rather than one long undifferentiated list of buttons, which a plain merge without these labels would have been. */ .dropdown-section-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 8px 8px 2px; } .dropdown-section-label:first-child { padding-top: 2px; } /* Right-anchored variant for the account menu, which sits hard against the right edge - a left-anchored panel there would hang off-screen. */ .topbar-menu-dropdown-right { left: auto; right: 0; } /* "Details ▾" scan/scoring activity log (see app.js's loadActivityLog) - wider and taller than the plain button-list dropdowns above, since this holds a scrollable list of filenames/stages rather than a handful of menu actions. */ .activity-log-dropdown { width: 380px; max-width: 90vw; padding: 10px; } .activity-log-header { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); padding: 0 2px 6px; } .activity-log-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column-reverse; /* newest entry (last in the array) visually on top, no manual scroll needed to see what just happened */ gap: 2px; } .activity-log-list .activity-log-entry { display: flex; gap: 8px; padding: 4px 2px; font-size: 12.5px; font-family: var(--font-mono, monospace); border-bottom: 1px solid var(--border); color: var(--text); line-height: 1.4; } .activity-log-list .activity-log-entry:first-child { border-bottom: none; } .activity-log-list .activity-log-time { color: var(--text-dim); flex-shrink: 0; white-space: nowrap; } .activity-log-list .activity-log-message { overflow-wrap: anywhere; } .activity-log-empty { font-size: 13px; color: var(--text-dim); padding: 12px 4px; text-align: center; } .account-menu-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; } .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--sharp), #3fb8ac); color: #0b1615; font-weight: 700; font-size: 0.8rem; flex: none; } .menu-caret { color: var(--text-dim); font-size: 0.7rem; } /* A pressed/expanded look for toggles that reveal a panel (More filters), so an open row is visibly attached to its button. */ .btn-active { background: var(--panel-hover); border-color: var(--sharp); color: var(--text); } .filter-count[hidden] { display: none; } /* One shared geometry for every "small count pill" in the app - this used to be three separate near-duplicate rules (.filter-count, .cart-badge, .review-badge) that had each drifted slightly apart: different padding, different border-radius (999px pill vs a fixed 10px that looked more like a rounded rect at larger counts), no min-width/height on one of them so it sized purely off its own content instead of staying a consistent dot-ish size. Consolidated into one base rule all three classes share, with color kept as the only real per-class variation - amber for .review-badge is a deliberate "needs attention" signal distinct from the routine teal count elsewhere, not an oversight to fix away. */ .filter-count, .cart-badge:not([hidden]), .review-badge:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1; } .filter-count, .cart-badge:not([hidden]) { background: var(--sharp); color: #0b1615; } .review-badge:not([hidden]) { background: var(--mid); color: #1a1300; } /* Pushes the culling action buttons to the far end of the controls bar, with an actual visual divider (not just spacing) so filters and actions read as two distinct halves rather than one undifferentiated row of controls - the border/padding below is what actually delivers that separation; the gap alone wasn't enough once this row grew to include Undo/Redo, Speed cull, and Select multiple alongside the original filter controls. */ .controls-actions { display: flex; align-items: center; gap: 8px; flex: none; padding-left: 16px; border-left: 1px solid var(--border); } .btn-cluster { display: flex; gap: 4px; } .btn-cluster .btn { padding: 9px 12px; } /* Button labels are short and known - letting them wrap mid-phrase ("Scan for new / photos") makes the bar taller and reads as broken rather than responsive. They shrink out of the row into the hamburger at 860px instead. */ .topbar .btn, .controls .btn { white-space: nowrap; } .secondary-controls { background: var(--panel); gap: 18px; padding-top: 12px; padding-bottom: 12px; } /* Collapsible section header (scoring calibration) */ .panel-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; background: none; border: none; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; cursor: pointer; text-align: left; } .panel-toggle:hover { color: var(--sharp); } .panel-toggle-caret { color: var(--text-dim); font-size: 0.75rem; } .panel-toggle-hint { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; color: var(--text-dim); } .calibration-body { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; } .calibration-body[hidden] { display: none; } /* Global baseline for every plain dropped anywhere else in the app (a modal form field, say) still gets the dark theme instead of silently falling back to the browser's plain default appearance - which is exactly what happened to a couple of dropdowns that predated this rule and sat outside every specific selector. */ /* Text-entry controls had NO base rule at all. `select` was styled here from the start, so dropdowns looked like the app while every text, number, search, email, password and date field next to them fell back to the browser default - a white box with a blue focus ring, on a dark page. There are over a hundred of them, and per-component rules existed for only a handful. This is an element selector, so it is the weakest thing in the file: every existing `.some-panel input` rule still wins. It sets the floor the app never had, without overriding a single deliberate choice. */ input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="url"], input:not([type]), textarea { font-family: var(--font-display); font-size: 0.85rem; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; } input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="url"]:focus, input:not([type]):focus, textarea:focus { outline: none; border-color: var(--sharp); } /* Checkboxes, radios and range tracks are drawn by the browser and take its accent, not the app's. One property re-points all of them at the palette - the sliders were rendering in Chrome's default blue, which is the one colour in the UI that belongs to no theme. */ input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--sharp); } select { font-family: var(--font-display); font-size: 0.85rem; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); } select:focus { outline: none; border-color: var(--sharp); } .btn { /* Several .btn elements are anchors, not buttons (the PDF exports use `download`, which only an can do). They were picking up the default link underline, so two buttons in the same row rendered underlined and the rest did not - which reads as a mistake rather than a distinction, because it is one. */ text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; padding: 9px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .btn:hover { background: var(--panel-hover); transform: translateY(-1px); } /* translateY(0) alone just cancels the hover lift - :active fires for the whole duration of the mouse being down, not just the moment of the click, so without an actual scale-down the button just "un-lifts" rather than giving any real press feedback. */ .btn:active { transform: translateY(0) scale(0.96); } .btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; } .btn-accent { background: linear-gradient(135deg, var(--sharp), #3fb8ac); color: #0b1615; border-color: var(--sharp); font-weight: 700; } .btn-accent:hover { filter: brightness(1.06); box-shadow: 0 4px 18px var(--glow-sharp); } .btn-reject { background: transparent; color: var(--soft); border-color: var(--soft); } .btn-reject:hover { background: rgba(226, 87, 76, 0.12); } .queue-status { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); min-height: 1em; } .offline-queue-indicator { font-family: var(--font-mono); font-size: 0.75rem; color: #ffb400; padding: 3px 8px; border-radius: 999px; background: rgba(255, 180, 0, 0.12); border: 1px solid rgba(255, 180, 0, 0.35); } .status-panel { gap: 18px; align-items: center; padding: 8px 28px; background: var(--panel); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); } .status-panel:not([hidden]) { display: flex; } .status-panel span:first-child { color: var(--sharp); } .status-progress-bar { width: 120px; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; flex-shrink: 0; } .status-progress-bar[hidden] { display: none; } .status-progress-fill { height: 100%; width: 0%; background: var(--sharp); border-radius: inherit; /* Driven by app.js setting an explicit width % each poll tick (see pollStatus - width comes from worker.status()'s new batch_progress field), so this transition is just smoothing between one poll's value and the next (they land every ~4s) rather than animating anything continuously on its own. */ transition: width 0.6s ease; } .session-stats-panel { padding: 10px 28px; background: var(--panel); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); line-height: 1.6; } .session-stats-panel strong { color: var(--sharp); } .session-ratio-bar { display: flex; width: 100%; height: 6px; border-radius: 999px; overflow: hidden; margin: 6px 0; background: var(--border); } .session-ratio-good { background: var(--keep); transition: width 0.3s ease; } .session-ratio-reject { background: var(--soft); transition: width 0.3s ease; } /* ---------- scoring trends dashboard ---------- */ .trends-modal-inner { max-width: min(820px, 95vw); } .trends-chart-wrap-inner { position: relative; } .trends-svg { width: 100%; height: auto; margin-top: 12px; cursor: crosshair; } .trends-guideline { stroke: var(--border); stroke-width: 1; pointer-events: none; } .trends-tooltip { position: absolute; top: 8px; transform: translateX(8px); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); pointer-events: none; white-space: nowrap; z-index: 2; } .trends-tooltip strong { color: var(--sharp); } .trends-tooltip-flip { transform: translateX(calc(-100% - 8px)); } .trends-comparison-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; margin: 8px 0 4px; } .trends-delta { font-weight: 600; } .trends-delta-up { color: var(--keep); } .trends-delta-down { color: var(--soft); } .trends-legend { display: flex; gap: 20px; font-size: 0.8rem; color: var(--text-dim); margin: 6px 0 10px; } .trends-swatch { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; } .trends-swatch-dashed { background: repeating-linear-gradient(to right, var(--mid) 0, var(--mid) 4px, transparent 4px, transparent 7px); } /* ---------- slideshow mode (client gallery) ---------- */ .slideshow-overlay { position: fixed; inset: 0; background: #000; z-index: 100; align-items: center; justify-content: center; } .slideshow-overlay:not([hidden]) { display: flex; } .slideshow-overlay img { max-width: 100vw; max-height: 100vh; object-fit: contain; } .slideshow-controls { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; background: rgba(12, 13, 15, 0.7); padding: 10px 16px; border-radius: 999px; backdrop-filter: blur(4px); } .slideshow-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.1); } #slideshowProgressBar { height: 100%; width: 0%; background: var(--sharp); transition: width linear; } .tabs { position: relative; display: flex; gap: 4px; padding: 10px 28px 0; border-bottom: 1px solid var(--border); } .tab { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--text-dim); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; transition: color 0.15s ease; } .tab:hover { color: var(--text); } .tab.active { color: var(--sharp); } /* The moving underline (see updateTabIndicator in app.js) replaces the old per-tab border-bottom-color swap - that changed color instantly with no sense of travel between tabs, which reads as static rather than as one continuous strip that slides to wherever you clicked. Positioned/sized in JS (via each tab's own offsetLeft/offsetWidth, which CSS alone has no way to read) and animated here via transition on left/width - this only ever runs on a tab click, a handful of times per session, so there's no scroll/drag-linked performance concern that would push toward a transform-only alternative. */ .tab-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--sharp); border-radius: 2px 2px 0 0; transition: left 0.28s cubic-bezier(0.65, 0, 0.35, 1), width 0.28s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; } .gallery-tabs { display: flex; gap: 6px; padding: 14px 28px; border-bottom: 1px solid var(--border); align-items: center; } /* ---------- favorite collections (client gallery) ---------- */ .favorite-collections-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 28px 14px; } .favorite-collections-row[hidden] { display: none; } .collection-pill { font-family: var(--font-mono); font-size: 0.78rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .collection-pill:hover { color: var(--text); } .collection-pill.active { border-color: var(--sharp); color: var(--sharp); background: var(--wash-1); } /* All Photos -> Favorites -> Album Picks is a real progression (browse, then curate, then finalize), so it earns a heavier, more considered control than plain admin tabs get - a segmented pill bar rather than an underline. Scoped to .gallery-tabs specifically; the bare .tab class is shared with the admin app's own tabs and stays untouched. */ .gallery-tabs .tab { border-bottom: none; border-radius: 999px; padding: 8px 16px; background: transparent; } .gallery-tabs .tab:hover { background: var(--panel-hover); } .gallery-tabs .tab.active { background: var(--panel); color: var(--sharp); box-shadow: inset 0 0 0 1px var(--border); } .gallery-search { margin-left: auto; margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.82rem; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); width: 200px; max-width: 40vw; } .comment-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .comment-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 120px; overflow-y: auto; } .comment-row { font-size: 0.85rem; color: var(--text); background: var(--surface-raise); border-radius: 6px; padding: 6px 10px; } .comment-row.resolved { color: var(--text-dim); } .comment-input-row { display: flex; gap: 8px; align-items: flex-end; } .comment-input-row textarea { flex: 1 1 auto; } .request-chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } .request-chip { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px; text-decoration: none; } .request-chip:hover { border-color: var(--sharp); } .request-chip.active { color: var(--sharp); border-color: var(--sharp); background: rgba(255,255,255,0.04); } .view[hidden] { display: none; } /* Explanatory prose, not machine output. This carried the monospace face, which is why the app read as a terminal: `hint-text` is used for the long descriptive paragraphs at the top of most panels, so the single most common block of running text on the page was set in the face reserved for paths and filenames. The consequence was not only that prose looked like code - it was that a real path inside one of these paragraphs became invisible, because it matched the sentence around it. Mono now means machine text again, and `code` below is what makes a path stand out. The max-width is measured in `ch`, so it tracks the font: these paragraphs ran the full window, about 190 characters per line at 1500px, against a comfortable maximum near 80. */ .hint-text { font-family: var(--font-display); font-size: 0.78rem; line-height: 1.45; color: var(--text-dim); margin: 0; max-width: 78ch; } .hint-text code { font-family: var(--font-mono); color: var(--text); background: var(--panel); padding: 1px 5px; border-radius: 4px; } .checklist-push-banner { font-size: 0.85rem; padding: 8px 12px; margin: 6px 0; border-radius: 8px; background: rgba(90, 160, 255, 0.12); border: 1px solid rgba(90, 160, 255, 0.35); color: var(--text); } .checklist-push-banner strong { color: var(--sharp, #5aa0ff); } .pin-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px 12px; padding: 8px; border-left: 2px solid var(--border); font-size: 0.82rem; } .pin-picker select { max-width: 200px; } .checklist-alt-row { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 0.8rem; } .checklist-alt { font-size: 0.8rem; } /* Shown when eBird's region species list could not be fetched. The checklist below it still renders, so this has to be visibly a warning rather than another hint line - the failure mode it explains is a list that looks fine and is merely short. */ .checklist-region-warning, .inline-warning { margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: 1px solid #8a6d1f; background: rgba(190, 150, 40, 0.13); color: #e8cf8a; font-size: 0.82rem; line-height: 1.4; } /* ---------- live eBird "seen near you" ---------- */ .checklist-nearby { margin: 8px 0; padding: 10px 12px; border-radius: 8px; /* A third hue again: the blue banner is birds expected here historically, the green panel is birds you already have photos of, and this amber one is birds someone reported THIS WEEK. Three different claims sitting next to each other; sharing a colour would merge them visually. */ background: rgba(230, 175, 90, 0.10); border: 1px solid rgba(230, 175, 90, 0.30); } .checklist-nearby-head { font-size: 0.85rem; margin-bottom: 8px; } /* The header is a