1/* Browse — public gallery list + proof detail. New styles only; layout2 * primitives (.card, table.list, .mode-toggle, .kpi-row) come from style.css. */34/* fills the page column; only .browse-scroll scrolls — never the body */5.browse-wrap {6 flex: 1;7 min-height: 0;8 display: flex;9 flex-direction: column;10 padding-top: 0.2rem;11}1213.browse-head {14 display: flex;15 flex-direction: column;16 gap: 0.55rem;17 padding-bottom: 0.6rem;18 border-bottom: 1px solid var(--border);19 margin-bottom: 0.15rem;20}2122.browse-title {23 font-family: var(--pixel);24 font-size: 1.45rem;25 letter-spacing: 0.14em;26 color: var(--accent);27 text-transform: uppercase;28 white-space: nowrap;29}3031/* sort chips can outgrow narrow screens — scroll the strip, not the page */32.chips-scroll { max-width: 100%; overflow-x: auto; }3334.filter-row { row-gap: 0.4rem; }35.filter-label {36 font-family: var(--pixel);37 font-size: 1rem;38 color: var(--text-dim);39 letter-spacing: 0.08em;40 text-transform: uppercase;41}42.filter-row input[type='date'].date-input {43 background: var(--bg-inset);44 color: var(--text);45 border: 1px solid var(--border);46 border-radius: 0;47 padding: 0.22rem 0.4rem;48 font: inherit;49 color-scheme: dark;50}51.filter-row input[type='date'].date-input:focus { outline: none; border-color: var(--accent); }52.filter-row .lab-input { width: 11rem; }53.filter-row .search-input { flex: 1; min-width: 10rem; }5455/* the single internal scroll region */56.browse-scroll {57 flex: 1;58 min-height: 0;59 overflow-y: auto;60 scrollbar-gutter: stable;61 padding: 0.5rem 0.4rem 0.6rem 0;62}63.browse-scroll .blink { animation: cursor-blink 1s steps(1) infinite; }6465/* wide table scrolls inside its pane on narrow screens */66.browse-table { min-width: 720px; }67.browse-scroll > table.browse-table { display: table; }68@media (max-width: 860px) {69 .browse-scroll { overflow-x: auto; }70}7172.rank-cell { width: 3.2rem; white-space: nowrap; }73.title-cell a { font-family: var(--pixel); font-size: 1.15rem; letter-spacing: 0.03em; }74.owner-cell { white-space: nowrap; }75.rating-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }76.hearts-cell { white-space: nowrap; }7778.delta-pos { color: var(--ok); }79.delta-neg { color: var(--danger); }8081.model-chip {82 display: inline-block;83 border: 1px solid var(--border);84 background: var(--bg-inset);85 padding: 0 0.4em;86 font-family: var(--pixel);87 font-size: 0.98rem;88 letter-spacing: 0.04em;89 white-space: nowrap;90 color: var(--text-dim);91}92.weights-glyph.open { color: var(--ok); }93.weights-glyph.closed { color: var(--text-dim); }9495.src-badge {96 display: inline-block;97 margin-left: 0.45em;98 border: 1px solid var(--accent-dim);99 color: var(--accent);100 font-family: var(--pixel);101 font-size: 0.85rem;102 letter-spacing: 0.1em;103 padding: 0 0.3em;104 vertical-align: middle;105}106107/* heart toggle — kin of .star-btn but with a count */108.heart-wrap { display: inline-block; }109button.heart-btn {110 background: none;111 border: none;112 padding: 0 0.2rem;113 color: var(--text-dim);114 font-family: var(--pixel);115 font-size: 1.1rem;116 letter-spacing: 0.05em;117}118button.heart-btn.hearted { color: var(--accent); }119button.heart-btn:hover:not(:disabled) { color: var(--accent); background: none; border: none; }120button.heart-btn:active:not(:disabled) { background: none; color: var(--accent); }121122.load-more-row { display: flex; justify-content: center; padding: 0.8rem 0 0.4rem; }123.end-of-list {124 text-align: center;125 font-family: var(--pixel);126 font-size: 1.05rem;127 letter-spacing: 0.1em;128 padding: 0.7rem 0 0.3rem;129}130131/* ---------- detail ---------- */132133.back-link {134 font-family: var(--pixel);135 font-size: 1.1rem;136 letter-spacing: 0.1em;137 color: var(--text-dim);138}139.back-link:hover { color: var(--accent); text-decoration: none; }140141.detail-scroll { padding-top: 1rem; }142.detail-card { margin-bottom: 1.4rem; }143.detail-meta { margin: 0.1rem 0 0.5rem; }144.detail-desc { margin: 0.2rem 0 0.7rem; max-width: 72ch; }145.detail-kpis { margin-top: 0.5rem; }146147/* wide inner tables scroll within their card, not the page */148.pane-scroll { max-height: 22rem; overflow: auto; scrollbar-gutter: stable; }149150.proof-results .proof-part { white-space: nowrap; }151.proof-results .proof-part.self { color: var(--accent); background: rgba(224, 164, 88, 0.08); }152153.source-pane {154 background: var(--bg-inset);155 border: 1px solid var(--border);156 padding: 0.7rem;157 font-size: 12px;158 line-height: 1.5;159 max-height: 26rem;160 overflow: auto;161 scrollbar-gutter: stable;162 margin: 0;163}164165/* 1-bit-adjacent highlighter tones: dim comments, accent strings, pale keywords */166167/* Proof rows: participant chips in place order, crown on the winner */168td.proof-results { white-space: nowrap; padding: 0.45rem 0.5rem; }169.proof-chip {170 position: relative;171 display: inline-flex; align-items: center; justify-content: center;172 min-width: 2.1em; height: 2.1em; padding: 0 0.3em;173 margin-right: 0.45em; margin-top: 0.25em;174 border: 1px solid var(--border-bright);175 color: var(--text); font-family: var(--pixel);176 letter-spacing: 0.05em; cursor: default;177}178.proof-chip.self { border-color: var(--accent); color: var(--accent); }179.proof-chip.winner { border-color: var(--accent); }180.proof-chip .crown {181 position: absolute; top: -0.85em; right: -0.4em;182 color: var(--accent); font-size: 0.95em; line-height: 1;183}184185/* Date pickers: template text stays quiet until a date is actually set */186input[type='date'].date-input { color: var(--text-dim); }187input[type='date'].date-input.has-value { color: var(--text); }188input[type='date'].date-input::-webkit-calendar-picker-indicator {189 opacity: 0.35;190 filter: invert(0.75);191}192193/* Identicons: one Urizen tile + tint per script, hashed from its id */194.identicon {195 display: inline-flex; align-items: center; justify-content: center;196 border: 1px solid var(--border-bright);197 background: var(--bg-inset);198 vertical-align: middle;199 font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-dim);200 flex: none;201}202.identicon canvas { display: block; image-rendering: pixelated; }203td.title-cell .identicon { margin-right: 0.5em; }204.detail-title { gap: 0.5em; }205.proof-chip { min-width: 0; height: auto; padding: 0.15em; }