/* ══════════════════════════════════════════
SupraBench Design System
══════════════════════════════════════════ */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@700,600,500,400&display=swap');
:root {
--bg: #030303;
--surface: #121212;
--surface2: #1a1a1a;
--text: #fff;
--text2: #888;
--text3: #555;
--border: #333;
--accent: #E5FE40;
--danger: #ff4444;
--success: #44ff88;
--warn: #ffaa44;
--hd: 'Clash Display', sans-serif;
--bd: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
--radius: 8px;
--radius-sm: 6px;
--radius-md: 12px;
--transition: 0.2s ease;
}
/* ── Reset ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Site-wide text selection — SupraScore yellow on dark background.
Two rules required: ::selection (Chromium/WebKit/modern Firefox)
and ::-moz-selection (older Firefox fallback). */
::selection {
background: var(--accent);
color: var(--bg);
text-shadow: none;
}
::-moz-selection {
background: var(--accent);
color: var(--bg);
text-shadow: none;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-family: var(--bd);
background: var(--bg);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--text);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--accent);
}
/* ── Layout ── */
.app-layout {
display: flex;
/* 100vh on iOS Safari includes the dynamic URL bar, causing the
layout to jump when it shows/hides. 100dvh tracks the *visible*
viewport, which is what we actually want for a fixed shell.
The 100vh line is the fallback for browsers without dvh support. */
height: 100vh;
height: 100dvh;
}
.sidebar {
width: 260px;
min-width: 260px;
background: var(--bg);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
/* Top padding picks up the iOS Dynamic Island / notch via env() so the
logo isn't hidden under the status bar in standalone PWA mode. The
calc() keeps the original 2rem for browser-tab use and just adds
whatever safe area iOS reports (0 on Android / desktop). */
padding: calc(env(safe-area-inset-top, 0px) + 2rem) 1.5rem
calc(env(safe-area-inset-bottom, 0px) + 2rem)
calc(env(safe-area-inset-left, 0px) + 1.5rem);
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
}
.logo {
font-family: var(--hd);
font-size: 1.8rem;
font-weight: 700;
cursor: pointer;
margin-bottom: 3rem;
letter-spacing: -0.5px;
}
.logo span {
color: var(--accent);
}
.nav {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.nav-item {
font-family: var(--hd);
font-size: 1rem;
font-weight: 500;
padding: 0.6rem 1rem;
border-radius: var(--radius);
cursor: pointer;
color: var(--text2);
transition: all var(--transition);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
}
.nav-item:hover {
color: var(--text);
background: var(--surface);
}
.nav-item.active {
color: var(--accent);
background: var(--surface);
}
/* ── Sidebar Auth Block ── */
.sidebar-auth {
margin-top: auto; /* pushes auth + footer to the bottom */
padding-top: 1.25rem;
border-top: 1px solid var(--border);
margin-bottom: 1rem;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
min-width: 0;
}
.sidebar-user:hover { background: var(--surface2); }
.sidebar-user.active {
border-color: var(--accent);
background: rgba(229, 254, 64, 0.06);
}
.sidebar-user__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border);
}
.sidebar-user__name {
flex: 1;
font-family: var(--hd);
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
.sidebar-user__logout {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--border);
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.95rem;
color: var(--text3);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--transition), border-color var(--transition);
}
.sidebar-user__logout svg {
width: 15px;
height: 15px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.sidebar-user__logout:hover { color: var(--danger); border-color: var(--danger); }
.sidebar-signin {
display: inline-flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.6rem 1rem;
background: var(--text);
color: var(--bg);
border: none;
border-radius: var(--radius);
font-family: var(--hd);
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.sidebar-signin:hover { background: var(--accent); }
.sidebar-signin svg {
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
padding: 2px;
flex-shrink: 0;
}
.sidebar-footer {
font-size: 0.75rem;
color: var(--text3);
line-height: 1.6;
}
/* "Source on GitLab" link in the sidebar footer.
Sits between the BSL line and the legal links so the project's
open-source nature is one tap away on every page (and inside the
mobile burger drawer, which renders the same sidebar). */
.sidebar-source {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.85rem;
padding: 0.45rem 0.7rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.75rem;
color: var(--text2);
text-decoration: none;
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.sidebar-source:hover {
border-color: var(--accent);
color: var(--text);
background: var(--surface2);
}
.sidebar-source svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.sidebar-legal {
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px solid var(--border);
font-size: 0.7rem;
color: var(--text3);
}
.sidebar-legal a {
color: var(--text3);
transition: color var(--transition);
}
.sidebar-legal a:hover {
color: var(--accent);
}
/* ── Cookie / storage notice ── */
.cookie-notice {
position: fixed;
/* Sits above the iOS home indicator on devices with one. */
bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
left: 50%;
transform: translateX(-50%);
max-width: 560px;
width: calc(100% - 2rem);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.85rem 2.8rem 0.85rem 1.1rem;
display: flex;
align-items: center;
gap: 0.9rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
z-index: 200;
font-size: 0.82rem;
color: var(--text2);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice__text {
flex: 1;
line-height: 1.45;
}
.cookie-notice__text strong { color: var(--text); }
.cookie-notice__text a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-notice__ok {
font-family: var(--hd);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.45rem 0.9rem;
border: 1px solid var(--accent);
background: var(--accent);
color: var(--bg);
border-radius: 100px;
cursor: pointer;
white-space: nowrap;
transition: opacity var(--transition);
}
.cookie-notice__ok:hover { opacity: 0.85; }
.cookie-notice__close {
position: absolute;
top: 0.35rem;
right: 0.55rem;
background: transparent;
border: none;
color: var(--text3);
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
padding: 0.25rem 0.35rem;
border-radius: 4px;
transition: color var(--transition);
}
.cookie-notice__close:hover { color: var(--text); }
@media (max-width: 600px) {
.cookie-notice {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
padding: 0.9rem 2.4rem 0.9rem 1rem;
}
.cookie-notice__ok { align-self: flex-end; }
}
.main {
margin-left: 260px;
flex: 1;
overflow-y: auto;
/* Allow horizontal scroll containers (e.g. wide tables) without
breaking the page itself. */
overflow-x: hidden;
padding: 3rem 4rem 6rem;
/* min-height intentionally not set: the parent .app-layout already
sizes via 100dvh, and forcing min-height: 100vh used to overflow
beyond the dvh-sized parent on iOS Safari (URL bar visible),
stranding the bottom of the page behind the home indicator. */
}
/* ── Typography ── */
.page-title {
font-family: var(--hd);
font-size: 5.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -2px;
line-height: 0.9;
margin-bottom: 1.5rem;
}
.page-desc {
color: var(--text2);
font-size: 1.05rem;
max-width: 600px;
margin-bottom: 2.5rem;
line-height: 1.6;
}
.section-header {
font-family: var(--hd);
font-size: 1.3rem;
font-weight: 600;
margin-top: 3rem;
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Tables ── */
table {
width: 100%;
border-collapse: collapse;
}
th {
font-family: var(--hd);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text3);
text-align: left;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
}
td {
padding: 0.85rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 0.95rem;
vertical-align: middle;
}
tr:hover td {
background: var(--surface);
}
tr.clickable-row {
cursor: pointer;
}
.rank-num {
font-family: var(--hd);
font-weight: 600;
color: var(--text3);
font-size: 0.9rem;
}
.score-cell {
font-family: var(--hd);
font-weight: 600;
font-size: 1.05rem;
}
.score-accent {
color: var(--accent);
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.6rem;
font-family: var(--hd);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition);
background: var(--text);
color: var(--bg);
}
.btn:hover {
background: var(--accent);
color: var(--bg);
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent);
background: transparent;
}
.btn-sm {
padding: 0.4rem 1rem;
font-size: 0.8rem;
}
.btn-danger {
background: transparent;
border: 1px solid var(--danger);
color: var(--danger);
}
.btn-danger:hover {
background: var(--danger);
color: var(--bg);
}
/* ── Tags ── */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.tag {
display: inline-block;
padding: 0.35rem 0.9rem;
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.8rem;
color: var(--text2);
cursor: pointer;
transition: all var(--transition);
font-family: var(--bd);
}
.tag:hover {
border-color: var(--accent);
color: var(--accent);
}
.tag.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
.tag-sm {
display: inline-block;
padding: 0.2rem 0.6rem;
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.7rem;
color: var(--text3);
margin-right: 0.3rem;
}
/* Clickable family-tag chip inside a model row. Visually identical to
.tag-sm at rest but with hover + active states so users discover it's
interactive. Used on the models list to filter the table by the
clicked family — see toggleFamilyFilter in public/js/app.js. */
.family-tag-click {
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.family-tag-click:hover {
border-color: var(--accent);
color: var(--text);
}
.family-tag-click.active {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
/* Leaderboard scope toggle — the two clickable words ("Model" /
"Model-Family") in the models-table header. The currently active
scope is shown in accent yellow; the inactive one is dim and turns
white on hover so it's discoverable as interactive. */
.lb-scope {
cursor: pointer;
color: var(--text2);
transition: color 0.12s;
user-select: none;
}
.lb-scope:hover {
color: var(--text);
}
.lb-scope.active {
color: var(--accent);
}
.lb-scope.active:hover {
color: var(--accent);
}
.lb-scope-sep {
color: var(--text3);
user-select: none;
}
/* ── Badges ── */
.badge {
display: inline-block;
padding: 0.2rem 0.7rem;
border-radius: 100px;
font-size: 0.7rem;
font-family: var(--hd);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-official {
border: 1px solid var(--success);
color: var(--success);
}
.badge-community {
border: 1px solid var(--accent);
color: var(--accent);
}
.badge-disputed {
border: 1px solid var(--danger);
color: var(--danger);
}
.badge-valid {
border: 1px solid var(--success);
color: var(--success);
}
/* ── Back Link ── */
.back-link {
font-family: var(--hd);
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text2);
cursor: pointer;
transition: color var(--transition);
display: inline-block;
margin-bottom: 1.5rem;
}
.back-link:hover {
color: var(--accent);
}
/* ── Quality Bar ── */
.quality-bar-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.quality-bar {
width: 60px;
height: 6px;
background: var(--surface2);
border-radius: 3px;
overflow: hidden;
}
.quality-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.5s ease;
}
/* ── Dimension Mini Bars ── */
.dimension-dots {
display: flex;
gap: 3px;
align-items: center;
}
.dimension-dot {
width: 8px;
height: 20px;
border-radius: 2px;
background: var(--surface2);
position: relative;
overflow: hidden;
}
.dimension-dot-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 2px;
transition: height 0.5s ease;
}
/* ── Star Rating ── */
.star-rating {
display: flex;
gap: 0.25rem;
}
.star {
cursor: pointer;
font-size: 1.3rem;
color: var(--text3);
transition: color var(--transition), transform var(--transition);
user-select: none;
}
.star:hover {
transform: scale(1.2);
}
.star.active {
color: var(--accent);
}
.star.readonly {
cursor: default;
}
.star.readonly:hover {
transform: none;
}
/* ── Quality Section ── */
.quality-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
margin-bottom: 2rem;
}
.quality-overall {
font-family: var(--hd);
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.quality-dimension-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.quality-dimension-row:last-child {
border-bottom: none;
}
.dimension-row-difficulty {
border-top: 1px dashed rgba(255, 255, 255, 0.08);
margin-top: 0.4rem;
padding-top: 0.9rem;
}
.dimension-row-difficulty .quality-dim-label {
color: var(--accent);
}
/* Effective ranking weight panel — explains how this bench contributes
to a model's SupraScore (quality × difficulty × headroom). */
.weight-breakdown {
margin-top: 1.25rem;
padding: 0.85rem 1rem;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: var(--hd);
font-size: 0.8rem;
}
.weight-breakdown__header {
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text2);
font-size: 0.75rem;
margin-bottom: 0.6rem;
}
.weight-breakdown__toggle {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
background: none;
border: none;
padding: 0;
margin: 0 0 0.2rem;
cursor: pointer;
font: inherit;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text2);
text-align: left;
}
.weight-breakdown__toggle:hover {
color: var(--text);
}
.weight-breakdown__toggle .expand-icon {
font-size: 0.55rem;
}
/* Same toggle visual, but in the API page it sits between two
blocks instead of leading a card body — needs its own breathing
room and a visible affordance that you can click it. */
.plans-toggle {
margin: 0.5rem 0 1.25rem;
padding: 0.6rem 0.8rem;
border: 1px dashed var(--border);
border-radius: 6px;
font-size: 0.78rem;
}
.plans-toggle:hover {
border-color: var(--text2);
}
.weight-breakdown__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 0;
color: var(--text2);
}
.weight-breakdown__row > span:last-child {
color: var(--text);
font-weight: 500;
}
.weight-breakdown__total {
border-top: 1px solid var(--border);
margin-top: 0.4rem;
padding-top: 0.5rem;
color: var(--text);
font-weight: 700;
}
.weight-breakdown__total > span:last-child {
color: var(--accent);
}
.dimension-dot-difficulty {
border-color: var(--accent);
}
.quality-dim-label {
font-family: var(--hd);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text2);
width: 160px;
flex-shrink: 0;
}
.quality-dim-value {
font-family: var(--hd);
font-weight: 600;
font-size: 0.9rem;
width: 40px;
text-align: right;
}
.quality-dim-bar {
flex: 1;
max-width: 200px;
}
.quality-rater-count {
font-size: 0.75rem;
color: var(--text3);
}
/* ── Forms ── */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-family: var(--hd);
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text2);
margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.7rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-family: var(--bd);
font-size: 0.95rem;
transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
}
.form-group textarea {
min-height: 80px;
resize: vertical;
}
.form-group .helper-text {
font-size: 0.8rem;
color: var(--text3);
margin-top: 0.4rem;
}
.form-group .official-indicator {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
margin-top: 0.4rem;
font-weight: 600;
}
.form-group .official-indicator.official {
color: var(--success);
}
.form-group .official-indicator.community {
color: var(--accent);
}
/* ── Tag Input ── */
.input-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
padding: 0.5rem 0.7rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
min-height: 44px;
transition: border-color var(--transition);
}
.input-tags:focus-within {
border-color: var(--accent);
}
.input-tags input {
flex: 1;
min-width: 100px;
background: transparent;
border: none;
color: var(--text);
font-size: 0.9rem;
padding: 0.2rem 0;
outline: none;
}
.input-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.8rem;
color: var(--text2);
}
.input-tag .remove {
cursor: pointer;
color: var(--text3);
font-size: 1rem;
line-height: 1;
transition: color var(--transition);
}
.input-tag .remove:hover {
color: var(--danger);
}
/* ── Submission Card ── */
.submission-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.2rem 1.5rem;
margin-bottom: 0.75rem;
transition: border-color var(--transition);
}
.submission-card:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.submission-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.submission-card-scores {
display: flex;
gap: 2rem;
align-items: baseline;
margin-bottom: 0.75rem;
}
.submission-card-footer {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.85rem;
color: var(--text3);
}
/* ── Vote Buttons ── */
.vote-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.3rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text2);
font-size: 0.85rem;
font-family: var(--hd);
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
/* Min visible size stays the same; the ::before below extends the
pointer/touch hit area to the WCAG 2.5.5 minimum without nudging
surrounding layout. */
min-width: 2.4rem;
}
/* Invisible expanded hit-area — keeps the visible button compact (so
the dense submission/score tables don't reflow) while giving touch
users a comfortable target on phones. The pseudo only intercepts
pointer events; it carries no styling. */
.vote-btn::before {
content: "";
position: absolute;
inset: -6px -4px;
}
.vote-btn:hover {
border-color: var(--text2);
}
.vote-btn.active-up {
border-color: var(--success);
color: var(--success);
}
.vote-btn.active-down {
border-color: var(--danger);
color: var(--danger);
}
/* On phones, also enlarge the visible button itself — tapping a 28 px
pill repeatedly is uncomfortable even with the extended hit area.
Wrapping rows already use `flex-wrap`, so the extra height doesn't
cause overflow. */
@media (max-width: 640px) {
.vote-btn {
padding: 0.5rem 0.85rem;
font-size: 0.9rem;
min-height: 2.4rem;
}
}
/* ── User Badge ── */
.user-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1rem 0.4rem 0.4rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.85rem;
}
.user-badge img {
width: 28px;
height: 28px;
border-radius: 50%;
}
/* ── Login Card ── */
.login-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2.5rem;
max-width: 400px;
text-align: center;
}
.login-card p {
color: var(--text2);
margin-bottom: 1.5rem;
}
.gh-btn {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.8rem 1.8rem;
background: var(--text);
color: var(--bg);
border: none;
border-radius: var(--radius);
font-family: var(--hd);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
}
.gh-btn:hover {
background: var(--accent);
}
.gh-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* ── Success Box ── */
.success-box {
background: var(--surface);
border: 1px solid var(--success);
border-radius: var(--radius);
padding: 2.5rem;
max-width: 500px;
}
.success-box h3 {
font-family: var(--hd);
font-size: 1.5rem;
color: var(--success);
margin-bottom: 1rem;
}
/* ── Search Dropdown ── */
.search-container {
position: relative;
}
.search-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
max-height: 200px;
overflow-y: auto;
z-index: 50;
}
.search-dropdown-item {
padding: 0.6rem 1rem;
cursor: pointer;
font-size: 0.9rem;
transition: background var(--transition);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.search-dropdown-item:hover {
background: var(--surface2);
}
.search-dropdown-item:last-child {
border-bottom: none;
}
.search-new-item {
color: var(--accent);
font-family: var(--hd);
font-weight: 600;
font-size: 0.85rem;
}
/* ── Normalize Preview ── */
.normalize-preview {
font-family: var(--hd);
font-size: 1.1rem;
font-weight: 600;
color: var(--accent);
margin-top: 0.5rem;
}
/* ── Discussion Placeholder ── */
.discussion-placeholder {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
color: var(--text3);
}
.discussion-placeholder h4 {
font-family: var(--hd);
font-size: 1rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Giscus discussion section ── */
.giscus-section {
max-width: 100%;
}
.giscus-host {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.25rem;
min-height: 120px;
overflow: hidden;
}
/* The iframe giscus injects */
.giscus-host .giscus,
.giscus-host .giscus-frame {
width: 100% !important;
max-width: 100%;
border: 0;
color-scheme: dark;
}
@media (max-width: 600px) {
.giscus-host {
padding: 0.5rem 0.5rem;
border-radius: 6px;
}
}
/* ── SupraScore Display ── */
.supra-score-display {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 2rem;
}
.supra-score-value {
font-family: var(--hd);
font-size: 4rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.supra-score-label {
font-family: var(--hd);
font-size: 0.9rem;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Submitter Info ── */
.submitter {
display: flex;
align-items: center;
gap: 0.5rem;
}
.submitter img {
width: 22px;
height: 22px;
border-radius: 50%;
}
/* ── Empty State ── */
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--text3);
font-family: var(--hd);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Detail Header ── */
.detail-provider {
font-size: 0.9rem;
color: var(--text3);
margin-bottom: 0.25rem;
font-family: var(--hd);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-title {
font-family: var(--hd);
font-size: 4rem;
font-weight: 700;
line-height: 1;
margin-bottom: 1rem;
letter-spacing: -1px;
}
/* ── Form Section Headers ── */
.form-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
margin-bottom: 1.5rem;
}
.form-section-title {
font-family: var(--hd);
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
/* ── Error Message ── */
.error-msg {
color: var(--danger);
font-size: 0.9rem;
margin-top: 0.75rem;
}
/* ── Link Arrow ── */
.link-arrow {
font-size: 0.85rem;
color: var(--text2);
transition: color var(--transition);
font-family: var(--hd);
}
.link-arrow:hover {
color: var(--accent);
}
/* ── Sort Button ── */
.sort-btn {
cursor: pointer;
user-select: none;
}
.sort-btn:hover {
color: var(--accent);
}
/* ── Loading ── */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ── Step Indicator ── */
.step-indicator {
display: none; /* not used in new design */
}
/* ── Expandable ── */
.expandable-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.75rem 0;
}
.expandable-header:hover {
color: var(--accent);
}
/* Chevron icons (▼ glyph in markup) follow standard collapsable behaviour:
collapsed → points right; expanded → points down. */
.expand-icon {
display: inline-block;
transition: transform var(--transition);
transform: rotate(-90deg);
transform-origin: center;
}
.expand-icon.open {
transform: rotate(0deg);
}
/* ── View Transition ── */
[x-cloak] {
display: none !important;
}
/* ═══════════════════════════════════════
Tag filter bar (top-N popular bench tags + "more" pill).
Wraps on desktop, horizontal scroll on mobile so a packed bar
doesn't push the table down on small screens.
═══════════════════════════════════════ */
.tag-bar-wrap {
margin: 0 0 1.25rem;
}
.tag-bar {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.tag.tag-more {
background: transparent;
border-style: dashed;
color: var(--text3);
}
.tag.tag-more:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ═══════════════════════════════════════
Tag picker popup (full-overlay; opened from "+ N more").
Same visual language as sb-dialog but optimised for browsing
a long flat list with search.
═══════════════════════════════════════ */
.tag-picker-overlay {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.tag-picker-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(2px);
}
.tag-picker-modal {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
width: min(560px, 100%);
max-height: min(70vh, 640px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: sb-dialog-pop 0.18s ease-out;
}
.tag-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.2rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.tag-picker-title {
margin: 0;
font-family: var(--hd);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--text);
}
.tag-picker-close {
background: transparent;
border: 0;
color: var(--text3);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
padding: 0 0.25rem;
transition: color var(--transition);
}
.tag-picker-close:hover {
color: var(--accent);
}
.tag-picker-search-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.2rem;
border-bottom: 1px solid var(--border);
}
.tag-picker-search {
flex: 1;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
padding: 0.5rem 0.8rem;
border-radius: var(--radius);
font-size: 0.9rem;
font-family: var(--bd);
}
.tag-picker-search::placeholder { color: var(--text3); }
.tag-picker-search:focus {
border-color: var(--accent);
outline: none;
}
.tag-picker-count {
font-size: 0.7rem;
color: var(--text3);
font-family: var(--hd);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.tag-picker-body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.2rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-content: flex-start;
}
.tag-picker-item {
display: inline-flex;
align-items: center;
/* Inside the dark popup the default --text2 (#888) is barely
readable. Bump unselected tag labels to full white; the
`.active` background-fill rule already overrides this. */
color: var(--text);
gap: 0.45rem;
border: 1px solid var(--border);
font: inherit;
}
.tag-picker-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.tag-picker-item-count {
font-size: 0.65rem;
font-family: var(--hd);
/* --text3 (#555) drowns in the dark popup background. The count
is the second-most-important info on every row (after the tag
name itself), so keep it dim relative to --text but well above
the WCAG-AA floor on var(--bg). */
color: #c8c8c8;
background: var(--bg);
border-radius: 100px;
padding: 0.05rem 0.45rem;
letter-spacing: 0.3px;
}
.tag-picker-item.active .tag-picker-item-count {
background: rgba(0, 0, 0, 0.15);
color: var(--bg);
}
.tag-picker-empty {
width: 100%;
text-align: center;
font-size: 0.85rem;
color: var(--text3);
padding: 1.5rem 0;
}
.tag-picker-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.2rem;
border-top: 1px solid var(--border);
gap: 1rem;
}
.tag-picker-hint {
font-size: 0.75rem;
color: var(--text3);
font-family: var(--hd);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Bench-tag chips in the benches list table — clickable filter
shortcut. Mirrors the .tag interactive style at small size. */
.tag-sm-clickable {
cursor: pointer;
transition: all var(--transition);
}
.tag-sm-clickable:hover {
border-color: var(--accent);
color: var(--accent);
}
.tag-sm-clickable.active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
/* Body scroll-lock when a modal/picker is open. */
body.modal-open {
overflow: hidden;
}
/* ═══════════════════════════════════════
List search input (models / benches)
═══════════════════════════════════════ */
.list-search {
margin-bottom: 1rem;
}
.list-search input {
width: 100%;
max-width: 480px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: 0.55rem 0.9rem;
border-radius: var(--radius);
font-family: var(--bd);
font-size: 0.9rem;
}
.list-search input:focus {
border-color: var(--accent);
outline: none;
}
/* ═══════════════════════════════════════
Tag voting on detail pages
═══════════════════════════════════════ */
.tag-vote-block {
margin: 0 0 2rem;
padding: 1rem 1.1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.tag-vote-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
font-family: var(--hd);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text3);
}
.btn-tag-suggest {
background: transparent;
border: 1px solid var(--border);
color: var(--text2);
font-family: var(--hd);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.3rem 0.7rem;
border-radius: 100px;
cursor: pointer;
transition: all var(--transition);
}
.btn-tag-suggest:hover {
border-color: var(--accent);
color: var(--accent);
}
.tag-vote-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-vote-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.5rem 0.25rem 0.7rem;
border-radius: 100px;
border: 1px solid var(--border);
background: var(--surface2);
font-size: 0.85rem;
}
.tag-vote-chip.is-positive {
border-color: rgba(78, 204, 163, 0.45);
}
.tag-vote-chip.is-negative {
border-color: rgba(231, 76, 76, 0.4);
opacity: 0.7;
}
.tag-vote-name {
font-family: var(--bd);
}
.tag-vote-score {
font-family: var(--hd);
font-size: 0.72rem;
color: var(--text3);
min-width: 22px;
text-align: center;
}
.tag-vote-chip.is-positive .tag-vote-score { color: var(--success); }
.tag-vote-chip.is-negative .tag-vote-score { color: var(--danger); }
.tag-vote-buttons {
display: inline-flex;
gap: 0.15rem;
}
.tv-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text2);
width: 22px;
height: 22px;
font-size: 0.65rem;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.tv-btn:hover { border-color: var(--accent); color: var(--accent); }
.tv-btn.tv-up.active { background: var(--success); color: var(--bg); border-color: var(--success); }
.tv-btn.tv-down.active { background: var(--danger); color: var(--bg); border-color: var(--danger); }
.tag-suggest-row {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
.tag-suggest-row input {
flex: 1;
min-width: 160px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
padding: 0.4rem 0.7rem;
border-radius: var(--radius);
font-family: var(--bd);
font-size: 0.85rem;
}
.tag-vote-hint {
margin-top: 0.6rem;
font-size: 0.75rem;
color: var(--text3);
}
/* ═══════════════════════════════════════
Multi-score submission entries
═══════════════════════════════════════ */
.score-entry {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
margin-bottom: 0.75rem;
overflow: hidden;
transition: border-color var(--transition);
}
.score-entry:hover { border-color: var(--text3); }
.score-entry-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1rem;
cursor: pointer;
user-select: none;
}
.score-entry-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--surface2);
color: var(--text2);
font-family: var(--hd);
font-size: 0.75rem;
flex-shrink: 0;
}
.score-entry-label {
font-family: var(--bd);
font-weight: 500;
color: var(--text);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.score-entry-summary {
color: var(--accent);
font-family: var(--hd);
font-size: 0.85rem;
margin-left: 0.5rem;
}
.score-entry-header .expand-icon {
color: var(--text3);
font-size: 0.75rem;
}
.score-entry-header .btn-danger {
padding: 0.15rem 0.5rem;
font-size: 0.85rem;
}
.score-entry-body {
padding: 0.5rem 1rem 1rem;
border-top: 1px solid var(--border);
}
.btn-add-entry {
display: block;
width: 100%;
padding: 0.7rem;
font-family: var(--hd);
font-size: 0.85rem;
letter-spacing: 0.3px;
border-style: dashed;
margin-top: 0.5rem;
}
/* Tag chip flash on add */
.input-tag {
transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.input-tag.just-added {
animation: tagPop 0.6s ease;
box-shadow: 0 0 0 2px rgba(255, 200, 0, 0.55);
}
@keyframes tagPop {
0% { transform: scale(0.7); opacity: 0; }
60% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
/* ═══════════════════════════════════════
Clickable submission cards
═══════════════════════════════════════ */
.submission-card.clickable {
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.submission-card.clickable:hover {
border-color: var(--accent);
background: var(--surface2);
}
.submission-card-disclose {
margin-left: auto;
font-family: var(--hd);
font-size: 0.7rem;
letter-spacing: 0.5px;
color: var(--text3);
text-transform: uppercase;
opacity: 0;
transition: opacity var(--transition);
}
.submission-card.clickable:hover .submission-card-disclose {
opacity: 1;
color: var(--accent);
}
.submission-meta {
font-size: 0.75rem;
color: var(--text3);
font-family: var(--hd);
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ── Mobile header + burger (hidden ≥ 900px) ── */
.mobile-bar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
/* Bar grows to host the iOS notch / Dynamic Island. Inner content
stays the original 56px so layout (logo size etc.) is unchanged. */
height: calc(env(safe-area-inset-top, 0px) + 56px);
padding-top: env(safe-area-inset-top, 0px);
padding-left: calc(env(safe-area-inset-left, 0px) + 1rem);
padding-right: calc(env(safe-area-inset-right, 0px) + 1rem);
background: var(--bg);
border-bottom: 1px solid var(--border);
align-items: center;
justify-content: space-between;
z-index: 90;
}
.mobile-bar .logo {
margin-bottom: 0;
font-size: 1.3rem;
}
.burger {
position: relative;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
transition: border-color var(--transition);
}
.burger:hover { border-color: var(--accent); }
.burger span {
display: block;
width: 18px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
transform-origin: center;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Mobile drawer backdrop ── */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 110;
backdrop-filter: blur(2px);
}
/* ═══ Responsive ═══ */
@media (max-width: 900px) {
.mobile-bar { display: flex; }
.sidebar-backdrop { display: block; }
/* Sidebar becomes a slide-in drawer from the left.
The desktop padding rule already accounts for env(safe-area-inset-*),
but this mobile override used to flatten it back to a hard-coded
value — which meant on iPhones the SupraBench logo sat directly
under the Dynamic Island / notch when the drawer opened. We
reapply the same safe-area math here, scaled to the tighter
drawer paddings (1.25rem instead of 2rem). */
.sidebar {
width: 280px;
min-width: 280px;
border-right: 1px solid var(--border);
padding: calc(env(safe-area-inset-top, 0px) + 1.25rem)
1.25rem
calc(env(safe-area-inset-bottom, 0px) + 1.5rem)
calc(env(safe-area-inset-left, 0px) + 1.25rem);
z-index: 120;
transform: translateX(-100%);
transition: transform 0.24s ease;
box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
}
.sidebar.open { transform: translateX(0); }
.sidebar-logo {
margin-bottom: 2rem;
font-size: 1.4rem;
}
.nav { gap: 0.15rem; }
.main {
margin-left: 0;
/* Clears the mobile-bar including its safe-area top padding. */
margin-top: calc(env(safe-area-inset-top, 0px) + 56px);
/* Bottom padding keeps content above the iOS home-indicator. */
padding: 2rem
calc(env(safe-area-inset-right, 0px) + 1.5rem)
calc(env(safe-area-inset-bottom, 0px) + 4rem)
calc(env(safe-area-inset-left, 0px) + 1.5rem);
}
.page-title {
font-size: 3rem;
letter-spacing: -1px;
}
.detail-title {
font-size: 2.5rem;
}
.supra-score-value {
font-size: 2.5rem;
}
table {
font-size: 0.85rem;
}
th, td {
padding: 0.6rem 0.5rem;
}
.quality-section {
padding: 1.2rem;
}
.quality-dim-label {
width: 100px;
font-size: 0.75rem;
}
.form-section {
padding: 1.2rem;
}
}
@media (max-width: 600px) {
/* Long list-page titles ("Model Reality Ranking", "Benchmark
Quality Ranking") use an explicit
to split into two
uppercase rows. At 2.2rem with -1px letter-spacing, the
longer row "BENCHMARK QUALITY" (17 uppercase chars) fits
≥360px viewports comfortably; on the rare 320px iPhone-SE
class screen the .page-title--narrow rule below kicks in. */
.page-title {
font-size: 2.2rem;
}
.detail-title {
font-size: 1.8rem;
}
.main {
/* Keep the safe-area-inset-* contributions from the >900px rule
(especially -bottom for the iOS home indicator); only the
breathing room inside the bar shrinks on small phones. */
padding: 1.25rem
calc(env(safe-area-inset-right, 0px) + 1rem)
calc(env(safe-area-inset-bottom, 0px) + 4rem)
calc(env(safe-area-inset-left, 0px) + 1rem);
}
}
/* iPhone-SE / iPhone-mini class screens (320–375 px). At 2.2rem
"BENCHMARK QUALITY" with uppercase + bold can clip past the
right edge with our 1rem mobile gutters. Drop another notch. */
@media (max-width: 380px) {
.page-title {
font-size: 1.85rem;
letter-spacing: -0.5px;
}
}
/* ═══ Scrollbar ═══ */
.main::-webkit-scrollbar {
width: 6px;
}
.main::-webkit-scrollbar-track {
background: transparent;
}
.main::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.main::-webkit-scrollbar-thumb:hover {
background: var(--text3);
}
/* ══════════════════════════════════════════
New components — submit tabs, entity vote,
about/profile pages, mobile cards.
══════════════════════════════════════════ */
/* ── Submit mode tabs ── */
.submit-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.submit-tab {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.85rem 1rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
text-align: left;
font-family: var(--bd);
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.submit-tab:hover {
border-color: var(--text3);
}
.submit-tab.active {
border-color: var(--accent);
background: rgba(229, 254, 64, 0.07);
}
.submit-tab__title {
font-family: var(--hd);
font-size: 0.95rem;
font-weight: 600;
}
.submit-tab.active .submit-tab__title { color: var(--accent); }
.submit-tab__hint {
font-size: 0.7rem;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ── Picked-pill (selected model/bench preview) ── */
.picked-pill {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface2);
border-radius: var(--radius);
margin-bottom: 1rem;
flex-wrap: wrap;
}
.picked-pill .btn-danger { margin-left: auto; }
/* ── Entity-vote block (model/bench existence) ── */
.entity-vote-block {
margin: 0.75rem 0 1.5rem;
}
.entity-vote-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.85rem;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--radius);
flex-wrap: wrap;
}
.entity-vote-label {
font-size: 0.8rem;
color: var(--text2);
font-family: var(--hd);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.entity-vote-score {
font-family: var(--hd);
font-weight: 600;
font-size: 0.95rem;
color: var(--text2);
min-width: 2ch;
text-align: center;
}
.entity-vote-score.pos { color: var(--success); }
.entity-vote-score.neg { color: var(--danger); }
.entity-vote-meta {
font-size: 0.72rem;
color: var(--text3);
display: inline-flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.entity-vote-buttons {
display: inline-flex;
gap: 0.3rem;
}
/* The "Sign in to vote." hint is reused from the tag-vote block which
pushes it down with a top margin. Inside the inline entity-vote-row
that margin breaks vertical alignment with the rest of the chips. */
.entity-vote-row .tag-vote-hint {
margin-top: 0;
align-self: center;
}
.entity-removed-banner {
background: rgba(255, 68, 68, 0.08);
border: 1px solid var(--danger);
border-radius: var(--radius);
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: var(--danger);
margin-bottom: 0.75rem;
}
/* ── Bench description collapsable ──
Default-collapsed pill-style toggle that sits between the bench
title and the entity-vote row. The button is intentionally low-key
(no border, small caps) so it doesn't compete with the title; it
blooms on hover. The body slot uses x-transition for the show/hide
so we don't depend on the @alpinejs/collapse plugin. */
.bench-desc-collapse {
margin: 0.4rem 0 1rem;
}
.bench-desc-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem 0.35rem 0;
background: transparent;
border: none;
color: var(--text3);
font-family: var(--hd);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: color var(--transition);
}
.bench-desc-toggle:hover { color: var(--text2); }
.bench-desc-collapse.is-open .bench-desc-toggle { color: var(--text2); }
.bench-desc-toggle .expand-icon {
font-size: 0.7rem;
transition: transform var(--transition);
display: inline-block;
}
.bench-desc-toggle .expand-icon.open { transform: rotate(180deg); }
.bench-desc-body { padding-bottom: 0.4rem; }
/* ── Dimension help-icon (tooltip) ── */
.dim-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--surface2);
color: var(--text3);
font-size: 0.7rem;
font-weight: 700;
margin-left: 0.4rem;
cursor: help;
position: relative;
border: 1px solid var(--border);
}
.dim-help::after {
content: attr(data-tip);
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
background: var(--surface);
color: var(--text);
font-family: var(--bd);
font-weight: 400;
font-size: 0.75rem;
text-transform: none;
letter-spacing: 0;
padding: 0.5rem 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
white-space: normal;
width: 240px;
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
text-align: left;
line-height: 1.4;
}
.dim-help:hover::after,
.dim-help:focus::after { opacity: 1; }
/* ── About page ── */
.about-section {
margin-bottom: 2.5rem;
max-width: 740px;
}
.about-section p { color: var(--text2); margin-bottom: 0.75rem; line-height: 1.6; }
.about-section strong { color: var(--text); }
.about-list {
list-style: none;
padding: 0;
margin: 0.5rem 0;
}
.about-list li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
color: var(--text2);
line-height: 1.6;
}
.about-list li:last-child { border-bottom: none; }
.about-list li strong {
display: inline-block;
min-width: 180px;
color: var(--text);
font-family: var(--hd);
}
/* Modifier: lists where is used for inline emphasis inside
the description (math glossaries, factor explanations) instead of as
a leading term. Disables the 180px term-column alignment. */
.about-list--inline li strong {
display: inline;
min-width: 0;
font-family: inherit;
}
ol.about-list { counter-reset: ablist; }
ol.about-list li { counter-increment: ablist; padding-left: 2rem; position: relative; }
ol.about-list li::before {
content: counter(ablist);
position: absolute; left: 0; top: 0.5rem;
font-family: var(--hd); font-weight: 600;
color: var(--accent);
}
/* ── About Q&A ── */
.qa-item {
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.6rem;
background: var(--surface);
overflow: hidden;
transition: border-color var(--transition);
}
.qa-item:has(.qa-answer:not([style*="display: none"])) {
border-color: var(--accent);
}
.qa-question {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: transparent;
border: none;
color: var(--text);
font-family: var(--hd);
font-size: 1.05rem;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background var(--transition);
line-height: 1.4;
}
.qa-question:hover { background: var(--surface2); }
.qa-question .expand-icon {
flex-shrink: 0;
font-size: 0.75rem;
color: var(--text3);
width: 1rem;
text-align: center;
}
.qa-answer {
padding: 0.25rem 1.25rem 1.25rem 2.95rem;
border-top: 1px solid var(--border);
background: var(--bg);
}
.qa-answer p { color: var(--text2); margin-bottom: 0.85rem; line-height: 1.7; }
.qa-answer ul.about-list,
.qa-answer ol.about-list { background: transparent; margin-bottom: 1rem; }
.qa-subheader {
font-family: var(--hd);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--accent);
margin: 1.4rem 0 0.6rem;
}
/* Math blocks (KaTeX) — give them breathing room and a subtle frame */
.math-block {
margin: 1rem 0 1.25rem;
padding: 0.85rem 1rem;
background: var(--surface2);
border-left: 3px solid var(--accent);
border-radius: 4px;
overflow-x: auto;
color: var(--text);
}
.math-block .katex { font-size: 1.05rem; }
.math-block .katex-display { margin: 0; }
.qa-answer .katex { color: var(--text); }
/* Q&A tables (worked example, headroom trajectory) */
.qa-table {
width: 100%;
margin: 1rem 0 1.25rem;
border-collapse: collapse;
font-family: var(--hd);
font-size: 0.85rem;
}
.qa-table th,
.qa-table td {
padding: 0.55rem 0.7rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.qa-table th {
color: var(--text3);
font-weight: 500;
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--border);
}
.qa-table td { color: var(--text2); }
.qa-table td strong { color: var(--text); }
@media (max-width: 700px) {
.qa-question { padding: 0.85rem 1rem; font-size: 0.95rem; }
.qa-answer { padding: 0.25rem 1rem 1rem 1rem; }
.math-block { font-size: 0.9rem; padding: 0.6rem 0.7rem; }
.qa-table { font-size: 0.78rem; }
.qa-table th, .qa-table td { padding: 0.4rem 0.45rem; }
}
.external-link {
color: var(--accent);
font-family: var(--hd);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
}
/* ── Profile page ── */
.profile-header {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.profile-header__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid var(--border);
object-fit: cover;
}
.profile-header__name {
font-family: var(--hd);
font-size: 1.6rem;
margin: 0;
}
.profile-header__email {
font-size: 0.85rem;
color: var(--text3);
margin: 0.25rem 0 0;
}
.profile-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 2rem;
}
.profile-stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.profile-stat__num {
font-family: var(--hd);
font-size: 1.5rem;
font-weight: 600;
color: var(--accent);
}
.profile-stat__label {
font-size: 0.7rem;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.profile-table th { font-size: 0.7rem; }
.profile-vote-num {
font-size: 0.75rem;
color: var(--text3);
margin-left: 0.5rem;
}
.profile-creations {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.profile-creation-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.85rem;
color: var(--text);
}
.profile-creation-chip:hover { border-color: var(--accent); color: var(--accent); }
.profile-creation-type {
font-family: var(--hd);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text3);
padding: 0.1rem 0.4rem;
background: var(--surface2);
border-radius: 4px;
}
.profile-tagvotes {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 2rem;
}
/* Bench list: clamp the description text so the table cell doesn't grow.
We do this on every viewport — single-line ellipsis on desktop,
2-line clamp on mobile via the card layout below. */
.b-desc {
color: var(--text3);
font-size: 0.8rem;
display: inline-block;
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
/* ════════════════════════════════════════════
TABLE-SCROLL WRAPPER (all viewports)
Wraps wide tables so they scroll horizontally
inside their own container instead of forcing
the entire page to scroll sideways. The
bottom-mobile rules below convert most tables
to card layouts so this wrapper only activates
in the narrow tablet sweet spot (700-1024px).
════════════════════════════════════════════ */
.table-scroll {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Subtle scrollbar so tablet users see the scroll affordance instead
of guessing why columns look squished. */
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
.table-scroll > table {
min-width: 100%;
}
/* ── Tablet sweet spot (701-1024px) ──
Without this, the leaderboard tables stretch to fill the container
width (min-width: 100% on the table) and the browser silently
crushes 7 columns into ~750px, producing two-line headers, wrapped
tag chips, and broken dimension dots. We force a true minimum
width so the .table-scroll wrapper actually scrolls instead. */
@media (min-width: 701px) and (max-width: 1024px) {
.table-scroll > .benches-list { min-width: 920px; }
.table-scroll > .models-list { min-width: 720px; }
.b-desc { max-width: 220px; }
}
/* ── Tags column: horizontally scrollable on all viewports >700px ──
Tag chips otherwise wrap onto multiple lines and blow up the row
height (and on tablet they push the column past its budget). Force
a single-line scroll strip with a subtle webkit scrollbar so the
user can swipe / mouse-wheel through long tag lists. The "+N more"
indicator stays inline at the end. */
.b-tags {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.35rem;
max-width: 180px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox: hide scrollbar (still scrolls) */
}
.b-tags::-webkit-scrollbar { display: none; }
.b-tags > * { flex: 0 0 auto; } /* tags don't shrink to fit */
/* ── Mobile-friendly tables → compact cards under 700px ── */
@media (max-width: 700px) {
.submit-tabs { grid-template-columns: 1fr; }
.submit-tab { padding: 0.7rem 0.85rem; }
/* Wrapped tables: drop the scroll affordance, the inner table will
re-flow into a card stack via the rules below. */
.table-scroll { overflow-x: visible; }
.table-scroll > table { min-width: 0; }
/* Generic: stack rows as cards */
.models-list,
.benches-list,
.profile-table,
.bench-perf-list,
.model-scores-list {
display: block;
width: 100%;
border-collapse: separate;
background: transparent;
}
.models-list thead,
.benches-list thead,
.profile-table thead,
.bench-perf-list thead,
.model-scores-list thead { display: none; }
.models-list tbody,
.benches-list tbody,
.profile-table tbody,
.bench-perf-list tbody,
.model-scores-list tbody { display: block; }
.models-list tr,
.benches-list tr,
.profile-table tr,
.bench-perf-list tr,
.model-scores-list tr {
display: grid;
column-gap: 0.75rem;
row-gap: 0.25rem;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.65rem;
padding: 0.75rem 0.9rem;
}
.models-list tr.clickable-row:hover,
.benches-list tr.clickable-row:hover,
.bench-perf-list tr.clickable-row:hover,
.model-scores-list tr.clickable-row:hover { border-color: var(--accent); }
.models-list td,
.benches-list td,
.profile-table td,
.bench-perf-list td,
.model-scores-list td {
display: block;
padding: 0;
border: none;
font-size: 0.85rem;
min-width: 0;
}
/* ── MODELS card layout ──
Minimal preview card: rank | name + provider | SupraScore.
The score column is the right-hand anchor; when a tag filter is
active a smaller filtered score docks directly below the headline
score (NOT off to the left like before).
Coverage ("X benches") and the family-tag chip are intentionally
omitted — both belong on the model detail page; squeezing them
onto a phone card produced split text and bad alignment. */
.models-list tr {
grid-template-columns: 1.5rem 1fr auto;
grid-template-areas:
"rank name supra"
"rank provider filtered";
align-items: baseline;
column-gap: 0.85rem;
}
.m-rank {
grid-area: rank; align-self: start;
color: var(--text3); font-family: var(--hd);
font-size: 0.85rem; font-weight: 600;
}
.m-name {
grid-area: name; font-weight: 600;
font-size: 0.95rem; line-height: 1.25;
min-width: 0;
}
.m-name a {
white-space: normal; word-break: break-word;
display: inline;
}
.m-name .tag-sm { display: none; }
.m-provider {
grid-area: provider;
font-size: 0.78rem; color: var(--text3);
margin-top: 0.15rem;
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-supra {
grid-area: supra; align-self: start;
text-align: right; font-family: var(--hd);
font-size: 1.2rem; font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.m-filtered {
grid-area: filtered; align-self: start;
text-align: right; font-family: var(--hd);
font-size: 0.95rem; font-weight: 600;
margin-top: 0.15rem;
line-height: 1.1;
white-space: nowrap;
}
.m-coverage { display: none !important; }
/* ── BENCHES card layout ──
Three rows: name + score, type + dim-dots, model-count line.
Description is suppressed (lives on the bench detail page) and
tag pills are too — phone width can't show them without wrapping
the whole card. The five colored dimension dots are kept because
they're the most information-dense at-a-glance signal we have. */
.benches-list tr {
grid-template-columns: 1.5rem 1fr auto;
grid-template-areas:
"rank name quality"
"rank type dims";
align-items: baseline;
column-gap: 0.85rem;
row-gap: 0.45rem;
}
.b-rank {
grid-area: rank; align-self: start;
color: var(--text3); font-family: var(--hd);
font-size: 0.85rem; font-weight: 600;
}
.b-name {
grid-area: name; font-weight: 600;
font-size: 0.95rem; line-height: 1.25;
min-width: 0;
}
.b-name a { white-space: normal; word-break: break-word; }
.b-name br { display: none; }
.b-desc { display: none !important; }
.b-quality {
grid-area: quality; align-self: start;
text-align: right; font-family: var(--hd);
font-size: 1.4rem; font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.b-type {
grid-area: type; align-self: center;
}
.b-dims {
grid-area: dims; align-self: center;
display: block !important; /* override the desktop wrapper rule */
text-align: right;
}
.b-dims .dimension-dots {
justify-content: flex-end;
gap: 0.25rem;
}
.b-dims .dimension-dot {
width: 0.55rem; height: 1.1rem;
}
.b-models { display: none !important; }
.b-tags { display: none !important; }
/* ── PROFILE submissions table ── */
.profile-table tr {
grid-template-columns: 1fr auto;
grid-template-areas:
"model score"
"bench score"
"src src"
"meta vote";
}
.profile-table td:nth-child(1) { grid-area: model; font-weight: 600; }
.profile-table td:nth-child(2) { grid-area: bench; font-size: 0.78rem; color: var(--text2); }
.profile-table td:nth-child(3) { grid-area: score; text-align: right; font-family: var(--hd); }
.profile-table td:nth-child(4) { grid-area: src; font-size: 0.75rem; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-table td:nth-child(5) { grid-area: meta; font-size: 0.7rem; color: var(--text3); }
.profile-table td:nth-child(6) { grid-area: vote; text-align: right; font-size: 0.75rem; }
/* ── BENCH PERFORMANCE card layout (model detail) ── */
.bench-perf-list tr {
grid-template-columns: 1fr auto;
grid-template-areas:
"name score"
"quality score"
"subs arrow";
}
.bp-name { grid-area: name; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.bp-name a { white-space: normal; word-break: break-word; color: var(--text); }
.bp-quality { grid-area: quality; margin-top: 0.3rem; }
.bp-quality .quality-bar-container { gap: 0.5rem; }
.bp-score {
grid-area: score; align-self: start; text-align: right;
font-family: var(--hd); font-size: 1.2rem; font-weight: 600;
}
.bp-subs { grid-area: subs; font-size: 0.75rem; color: var(--text3); margin-top: 0.4rem; }
.bp-arrow { grid-area: arrow; text-align: right; margin-top: 0.4rem; font-size: 0.78rem; }
/* ── MODEL SCORES card layout (bench detail) ──
Same compact layout as the benches list card: rank | name | score
on the headline row, subs/arrow on the second row. The rank is
pinned because it's the most useful info on a leaderboard
("who's #1 on SWE-bench Verified?"). */
.model-scores-list tr {
grid-template-columns: 1.5rem 1fr auto;
grid-template-areas:
"rank name score"
"rank subs arrow";
align-items: baseline;
column-gap: 0.85rem;
}
.ms-rank {
grid-area: rank; align-self: start;
color: var(--text3); font-family: var(--hd);
font-size: 0.85rem; font-weight: 600;
}
.ms-rank .rank-num { font-size: 0.85rem; }
.ms-name { grid-area: name; font-weight: 600; font-size: 0.95rem; line-height: 1.25; min-width: 0; }
.ms-name a { white-space: normal; word-break: break-word; color: var(--text); }
.ms-score {
grid-area: score; align-self: start; text-align: right;
font-family: var(--hd); font-size: 1.2rem; font-weight: 600;
}
.ms-subs { grid-area: subs; font-size: 0.75rem; color: var(--text3); margin-top: 0.4rem; }
.ms-arrow { grid-area: arrow; text-align: right; margin-top: 0.4rem; font-size: 0.78rem; }
/* ── SUBMISSION CARD (used on bench/model detail "All Submissions" lists) ──
Header: score on its own line. Footer: items wrap, URL truncates,
submitted-date docks at the bottom-right without overflowing. */
.submission-card {
padding: 0.85rem 0.95rem;
}
.submission-card-scores {
flex-wrap: wrap;
gap: 0.4rem 0.9rem;
align-items: baseline;
}
.submission-card-disclose { margin-left: auto; }
.submission-card-footer {
flex-wrap: wrap;
gap: 0.35rem 0.7rem;
font-size: 0.75rem;
align-items: center;
overflow: hidden; /* defensive vs. long URLs */
word-break: break-word;
}
.submission-card-footer > * { min-width: 0; }
.submission-card-footer a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
flex: 1 1 auto;
}
.submission-card-footer .submitter {
flex: 0 0 auto;
max-width: 100%;
}
.submission-card-footer .submitter span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 8rem;
}
.submission-card-footer .submission-meta { flex: 0 0 auto; }
/* "submitted DATE" pill — ensure it always fits. */
.submission-card-footer > span:last-of-type { margin-left: 0; }
/* Tag bar: switch from wrap to horizontal scroll on mobile so a
packed bar doesn't push the leaderboard down off-screen. */
.tag-bar {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding-bottom: 0.4rem;
/* Mask fade on the right edge to hint scrollability. */
mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.tag-bar > * {
flex-shrink: 0;
scroll-snap-align: start;
}
/* Picker pop is full-screen on phones for thumb reach. */
.tag-picker-overlay { padding: 0; }
.tag-picker-modal {
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
border: 0;
}
/* Profile creations: smaller chips */
.profile-creation-chip { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
/* Entity vote row stacks tighter */
.entity-vote-row { gap: 0.4rem; }
.entity-vote-label { font-size: 0.72rem; }
/* Sidebar logout flush left */
.sidebar-user__logout { margin-left: 0; }
/* About list term word-wraps */
.about-list li strong { min-width: 0; display: inline; }
/* Profile header stacks */
.profile-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.profile-header__avatar { width: 56px; height: 56px; }
/* Tooltips: anchor above-right so they don't go off-screen */
.dim-help::after { left: auto; right: 0; transform: none; width: 200px; }
}
/* ════════════════════════════════════════════
PROFILE TABS + API DASHBOARD
════════════════════════════════════════════ */
.profile-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin: 1.5rem 0 2rem;
}
.profile-tab {
background: none;
border: none;
padding: 0.75rem 1.25rem;
color: var(--text2);
font-family: var(--hd);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--transition), border-color var(--transition);
}
.profile-tab:hover { color: var(--text); }
.profile-tab.is-active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.profile-tab .badge-soon {
font-size: 0.6rem;
background: var(--surface);
color: var(--text3);
padding: 0.1rem 0.4rem;
border-radius: 999px;
margin-left: 0.4rem;
vertical-align: middle;
text-transform: none;
letter-spacing: 0;
}
.api-banner {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.06), rgba(255, 107, 53, 0.02));
border: 1px solid rgba(255, 107, 53, 0.3);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin-bottom: 2rem;
display: flex;
gap: 0.85rem;
align-items: flex-start;
}
.api-banner__icon {
font-size: 1.3rem;
line-height: 1;
margin-top: 0.1rem;
}
.api-banner__title { font-family: var(--hd); font-weight: 600; margin: 0 0 0.25rem; color: var(--text); }
.api-banner__text { color: var(--text2); font-size: 0.85rem; margin: 0; }
/* ─── Partner / Enterprise+ self-service dashboard ─── */
.api-dashboard {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.5rem;
margin-bottom: 2rem;
}
.api-dashboard__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.api-dashboard__subtitle {
color: var(--text3);
font-size: 0.85rem;
margin: 0.25rem 0 0;
}
.tier-badge {
display: inline-block;
padding: 0.3rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
font-family: var(--hd);
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.tier-badge--partner {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.4);
}
.tier-badge--entplus {
background: rgba(168, 85, 247, 0.12);
color: #a855f7;
border: 1px solid rgba(168, 85, 247, 0.4);
}
.api-dashboard__limits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.api-stat {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
padding: 0.85rem;
}
.api-stat__label {
font-size: 0.72rem;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.api-stat__value {
font-family: var(--hd);
font-size: 1.35rem;
font-weight: 600;
color: var(--text);
margin: 0.2rem 0;
line-height: 1.1;
}
.api-stat__hint {
font-size: 0.72rem;
color: var(--text3);
}
.api-dashboard__usage {
margin-bottom: 1.5rem;
}
.api-usage__row {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--text2);
margin-bottom: 0.4rem;
}
.api-usage__bar {
height: 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 999px;
overflow: hidden;
}
.api-usage__fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #ff8a5b);
border-radius: 999px;
transition: width 0.3s ease;
}
.api-dashboard__section {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.api-dashboard__h3 {
font-family: var(--hd);
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 0.75rem;
color: var(--text);
}
.api-dashboard__footnote {
margin: 1.25rem 0 0;
padding-top: 1rem;
border-top: 1px dashed var(--border);
font-size: 0.78rem;
color: var(--text3);
}
.tier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: 1rem 0 2rem;
}
.tier-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
flex-direction: column;
position: relative;
transition: border-color var(--transition), transform var(--transition);
}
.tier-card:hover { border-color: var(--accent); }
.tier-card.is-featured {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent) inset;
}
.tier-card__badge {
position: absolute;
top: -0.6rem; right: 1rem;
background: var(--accent);
color: #000;
font-family: var(--hd);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.5px;
padding: 0.2rem 0.55rem;
border-radius: 999px;
text-transform: uppercase;
}
.tier-card__name { font-family: var(--hd); font-weight: 700; font-size: 1.1rem; margin: 0; color: var(--text); }
.tier-card__price { font-family: var(--hd); font-weight: 700; font-size: 2rem; margin: 0.4rem 0 0.1rem; color: var(--text); }
.tier-card__price small { font-size: 0.75rem; color: var(--text3); font-weight: 400; }
.tier-card__quota { color: var(--text2); font-size: 0.85rem; margin-bottom: 0.85rem; }
.tier-card__features {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
font-size: 0.8rem;
color: var(--text2);
flex: 1;
}
.tier-card__features li { padding: 0.3rem 0; border-top: 1px solid var(--border); }
.tier-card__features li:first-child { border-top: none; }
.tier-card__features li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.tier-card .btn { width: 100%; }
.tier-card .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.tier-card.is-current { border-color: #2ea043; }
.tier-card.is-current .tier-card__badge {
background: #2ea043; color: #fff;
}
.tier-card .joined-note {
text-align: center;
font-size: 0.78rem;
color: var(--text3);
margin-top: 0.5rem;
}
/* Partner tier: visually set apart from the paid tiers so it reads
as "this is a different category, not a fifth price point". Dashed
border + desaturated badge colour. Full-span behaviour below keeps
it from crowding the 4-card grid on wide screens. */
.tier-card--partner {
border-style: dashed;
border-color: var(--text3);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%,
var(--surface) 60%
);
}
.tier-card--partner:hover {
border-color: var(--accent);
border-style: solid;
}
.tier-card__badge--free {
background: color-mix(in srgb, var(--accent) 35%, var(--surface));
color: var(--text);
border: 1px solid var(--accent);
}
/* On wide layouts the partner card spans the full row under the four
paid tiers, making the "different category" intent visually obvious
without changing the card's own proportions at narrower widths. */
@media (min-width: 960px) {
.tier-grid { grid-template-columns: repeat(4, 1fr); }
.tier-card--partner {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
}
.tier-card--partner .tier-card__name { flex: 0 0 auto; }
.tier-card--partner .tier-card__price { flex: 0 0 auto; margin: 0; font-size: 1.25rem; }
.tier-card--partner .tier-card__quota { flex: 0 0 auto; margin: 0; }
.tier-card--partner .tier-card__features {
flex: 1 1 320px;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0 1rem;
}
.tier-card--partner .tier-card__features li { border-top: none; padding: 0.15rem 0; }
.tier-card--partner .btn { flex: 0 0 auto; width: auto; }
}
.api-key-list {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
margin: 1rem 0 2rem;
}
.api-key-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
border-top: 1px solid var(--border);
}
.api-key-row:first-child { border-top: none; }
.api-key-row__name { font-family: var(--hd); font-weight: 600; flex: 1; }
.api-key-row__hint { font-family: var(--mono); font-size: 0.75rem; color: var(--text3); }
.api-key-row__date { font-size: 0.72rem; color: var(--text3); }
.api-empty {
padding: 1.25rem;
text-align: center;
color: var(--text3);
font-size: 0.85rem;
}
.api-key-modal {
background: var(--bg);
border: 1px solid var(--accent);
border-radius: var(--radius-md);
padding: 1.5rem;
margin: 1rem 0;
}
.api-key-modal h3 { margin: 0 0 0.5rem; font-family: var(--hd); }
.api-key-modal__warn { color: #e3b341; font-size: 0.85rem; margin-bottom: 0.75rem; }
.api-key-modal__value {
font-family: var(--mono);
background: #000;
border: 1px solid var(--border);
padding: 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.82rem;
word-break: break-all;
margin-bottom: 0.75rem;
}
.toast {
position: fixed;
/* Lifts above the iOS home indicator. */
bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
left: 50%;
transform: translateX(-50%);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0.85rem 1.25rem;
color: var(--text);
font-size: 0.85rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 9999;
max-width: calc(100vw - 2rem);
}
.toast.is-info { border-color: var(--accent); }
.toast.is-error { border-color: #f85149; color: #f85149; }
@media (max-width: 600px) {
/* Tab strip on mobile must scroll horizontally only. Without the
explicit overflow-y / flex-wrap, the badge counters or the
active-tab underline can nudge the row past its computed
height and trigger a vertical scrollbar — looks broken on
iPhone. flex-wrap:nowrap also prevents the strip from
becoming a 2-row block on a too-narrow viewport. */
.profile-tabs {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
white-space: nowrap;
padding: 0.7rem 0.9rem;
font-size: 0.78rem;
flex-shrink: 0;
}
.tier-grid { grid-template-columns: 1fr; }
.api-key-row { flex-wrap: wrap; gap: 0.5rem; }
.api-key-row__hint { width: 100%; order: 3; }
}
/* ══════════════════════════════════════════
Submission workflow — mobile polish.
The desktop layout assumes ≥600px of breathing room and a mouse.
On phones we need:
1. font-size ≥ 16px on form fields, otherwise iOS Safari zooms
in on focus and the user can never get back to the original
scale without a manual pinch.
2. Real flex layouts in the search dropdown rows — float:right
clips the right column off-screen when the left text is long.
3. Bigger touch targets on the row-delete (×) button — 22px is
below Apple's 44px guideline and people miss the tap.
4. Full-width submit buttons; tiny left-anchored buttons feel
broken on a 360px screen.
5. Picked-pill close button stays inline (don't auto-margin to
the far right of a wrapped row — leaves it on its own line).
6. Smaller padding on the success / login cards — 2.5rem eats
most of the viewport.
══════════════════════════════════════════ */
@media (max-width: 700px) {
/* (1) Stop iOS auto-zoom. 16px is the magic number Safari uses.
Includes every /