:root { --bg: #0f1216; --panel: #161b22; --panel-2: #1c232c; --line: #262f3a; --text: #e6edf3; --muted: #8b98a5; --accent: #58a6ff; --accent-dim: #1f6feb33; --good: #3fb950; --warn: #d29922; --bad: #f85149; --radius: 8px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* re-measured at runtime by app.js so sticky offsets follow a wrapped topbar */ --topbar-h: 49px; --sidebar-w: 320px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } /* Wide content (the results table) scrolls inside .table-wrap, never the page. No overflow-x on - that would turn it into a scroll container and break every position:sticky in the page. */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- layout ---------- */ header.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: linear-gradient(180deg, #12171d, #0f1216); border-bottom: 1px solid var(--line); } header.topbar h1 { font-size: 15px; margin: 0; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; } header.topbar h1 b { color: var(--text); } .grow { flex: 1; } #q { width: 280px; max-width: 100%; min-width: 0; } .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; align-items: start; } aside.sidebar { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; width: 100%; min-width: 0; padding: 12px; border-right: 1px solid var(--line); background: var(--panel); } main { padding: 12px 16px 60px; min-width: 0; } /* the drawer chrome only exists on small screens */ .drawer-head { display: none; } .filters-toggle { display: none; } .backdrop { display: none; } /* ---------- controls ---------- */ .group { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); } .group > summary { cursor: pointer; padding: 8px 10px; font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); list-style: none; } .group > summary::-webkit-details-marker { display: none; } .group > summary::before { content: "▸ "; color: var(--muted); } .group[open] > summary::before { content: "▾ "; } .group .body { padding: 4px 10px 10px; display: grid; gap: 8px; min-width: 0; } .group .body > * { min-width: 0; } label.field { display: grid; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; } .row2 > * { min-width: 0; } input, select, button, textarea { font: inherit; color: var(--text); background: #0d1117; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; max-width: 100%; } input:focus, select:focus { outline: 2px solid var(--accent-dim); border-color: var(--accent); } input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; flex: none; } select[multiple] { height: 120px; } /* Every sidebar control fills its column instead of using the UA's intrinsic width, which is what used to push number inputs past the sidebar's edge. */ .sidebar input:not([type=checkbox]), .sidebar select, .sidebar textarea { width: 100%; min-width: 0; } .sidebar .body > button, .btn-block { width: 100%; } .sidebar .drawer-head button { width: auto; } button { cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px; } button:hover { border-color: var(--accent); color: var(--accent); } button.primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } button.ghost { background: transparent; } button:disabled { opacity: .5; cursor: not-allowed; } .checkline { display: flex; align-items: center; gap: 6px; font-size: 13px; } .count-badge { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); min-width: 20px; text-align: center; } /* ---------- dual-handle range sliders ---------- */ .rs { display: grid; gap: 2px; min-width: 0; } .rs-label { font-size: 12px; color: var(--muted); } .rs.bounded .rs-label { color: var(--text); } .rs-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; } .rs-inputs > * { min-width: 0; } /* pan-y: a vertical swipe scrolls the page, only horizontal drags reach us */ .rs-track { position: relative; height: 34px; padding: 0 10px; display: flex; align-items: center; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; } .rs-rail { position: relative; width: 100%; height: 4px; border-radius: 2px; background: #22303d; } .rs-fill { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; } .rs-handle { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: 0; border-radius: 50%; background: #0d1117; border: 2px solid var(--accent); transform: translate(-50%, -50%); pointer-events: none; /* the track owns pointer handling */ } .rs-handle:focus-visible, .rs-handle.focus { outline: 2px solid var(--accent); outline-offset: 3px; } .rs-handle.set { background: var(--accent); } .rs-track.dragging { cursor: grabbing; } /* ---------- weights ---------- */ .weight { display: grid; grid-template-columns: 1fr 44px; gap: 4px 8px; align-items: center; font-size: 12px; min-width: 0; } .weight .rs-track { grid-column: 1 / -1; } .weight .val { font-family: var(--mono); text-align: right; color: var(--muted); } .weight.active .name { color: var(--text); font-weight: 600; } .weight.active .val { color: var(--accent); } .weight .name { color: var(--muted); min-width: 0; overflow-wrap: anywhere; } .weight .name.spec::after { content: " ◆"; color: var(--warn); font-size: 10px; } /* ---------- results ---------- */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .count { color: var(--muted); font-size: 13px; } .count b { color: var(--text); } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } table.results { width: 100%; border-collapse: collapse; font-size: 13px; } table.results th, table.results td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; } /* `top` is resolved against .table-wrap, not the viewport, because overflow-x makes the wrapper the nearest scrollport. Anything but 0 pushes the header down over the first row. */ table.results th { position: sticky; top: 0; background: #121820; z-index: 5; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); } table.results th.sorted { color: var(--accent); } table.results tbody tr:hover { background: #151c25; } td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } td.model { white-space: normal; max-width: 320px; min-width: 160px; } td.thumb img { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; background: #222; display: block; } .sub { color: var(--muted); font-size: 12px; } .badge { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); color: var(--muted); margin-left: 4px; } .badge.incomplete { color: var(--warn); border-color: #6b4c0d; } .badge.good { color: var(--good); border-color: #1c5a2a; } .badge.spec { color: var(--accent); border-color: #1f4b7a; } .badge.delisted { color: var(--bad); border-color: #6b2320; } .scorebar { position: relative; display: block; width: 60px; height: 6px; background: #22303d; border-radius: 3px; } .scorebar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; display: block; } .pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 16px 0; } /* ---------- detail page ---------- */ .detail { max-width: 1100px; margin: 0 auto; padding: 16px; min-width: 0; } .detail h2 { margin: 0 0 4px; font-size: 22px; overflow-wrap: anywhere; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 12px 0; } .gallery img { width: 100%; height: auto; border-radius: var(--radius); background: #222; cursor: zoom-in; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px 12px; min-width: 0; } .card h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .card ul { overflow-wrap: anywhere; } dl.kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 3px 12px; margin: 0; } dl.kv dt { color: var(--muted); min-width: 0; overflow-wrap: anywhere; } dl.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } ul.equip { columns: 2; margin: 0; padding-left: 18px; font-size: 13px; } .notice { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); } .notice.pending { border-color: #6b4c0d; color: var(--warn); } .notice.done { border-color: #1c5a2a; color: var(--good); } /* ---------- agent ops page ---------- */ /* Same tokens, same density as the results table: this is the operator's view of the SAME pipeline, and a second visual language would make it read as a second system. */ main.ops { padding: 12px 16px 60px; max-width: 1400px; margin: 0 auto; min-width: 0; } main.ops h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; } .ops-section { min-width: 0; } /* Nothing in these tables sorts on click, so they must not offer the results table's pointer cursor. */ table.ops-requests th, table.ops-events th { cursor: default; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; } .stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 8px 10px; min-width: 0; } .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .stat-value { font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; } .stat-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .stat.warn .stat-value { color: var(--warn); } .stat.bad .stat-value { color: var(--bad); } .badge.warn { color: var(--warn); border-color: #6b4c0d; } .badge.bad { color: var(--bad); border-color: #6b2320; } .warn-text { color: var(--warn); } table.ops-requests tr.ops-request { cursor: pointer; } table.ops-requests tr.ops-request.open { background: #151c25; } table.ops-requests td.model { white-space: normal; max-width: 260px; } tr.ops-detail-row > td { background: #121820; } /* The timeline: requested -> claimed -> done, with the gap between each pair. Wraps rather than scrolls, so a narrow screen stacks the steps instead of hiding the last one off the right edge. */ .timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; white-space: normal; } .tl-step { padding: 1px 6px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); color: var(--muted); } .tl-requested { color: var(--text); } .tl-dispatched { color: var(--accent); border-color: #1f4b7a; } .tl-claimed { color: var(--accent); border-color: #1f4b7a; } .tl-done { color: var(--good); border-color: #1c5a2a; } .tl-failed { color: var(--bad); border-color: #6b2320; } .tl-waiting { color: var(--warn); border-color: #6b4c0d; } .tl-gap { font-family: var(--mono); font-size: 11px; color: var(--muted); } .ev-list { display: grid; gap: 2px; padding: 4px 0; } .ev { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; align-items: baseline; } .ev-time { color: var(--muted); } .ev-type { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); } .ev-type.failed { color: var(--bad); } .ev-type.completed, .ev-type.spec_upserted { color: var(--good); } .ev-type.monitor_heartbeat, .ev-type.note { color: var(--muted); } .ev-detail { overflow-wrap: anywhere; } table.ops-events td.model { white-space: normal; max-width: 420px; } #toast { position: fixed; bottom: 16px; right: 16px; z-index: 50; display: grid; gap: 8px; max-width: calc(100vw - 32px); } #toast div { background: var(--panel-2); border: 1px solid var(--accent); color: var(--text); padding: 8px 12px; border-radius: var(--radius); box-shadow: 0 4px 20px #0008; } .spin { display: inline-block; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .mono { font-family: var(--mono); } .muted { color: var(--muted); } /* ---------- small screens: the sidebar becomes an off-canvas drawer ---------- */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .filters-toggle { display: inline-flex; align-items: center; gap: 6px; } aside.sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; width: min(88vw, 340px); z-index: 40; border-right: 1px solid var(--line); box-shadow: 8px 0 30px #000a; transform: translateX(-101%); transition: transform .22s ease; visibility: hidden; } body.filters-open aside.sidebar { transform: none; visibility: visible; } body.filters-open { overflow: hidden; } .backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: #000a; opacity: 0; transition: opacity .22s ease; } .backdrop[hidden] { display: none; } body.filters-open .backdrop { opacity: 1; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 2; margin: -12px -12px 8px; padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--line); } #q { flex: 1 1 100%; width: auto; } main { padding: 12px 12px 60px; } /* >=44px tap targets */ button, .sidebar input:not([type=checkbox]), .sidebar select:not([multiple]), input[type=search], input[type=text], input[type=number], select:not([multiple]) { min-height: 44px; } .sidebar .group > summary { padding: 14px 10px; } .checkline { min-height: 44px; } input[type=checkbox] { width: 20px; height: 20px; } table.results th { padding: 12px 8px; } table.results td { padding: 10px 8px; } .rs-track { height: 44px; } .rs-handle { width: 20px; height: 20px; } main.ops { padding: 12px 12px 60px; } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } table.ops-requests td.model, table.ops-events td.model { max-width: 200px; } ul.equip { columns: 1; } .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .detail { padding: 12px; } dl.kv { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } } @media (max-width: 380px) { .gallery { grid-template-columns: 1fr 1fr; } header.topbar { padding: 10px 12px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { aside.sidebar, .backdrop { transition: none; } } /* Controls that only work against the local index: Sync (spawns the scraper), Save profile (writes score_profiles), Enrich all matching (expands a filter set server-side). The edge deployment serves this same file and hides them, driven by `edge: true` in /api/health -- see the edgeMode() note in app.js. Hidden rather than forked: one index.html, one app.js, two deployments. */ body[data-edge="1"] .local-only { display: none !important; }