wrapper into the row */
.pill-field li { margin: 0; }
.pill-field label {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
padding: 7px 14px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--panel);
font-size: .82rem; font-weight: 600; color: var(--ink-2);
text-transform: none; letter-spacing: 0;
transition: background .14s, border-color .14s, color .14s, transform .1s, box-shadow .14s;
}
.pill-field label:hover { border-color: #c7d2fe; background: #f4f6f9; color: var(--brand); transform: translateY(-1px); }
.pill-field input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-field label:has(input:checked) {
background: linear-gradient(135deg, var(--brand), #4f46e5); border-color: var(--brand); color: #fff;
box-shadow: 0 5px 14px -6px var(--brand-glow);
}
/* ============================================================
COMPOSE A WORKFLOW · the post form, rebuilt
============================================================ */
/* Drop the flat outer card — each section floats as its own raised card on
the blueprint background. `display: contents` on the form lets the sections
share ONE flex column with the header, so every vertical gap is identical. */
.compose.formwrap {
display: flex; flex-direction: column; gap: 18px;
background: transparent; border: none; box-shadow: none; padding: 0;
}
.compose .fancy-form { display: contents; }
.compose .form-section {
margin: 0;
background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
padding: 22px 24px;
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 34px -22px rgba(15,23,42,.26);
}
.compose .form-actions-sticky {
position: sticky; bottom: 16px; z-index: 5;
margin: 0; padding: 14px 18px;
background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 16px 36px -16px rgba(15,23,42,.32);
}
.compose-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
margin: 0; padding: 22px 26px;
background:
radial-gradient(75% 130% at 0% 0%, rgba(67, 56, 202, .12), transparent 60%),
radial-gradient(65% 130% at 100% 0%, rgba(55, 48, 163, .12), transparent 55%),
var(--panel);
border: 1px solid var(--line); border-radius: 18px;
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 20px 38px -22px rgba(67, 56, 202, .34);
}
.opt { font-weight: 500; font-size: .82em; color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.compose-kicker {
display: inline-block; font-family: var(--mono); font-size: .66rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
background: rgba(67, 56, 202, .08); border: 1px solid rgba(67, 56, 202, .18);
border-radius: 5px; padding: 2px 8px;
}
.compose-head h1 { margin: 9px 0 6px; font-size: 1.55rem; letter-spacing: -.02em; }
.compose-head p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 66ch; line-height: 1.55; }
.compose-head p strong { color: var(--ink-2); font-weight: 600; }
/* Numbered, colour-coded section headers */
.form-section-title { display: flex; align-items: center; gap: 11px; }
.sec-ico {
flex: none; width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
color: #fff; font-family: var(--mono); font-weight: 700; font-size: .84rem;
box-shadow: 0 5px 12px -5px rgba(15, 23, 42, .4);
}
.sec-ico-1 { background: var(--ink); }
.sec-ico-2 { background: #475569; }
.sec-ico-3 { background: #94a3b8; }
/* Free-text tag input */
.tag-input-box {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 8px 10px; min-height: 48px;
border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel-2);
box-shadow: inset 0 1px 2px rgba(15,23,42,.05); transition: border-color .14s, box-shadow .14s, background .14s;
}
.tag-input-box:focus-within { border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 4px var(--brand-glow); }
.tag-chips { display: contents; }
.tag-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 5px 4px 11px; border-radius: 999px;
background: linear-gradient(135deg, var(--brand), #4f46e5); color: #fff;
font-size: .8rem; font-weight: 600; box-shadow: 0 4px 10px -5px var(--brand-glow);
}
.tag-chip button {
border: none; cursor: pointer; width: 16px; height: 16px; border-radius: 50%;
background: rgba(255,255,255,.25); color: #fff; font-size: .82rem; line-height: 1;
display: grid; place-items: center; padding: 0;
}
.tag-chip button:hover { background: rgba(255,255,255,.45); }
.tag-input-field {
flex: 1 1 120px; min-width: 120px; border: none; outline: none; background: transparent;
font-family: inherit; font-size: .9rem; color: var(--ink); padding: 4px 2px;
}
.tag-input-field::placeholder { color: var(--muted); }
.tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.tag-suggest-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.tag-suggest-chip {
border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
padding: 4px 12px; border-radius: 999px; font-size: .8rem; cursor: pointer;
font-family: inherit; transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.tag-suggest-chip:hover { border-color: var(--brand); color: var(--brand); background: #f4f6f9; transform: translateY(-1px); }
/* Pipeline step cards */
.step-formset { display: flex; flex-direction: column; gap: 12px; }
.step-card {
position: relative; display: grid; grid-template-columns: 54px 1fr;
background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 22px -16px rgba(15,23,42,.22);
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.step-card:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow), 0 14px 28px -18px rgba(15,23,42,.28); }
.step-card.is-removed { display: none; }
.step-del { display: none; }
.step-card-rail {
display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 0;
background: var(--panel-2); border-right: 1px solid var(--line);
}
.step-num {
width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
font-family: var(--mono); font-weight: 700; font-size: .82rem;
box-shadow: 0 4px 10px -4px var(--brand-glow);
}
.step-remove {
width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
background: transparent; color: var(--muted); font-size: .82rem; line-height: 1;
display: grid; place-items: center; transition: background .12s, color .12s;
}
.step-remove:hover { background: #fee2e2; color: var(--neg); }
.step-card-main { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.step-card-main .field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.step-card-main label { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
/* Stage chosen as a colour chip (matches the pipeline diagram) */
.stage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-chip {
--sc: #94a3b8;
display: inline-flex; align-items: center; cursor: pointer; user-select: none;
padding: 6px 12px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--panel);
font-size: .77rem; font-weight: 600; color: var(--ink-2);
transition: background .13s, border-color .13s, color .13s, box-shadow .13s, transform .1s;
}
.stage-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stage-chip:hover { border-color: var(--sc); color: var(--sc); transform: translateY(-1px); }
.stage-chip:has(input:checked) {
background: var(--sc); border-color: var(--sc); color: #fff;
box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--sc) 75%, transparent);
}
.stage-diagnostic { --sc: #94a3b8; }
.stage-prep { --sc: #6366f1; }
.stage-estimation { --sc: #4f46e5; }
.stage-inference { --sc: var(--pos); }
.stage-robustness { --sc: var(--neg); }
.stage-heterogeneity{ --sc: #94a3b8; }
.stage-reporting { --sc: #94a3b8; }
.stage-other { --sc: #94a3b8; }
.step-external summary {
cursor: pointer; font-size: .82rem; color: var(--muted);
list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.step-external summary::-webkit-details-marker { display: none; }
.step-external summary::before { content: "▸"; font-size: .7rem; transition: transform .15s; }
.step-external[open] summary::before { transform: rotate(90deg); }
.step-ext-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 9px; }
.step-note textarea { min-height: 58px; }
/* Dedicated code editor — a dark, monospace surface with a title bar. */
.code-ed {
border-radius: 12px; overflow: hidden; border: 1.5px solid #1e293b;
box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .55);
transition: border-color .14s, box-shadow .14s;
}
.code-ed:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.code-ed-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #1e293b; }
.code-ed-dots { display: inline-flex; gap: 5px; }
.code-ed-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.code-ed-dots i:nth-child(1) { background: #cbd5e1; }
.code-ed-dots i:nth-child(2) { background: #94a3b8; }
.code-ed-dots i:nth-child(3) { background: #cbd5e1; }
.code-ed-tag { margin-left: auto; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; }
.stacked-form .code-ed textarea {
width: 100%; display: block; margin: 0; border: none; border-radius: 0;
background: #0f172a; color: #e2e8f0;
font-family: var(--mono); font-size: .85rem; line-height: 1.6; padding: 14px 16px;
resize: vertical; min-height: 96px; box-shadow: none; tab-size: 2;
}
.stacked-form .code-ed textarea:focus { box-shadow: none; outline: none; background: #0f172a; }
.stacked-form .code-ed textarea::placeholder { color: #5b6b85; }
/* Formula editor — LaTeX in, live KaTeX preview out. */
.formula-ed {
border-radius: 12px; overflow: hidden; border: 1.5px solid var(--line); background: var(--panel-2);
transition: border-color .14s, box-shadow .14s;
}
.formula-ed:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.stacked-form .formula-ed textarea {
width: 100%; display: block; margin: 0; border: none; border-radius: 0;
background: var(--panel-2); color: var(--ink);
font-family: var(--mono); font-size: .88rem; line-height: 1.5; padding: 11px 14px;
resize: vertical; min-height: 46px; box-shadow: none;
}
.stacked-form .formula-ed textarea:focus { box-shadow: none; outline: none; }
.formula-preview {
border-top: 1px dashed var(--line-2); padding: 14px 16px; background: var(--panel);
text-align: center; color: var(--ink); overflow-x: auto; min-height: 22px;
}
.formula-preview .katex { font-size: 1.15em; }
.formula-empty { color: var(--muted); font-size: .82rem; font-style: italic; }
.step-add {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
margin-top: 2px; padding: 11px 20px; border-radius: 12px; cursor: pointer;
border: 1.5px dashed var(--line-2); background: var(--panel); color: var(--brand);
font-size: .9rem; font-weight: 600; font-family: var(--sans);
transition: background .14s, border-color .14s, transform .12s, box-shadow .14s;
}
.step-add:hover { border-color: var(--brand); background: #f4f6f9; transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--brand-glow); }
.step-add span { font-size: 1.15rem; line-height: 1; }
@media (max-width: 640px) {
.step-card { grid-template-columns: 1fr; }
.step-card-rail { flex-direction: row; justify-content: space-between; border-right: none; border-bottom: 1px solid var(--line); padding: 8px 14px; }
.step-ext-grid { grid-template-columns: 1fr; }
}
/* Profile */
.profile-head {
background: linear-gradient(135deg, #eef2ff 0%, #f4f6f9 100%);
border: 1px solid #e0e7ff; border-radius: 16px;
padding: 22px 26px; margin-top: 18px;
}
.profile-head-id { display: flex; align-items: center; gap: 18px; }
.profile-head-id > div:nth-child(2) { flex: 1; min-width: 0; }
.profile-head-icon {
flex: none; display: grid; place-items: center; width: 72px; height: 72px;
background: var(--brand); color: #fff; border-radius: 50%;
font-size: 1.9rem; font-weight: 700;
box-shadow: 0 6px 16px -8px rgba(79,70,229,.5);
}
.profile-head h1 { margin: 0 0 4px; font-size: 1.5rem; letter-spacing: -.015em; }
.profile-meta { display: flex; gap: 14px; color: var(--muted); font-size: .9rem; margin-bottom: 4px; flex-wrap: wrap; }
.profile-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-counts { display: flex; gap: 18px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e0e7ff; }
.profile-count { font-size: .88rem; color: var(--muted); }
.profile-count strong { color: var(--ink); font-size: 1.05rem; font-weight: 700; margin-right: 4px; }
.bio { color: #374151; margin: 6px 0 0; }
@media (max-width: 620px) {
.profile-head-id { flex-direction: column; align-items: flex-start; }
}
/* Profile workflow cards — a compact mini-feed of created / saved workflows */
.profile-group-heading { font-size: 1.15rem; letter-spacing: -.01em; margin: 26px 0 14px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; margin: 0 0 8px; }
.pf-card {
--fam: #64748b;
position: relative; display: flex; flex-direction: column; color: inherit;
background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -24px rgba(15,23,42,.30);
transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .2s;
}
.pf-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 22%, transparent));
}
.pf-card:hover {
transform: translateY(-4px); text-decoration: none;
border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
box-shadow: 0 28px 50px -28px rgba(55, 48, 163, .30), 0 6px 14px -8px rgba(15,23,42,.12);
}
/* Source label at the top of the profile mini-card (the card itself links to
the detail page, where the citation is clickable). */
.pf-src {
display: flex; align-items: baseline; gap: 5px; padding: 7px 12px 0;
font-family: var(--mono); font-size: .54rem; color: var(--brand);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-src-k { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; }
.pf-up { color: var(--brand); font-size: .78rem; }
.pf-card-cover {
position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
background: radial-gradient(130% 130% at 50% 0%, #fff 52%, #e9eef6 100%);
box-shadow: inset 0 -1px 0 var(--line); overflow: hidden;
}
.pf-card-cover img { width: 100%; height: 100%; object-fit: contain; }
.pf-card-sigma { font-family: var(--mono); font-size: 2.2rem; color: var(--line-2); }
.pf-card-cats { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); }
.pf-cat {
--c: #64748b; font-family: var(--mono); font-size: .55rem; font-weight: 700; color: #fff;
padding: 2px 7px; border-radius: 5px; white-space: nowrap;
background: var(--c); background: color-mix(in srgb, var(--c) 90%, transparent);
box-shadow: 0 2px 6px -2px rgba(15,23,42,.4), inset 0 0 0 1px rgba(255,255,255,.18);
}
.pf-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.pf-card-title {
margin: 0; font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.3;
color: var(--ink); letter-spacing: -.003em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-card-sum {
margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted); flex: 1 1 auto;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line);
}
.pf-author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pf-author-name { font-family: var(--mono); font-size: .7rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stats { display: inline-flex; gap: 9px; flex: none; font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--muted); }
.pf-empty { grid-column: 1 / -1; color: var(--muted); padding: 26px; text-align: center; background: var(--panel); border: 1px dashed var(--line-2); border-radius: 14px; }
/* Evaluation history (method detail) */
.eval-runs { margin: 12px 0; }
.eval-runs summary { cursor: pointer; color: var(--brand); font-size: .9rem; margin-bottom: 8px; }
.eval-runs .board { margin-top: 8px; }
/* Leaderboard */
.board { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.board th, .board td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
.board th { background: #f9fafb; color: var(--muted); font-weight: 600; }
.board .num { text-align: right; }
.board .rank { color: var(--muted); width: 36px; }
.board tr:last-child td { border-bottom: none; }
/* Guide page — interactive, numbered, with live previews */
.guide-hero {
background: linear-gradient(135deg, #eef2ff 0%, #f4f6f9 100%);
border: 1px solid #e0e7ff; border-radius: 16px;
padding: 32px 34px; margin: 20px 0 24px;
}
.guide-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); font-weight: 700; margin: 0 0 4px; }
.guide-hero h1 { font-size: 2rem; margin: 0 0 10px; letter-spacing: -.02em; }
.guide-hero .lead { color: #475467; font-size: 1.02rem; margin: 0 0 22px; max-width: 660px; }
.guide-jump { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.guide-jump-link {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: 12px;
background: var(--panel); border: 1px solid var(--line); color: var(--ink);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.guide-jump-link:hover {
border-color: var(--brand); transform: translateY(-2px);
box-shadow: 0 8px 24px -8px rgba(79,70,229,.28); text-decoration: none;
}
.guide-jump-icon {
flex: none; width: 38px; height: 38px; display: grid; place-items: center;
background: var(--brand); color: #fff; border-radius: 10px; font-size: 1.1rem; font-weight: 700;
}
.guide-jump-link span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.guide-jump-link strong { font-size: .95rem; }
.guide-jump-link em { font-style: normal; font-size: .78rem; color: var(--muted); }
.guide-block {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 26px 28px; margin: 18px 0; box-shadow: var(--shadow);
scroll-margin-top: 70px;
}
.guide-block-head { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 16px; }
.guide-num {
flex: none; display: grid; place-items: center; width: 42px; height: 42px;
background: var(--brand); color: #fff; border-radius: 12px;
font-weight: 700; font-size: 1.15rem;
box-shadow: 0 6px 16px -8px rgba(79,70,229,.5);
}
.guide-block-head h2 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: -.01em; }
.guide-block-sub { margin: 0; color: var(--muted); font-size: .92rem; }
.guide-block > p { color: #374151; margin: 6px 0 12px; }
.guide-howto { list-style: none; padding: 0; margin: 12px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.guide-howto > li {
display: flex; align-items: flex-start; gap: 14px;
padding: 12px 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
transition: border-color .12s, background .12s;
}
.guide-howto > li:hover { background: #f1f5f9; border-color: #cbd5e1; }
.guide-howto-num {
flex: none; display: grid; place-items: center; width: 28px; height: 28px;
background: var(--brand); color: #fff; border-radius: 8px;
font-weight: 700; font-size: .85rem; text-transform: uppercase;
}
.guide-howto > li > div p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.guide-howto strong { font-size: .96rem; }
.guide-side-by-side {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
margin: 8px 0 16px;
}
.guide-side-by-side > div { min-width: 0; }
.guide-callout {
padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line);
border-left: 3px solid #94a3b8; border-radius: 8px;
color: #78350f; font-size: .9rem; margin: 0 0 12px;
}
.guide-feature-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.guide-feature-list > li {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
transition: border-color .12s, transform .12s;
}
.guide-feature-list > li:hover { border-color: var(--brand); transform: translateX(2px); }
.guide-feature-list > li > div { font-size: .9rem; line-height: 1.5; flex: 1; min-width: 0; }
.guide-feature-list strong { color: var(--ink); }
.guide-feature-list em { color: var(--muted); font-style: normal; }
.guide-feature-emoji { font-size: 1.05rem; line-height: 1.4; width: 26px; text-align: center; color: var(--brand); flex: none; }
.guide-feature-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 6px; box-shadow: 0 0 0 3px var(--panel); }
.guide-feature-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-dag-demo {
padding: 16px 18px; background: linear-gradient(180deg, #fafbff 0%, #f4f6f9 100%);
border: 1px solid #e0e7ff; border-radius: 12px;
}
.guide-dag-caption { color: var(--muted); font-size: .8rem; margin: 0 0 12px; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.guide-snippet-label { color: var(--muted); font-size: .82rem; margin: 0 0 6px; font-weight: 600; }
.guide-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 820px) {
.guide-jump { grid-template-columns: repeat(2, 1fr); }
.guide-side-by-side { grid-template-columns: 1fr; }
.guide-feature-list-grid { grid-template-columns: 1fr; }
}
/* ============================================================
TERMINAL TOPBAR · mono brand identity + status badge
============================================================ */
.topbar-inner { height: 64px; gap: 16px; }
.brand { gap: 10px; align-items: center; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brand-name {
font-family: var(--sans); font-weight: 800; font-size: 1.12rem;
letter-spacing: -.02em; color: var(--ink);
}
.brand-name-acc { color: var(--brand); }
.brand-tag {
font-family: var(--sans); font-size: .68rem; letter-spacing: 0;
text-transform: none; color: var(--muted); font-weight: 500;
margin-top: 1px;
}
.nav.nav-center { margin-left: 24px; gap: 18px; font-family: var(--mono); font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.nav-center a { color: var(--ink-2); padding: 4px 2px; border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s; }
.nav-center a:hover { color: var(--brand); border-bottom-color: var(--brand-2); text-decoration: none; }
.status-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 11px; border-radius: 999px;
background: var(--panel-2);
border: 1px solid var(--line);
font-family: var(--sans); font-size: .76rem; font-weight: 600;
letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.status-pill .status-num { color: var(--ink); font-size: .8rem; font-weight: 700; }
.status-pill .status-label { color: var(--muted); }
.status-orb {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--pos); flex: none; position: relative;
box-shadow: 0 0 0 0 rgba(5, 150, 105, .55);
animation: orb-ping 2s ease-out infinite;
}
@keyframes orb-ping {
0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, .6); }
70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
/* ============================================================
LEFT RAIL · search card + consensus metrics + family list
============================================================ */
.rail-card {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow); padding: 12px 12px;
margin-bottom: 14px; position: relative; overflow: hidden;
}
.rail-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--brand), var(--brand-2), transparent);
opacity: .8;
}
.rail-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; flex-wrap: wrap;
padding: 4px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.rail-card-title {
font-family: var(--mono); font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
white-space: nowrap;
}
.rail-card-tag {
font-family: var(--mono); font-size: .58rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--brand); background: rgba(67, 56, 202, .08);
border: 1px solid rgba(67, 56, 202, .2); border-radius: 4px;
padding: 1px 5px;
}
.rail-search { margin: 0 0 12px; }
.rail-search input[type=search] {
width: 100%; padding: 8px 12px; border: 1px solid var(--line);
border-radius: 8px; font-family: var(--mono); font-size: .82rem;
background: var(--panel-2); color: var(--ink);
transition: border-color .15s, background .15s;
}
.rail-search input[type=search]:focus {
outline: none; border-color: var(--brand);
background: var(--panel); box-shadow: 0 0 0 3px var(--brand-glow);
}
.consensus-card {
background: linear-gradient(160deg, #1e1b4b 0%, #0f172a 100%);
border-radius: 10px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 4px;
}
.consensus-label {
font-family: var(--mono); font-size: .58rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: #a5b4fc;
}
.consensus-row { display: flex; align-items: baseline; justify-content: space-between; }
.consensus-name { font-family: var(--mono); font-size: .72rem; color: #cbd5e1; }
.consensus-value {
font-family: var(--mono); font-weight: 800; font-size: 1.05rem;
color: #34d399; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.consensus-note { margin: 4px 0 0; font-size: .68rem; line-height: 1.45; color: #94a3b8; }
/* Family rail (override leftrail::before — we now use rail-card wrappers) */
.leftrail { background: transparent; border: none; box-shadow: none; padding: 0; }
.leftrail::before { display: none; }
/* ============================================================
SORT DECK · dark gradient header above the cards
============================================================ */
.sort-deck {
background:
radial-gradient(ellipse 60% 80% at 12% 0%, rgba(129, 140, 248, .35), transparent 70%),
radial-gradient(ellipse 70% 90% at 95% 110%, rgba(55, 48, 163, .25), transparent 65%),
linear-gradient(180deg, rgba(30, 27, 75, .72) 0%, rgba(15, 23, 42, .68) 100%);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(129, 140, 248, .22);
border-radius: 14px; padding: 16px 18px; margin: 2px 0 16px;
position: relative; overflow: hidden;
box-shadow:
0 12px 36px -20px rgba(15, 23, 42, .28),
0 1px 0 rgba(255, 255, 255, .06) inset,
0 -1px 0 rgba(0, 0, 0, .18) inset;
}
.sort-deck::before {
/* Subtle scan-line texture for the "instrument-panel" vibe */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
180deg, transparent 0 2px, rgba(255, 255, 255, .015) 2px 3px
);
border-radius: inherit;
}
.sort-deck::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--brand) 50%, transparent);
opacity: .5;
}
.sort-deck-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 12px; border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.sort-deck-title {
font-family: var(--mono); font-size: .88rem; font-weight: 700;
letter-spacing: .06em; color: #fff;
display: inline-flex; align-items: center; gap: 8px;
}
.sort-deck-icon { color: #818cf8; font-size: 1.05rem; }
.real-time-node {
font-family: var(--mono); font-size: .6rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: #34d399;
background: rgba(5, 150, 105, .12);
border: 1px solid rgba(5, 150, 105, .35); border-radius: 999px;
padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px;
}
.real-time-node .status-orb { background: #34d399; }
.sort-deck-body { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.sort-deck-label {
font-family: var(--mono); font-size: .6rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: #94a3b8;
}
.sort-deck-tabs {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
background: rgba(2, 6, 23, .55);
border: 1px solid rgba(148, 163, 184, .14);
border-radius: 10px; padding: 4px;
}
.sort-tab {
text-align: center; padding: 9px 8px; border-radius: 7px;
font-family: var(--mono); font-size: .8rem; font-weight: 700;
color: #cbd5e1; transition: background .15s, color .15s;
}
.sort-tab:hover { color: #fff; text-decoration: none; background: rgba(15, 23, 42, .55); }
.sort-tab.active {
color: #fff; background: linear-gradient(180deg, var(--brand) 0%, #3730a3 100%);
box-shadow: 0 6px 14px -6px rgba(67, 56, 202, .55), inset 0 1px 0 rgba(255,255,255,.18);
}
/* ============================================================
METHOD CARD · sub-header bar + stats + body + footer
============================================================ */
.method-card, .workflow-card, .dataset-card {
flex-direction: column; gap: 0; padding: 0; overflow: hidden;
border: 1px solid var(--line); border-left-width: 2px;
background:
linear-gradient(135deg, rgba(99, 102, 241, .025) 0%, transparent 38%),
linear-gradient(225deg, rgba(55, 48, 163, .02) 0%, transparent 42%),
var(--panel);
transition: transform .18s ease, border-color .18s, box-shadow .25s;
}
.method-card:hover, .workflow-card:hover, .dataset-card:hover {
transform: translateY(-2px);
border-color: var(--line-2);
box-shadow:
0 18px 40px -22px rgba(67, 56, 202, .22),
0 4px 8px -4px rgba(15, 23, 42, .06);
}
.card-subheader {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px; border-bottom: 1px solid var(--line);
background:
linear-gradient(90deg, rgba(99, 102, 241, .035) 0%, transparent 50%),
linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
gap: 12px; flex-wrap: wrap;
}
.sub-pills { display: inline-flex; align-items: center; gap: 6px; }
.sub-stats {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: .68rem; font-weight: 700;
}
.pkg-pill {
font-family: var(--mono); font-size: .62rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: #e2e8f0; background: linear-gradient(180deg, #1e293b, #0f172a);
border: 1px solid #334155; border-radius: 4px;
padding: 2px 7px;
box-shadow: 0 2px 4px -2px rgba(15,23,42,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.hot-index {
color: var(--brand); background: #eef2ff;
border: 1px solid #c7d2fe; border-radius: 999px;
padding: 2px 9px; letter-spacing: .04em;
}
.peers-count {
color: var(--ink-2); background: var(--panel-2);
border: 1px solid var(--line); border-radius: 999px;
padding: 2px 9px; letter-spacing: .04em;
display: inline-flex; align-items: center; gap: 5px;
}
.peers-count .status-orb { width: 6px; height: 6px; }
.card-row { display: flex; gap: 14px; padding: 14px 18px 12px; }
.card-row .votebox { align-self: flex-start; margin-top: 2px; }
.method-card .card-title {
font-size: 1.05rem; margin: 0 0 4px;
letter-spacing: -.015em; line-height: 1.25;
}
.method-card .card-summary { margin: 0 0 8px; font-size: .9rem; color: var(--ink-2); }
.card-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 18px; border-top: 1px solid var(--line);
background: var(--panel-2); gap: 12px; flex-wrap: wrap;
font-family: var(--mono); font-size: .72rem;
}
.card-footer .byline { font-family: var(--mono); color: var(--ink-2); }
.card-footer .byline a { color: var(--ink); font-weight: 600; }
.card-footer .dot { color: var(--line-2); }
.footer-meta { display: inline-flex; align-items: center; gap: 6px; }
.reviews-chip {
background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
padding: 2px 8px; color: var(--ink-2); font-weight: 600;
}
.ref-chip {
background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
padding: 2px 8px; color: var(--ink-2); font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
}
.ref-chip code {
background: var(--panel-2); padding: 0 4px; border-radius: 3px;
font-size: .68rem; color: var(--brand);
}
.ref-chip:hover { text-decoration: none; border-color: var(--brand); }
/* ============================================================
Rail CTA button (compose / upload primary action in rail card)
============================================================ */
.rail-cta {
display: block; margin-top: 10px;
padding: 8px 12px; border-radius: 8px;
background: linear-gradient(180deg, var(--brand) 0%, #3730a3 100%);
color: #fff !important; font-weight: 600; font-size: .82rem;
text-align: center; letter-spacing: .01em;
border: 1px solid #3730a3;
box-shadow: 0 6px 14px -8px rgba(67, 56, 202, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
transition: transform .15s, box-shadow .15s;
}
.rail-cta:hover {
text-decoration: none; transform: translateY(-1px);
box-shadow: 0 10px 20px -10px rgba(67, 56, 202, .65), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* ============================================================
Sort-deck color variants — workflows = indigo + emerald accent
============================================================ */
.sort-deck-workflows::after {
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 50%, #34d399 100%);
}
.sort-deck-datasets::after {
background: linear-gradient(90deg, var(--brand-2) 0%, #94a3b8 50%, #94a3b8 100%);
}
/* ============================================================
Workflow card extras: pipeline + branch chips
============================================================ */
.workflow-card { border-left: 2px solid var(--brand); }
.workflow-card.card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.workflow-card .card-row { padding: 14px 18px 12px; }
.badge-pipeline {
font-family: var(--mono); font-size: .62rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: #3730a3; background: #eef2ff;
border: 1px solid #c7d2fe; border-radius: 999px;
padding: 2px 9px;
}
.badge-branch {
font-family: var(--mono); font-size: .62rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: #a21caf; background: #fdf4ff;
border: 1px solid #f5d0fe; border-radius: 999px;
padding: 2px 9px;
}
/* ============================================================
Dataset card extras: dimensions / synthetic / curated chips
============================================================ */
.dataset-card { border-left: 2px solid var(--brand-2); }
.dataset-card.card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.card-row-flush { padding: 14px 18px 12px; }
.badge-dim {
font-family: var(--mono); font-size: .68rem; font-weight: 700;
letter-spacing: .04em;
color: var(--brand); background: #eef2ff;
border: 1px solid #c7d2fe; border-radius: 6px;
padding: 2px 8px;
}
.badge-synth {
font-family: var(--mono); font-size: .62rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); background: var(--panel-2);
border: 1px solid var(--line); border-radius: 999px;
padding: 2px 9px;
}
.curated-pill {
font-family: var(--mono); font-size: .7rem; font-weight: 700;
letter-spacing: .04em;
color: var(--brand); background: rgba(67, 56, 202, .08);
border: 1px solid rgba(67, 56, 202, .25); border-radius: 999px;
padding: 2px 9px;
display: inline-flex; align-items: center; gap: 4px;
}
/* ============================================================
Card thumbnail · small figure inset on method list cards
============================================================ */
.card-thumb {
flex: none; display: block; align-self: flex-start;
width: 124px; height: 88px; border-radius: 8px; overflow: hidden;
border: 1px solid var(--line);
background: var(--panel-2);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card-thumb:hover {
transform: translateY(-1px); border-color: rgba(99, 102, 241, .4);
box-shadow: 0 6px 18px -8px rgba(67, 56, 202, .35);
text-decoration: none;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
.card-thumb { width: 88px; height: 66px; }
}
/* Markdown ![]()
figures in method detail prose — center, rounded, soft shadow */
.prose img {
max-width: 100%; height: auto; display: block;
margin: 16px auto; border-radius: 10px;
border: 1px solid var(--line);
box-shadow: 0 10px 26px -14px rgba(15, 23, 42, .22);
background: var(--panel);
}
/* Markdown caption pattern: a paragraph that starts with "*Figure:" italic.
We can't style by content, but the surrounding emphasis renders as
in a . So we approximate with a centered, smaller caption look on
the paragraph that directly follows a figure image. */
.prose p > em:first-child:only-child { color: var(--muted); font-size: .82rem; }
.prose img + p { text-align: center; }
.prose img + p em { color: var(--muted); font-size: .82rem; font-style: italic; }
.prose img + p a { color: var(--brand-2); }
/* Rail tier dots (staff-only datasets) */
.rail-tier-public .rail-dot { background: #94a3b8; }
.rail-tier-private .rail-dot { background: var(--neg); }
.rail-tier-hidden .rail-dot { background: #94a3b8; }
/* ============================================================
FEED · Xiaohongshu-style masonry grid (homepage)
============================================================ */
/* Feed outer width. NO zoom: zoom breaks backdrop-filter (the glass
cards), so the airy "0.8" size is recreated natively with a narrower
page (1480px gives ~410px cards on a wide screen, with real side
whitespace) — and the glass actually renders. The topbar reads the
same width so the two line up. */
body.body-feed { --feed-page-max: 1620px; --feed-page-px: 28px; }
.body-feed .page {
display: flex; align-items: flex-start; gap: 28px;
max-width: var(--feed-page-max); margin: 0 auto; padding: 0 var(--feed-page-px);
}
.body-feed .main { flex: 1 1 auto; min-width: 0; padding-top: 16px; }
.body-feed .main .container { padding: 0; max-width: none; }
/* Left rail — the FIELD catalogue. Pick your field once; it rarely changes,
so it reads like settled navigation, each field with its own quiet colour. */
.feed-rail {
flex: none; width: 312px; align-self: flex-start;
position: sticky; top: 72px; max-height: calc(100vh - 88px);
/* The rail scrolls independently when its content overflows — your sub-
categories are reachable without scrolling the whole page. */
display: flex; flex-direction: column;
padding: 0 12px 14px; border-radius: 18px; overflow: hidden;
background: color-mix(in srgb, var(--brand) 4%, var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -30px rgba(15,23,42,.3); margin-top: 16px;
/* Smooth compact ↔ expanded morph, not an instant jump. */
transition: width .42s cubic-bezier(.22, .8, .25, 1), padding .42s cubic-bezier(.22, .8, .25, 1);
}
/* Labels and sub-menus fade with the width morph. visibility is delayed off so
the fade animation completes before they become inert. */
.feed-rail-head-text,
.feed-rail-cat-name, .feed-rail-cat-count,
.feed-rail-toggle, .feed-rail-subs,
.feed-rail-collapse {
transition: opacity .2s ease, visibility 0s linear .42s;
}
.feed-rail-cats {
display: flex; flex-direction: column; gap: 3px;
overflow-y: auto; flex: 1 1 auto; min-height: 0;
margin: 0 -12px; padding: 0 12px 4px;
/* Scrollbar lives in its own gutter: invisible by default; it appears only
while the user is hovering the rail or actively scrolling, then fades back. */
scrollbar-width: thin; scrollbar-color: transparent transparent;
transition: scrollbar-color .25s ease;
}
.feed-rail:hover .feed-rail-cats { scrollbar-color: color-mix(in srgb, var(--brand) 28%, var(--line-2)) transparent; }
.feed-rail-cats::-webkit-scrollbar { width: 5px; }
.feed-rail-cats::-webkit-scrollbar-track { background: transparent; }
.feed-rail-cats::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .25s ease; }
.feed-rail:hover .feed-rail-cats::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 28%, var(--line-2)); }
.feed-rail:hover .feed-rail-cats::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.feed-rail-head {
display: flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: .65rem; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--brand);
padding: 12px 14px 11px; margin: 0 -12px 9px;
/* A light, indigo-lettered section label with a hairline rule — refined,
part of the system, but not a heavy dark slab. */
background: color-mix(in srgb, var(--brand) 6%, var(--panel));
border-bottom: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
}
.feed-rail-head-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Admin shortcut into the taxonomy editor — visible only to taxonomy admins. */
.feed-rail-editlink {
flex: none; width: 22px; height: 22px; border-radius: 6px;
display: inline-grid; place-items: center; line-height: 1;
color: var(--brand); text-decoration: none; font-size: .78rem; font-style: normal;
transition: background .14s;
}
.feed-rail-editlink:hover { background: color-mix(in srgb, var(--brand) 12%, var(--panel)); text-decoration: none; }
.feed-rail.is-compact .feed-rail-editlink { display: none; }
/* Compact mode: thin icon-strip rail once the user has seen it once. Click ⇥
to pin it back to the full width. */
.feed-rail.is-compact { width: 64px; padding-left: 8px; padding-right: 8px; }
.feed-rail.is-compact .feed-rail-head { justify-content: center; padding: 12px 4px 11px; margin: 0 -8px 4px; }
.feed-rail.is-compact .feed-rail-head-text,
.feed-rail.is-compact .feed-rail-cat-name,
.feed-rail.is-compact .feed-rail-cat-count,
.feed-rail.is-compact .feed-rail-toggle,
.feed-rail.is-compact .feed-rail-collapse {
opacity: 0; visibility: hidden;
transition: opacity .12s ease, visibility 0s linear .12s;
}
/* Sub-category panels must COLLAPSE in compact mode, not just hide — otherwise
an expanded sub (left over from when the rail was wide) keeps its layout
space and produces big gaps between the dots. */
.feed-rail.is-compact .feed-rail-subs { display: none !important; }
.feed-rail.is-compact .feed-rail-row { margin: 0; display: block; }
/* The chevron toggle has to leave the layout (not just go invisible) — even
visibility:hidden keeps its 26px width, which would shrink the cat button
and shove the dot off the rail's centre. */
.feed-rail.is-compact .feed-rail-toggle { display: none !important; }
.feed-rail.is-compact .feed-rail-cats { gap: 2px; }
.feed-rail.is-compact .feed-rail-expand { opacity: 1; visibility: visible; }
/* The dot is positioned absolutely at the button's exact centre, so the
(still-rendered) cat-name / count don't push it off-axis. Result: every dot
in the rail sits on the same perfectly vertical line. */
.feed-rail.is-compact .feed-rail-cat {
position: relative; height: 26px; padding: 0; pointer-events: none;
}
.feed-rail.is-compact .feed-rail-dot {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* Compact mode: hide the scrollbar entirely (the labels are gone, the list is
short, no scrollbar needed) and stop hover from re-summoning it. */
.feed-rail.is-compact .feed-rail-cats {
overflow: hidden; scrollbar-width: none;
}
.feed-rail.is-compact .feed-rail-cats::-webkit-scrollbar { width: 0; display: none; }
.feed-rail.is-compact:hover .feed-rail-cats { scrollbar-color: transparent transparent; }
/* In compact mode the rail is a pure peek — only the ⇥ expand button works.
Dots LIGHT UP for any field whose sub-category is selected so the shrunk
rail still tells you at a glance where your filters are. */
.feed-rail.is-compact .feed-rail-cat.active { animation: none; background: transparent; }
.feed-rail.is-compact .feed-rail-cat.active::before { display: none; }
.feed-rail.is-compact .feed-rail-dot { width: 7px; height: 7px; transition: background .18s, transform .18s; }
/* Active state combines the centering translate with the scale. */
.feed-rail.is-compact .feed-rail-cat.active .feed-rail-dot {
background: var(--brand); transform: translate(-50%, -50%) scale(1.45);
}
/* Expand button always usable when compact; absent when expanded. */
.feed-rail-expand { display: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
.feed-rail.is-compact .feed-rail-expand { display: inline-grid; }
.feed-rail-expand { display: none; }
.feed-rail-collapse,
.feed-rail-expand {
flex: none; width: 22px; height: 22px; border-radius: 6px;
background: none; border: none; cursor: pointer; color: var(--brand);
display: inline-grid; place-items: center; line-height: 1;
transition: background .14s;
}
.feed-rail-collapse::before { content: "⇤"; font-size: .9rem; font-weight: 700; }
/* Close button is mobile-drawer-only; hidden on desktop. */
.feed-rail-close { display: none !important; }
.feed-rail-collapse:hover,
.feed-rail-expand:hover { background: color-mix(in srgb, var(--brand) 12%, var(--panel)); }
.feed-rail-cat {
position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
padding: 11px 14px; border-radius: 12px; color: var(--ink-2);
font-family: inherit; font-size: .94rem; text-align: left;
background: none; border: none; cursor: pointer;
transition: background .14s, color .14s;
}
.feed-rail-dot {
width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot, #94a3b8);
}
.feed-rail-cat-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-rail-cat-count { font-family: var(--mono); font-size: .74rem; color: var(--muted); flex: none; }
.feed-rail-cat:hover { text-decoration: none; background: var(--panel-2); color: var(--ink); }
.feed-rail-cat.active {
background: color-mix(in srgb, var(--brand) 10%, var(--panel));
color: var(--ink); font-weight: 600;
transform-origin: left center; backface-visibility: hidden;
animation: railFlip .6s cubic-bezier(.2, .8, .25, 1) both;
}
.feed-rail-cat.active::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.feed-rail-cat.active .feed-rail-dot { background: var(--brand); }
/* "Page-turn" highlight when a field is selected — the row swings in on its left
hinge like a turned page, with a soft shadow that lifts as it lands flat. */
@keyframes railFlip {
0% { transform: perspective(680px) rotateY(-42deg); opacity: .2; box-shadow: 14px 0 22px -14px rgba(55,48,163,.5); }
60% { transform: perspective(680px) rotateY(7deg); opacity: 1; box-shadow: 5px 0 14px -10px rgba(55,48,163,.35); }
100% { transform: perspective(680px) rotateY(0); opacity: 1; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .feed-rail-cat.active { animation: none; } }
.feed-rail-cat.is-empty { opacity: .45; }
.feed-rail-cat.is-all .feed-rail-dot { background: var(--ink); box-shadow: none; }
.feed-rail-cat.is-all.active { background: var(--panel-2); }
.feed-rail-cat.is-all.active::before { background: var(--ink); }
/* Sub-categories: an expandable, multi-select list under each field. */
.feed-rail-hint { font-weight: 600; letter-spacing: .04em; opacity: .55; }
.feed-rail-group.is-empty { opacity: .42; }
.feed-rail-row { display: flex; align-items: center; }
.feed-rail-row .feed-rail-cat { flex: 1 1 auto; }
.feed-rail-toggle {
flex: none; width: 26px; align-self: stretch; margin-right: 2px;
background: none; border: none; cursor: pointer; color: var(--muted);
font-size: .7rem; line-height: 1; border-radius: 8px;
transition: transform .18s, color .14s, background .14s;
}
.feed-rail-toggle:hover { color: var(--brand); background: var(--panel-2); }
.feed-rail-toggle.open { transform: rotate(180deg); color: var(--brand); }
.feed-rail-subs {
display: flex; flex-direction: column; gap: 1px; margin: 1px 0 5px 16px; padding-left: 9px;
border-left: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
}
.feed-rail-sub {
display: flex; align-items: flex-start; gap: 9px; width: 100%;
padding: 6px 10px; border-radius: 9px; color: var(--muted);
font-family: inherit; font-size: .82rem; text-align: left;
background: none; border: none; cursor: pointer; transition: background .14s, color .14s;
}
.feed-rail-sub:hover { background: var(--panel-2); color: var(--ink); }
.feed-rail-sub-tick {
/* Round (radio-style), not square — the rail is single-select ("pick one"),
so a square checkbox wrongly implied multi-select. */
flex: none; width: 13px; height: 13px; border-radius: 50%; margin-top: 2px;
border: 1.5px solid var(--line-2); background: var(--panel);
transition: background .14s, border-color .14s;
}
/* Labels wrap rather than truncate — the rail is wide enough that almost all
fit one line, and the rest stay fully readable. */
.feed-rail-sub-name { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.35; }
.feed-rail-sub.active { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }
.feed-rail-sub.active .feed-rail-sub-tick { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--panel); }
/* Active-filter chips above the grid (removable). */
.feed-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0; }
/* "All fields" — placeholder when no filter chip is active. Same pill shape
as .feed-sel-chip so it doesn't look like a floating text label. */
.feed-sel-all {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .04em;
color: var(--muted);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 999px; padding: 3px 10px;
cursor: default;
}
/* Desktop: "All fields" is just a status label — the field list is the
always-visible left rail, so it must NOT look clickable. On phones the rail
is a hidden drawer, so make "All fields" tappable: a light brand tint + press
feedback, at the SAME size as the normal pill (no size bump, no caret). */
@media (max-width: 640px) {
.feed-sel-all {
cursor: pointer;
color: var(--brand);
background: color-mix(in srgb, var(--brand) 9%, var(--panel));
border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
transition: background .14s, transform .12s;
}
.feed-sel-all:active { background: color-mix(in srgb, var(--brand) 18%, var(--panel)); transform: scale(.96); }
}
.feed-sel-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--brand);
background: color-mix(in srgb, var(--brand) 8%, var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
border-radius: 999px; padding: 4px 6px 4px 11px; cursor: pointer;
transition: background .14s, border-color .14s;
}
.feed-sel-chip:hover { background: color-mix(in srgb, var(--brand) 14%, var(--panel)); border-color: var(--brand); }
.feed-sel-x { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 18%, transparent); font-size: .82rem; line-height: 1; }
/* One-click "Clear all" — neutral, set apart from the brand-coloured chips so
it reads as a reset, not another selection. */
.feed-sel-clear {
margin-left: 4px; font-family: var(--mono); font-size: .68rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
background: none; border: none; border-bottom: 1px dashed var(--line-2);
padding: 4px 0; cursor: pointer; transition: color .14s, border-color .14s;
}
.feed-sel-clear:hover { color: var(--brand); border-bottom-color: var(--brand); }
.feed-head { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
#feed-inner { position: relative; }
/* Invisible trigger below the grid: when it nears the viewport the next batch
of cards is revealed (incremental, so a huge field isn't laid out at once). */
.feed-sentinel { height: 8px; }
/* Tags (left) + sort (right) share one row, under the search. */
.feed-filterbar {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
border-bottom: 1px solid var(--line); padding-bottom: 11px;
}
.feed-tagrow {
flex: 1 1 auto; min-width: 0;
display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, #000 96%, transparent);
mask-image: linear-gradient(90deg, #000 96%, transparent);
}
.feed-tagrow::-webkit-scrollbar { display: none; }
.feed-tagchip {
flex: none; display: inline-flex; align-items: center; gap: 6px;
padding: 6px 13px; border-radius: 999px; white-space: nowrap;
background: var(--panel); border: 1px solid var(--line);
color: var(--ink-2); font-size: .82rem; font-weight: 500;
transition: background .14s, border-color .14s, color .14s, transform .12s;
}
.feed-tagchip:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--line-2); color: var(--ink); }
.feed-tagchip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.feed-tagchip.is-all { font-weight: 600; }
.feed-tagchip-n { font-family: var(--mono); font-size: .66rem; opacity: .68; }
.feed-search {
display: flex; align-items: center; gap: 8px;
background: var(--panel); border: 1px solid var(--line);
border-radius: 12px; padding: 3px 3px 3px 16px;
width: 100%; transition: border-color .15s, box-shadow .15s;
}
.feed-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.feed-search input[type=search] {
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--sans); font-size: .9rem; color: var(--ink); padding: 9px 0;
}
.feed-search input::placeholder { color: var(--muted); }
.feed-search button {
height: 34px; padding: 0 16px; border-radius: 8px; flex: none;
background: var(--cta); /* same tone as the Post button */
color: #fff; border: none; cursor: pointer; font-size: .88rem; font-weight: 600;
display: inline-flex; align-items: center; gap: 7px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: background .15s;
}
.feed-search button:hover { background: var(--cta-h); }
.feed-search-glyph { font-size: 1rem; line-height: 1; }
.feed-search-label { letter-spacing: .01em; }
@media (max-width: 560px) {
/* On phones drop the label and let the button collapse to a square. */
.feed-search button { padding: 0; width: 34px; justify-content: center; }
.feed-search-label { display: none; }
}
.feed-sort { display: flex; gap: 6px; flex: none; font-family: var(--mono); font-size: .62rem; }
/* Pill chips: inactive uses the same quiet outline as the "All fields"
placeholder; active uses the brand-tint chip shape used by .feed-sel-chip.
Matches the visual rhythm so the row doesn't have floating bare text. */
.feed-sort a {
display: inline-flex; align-items: center;
padding: 4px 11px; border-radius: 999px;
color: var(--muted); background: var(--panel);
border: 1px solid var(--line);
letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
}
.feed-sort a:hover { color: var(--ink); text-decoration: none; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.feed-sort a.active {
color: var(--brand);
background: color-mix(in srgb, var(--brand) 8%, var(--panel));
border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
}
/* Tablet sizes (641-900px): rail becomes a horizontal scrolling pill row
above the cards. On phones (<=640px) the theme-quiet drawer rule
below takes over, so don't apply these tablet styles there. */
@media (min-width: 641px) and (max-width: 900px) {
.body-feed .page { flex-direction: column; gap: 0; padding: 0 16px; }
.feed-rail {
position: static; width: 100%; margin-top: 12px; padding: 8px 8px 6px;
background: transparent; border: none; box-shadow: none; backdrop-filter: none;
}
.feed-rail-head { display: none; }
.feed-rail-cats { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.feed-rail-cats::-webkit-scrollbar { display: none; }
.feed-rail-cat { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.feed-rail-cat.active::before { display: none; }
.feed-rail-cat-count { display: none; }
}
/* ── Masonry waterfall ───────────────────────────────────────────────
JS (.js-masonry) packs cards into balanced columns and gives each cover
the natural shape of its lead figure, so heights vary like a real
waterfall and the columns stay level — no lopsided empty corner. Without
JS it degrades to a tidy centred flex-wrap. */
.feed-grid {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 18px; margin-top: 18px;
}
.feed-grid.js-masonry { display: block; position: relative; }
.feed-card {
flex: 1 1 250px; max-width: 340px;
position: relative; display: flex; flex-direction: column;
background: var(--panel); border-radius: 16px; overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -24px rgba(15,23,42,.26);
transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .2s;
animation: feedCardIn .5s cubic-bezier(.2,.7,.3,1) both;
animation-delay: calc(min(var(--i, 0), 14) * 40ms);
}
/* In masonry mode JS owns position via --x/--y; opacity drives entrance.
The first layout positions cards instantly (no transform transition yet);
`.is-live` is added on the next frame so later reflows/hover glide smoothly. */
.feed-grid.js-masonry .feed-card {
flex: none; max-width: none; margin: 0; animation: none;
position: absolute; top: 0; left: 0; opacity: 0;
transform: translate3d(var(--x, 0), var(--y, 0), 0);
transition: opacity .5s ease;
}
.feed-grid.js-masonry.is-live .feed-card {
transition: transform .42s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .2s, opacity .5s ease;
}
.feed-grid.js-masonry .feed-card.is-in { opacity: 1; }
/* Popular sort — the top three cards stand out clearly from the rest through
four layered cues, no heavy card-wide frame. Only kicks in when no filter
is active.
#1: a real INDIGO HEADER BAND with the "★ TOP PICK" label embedded —
the unmistakable winner. Indigo glow underneath; title color shifts
to indigo; biggest font; subtle indigo border to bind it together.
#2: a slim indigo top stripe (4px); medium indigo glow; bigger title.
#3: a hairline indigo top stripe (2px, lighter); soft glow; slightly
bigger title. */
.feed-grid:not(.is-filtered) .feed-card.is-feat-1 {
border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
box-shadow: 0 5px 10px rgba(15,23,42,.06),
0 32px 60px -20px color-mix(in srgb, var(--brand) 58%, transparent);
}
.feed-grid:not(.is-filtered) .feed-card.is-feat-2 {
border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
box-shadow: 0 3px 7px rgba(15,23,42,.05),
0 22px 40px -18px color-mix(in srgb, var(--brand) 32%, transparent);
}
.feed-grid:not(.is-filtered) .feed-card.is-feat-3 {
box-shadow: 0 2px 5px rgba(15,23,42,.05),
0 14px 26px -16px color-mix(in srgb, var(--brand) 18%, transparent);
}
/* All three get a same-thickness indigo top stripe — the only difference is
the shade: solid indigo on #1, 65% on #2, 35% on #3. No text, no star, no
header band — the contrast comes from the shadow ladder + title size. */
.feed-grid:not(.is-filtered) .feed-card.is-feat-1::before,
.feed-grid:not(.is-filtered) .feed-card.is-feat-2::before,
.feed-grid:not(.is-filtered) .feed-card.is-feat-3::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
z-index: 5; pointer-events: none;
}
.feed-grid:not(.is-filtered) .feed-card.is-feat-1::before { background: var(--brand); }
.feed-grid:not(.is-filtered) .feed-card.is-feat-2::before { background: color-mix(in srgb, var(--brand) 65%, var(--panel)); }
.feed-grid:not(.is-filtered) .feed-card.is-feat-3::before { background: color-mix(in srgb, var(--brand) 35%, var(--panel)); }
/* Title ladder: bigger AND indigo on #1, just bigger on #2/#3. */
.feed-grid:not(.is-filtered) .feed-card.is-feat-1 .feed-card-title {
font-size: 1.3rem; color: var(--brand);
}
.feed-grid:not(.is-filtered) .feed-card.is-feat-2 .feed-card-title { font-size: 1.22rem; }
.feed-grid:not(.is-filtered) .feed-card.is-feat-3 .feed-card-title { font-size: 1.17rem; }
/* Client-side field/tag filter: a card fades + shrinks out (then leaves the
layout); a newly-matching card fades in at its final spot; the rest glide. */
.feed-grid.js-masonry .feed-card.is-out { display: none !important; }
.feed-grid.js-masonry .feed-card.is-leaving {
opacity: 0 !important; pointer-events: none;
transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.86) !important;
}
.feed-grid.js-masonry .feed-card.is-enter { opacity: 0 !important; transition: opacity .42s ease !important; }
.feed-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--brand) 28%, var(--line-2));
box-shadow: 0 28px 50px -26px rgba(67, 56, 202, .28), 0 6px 14px -8px rgba(15, 23, 42, .10);
}
.feed-grid.js-masonry .feed-card:hover {
transform: translate3d(var(--x, 0), var(--y, 0), 0) translateY(-6px); z-index: 4;
}
@keyframes feedCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.feed-card { animation: none; transition: box-shadow .2s, border-color .2s; }
.feed-grid.js-masonry .feed-card { opacity: 1; transition: none; }
}
@media (max-width: 560px) { .feed-grid { gap: 12px; } .feed-card { max-width: none; } }
/* Body + footer share one positioned context so the title's stretched link
covers them (but not the cover, whose slides/arrows stay clickable). */
.feed-card-main { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.feed-card-title a.feed-card-link { color: inherit; text-decoration: none; }
.feed-card-title a.feed-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.feed-card-title a.feed-card-link:hover { text-decoration: none; }
/* Cover — always an image; the figure is the hero */
.feed-cover { position: relative; width: 100%; background: var(--panel-2); display: block; overflow: hidden; box-shadow: inset 0 -1px 0 var(--line); }
.feed-cover img { width: 100%; height: auto; display: block; }
/* Subtle scrim so the pills overlaid at the bottom stay legible on any figure. */
.feed-cover-scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .26));
opacity: 0; transition: opacity .25s;
}
.feed-card:hover .feed-cover-scrim { opacity: 1; }
/* Swipeable figure gallery */
.feed-carousel { overflow: hidden; }
.feed-carousel-track {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.feed-carousel-track::-webkit-scrollbar { display: none; }
.feed-slide {
flex: 0 0 100%; scroll-snap-align: center; display: block;
aspect-ratio: var(--cover-ar, 1.34); overflow: hidden;
background:
radial-gradient(130% 130% at 50% 0%, #ffffff 52%, #e9eef6 100%);
}
.feed-slide img {
width: 100%; height: 100%; object-fit: contain; display: block;
transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.feed-card:hover .feed-slide img { transform: scale(1.045); }
.feed-car-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%; border: none;
background: rgba(15, 23, 42, .55); color: #fff; font-size: 1.1rem; line-height: 1;
cursor: pointer; display: grid; place-items: center;
opacity: 0; transition: opacity .15s, background .15s; z-index: 2;
backdrop-filter: blur(3px);
}
.feed-car-prev { left: 7px; }
.feed-car-next { right: 7px; }
.feed-card:hover .feed-car-arrow { opacity: 1; }
.feed-car-arrow:hover { background: rgba(15, 23, 42, .8); }
.feed-car-dots {
position: absolute; bottom: 8px; left: 0; right: 0; z-index: 2;
display: flex; justify-content: center; gap: 4px; pointer-events: none;
}
.feed-car-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0,0,0,.4); transition: background .15s, transform .15s; }
.feed-car-dot.is-active { background: #fff; transform: scale(1.3); }
@media (hover: none) { .feed-car-arrow { display: none; } }
/* No figure? Lead with the result instead — the headline formula, or a clean
summary "snapshot" card (outputs aren't always plots). */
.feed-cover-snap {
display: flex; flex-direction: column; gap: 10px; justify-content: center;
min-height: 150px; padding: 20px 18px; color: var(--ink); text-decoration: none;
background:
linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}
.feed-cover-snap:hover { text-decoration: none; }
.feed-snap-kicker {
font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted);
}
.feed-snap-summary { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.feed-snap-formula { color: var(--ink); overflow-x: auto; padding: 4px 0; }
.feed-snap-formula .katex { font-size: 1.12em; }
.feed-cover-steps {
position: absolute; bottom: 8px; left: 8px; z-index: 2;
font-family: var(--mono); font-size: .62rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: rgba(15, 23, 42, .62);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
padding: 2px 8px; border-radius: 999px;
}
.feed-card-body { padding: 18px 20px 12px; flex: 1 1 auto; }
.feed-card-title {
font-family: var(--serif);
font-size: 1.14rem; font-weight: 600; line-height: 1.34; letter-spacing: -.003em; color: var(--ink);
margin: 0 0 8px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-card:hover .feed-card-title { color: var(--brand); }
.feed-card-summary {
font-size: .87rem; line-height: 1.58; color: var(--muted); margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* One compact top row per card: the Source citation (with a hairline divider)
then the user tags — a single line, overflow faded on the right, no wasted
height. Tags never reach the cover, so the figure is never obscured. */
.feed-topbar {
display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
padding: 9px 14px 7px; overflow: hidden;
-webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
mask-image: linear-gradient(to right, #000 92%, transparent);
}
.feed-src {
display: inline-flex; align-items: center; gap: 3px; flex: none;
font-family: var(--mono); font-size: .56rem; font-weight: 700;
color: var(--brand); text-decoration: none; white-space: nowrap;
padding-right: 7px; margin-right: 1px; border-right: 1px solid var(--line);
}
.feed-src:hover { text-decoration: underline; }
.feed-src-x { opacity: .7; font-weight: 400; }
.feed-tag-chip {
font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .01em;
padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
color: var(--ink-2); background: #fff;
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.feed-tag-chip:hover {
text-decoration: none; transform: translateY(-1px);
color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line-2));
background: color-mix(in srgb, var(--brand) 6%, #fff);
box-shadow: 0 4px 10px -4px rgba(67, 56, 202, .3);
}
/* Small "verified" check for official package accounts. */
.feed-verified {
display: inline-grid; place-items: center; flex: none;
width: 14px; height: 14px; border-radius: 50%;
background: var(--brand); color: #fff;
font-size: .56rem; font-weight: 900; line-height: 1;
}
/* Three independent badges: author (filled indigo), platform (filled with a P),
data (outlined with a D). A card can carry any combination. */
/* Raise badges above the stretched card-link overlay (.feed-card-link::after,
z-index:1) so hover reaches them and the tooltip fires. The rest of the card
still navigates; only the tiny badge area opts out of the card click. */
.feed-badges { display: inline-flex; gap: 3px; flex: none; position: relative; z-index: 2; }
.feed-badge {
display: inline-grid; place-items: center; flex: none;
width: 14px; height: 14px; border-radius: 50%;
font-family: var(--mono); font-size: .56rem; font-weight: 900; line-height: 1; letter-spacing: 0;
}
.feed-badge.fb-author { background: var(--brand); color: #fff; }
.feed-badge.fb-platform { background: color-mix(in srgb, var(--brand) 22%, var(--panel)); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); }
.feed-badge.fb-data { background: var(--panel); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); }
.feed-card-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 20px 14px; font-size: .8rem; gap: 8px;
margin-top: auto; border-top: 1px solid var(--line);
}
.feed-author { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); min-width: 0; }
/* Certified authors get a gold gradient ring around their avatar. */
.feed-ava { display: inline-flex; border-radius: 50%; flex: none; }
.feed-ava.is-cert { padding: 1.5px; background: var(--brand); box-shadow: 0 0 0 1px #fff inset; }
.feed-ava.is-cert .avatar { box-shadow: 0 0 0 1.5px #fff; }
.feed-author-name {
font-family: var(--mono); font-size: .74rem; color: var(--ink-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-stats { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.feed-likes, .feed-cmts {
display: inline-flex; align-items: center; gap: 4px;
color: var(--muted); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;
}
.feed-likes .heart { color: var(--brand); font-size: .8rem; line-height: 1; }
.feed-cmts { font-size: .72rem; }
.feed-cmts .cmt-mark { color: var(--muted); font-style: normal; font-variant-emoji: text; }
.feed-empty { text-align: center; padding: 60px 20px; color: var(--muted); font-size: .9rem; grid-column: 1 / -1; flex: 1 0 100%; }
/* ============================================================
WORKFLOW DETAIL · input → pipeline → output tutorial blocks
============================================================ */
.wf-detail { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* Discussion lives outside the .wf-detail article — keep it the same width so
the page doesn't have a narrow article above a wide-open comment section. */
.wf-detail + #comments { max-width: 1100px; margin-left: auto; margin-right: auto; }
.detail + #comments { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* Quieter kicker: no pill, no special glyphs — just a small mono label that
sits under the title rather than crowding the head. */
.wf-kicker {
display: inline-block; font-family: var(--mono); font-size: .62rem;
font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); margin-bottom: 6px;
}
.wf-kicker-sep { display: inline-block; margin: 0 6px; color: color-mix(in srgb, var(--muted) 50%, var(--line-2)); }
.wf-detail .detail-head h1 { letter-spacing: -.005em; }
/* Source citation under the byline — understated (a dashed-underlined link, not
a heavy box) with a BibTeX toggle that reveals a copyable entry. */
.wf-cite {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
/* Symmetric breathing room above and below — same gap from the tags as to
the AI summary that follows. */
margin: 18px 0 18px; font-size: .88rem;
}
.wf-source {
display: inline-flex; align-items: baseline; gap: 7px; color: var(--ink);
text-decoration: none; padding-bottom: 1px;
border-bottom: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line-2));
}
.wf-source:hover { border-bottom-style: solid; text-decoration: none; }
.wf-source-k {
flex: none; font-family: var(--mono); font-size: .58rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.wf-source-label { font-weight: 600; }
.wf-source-x { color: var(--brand); font-weight: 700; }
.wf-cite-btn {
font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--brand); cursor: pointer;
background: color-mix(in srgb, var(--brand) 7%, var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
border-radius: 6px; padding: 4px 9px; transition: background .14s;
}
.wf-cite-btn:hover { background: color-mix(in srgb, var(--brand) 13%, var(--panel)); }
.wf-bibtex {
flex-basis: 100%; position: relative; margin: 2px 0 0;
background: var(--ink); border-radius: 10px; overflow: hidden;
}
.wf-bibtex pre {
margin: 0; padding: 13px 15px; color: #e2e8f0; overflow-x: auto;
font-family: var(--mono); font-size: .76rem; line-height: 1.55; white-space: pre;
}
.wf-bibtex-copy {
position: absolute; top: 8px; right: 8px; z-index: 1;
font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #cbd5e1; cursor: pointer;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
border-radius: 6px; padding: 3px 8px; transition: background .14s, color .14s;
}
.wf-bibtex-copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.io-block {
position: relative;
display: grid; grid-template-columns: 34px 1fr; gap: 16px;
margin: 22px 0;
padding-left: 2px;
}
/* connecting spine between the numbered nodes */
.io-block:not(:last-of-type)::before {
content: ""; position: absolute; left: 16px; top: 40px; bottom: -22px;
width: 2px; background: linear-gradient(180deg, var(--brand), var(--brand-2));
opacity: .25;
}
.io-step-num {
flex: none; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
font-family: var(--mono); font-weight: 800; font-size: 1rem;
color: #fff; background: linear-gradient(135deg, var(--brand), #3730a3);
box-shadow: 0 6px 14px -7px rgba(67, 56, 202, .6);
position: relative; z-index: 1;
}
.io-output .io-step-num { background: var(--ink); }
.io-content { min-width: 0; }
.io-label {
font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em;
margin: 4px 0 12px; color: var(--ink);
display: flex; align-items: center; gap: 10px;
}
.io-input .io-content {
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line); border-radius: 12px;
padding: 14px 16px;
}
.io-input .io-label { margin-top: 0; }
.io-input .prose { color: var(--ink-2); }
.io-input .prose p { margin: 0; }
/* Result figures: a tidy, centred gallery of uniformly-sized cards instead of
full-width images sprawling down the page. Tall figures letterbox cleanly. */
/* A justified gallery: each figure keeps its natural shape (wide plots go wide,
tall ones go narrow) and they tile side by side, wrapping as needed — instead
of every figure forced into one full-width column. */
/* Uniform gallery: every figure is the SAME size cell (the image is letterboxed
inside a fixed box), so a tall plot and a wide plot read as one tidy set
rather than a jumble of big-and-small. */
.io-figures {
display: grid; gap: 16px; margin: 12px 0;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
justify-content: center;
}
.io-figure {
margin: 0; display: flex; flex-direction: column; min-width: 0;
border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
background: var(--panel); box-shadow: var(--shadow);
}
.io-figure img {
display: block; width: 100%; height: 280px; object-fit: contain;
background: #fff; padding: 10px;
}
/* A lone figure shouldn't stretch full-width — keep it a tidy, centred card. */
.io-figures:has(> .io-figure:only-child) { grid-template-columns: minmax(0, 460px); }
.io-figure figcaption {
font-size: .8rem; color: var(--ink-2); padding: 9px 13px; line-height: 1.5;
border-top: 1px solid var(--line); background: var(--panel-2);
text-align: left;
}
.io-figure figcaption a { color: var(--brand); }
.io-fig-n {
display: inline-block; font-family: var(--mono); font-size: .58rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
background: rgba(67, 56, 202, .08); border: 1px solid rgba(67, 56, 202, .16);
padding: 1px 6px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; white-space: nowrap;
}
.io-fig-count { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.io-fig-credit { font-size: .76rem; color: var(--muted); margin: 4px 0 10px; }
.io-fig-credit a { color: var(--brand-2); }
/* Result · the numbers — the estimand + estimator output, for tutorials whose
result is numerical (with or without a figure). A bordered card so the
numbers read as the concrete deliverable. */
.io-results {
margin: 12px 0 4px; padding: 13px 16px;
background: color-mix(in srgb, var(--brand) 4%, var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
border-radius: 12px;
}
.io-results-h {
display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
font-family: var(--mono); font-size: .72rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
.io-results-mark {
display: inline-grid; place-items: center; width: 18px; height: 18px;
border-radius: 6px; background: color-mix(in srgb, var(--brand) 14%, transparent);
font-size: .8rem;
}
.io-results-body { font-size: .95rem; }
.io-results-body :first-child { margin-top: 0; }
.io-results-body :last-child { margin-bottom: 0; }
/* Compact tables of estimates read clearly. */
.io-results-body table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 6px 0; }
.io-results-body th, .io-results-body td {
padding: 4px 12px 4px 0; text-align: left; border-bottom: 1px solid var(--line);
}
.io-results-body th { font-weight: 700; color: var(--ink); }
.branch-flag {
font-family: var(--mono); font-size: .62rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: #a21caf; background: #fdf4ff;
border: 1px solid #f5d0fe; border-radius: 999px; padding: 2px 8px;
}
@media (max-width: 600px) {
.io-block { grid-template-columns: 28px 1fr; gap: 12px; }
.io-block:not(:last-of-type)::before { left: 13px; }
.io-step-num { width: 28px; height: 28px; font-size: .85rem; }
}
/* ============================================================
TECHNIQUE provenance · library intro · used-in back-links
============================================================ */
.lib-intro { text-align: center; margin: 4px 0 4px; }
.lib-title { font-size: 1.6rem; letter-spacing: -.025em; margin: 0 0 4px; }
.lib-title::after { content: none; }
.lib-sub { color: var(--muted); font-size: .92rem; margin: 0 auto; max-width: 64ch; }
.lib-sub a { color: var(--brand); font-weight: 600; }
.provenance-note {
font-size: .85rem; line-height: 1.55; color: var(--ink-2);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line); border-left: 3px solid var(--brand);
border-radius: 8px; padding: 10px 14px; margin: 12px 0;
}
.provenance-note a { color: var(--brand); font-weight: 600; }
.used-pill {
font-family: var(--mono); font-size: .6rem; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
background: #eef2ff; color: var(--brand); border: 1px solid #c7d2fe;
}
.used-in { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.used-in h2 { font-size: 1.1rem; margin: 0 0 12px; }
.used-in .cards { gap: 10px; }
.used-in .card { padding: 12px 14px; }
/* Method cover fallback in the Techniques grid (no figure → estimand slab) */
.feed-cover-method {
background:
radial-gradient(circle at 50% 30%, rgba(255,255,255,.16), transparent 65%),
linear-gradient(160deg, #3730a3 0%, #1e1b4b 100%);
}
.feed-cover-estimand {
font-family: var(--mono); font-weight: 800; font-size: 1.5rem;
letter-spacing: .04em; color: #fff; text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.byline .avatar { vertical-align: middle; }
/* ============================================================
PIPELINE · structure diagram (layered DAG) + expandable steps
============================================================ */
.wf-diagram {
display: flex; flex-direction: column; align-items: stretch; gap: 2px;
margin: 4px 0 20px; padding: 16px;
background:
radial-gradient(ellipse 70% 60% at 15% 0%, rgba(99,102,241,.06), transparent 70%),
radial-gradient(ellipse 70% 60% at 90% 100%, rgba(55,48,163,.05), transparent 70%),
var(--panel-2);
border: 1px solid var(--line); border-radius: 14px;
}
.wf-diagram-layer { display: flex; gap: 10px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.wf-diagram-layer.is-parallel {
background: linear-gradient(180deg, rgba(99,102,241,.05), rgba(55,48,163,.04));
border: 1px dashed rgba(99,102,241,.22); border-radius: 10px; padding: 7px;
}
.wf-diagram-arrow { text-align: center; color: rgba(99,102,241,.4); font-size: .7rem; line-height: 1.5; font-family: var(--mono); }
.wf-node {
display: inline-flex; align-items: center; gap: 9px; text-align: left;
padding: 8px 13px; border-radius: 9px; min-width: 0; max-width: 320px; flex: 0 1 auto;
background: var(--panel); border: 1px solid var(--line); color: var(--ink);
box-shadow: 0 1px 2px rgba(15,23,42,.04); cursor: pointer; font: inherit;
transition: transform .15s, border-color .15s, box-shadow .2s;
}
.wf-node:hover {
text-decoration: none; transform: translateY(-2px);
border-color: rgba(99,102,241,.4);
box-shadow: 0 10px 22px -12px rgba(67,56,202,.3);
}
.wf-node.is-active {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-glow), 0 10px 22px -12px rgba(67,56,202,.35);
}
.wf-node-num {
flex: none; width: 20px; height: 20px; border-radius: 6px;
display: grid; place-items: center; font-family: var(--mono); font-weight: 800;
font-size: .72rem; color: #fff; background: linear-gradient(135deg, var(--brand), #3730a3);
}
.wf-node .vpipe-dot { width: 8px; height: 8px; }
.wf-node-text { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.wf-node-stage { font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wf-node-title { font-size: .85rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Detail area: nothing until a node is clicked (JS adds .is-active). */
.pipe-detail-area { margin-top: 4px; }
.pipe-placeholder {
text-align: center; font-size: .84rem; color: var(--muted); font-family: var(--mono);
padding: 22px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel-2);
margin: 0;
}
.pipe-detail { display: none; }
.pipe-detail.is-active { display: block; }
.pipe-detail {
border: 1px solid var(--line); border-left: 3px solid var(--line-2);
border-radius: 12px; background: var(--panel); padding: 18px 20px;
animation: pipe-fade .22s ease;
}
@keyframes pipe-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pipe-detail.vpipe-diagnostic { border-left-color: #94a3b8; }
.pipe-detail.vpipe-prep { border-left-color: #6366f1; }
.pipe-detail.vpipe-estimation { border-left-color: var(--brand); }
.pipe-detail.vpipe-inference { border-left-color: var(--pos); }
.pipe-detail.vpipe-robustness { border-left-color: var(--neg); }
.pipe-detail.vpipe-heterogeneity { border-left-color: #94a3b8; }
.pipe-detail.vpipe-reporting { border-left-color: #94a3b8; }
.pipe-detail.vpipe-other { border-left-color: #94a3b8; }
.pipe-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pipe-detail-headtext { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pipe-detail-headtext .vpipe-stage { font-family: var(--mono); }
.pipe-detail-title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.pipe-role { margin: 4px 0 14px; color: var(--muted); font-size: .9rem; font-style: italic; }
.pipe-detail .pipe-block { margin-bottom: 14px; }
.pipe-detail .pipe-block-text { font-size: .95rem; line-height: 1.55; }
.pipe-io { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.pipe-io-item { font-size: .84rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.pipe-io-k { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pipe-step {
position: relative;
border: 1px solid var(--line); border-left: 3px solid var(--line-2);
border-radius: 12px; background: var(--panel);
padding: 12px 14px; scroll-margin-top: 70px;
transition: border-color .15s, box-shadow .2s;
}
.pipe-step:target { box-shadow: 0 0 0 3px var(--brand-glow); border-left-color: var(--brand); }
/* stage accent on the left bar */
.pipe-step.vpipe-diagnostic { border-left-color: #94a3b8; }
.pipe-step.vpipe-prep { border-left-color: #6366f1; }
.pipe-step.vpipe-estimation { border-left-color: var(--brand); }
.pipe-step.vpipe-inference { border-left-color: var(--pos); }
.pipe-step.vpipe-robustness { border-left-color: var(--neg); }
.pipe-step.vpipe-heterogeneity { border-left-color: #94a3b8; }
.pipe-step.vpipe-reporting { border-left-color: #94a3b8; }
.pipe-step.vpipe-other { border-left-color: #94a3b8; }
.pipe-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pipe-step-num {
flex: none; width: 24px; height: 24px; border-radius: 7px;
display: grid; place-items: center;
font-family: var(--mono); font-weight: 800; font-size: .8rem;
color: #fff; background: linear-gradient(135deg, var(--brand), #3730a3);
}
.pipe-step-head .vpipe-dot { width: 9px; height: 9px; }
.pipe-step-headtext { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.pipe-step-headtext .vpipe-stage { font-family: var(--mono); }
.pipe-step-title { font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: -.01em; }
.pipe-step-deps { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.pipe-step-note { margin: 8px 0 0 34px; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.pipe-more { margin: 8px 0 0 34px; }
.pipe-more > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
font-family: var(--mono); font-size: .76rem; font-weight: 700;
color: var(--brand); letter-spacing: .03em;
padding: 3px 0;
}
.pipe-more > summary::-webkit-details-marker { display: none; }
.pipe-more > summary::before { content: "▸ "; }
.pipe-more[open] > summary::before { content: "▾ "; }
.pipe-more .pipe-more-close { display: none; }
.pipe-more[open] .pipe-more-open { display: none; }
.pipe-more[open] .pipe-more-close { display: inline; }
.pipe-more-count { color: var(--muted); font-weight: 500; }
.pipe-more-body {
margin-top: 10px; padding: 12px 14px;
background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
display: flex; flex-direction: column; gap: 14px;
}
.pipe-block-label, .pipe-comments-label {
display: block; font-family: var(--mono); font-size: .64rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.pipe-code .prose pre { margin: 0; }
.pipe-formula { padding: 8px 2px; overflow-x: auto; }
.pipe-formula .katex { font-size: 1.2em; }
.pipe-ref { margin: 0; font-size: .82rem; }
/* richer expand: meta row + 'what this is' block */
.pipe-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pipe-meta-item {
font-family: var(--mono); font-size: .72rem; color: var(--ink-2);
background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
}
.pipe-meta-k { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; margin-right: 4px; }
.pipe-block-text { margin: 0 0 8px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.pipe-block-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; }
.pipe-block-links code { font-size: .76rem; padding: 0 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; color: var(--brand); }
.io-input-more { margin: 10px 0 0; }
.pipe-comments { border-top: 1px solid var(--line); padding-top: 12px; }
.pipe-comment-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pipe-comment { display: flex; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pipe-comment .votebox { transform: scale(.85); transform-origin: top center; }
.pipe-comment-body { flex: 1; min-width: 0; }
.pipe-comment-body .comment-meta { font-size: .76rem; margin-bottom: 2px; }
.pipe-comment-body .prose { font-size: .88rem; }
.pipe-comment-empty { font-size: .84rem; padding: 4px 2px; list-style: none; }
.pipe-comment-form { display: flex; gap: 8px; align-items: flex-start; }
.pipe-comment-form textarea {
flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
font-family: inherit; font-size: .88rem; resize: vertical; min-height: 38px; background: var(--panel);
}
.pipe-comment-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.pipe-login { font-size: .84rem; margin: 0; }
@media (max-width: 600px) {
.pipe-step-note, .pipe-more { margin-left: 0; }
}
.formwrap-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.guide-btn { flex: none; white-space: nowrap; }
/* ============================================================
TAXONOMY ADMIN · /taxonomy/ — edit the left-rail catalogue
============================================================ */
.tax-admin { max-width: 1000px; margin: 18px auto 48px; }
.tax-head h1 { font-family: var(--serif); font-size: 1.7rem; letter-spacing: -.005em; margin: 8px 0 8px; }
.tax-sub { color: var(--muted); font-size: .92rem; margin: 0 0 24px; max-width: 720px; line-height: 1.6; }
.tax-field {
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden;
}
.tax-field-head {
display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
background: color-mix(in srgb, var(--brand) 4%, var(--panel));
border-bottom: 1px solid var(--line);
}
.tax-move { display: flex; flex-direction: column; gap: 3px; flex: none; padding-top: 2px; }
.tax-move form { margin: 0; line-height: 0; }
.tax-move button {
width: 24px; height: 19px; border: 1px solid var(--line); background: var(--panel);
border-radius: 5px; cursor: pointer; color: var(--muted); font-size: .58rem; line-height: 1;
transition: color .14s, border-color .14s;
}
.tax-move button:hover:not(:disabled) { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.tax-move button:disabled { opacity: .35; cursor: default; }
.tax-move-h { flex-direction: row; padding-top: 0; }
.tax-field-main { flex: 1 1 auto; min-width: 0; }
.tax-name {
font-family: var(--serif); font-size: 1.18rem; font-weight: 600; margin: 0;
display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.tax-slug {
font-family: var(--mono); font-size: .64rem; font-weight: 600; color: var(--brand);
background: color-mix(in srgb, var(--brand) 7%, var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
padding: 1px 8px; border-radius: 999px;
}
.tax-count { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.tax-blurb { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.tax-tagrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tax-tagrow-inline { margin-top: 0; }
.tax-tag {
font-family: var(--mono); font-size: .62rem; color: var(--ink-2);
background: var(--panel-2); border: 1px solid var(--line);
border-radius: 5px; padding: 2px 7px;
}
.tax-tag.is-unused { color: var(--muted); border-style: dashed; opacity: .75; }
.tax-none { color: var(--muted); font-size: .78rem; font-style: italic; }
.tax-none-block { padding: 4px 2px; margin: 0; }
.tax-actions { display: flex; align-items: flex-start; gap: 10px; flex: none; }
.tax-toggle > summary {
cursor: pointer; list-style: none; display: inline-block;
font-family: var(--mono); font-size: .66rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
background: var(--panel); border-radius: 7px; padding: 4px 10px;
transition: background .14s;
}
.tax-toggle > summary::-webkit-details-marker { display: none; }
.tax-toggle > summary:hover { background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }
.tax-toggle[open] > summary { background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.tax-del {
font-family: var(--mono); font-size: .66rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--neg);
border: 1px solid #fecaca; background: var(--panel); border-radius: 7px;
padding: 4px 10px; cursor: pointer; transition: background .14s;
}
.tax-del:hover { background: #fef2f2; }
/* Edit/add forms drop below the row, full width, on a quiet panel. */
.tax-field-head .tax-toggle, .tax-sub-row .tax-toggle { position: relative; }
.tax-form {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 8;
width: min(560px, 82vw);
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
padding: 14px; background: var(--panel);
border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
border-radius: 12px; box-shadow: var(--shadow-elev);
}
.tax-add .tax-form { position: static; width: 100%; box-shadow: none; background: var(--panel-2); border-color: var(--line); margin-top: 8px; }
.tax-form label {
display: block; font-family: var(--mono); font-size: .6rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.tax-form input {
width: 100%; box-sizing: border-box; padding: 8px 10px;
border: 1px solid var(--line); border-radius: 8px;
font-family: inherit; font-size: .9rem; background: #fff; color: var(--ink);
}
.tax-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.tax-form .full { grid-column: 1 / -1; }
.tax-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.tax-subs { padding: 10px 16px 14px 44px; display: flex; flex-direction: column; gap: 7px; }
.tax-sub-row {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
background: var(--panel);
}
.tax-sub-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tax-sub-name { font-size: .92rem; font-weight: 600; color: var(--ink); }
.tax-add { margin-top: 4px; }
.tax-new {
border: 1px dashed var(--line-2); border-radius: 14px; padding: 16px;
background: color-mix(in srgb, var(--brand) 2%, var(--panel)); margin-top: 24px;
}
.tax-new-h { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 12px; }
.tax-new .tax-form { position: static; width: 100%; box-shadow: none; border: none; padding: 0; background: transparent; }
@media (max-width: 640px) {
.tax-field-head { flex-wrap: wrap; }
.tax-subs { padding-left: 16px; }
.tax-form { position: static; width: 100%; }
}
/* ============================================================
VERIFICATION · apply (/verification/) + admin review
============================================================ */
.vr-form { margin-bottom: 28px; }
.vr-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.vr-kind input { position: absolute; opacity: 0; pointer-events: none; }
.vr-kind { display: block; cursor: pointer; }
.vr-kind.is-held { cursor: default; opacity: .6; }
.vr-kind-card {
display: flex; flex-direction: column; gap: 7px; height: 100%;
padding: 14px 15px; border-radius: 12px;
background: var(--panel); border: 1px solid var(--line);
box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, background .15s;
}
.vr-kind:hover .vr-kind-card { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.vr-kind input:checked + .vr-kind-card {
border-color: var(--brand);
background: color-mix(in srgb, var(--brand) 5%, var(--panel));
box-shadow: 0 0 0 3px var(--brand-glow);
}
.vr-kind-head { display: flex; align-items: center; gap: 8px; }
.vr-kind-label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.vr-held { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pos); }
.vr-kind-blurb { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.vr-fields { display: flex; flex-direction: column; gap: 12px; }
.vr-label { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.vr-select, .vr-textarea {
width: 100%; box-sizing: border-box; padding: 9px 11px;
border: 1px solid var(--line); border-radius: 9px;
font-family: inherit; font-size: .92rem; background: var(--panel); color: var(--ink);
}
.vr-select:focus, .vr-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.vr-textarea { resize: vertical; }
.vr-mine { margin-top: 8px; }
.vr-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px;
background: var(--panel); margin-bottom: 7px; font-size: .88rem;
}
.vr-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.vr-row-kind { font-weight: 600; color: var(--ink); }
.vr-row-wf { font-size: .82rem; }
.vr-row-note { font-size: .8rem; color: var(--muted); font-style: italic; flex-basis: 100%; }
.vr-row-date { font-family: var(--mono); font-size: .7rem; color: var(--muted); flex: none; }
.vr-status {
flex: none; font-family: var(--mono); font-size: .62rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.vr-status-pending { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
.vr-status-approved { color: var(--pos); border-color: #abefc6; background: #ecfdf3; }
.vr-status-rejected { color: var(--neg); border-color: #fecdca; background: #fef3f2; }
.vr-req .tax-field-head { border-bottom: none; }
.vr-req-who { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.vr-req-msg { margin: 8px 0 0; font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.vr-decide {
display: flex; align-items: center; gap: 9px;
padding: 11px 16px; border-top: 1px solid var(--line); background: var(--panel-2);
}
.vr-note { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: .85rem; background: var(--panel); }
.vr-note:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.vr-reject { flex: none; }
.vr-history-h { margin-top: 26px; }
.pf-verified { vertical-align: 6px; }
/* Admin moderation buttons */
.btn-admin-del { color: var(--neg); border-color: #fecaca; }
.btn-admin-del:hover { background: #fef2f2; border-color: var(--neg); }
.cmt-del-form { margin-left: 4px; }
.cmt-del {
background: none; border: none; cursor: pointer; padding: 0 2px;
font-family: var(--mono); font-size: .66rem; font-weight: 600;
color: var(--muted); border-bottom: 1px dashed var(--line-2);
transition: color .14s, border-color .14s;
}
.cmt-del:hover { color: var(--neg); border-bottom-color: var(--neg); }
/* ============================================================
AI IMPORTER · /import/ — webpage → draft card, chat refinement
============================================================ */
.imp-nokey {
padding: 12px 16px; border-radius: 10px; margin-bottom: 18px;
background: #fef3f2; border: 1px solid #fecdca; color: var(--neg); font-size: .9rem;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.imp-busy {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 10px; margin-bottom: 18px;
background: #eef2ff; border: 1px solid #c7d2fe; color: var(--brand); font-size: .9rem;
}
.imp-busy-dot {
width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none;
animation: imp-pulse 1.1s ease-in-out infinite;
}
@keyframes imp-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.imp-textarea {
width: 100%; box-sizing: border-box; padding: 9px 11px;
border: 1px solid var(--line); border-radius: 9px; resize: vertical;
font-family: inherit; font-size: .92rem; background: #fff; color: var(--ink);
}
.imp-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.imp-wait { font-size: .8rem; color: var(--brand); margin-right: auto; }
.tax-form-actions { align-items: center; gap: 12px; }
.imp-list-h { margin-top: 26px; }
/* Session page: full-width split — chat left, live preview right. */
.page-wide .container { max-width: none; }
.imp-session { max-width: 1640px; margin: 14px auto 30px; }
.imp-session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.imp-session-title { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.005em; margin: 6px 0 4px; }
.imp-back {
display: inline-block; margin-bottom: 4px;
font-family: var(--mono); font-size: .72rem; font-weight: 600;
letter-spacing: .04em; color: var(--muted); text-decoration: none;
}
.imp-back:hover { color: var(--brand); }
.imp-session-src a { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.imp-session-actions { display: flex; align-items: center; gap: 9px; flex: none; padding-top: 6px; }
.imp-split { display: grid; grid-template-columns: minmax(330px, 2fr) 3fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .imp-split { grid-template-columns: 1fr; } }
.imp-col-h { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 10px; }
.imp-col-hint { font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--muted); }
.imp-chat {
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow); padding: 14px 16px;
position: sticky; top: 72px; max-height: calc(100vh - 95px);
display: flex; flex-direction: column;
}
.imp-chat-log { overflow-y: auto; flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.imp-msg { padding: 9px 12px; border-radius: 11px; max-width: 92%; }
.imp-msg-user { align-self: flex-end; background: color-mix(in srgb, var(--brand) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); }
.imp-msg-assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); }
.imp-msg-who { display: block; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.imp-msg-text { margin: 0; font-size: .88rem; line-height: 1.55; white-space: pre-wrap; }
.imp-chat-form { margin-top: 12px; }
.imp-chat-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.imp-lessons-form { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.imp-guidelink { font-size: .78rem; color: var(--muted); }
.imp-preview { min-width: 0; }
.imp-frame {
width: 100%; height: calc(100vh - 150px); min-height: 540px;
border: 1px solid var(--line); border-radius: 14px; background: #fff;
box-shadow: var(--shadow);
}
/* Double-buffered preview: two stacked iframes; the fresh snapshot loads in
the hidden one and crossfades in, so the page itself never flashes. */
.imp-frame-stack { position: relative; height: calc(100vh - 150px); min-height: 540px; }
.imp-frame-abs {
position: absolute; inset: 0; height: 100%; min-height: 0;
opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.imp-frame-abs.is-front { opacity: 1; pointer-events: auto; }
.imp-frame-placeholder { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; }
/* Inline editor on draft cards (admin / author only) — hover any editable
field to see a pencil affordance, click to open a textarea in place. */
.wf-edit-target {
position: relative; cursor: text; border-radius: 8px;
transition: background-color .15s ease, box-shadow .15s ease;
outline-offset: 2px;
}
.wf-edit-target:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.wf-edit-target::after {
content: "✎"; position: absolute; top: 4px; right: 6px;
font-size: .75rem; color: var(--brand); opacity: 0;
transition: opacity .15s ease; pointer-events: none;
}
.wf-edit-target:hover::after { opacity: .85; }
.wf-edit-flash { animation: wf-edit-flash 0.9s ease-out; }
@keyframes wf-edit-flash {
0% { background: color-mix(in srgb, var(--brand) 22%, transparent); }
100% { background: transparent; }
}
.wf-edit-shell {
display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px; border: 1px solid var(--brand);
border-radius: 10px; background: #fff;
box-shadow: 0 0 0 3px var(--brand-glow);
}
.wf-edit-input {
width: 100%; box-sizing: border-box; border: 1px solid var(--line);
border-radius: 8px; padding: 8px 10px; font: inherit; color: inherit;
background: #fff; resize: vertical;
}
.wf-edit-input:focus { outline: none; border-color: var(--brand); }
.wf-edit-shell-mdblock .wf-edit-input { font-family: var(--mono); font-size: .9rem; line-height: 1.55; }
.wf-edit-shell-text .wf-edit-input { font-size: 1rem; }
/* Editing the H1 title: match the heading's typography so the input looks
like an inline replacement, not a tiny popup. Also break the parent flex
so the editor stretches to the full content width. */
.wf-edit-shell-h1 { width: 100%; flex: 1 1 100%; box-sizing: border-box; }
.wf-edit-input-h1 {
font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
letter-spacing: -.005em; padding: 10px 14px;
}
/* While editing the title, give the headmain column 100% of its flex row
so the editor stretches to the actual page width and the action buttons
wrap to the next line. */
.imp-session-head.is-editing-title .imp-session-headmain { flex-basis: 100%; width: 100%; }
.imp-session-head.is-editing-title .imp-session-actions { width: 100%; justify-content: flex-end; }
.wf-edit-actions { display: flex; align-items: center; gap: 10px; }
.wf-edit-state { flex: 1 1 auto; font-size: .8rem; color: var(--muted); }
/* "StatsOtter is typing" bubble */
.imp-msg-typing .imp-msg-text { display: flex; align-items: center; gap: 9px; }
.imp-typing-note { font-size: .8rem; color: var(--muted); }
.imp-dots { display: inline-flex; gap: 4px; align-items: center; }
.imp-dots i {
width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
animation: imp-dot 1.2s ease-in-out infinite;
}
.imp-dots i:nth-child(2) { animation-delay: .18s; }
.imp-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes imp-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Guidelines editor */
.imp-doc-form { padding: 12px 14px; }
.imp-doc-textarea {
width: 100%; box-sizing: border-box; padding: 12px 14px;
border: 1px solid var(--line); border-radius: 10px; resize: vertical;
font-family: var(--mono); font-size: .8rem; line-height: 1.6;
background: #fcfcfd; color: var(--ink); tab-size: 2;
}
.imp-doc-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.imp-doc-actions { margin-top: 9px; }
/* Footer */
.footer { margin-top: 40px; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
/* Sidebar edit history: one row per revision, click for detail. */
.tax-history .tax-head .inline-form { margin-top: 10px; }
.tax-rev-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) 110px 90px;
align-items: center; gap: 14px;
padding: 11px 14px; margin-bottom: 7px;
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
font-size: .88rem;
}
.tax-rev-when { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.tax-rev-label { font-weight: 600; color: var(--ink); text-decoration: none; }
.tax-rev-label:hover { color: var(--brand); }
.tax-rev-diff { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.tax-rev-who { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-align: right; }
.tax-rev-current {
justify-self: end; padding: 2px 9px; border-radius: 999px;
background: color-mix(in srgb, var(--brand) 12%, var(--panel));
color: var(--brand); font-family: var(--mono); font-size: .68rem;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 760px) {
.tax-rev-row { grid-template-columns: 1fr; gap: 6px; }
.tax-rev-who { text-align: left; }
}
/* Knowledge document pages (view/edit/upload). */
.doc-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.doc-form { margin-top: 6px; }
.doc-actions { display: flex; align-items: center; gap: 12px; }
.doc-hint { flex: 1 1 auto; font-size: .8rem; color: var(--muted); }
.doc-errors ul { margin: 8px 0 0 18px; padding: 0; }
.doc-errors li { margin: 3px 0; }
.doc-readonly {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
padding: 16px 18px; font-size: .84rem; line-height: 1.6; overflow-x: auto;
white-space: pre-wrap; word-break: break-word;
}
.doc-history-h { margin-top: 26px; }
.doc-upload-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.doc-file-label { cursor: pointer; }
.doc-template { margin-top: 22px; }
.doc-template summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.doc-template .doc-readonly { margin-top: 10px; }
.doc-dup .inline-form { display: flex; gap: 10px; margin-top: 10px; }
.doc-dup-line { margin: 6px 0 0; }
/* API-key section on Profile settings (outside the form, same card look). */
.api-key-section { margin-top: 18px; }
.api-key-section .hint { margin: 4px 0 12px; }
/* API-key page: lists + modal. */
.api-key-issued {
margin-bottom: 22px; padding: 14px 16px;
background: color-mix(in srgb, var(--brand) 6%, var(--panel));
border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
border-radius: 12px;
}
/* "Not your LLM key" clarification callout in the header. Amber so it reads as
a heads-up distinct from the brand-blue issued-key panel. */
.api-key-clarify {
display: flex; gap: 10px; align-items: flex-start;
/* Equal breathing room above and below — the 4px bottom margin let the
"Active keys" heading sit too close under the box. */
margin: 16px 0 18px; padding: 12px 14px;
background: color-mix(in srgb, #f59e0b 9%, var(--panel));
border: 1px solid color-mix(in srgb, #f59e0b 32%, var(--line));
border-radius: 12px;
}
.api-key-clarify-mark { color: #b45309; font-size: 1rem; line-height: 1.5; flex: none; }
.api-key-clarify p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.api-key-clarify strong { color: var(--ink); }
.api-key-issued-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.api-key-issued-dot { color: var(--brand); font-size: .9rem; }
.api-key-issued-warn { color: var(--muted); font-size: .82rem; }
.api-key-list { margin-bottom: 22px; }
.api-key-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.api-key-list-head .form-section-title { margin: 0; }
.api-key-row {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
align-items: center; gap: 14px;
padding: 11px 14px; margin-bottom: 7px;
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
font-size: .88rem;
}
.api-key-row-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.api-key-label { font-weight: 600; color: var(--ink); }
.api-key-mask { font-family: var(--mono); font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.api-key-meta { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.api-key-expired { color: var(--neg); font-weight: 600; }
.api-key-dead-list { opacity: .85; }
.api-key-row-dead { background: color-mix(in srgb, var(--panel) 92%, var(--ink) 8%); border-style: dashed; }
.api-key-row-dead .api-key-label { color: var(--muted); }
.api-key-x {
width: 26px; height: 26px; padding: 0; line-height: 1;
background: transparent; border: 1px solid var(--line); border-radius: 50%;
color: var(--muted); font-size: 1.1rem; cursor: pointer;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.api-key-x:hover { color: var(--neg); border-color: var(--neg); background: #fef2f2; }
@media (max-width: 720px) {
.api-key-row { grid-template-columns: 1fr; gap: 6px; }
.api-key-list-head { flex-direction: column; align-items: flex-start; }
}
/* Site-wide centered modal (sd- prefix avoids any naming collisions). */
body.modal-open { overflow: hidden; }
.sd-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sd-modal[hidden] { display: none !important; }
.sd-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .48); backdrop-filter: blur(4px); }
.sd-modal-card {
position: relative; width: 100%; max-width: 480px;
background: var(--panel); border-radius: 16px; padding: 22px 24px 18px;
box-shadow: 0 32px 80px -20px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .05);
animation: sdModalIn .22s cubic-bezier(.2, .8, .3, 1.05);
}
@keyframes sdModalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.sd-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.sd-modal-head h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0; letter-spacing: -.005em; }
.sd-modal-x { background: none; border: 0; cursor: pointer; font-size: 1.55rem; line-height: 1; color: var(--muted); padding: 0 4px; }
.sd-modal-x:hover { color: var(--ink); }
.sd-modal-warn { display: block; margin: 4px 0 6px; font-size: .85rem; line-height: 1.6; }
.sd-modal-card .field { margin-top: 14px; }
.sd-modal-card .field + .field { margin-top: 18px; }
.sd-modal-opt { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sd-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-pill {
display: inline-flex; align-items: center; cursor: pointer;
padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
background: #fff; font-size: .85rem; color: var(--ink-2);
letter-spacing: 0; text-transform: none; font-weight: 500;
transition: border-color .15s, background .15s, color .15s;
}
.sd-pill input { position: absolute; opacity: 0; pointer-events: none; }
.sd-pill:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); color: var(--brand); }
.sd-pill:has(input:checked) {
border-color: var(--brand);
background: color-mix(in srgb, var(--brand) 10%, #fff);
color: var(--brand); font-weight: 700;
}
.sd-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.compose-head-actions { display: flex; gap: 10px; align-items: center; flex: none; }
/* Account pages (allauth) — restrained, matches the rest of the forms. */
.auth-page { max-width: 460px; }
.auth-page .stacked-form { margin-top: 14px; }
.btn-google {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 11px 14px; border-radius: 12px;
background: #fff; color: var(--ink); border: 1.5px solid var(--line);
font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.btn-google span { width: 22px; height: 22px; border-radius: 50%;
background: conic-gradient(#4285F4, #EA4335, #FBBC05, #34A853, #4285F4);
color: #fff; font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.btn-google:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: .8rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.auth-alt { margin-top: 14px; font-size: .85rem; color: var(--muted); }
/* Auth pages: narrow centered variant + email-sent emoji + live password rules */
.auth-page.auth-narrow { max-width: 460px; }
.auth-page.auth-narrow h1 { margin: 6px 0 10px; }
.auth-page.auth-narrow p { color: var(--ink-2); line-height: 1.6; }
.auth-page .auth-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.auth-page .auth-hint { font-size: .82rem; color: var(--muted); }
.auth-page .form-actions { margin-top: 14px; }
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.pw-rules li {
position: relative; padding-left: 23px; font-size: .82rem; color: var(--muted);
transition: color .15s ease;
}
.pw-rules li::before {
content: "○"; position: absolute; left: 5px; top: -1px; color: var(--line-2);
font-size: .9rem; transition: color .15s ease;
}
.pw-rules li.is-pending { color: var(--ink-2); }
.pw-rules li.is-pending::before { content: "○"; color: var(--muted); }
.pw-rules li.is-ok { color: var(--pos); }
.pw-rules li.is-ok::before { content: "✓"; color: var(--pos); font-weight: 800; }
/* Inline checkbox row (e.g. "Remember me") — keep the box small & beside text */
.field-check {
display: flex; align-items: center; gap: 9px; cursor: pointer;
font-size: .9rem; font-weight: 500; color: var(--ink-2);
text-transform: none; letter-spacing: 0; margin: 2px 0;
}
.field-check span { user-select: none; }
.stacked-form .field-check input[type=checkbox],
.stacked-form input[type=checkbox] {
width: 18px; height: 18px; min-width: 18px; margin: 0; padding: 0;
accent-color: var(--brand); box-shadow: none; border-radius: 5px;
flex: none; background: #fff;
}
/* ============================================================
THEME · QUIET — tech-data confident (body.theme-quiet)
A calm professional look that doesn't lose the science feel:
bright workspace + a dark navigation chrome, ONE precise accent
(electric-cyan/indigo) for action, mono-numbers for stats, fine
hairlines and intentional shadows for depth. Toggle off with
SITE_THEME=classic in .env.
============================================================ */
body.theme-quiet {
--bg: #eef1f8; /* clean cool paper */
--panel: #ffffff;
--panel-2: #eef1f7;
--panel-3: #e3e8f2;
--ink: #0b1424; /* deep slate */
--ink-2: #2b3548;
--muted: #6b7588;
--line: #e2e6ee;
--line-2: #c9d0dc;
/* One accent. Used sparingly: primary buttons, active states, hover focus. */
--brand: #2563eb; /* electric indigo-blue */
--brand-2: #1e40af;
--brand-glow: rgba(37, 99, 235, .14);
--brand-tint: rgba(37, 99, 235, .07);
/* Dark chrome (topbar / hero strip / data dashboards) */
--chrome: #0e1424;
--chrome-2: #161d31;
--chrome-ink: #e7ecf6;
--chrome-muted: #8993ab;
--pos: #047857;
--neg: #b91c1c;
--radius: 10px;
--shadow: 0 1px 1px rgba(11,20,36,.04), 0 1px 2px rgba(11,20,36,.05);
--shadow-elev: 0 14px 36px -18px rgba(11,20,36,.22), 0 2px 6px rgba(11,20,36,.06);
background-color: var(--bg);
background-image:
linear-gradient(to right, rgba(11,20,36,.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11,20,36,.035) 1px, transparent 1px);
background-size: 48px 48px;
font-size: 15.5px;
line-height: 1.6;
}
/* — A pale, drifting cool aurora. With backdrop-filter glass working
(no zoom), this is what frosts THROUGH the cards and shows as slowly
flowing colour. Kept light-blue/periwinkle and modest so the page
stays clean while the motion is visible through the frost. — */
/* Faint static base tint — the lively motion lives in .bg-aurora below. */
body.theme-quiet::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(60% 50% at 50% -5%, rgba(96,165,250,.05), transparent 70%),
radial-gradient(60% 50% at 50% 105%, rgba(125,211,252,.045), transparent 70%);
}
/* ── "Otter" aurora: soft pale-blue blobs that bound and hop around the
page independently (springy overshoot easing = lively, puppy-like),
instead of one flat drift. Sits behind everything; the glass cards
frost the motion as a blob passes behind them. ── */
body.theme-quiet .bg-aurora {
display: block; position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
body.theme-quiet .bg-aurora span {
position: absolute; border-radius: 50%;
/* Less blur + smaller sizes (below) so each blob reads as a distinct
bounding "otter", not one uniform haze. */
filter: blur(50px); will-change: transform;
}
/* Springy overshoot easing gives the playful "Otter hop" — kept at a calm
tempo and light colour so it's lively, not distracting. */
/* Springy overshoot easing = the playful "Otter hop"; the blobs roam the
whole viewport (puppy bounding across the page). Colours kept very
faint so all that motion doesn't tint the page blue. */
/* Five compact, distinct blobs — each reads as its own bounding puppy.
Springy overshoot easing + the wide hoppy paths below = several otters
bounding across the screen. Visible enough to register, small enough
not to flood the page with blue. */
body.theme-quiet .bg-aurora span:nth-child(1) {
width: 22vw; height: 22vw; left: -2%; top: -2%;
background: radial-gradient(circle, rgba(59,130,246,.34), transparent 66%);
animation: otter-bound-1 9.5s cubic-bezier(.5,-.45,.5,1.55) infinite;
}
body.theme-quiet .bg-aurora span:nth-child(2) {
width: 19vw; height: 19vw; right: 0%; top: -2%;
background: radial-gradient(circle, rgba(37,99,235,.32), transparent 66%);
animation: otter-bound-2 12s cubic-bezier(.5,-.45,.5,1.55) infinite;
}
body.theme-quiet .bg-aurora span:nth-child(3) {
width: 21vw; height: 21vw; left: 4%; bottom: -6%;
background: radial-gradient(circle, rgba(99,102,241,.30), transparent 66%);
animation: otter-bound-3 13.5s cubic-bezier(.5,-.45,.5,1.55) infinite;
}
body.theme-quiet .bg-aurora span:nth-child(4) {
width: 20vw; height: 20vw; right: 2%; bottom: -4%;
background: radial-gradient(circle, rgba(59,130,246,.32), transparent 66%);
animation: otter-bound-4 10.5s cubic-bezier(.5,-.45,.5,1.55) infinite;
}
body.theme-quiet .bg-aurora span:nth-child(5) {
width: 16vw; height: 16vw; left: 42%; top: 36%;
background: radial-gradient(circle, rgba(37,99,235,.26), transparent 66%);
animation: otter-bound-5 8.5s cubic-bezier(.5,-.45,.5,1.55) infinite;
}
/* Each path has little vertical "hops" (the y value dips up between
steps) so the blob springs along like a trotting puppy, not a smooth
glide. Kept short in range + faint in colour so it stays ambient. */
/* Wide paths (puppy bounding across the whole viewport) with little
vertical hops between steps for the springy trot. */
@keyframes otter-bound-1 {
0%,100% { transform: translate(0,0) scale(1); }
20% { transform: translate(28vw, -10vh) scale(1.1); }
40% { transform: translate(58vw, 22vh) scale(.9); }
60% { transform: translate(86vw, -8vh) scale(1.08); }
80% { transform: translate(40vw, 30vh) scale(.94); }
}
@keyframes otter-bound-2 {
0%,100% { transform: translate(0,0) scale(1); }
20% { transform: translate(-26vw, -12vh) scale(1.09); }
40% { transform: translate(-56vw, 24vh) scale(.9); }
60% { transform: translate(-84vw, -6vh) scale(1.08); }
80% { transform: translate(-38vw, 32vh) scale(.94); }
}
@keyframes otter-bound-3 {
0%,100% { transform: translate(0,0) scale(1); }
20% { transform: translate(30vw, 10vh) scale(1.08); }
40% { transform: translate(60vw, -22vh) scale(.9); }
60% { transform: translate(90vw, 6vh) scale(1.07); }
80% { transform: translate(42vw, -28vh) scale(.94); }
}
@keyframes otter-bound-4 {
0%,100% { transform: translate(0,0) scale(1); }
20% { transform: translate(-28vw, 12vh) scale(1.07); }
40% { transform: translate(-58vw, -22vh) scale(.9); }
60% { transform: translate(-86vw, 6vh) scale(1.08); }
80% { transform: translate(-40vw, -30vh) scale(.94); }
}
@keyframes otter-bound-5 {
0%,100% { transform: translate(0,0) scale(1); }
20% { transform: translate(-40vw, -22vh) scale(1.1); }
40% { transform: translate(34vw, -26vh) scale(.88); }
60% { transform: translate(48vw, 24vh) scale(1.08); }
80% { transform: translate(-34vw, 26vh) scale(.92); }
}
/* Phones: the otter wash sits BEHIND the feed (z:0, like desktop). The cards are
frosted glass (translucent + backdrop-blur, see the mobile .feed-card rule),
so the bouncing blobs glow through the card surface; and chart images use
mix-blend-mode: multiply, so the blobs also show through the figure's white
areas. Blobs are bumped brighter/larger than desktop so they read clearly
through the glass. */
@media (max-width: 1020px) {
body.theme-quiet .bg-aurora {
z-index: 0; /* BEHIND .page (z:1) — a background, not an overlay */
pointer-events: none;
}
body.theme-quiet .bg-aurora span { filter: blur(40px); }
body.theme-quiet .bg-aurora span:nth-child(1) {
width: 38vw; height: 38vw;
background: radial-gradient(circle, rgba(37,99,235,.66), transparent 66%);
}
body.theme-quiet .bg-aurora span:nth-child(2) {
width: 34vw; height: 34vw;
background: radial-gradient(circle, rgba(59,130,246,.62), transparent 66%);
}
body.theme-quiet .bg-aurora span:nth-child(3) {
width: 36vw; height: 36vw;
background: radial-gradient(circle, rgba(99,102,241,.58), transparent 66%);
}
body.theme-quiet .bg-aurora span:nth-child(4) {
width: 32vw; height: 32vw;
background: radial-gradient(circle, rgba(37,99,235,.62), transparent 66%);
}
body.theme-quiet .bg-aurora span:nth-child(5) {
width: 30vw; height: 30vw;
background: radial-gradient(circle, rgba(59,130,246,.58), transparent 66%);
}
}
@media (prefers-reduced-motion: reduce) {
body.theme-quiet .bg-aurora span { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
body.theme-quiet::before { animation: none; }
}
body.theme-quiet .page, body.theme-quiet .footer { position: relative; z-index: 1; }
body.theme-quiet .topbar { position: relative; z-index: 50; }
body.theme-quiet .nav-menu-panel { z-index: 60; }
/* ── Topbar instrument readouts: small monospace dashboard chips
sandwiched between the brand and the user nav, so the chrome reads
like a control panel rather than a SaaS header. Glass-tinted to
match the cards below. ── */
body.theme-quiet .topbar-readouts {
display: inline-flex; align-items: center; gap: 14px;
margin-right: 16px; padding-right: 16px;
border-right: 1px solid rgba(11,20,36,.12);
}
body.theme-quiet .tb-readout {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 11px 5px 9px; border-radius: 7px;
background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.4));
border: 1px solid rgba(37,99,235,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(30,58,138,.05);
font-family: var(--mono); font-size: .64rem;
letter-spacing: .14em; text-transform: uppercase;
white-space: nowrap;
}
/* leading data-tick — a small glowing brand bar, like a channel indicator */
body.theme-quiet .tb-readout::before {
content: ""; width: 2px; height: 11px; border-radius: 1px;
background: linear-gradient(180deg, #3b82f6, #4f46e5);
box-shadow: 0 0 6px rgba(59,130,246,.45);
}
body.theme-quiet .tb-readout-status { padding-left: 11px; }
body.theme-quiet .tb-readout-status::before { display: none; }
body.theme-quiet .tb-readout-k { color: var(--muted); }
body.theme-quiet .tb-readout-v {
color: var(--ink);
font-feature-settings: "tnum"; font-weight: 700;
letter-spacing: .04em;
}
/* "LIVE · UPLINK" status chip — slightly highlighted with a pulsing
green dot to signal real-time uplink. */
body.theme-quiet .tb-readout-status {
background: rgba(52,211,153,.08);
border-color: rgba(52,211,153,.24);
}
body.theme-quiet .tb-readout-status .tb-readout-k { color: #34d399; }
body.theme-quiet .tb-readout-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #34d399;
box-shadow: 0 0 6px rgba(52,211,153,.7);
animation: tb-pulse 2.4s ease-in-out infinite;
}
@keyframes tb-pulse {
0%, 100% { box-shadow: 0 0 4px rgba(52,211,153,.55); }
50% { box-shadow: 0 0 10px rgba(52,211,153,.95); }
}
/* Animated "signal bars" indicator for the live uplink chip — four small
bars that rise + fall on staggered timings, like an audio EQ readout. */
body.theme-quiet .tb-signal {
display: inline-flex; align-items: flex-end; gap: 2px;
height: 11px;
}
body.theme-quiet .tb-signal i {
display: block; width: 2px; height: 4px;
background: #34d399; border-radius: 1px;
box-shadow: 0 0 4px rgba(52,211,153,.55);
transform-origin: bottom;
animation: tb-signal-bar 1.1s ease-in-out infinite;
}
body.theme-quiet .tb-signal i:nth-child(1) { animation-delay: 0s; }
body.theme-quiet .tb-signal i:nth-child(2) { animation-delay: .15s; }
body.theme-quiet .tb-signal i:nth-child(3) { animation-delay: .3s; }
body.theme-quiet .tb-signal i:nth-child(4) { animation-delay: .45s; }
@keyframes tb-signal-bar {
0%, 100% { transform: scaleY(.35); }
50% { transform: scaleY(2.4); }
}
@media (prefers-reduced-motion: reduce) {
body.theme-quiet .tb-readout-dot,
body.theme-quiet .tb-signal i { animation: none; }
}
/* (Topbar corner brackets removed — they read as floating debris.
The chrome's tech feel comes from the readout chips + the calm
hairline divider, not decorative frame corners.) */
/* On narrower desktop widths drop the status chip first; on tablet drop
the peers number; on phone hide the whole cluster (the topbar already
gets compact rules elsewhere). */
@media (max-width: 1180px) {
body.theme-quiet .tb-readout-status { display: none; }
}
@media (max-width: 980px) {
body.theme-quiet .topbar-readouts .tb-readout:nth-child(2) { display: none; }
}
@media (max-width: 760px) {
body.theme-quiet .topbar-readouts {
display: none;
}
}
/* — Links: ink by default, brand only on hover. No purple flood — */
body.theme-quiet a:not(.btn):not(.feed-src):not(.rail-link):not(.feed-card-link) { color: var(--ink-2); transition: color .12s; }
body.theme-quiet a:not(.btn):not(.feed-src):not(.rail-link):not(.feed-card-link):hover { color: var(--brand); }
/* — Mono numerals everywhere stats live (tech feel without visual noise) — */
body.theme-quiet .vote-score, body.theme-quiet .feed-likes-n,
body.theme-quiet .rail-count, body.theme-quiet .status-num,
body.theme-quiet .feed-cmts, body.theme-quiet .api-key-mask,
body.theme-quiet .api-key-meta { font-family: var(--mono); font-feature-settings: "tnum"; }
/* ──────────────── TOPBAR · dark navigation chrome ──────────────── */
body.theme-quiet .topbar {
/* Frosted-glass navy chrome: translucent + backdrop blur so the feed
softly blurs behind it on scroll (modern, premium). */
background:
repeating-linear-gradient(90deg, rgba(37,99,235,.045) 0 1px, transparent 1px 72px),
linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.54) 100%);
-webkit-backdrop-filter: saturate(150%) blur(18px);
backdrop-filter: saturate(150%) blur(18px);
border-bottom: 1px solid rgba(255,255,255,.65);
box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 10px 30px -22px rgba(30,58,138,.22);
}
/* Align the topbar inner row with the feed content below by reading from
the SAME variables the feed page uses — including the zoom. Without the
matching zoom the topbar (1760px) is wider than the zoomed feed (1408px
visual), so the logo sits left of the rail. !important because the base
.container rule's max-width has matching specificity in some cascades. */
body.theme-quiet .topbar-inner {
/* Keep the topbar IDENTICAL on every page. The feed (widest page) sets
--feed-page-max / --feed-page-px; other pages don't, so fall back to the
same literals. Without this, detail/profile/auth pages dropped to the
1200px .container width and the brand + readouts visibly "narrowed" when
navigating off the feed. */
max-width: var(--feed-page-max, 1620px) !important;
padding: 0 var(--feed-page-px, 28px) !important;
}
/* The +Post button lives in the topbar as a normal .btn-post chip. The
bottom-right floating slot is now owned by the StatsClaw chat FAB (CSS
for it lives near the end of this file). */
/* Bottom edge of the bar: a single, calm hairline. (The animated cyan
scanline was removed — it read as gaudy.) */
body.theme-quiet .topbar::after {
display: block; height: 1px; opacity: 1; border: 0;
background: linear-gradient(90deg, transparent 0%, rgba(37,99,235,.0) 8%, rgba(37,99,235,.5) 22%, rgba(99,102,241,.6) 50%, rgba(37,99,235,.5) 78%, rgba(37,99,235,0) 92%, transparent 100%);
background-size: 240% 100%;
animation: tb-scan 9s linear infinite;
}
@keyframes tb-scan { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { body.theme-quiet .topbar::after { animation: none; background-position: 50% 0; } }
body.theme-quiet .brand, body.theme-quiet .brand-name { color: var(--ink); }
/* "Otter" picks up a soft cyan gradient — a small typographic detail that
reads as premium, never neon. */
body.theme-quiet .brand-name-acc {
background: linear-gradient(180deg, #3b82f6 0%, #4f46e5 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
body.theme-quiet .brand-mark {
/* A holographic chip: navy plate with a subtle cyan-blue gradient
inside and a hairline rim. Hover lifts a faint glow. */
background:
radial-gradient(120% 80% at 50% -10%, rgba(125,211,252,.22), transparent 60%),
linear-gradient(180deg, #1e3a8a, #16213f);
color: #bae6fd;
border: 1px solid rgba(147,197,253,.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(96,165,250,.05);
transition: box-shadow .3s ease, border-color .25s ease;
}
body.theme-quiet .brand:hover .brand-mark {
border-color: rgba(147,197,253,.6);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 16px -4px rgba(96,165,250,.45);
}
/* When the mascot image is present, swap the navy σ chip for a soft white
tile so the otter's dark outline and blue hood read on the dark topbar. */
body.theme-quiet .brand-mark:has(.brand-logo-img) {
background: transparent;
border-color: transparent;
box-shadow: none;
}
body.theme-quiet .brand:hover .brand-mark:has(.brand-logo-img) {
box-shadow: none; transform: translateY(-1px);
}
/* Mono small-caps tagline — instrument label detail (no sci-fi noise).
The ::after appends a precise build/version tag like a lab software
readout ("CAUSAL INFERENCE WORKFLOWS v0.1 · BETA"). */
body.theme-quiet .brand-tag {
color: var(--muted);
font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
display: inline-flex; align-items: baseline; gap: 10px;
}
body.theme-quiet .brand-tag::after {
content: "v0.1 · BETA";
padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 3px;
color: var(--brand); letter-spacing: .14em; font-size: .58rem;
}
/* Thin vertical hairline before the right nav, like a panel rule on a
control surface. Keep margin-left: auto (set by the base .nav-right
rule) so the nav stays pushed to the far right — overriding it
clusters the whole bar on the left. */
body.theme-quiet .nav-right { position: relative; padding-left: 16px; }
body.theme-quiet .nav-right::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 22px;
background: linear-gradient(180deg, transparent, rgba(11,20,36,.14), transparent);
}
/* !important required: the generic theme rule
`body.theme-quiet a:not(.btn):not(.feed-src)...{ color: var(--ink-2) }` has
higher specificity (0,6,1) than .topbar a (0,3,1) and was painting
"Log in" dark slate on dark navy = unreadable. */
body.theme-quiet .topbar a:not(.btn) { color: var(--ink-2) !important; }
/* !important is required: a generic theme rule
`body.theme-quiet a:not(.btn):not(.feed-src)...:hover { color: var(--brand) }`
has higher specificity (0,6,2) than `.topbar a:not(.btn):hover` (0,4,2)
and would push the trigger text to blue — which disappears against the
dark navy chrome. Force it light. */
body.theme-quiet .topbar a:not(.btn):hover { color: var(--brand) !important; }
body.theme-quiet .topbar .nav-menu-trigger:hover .nav-menu-name,
body.theme-quiet .topbar .nav-menu-trigger:hover .nav-menu-caret { color: var(--brand) !important; }
/* The base sets `.nav-menu-trigger:hover { background: #f3f4f6 }` (a light
gray meant for the light theme). On the dark navy bar the white-on-hover
text disappears against that light pill. Override to a translucent
highlight that works on dark chrome. */
body.theme-quiet .topbar .nav-menu-trigger:hover {
background: rgba(37,99,235,.08);
}
/* Peers readout removed per request — too "dashboard". */
body.theme-quiet .status-peers { display: none; }
/* Generic status pill kept neutral in case it's used elsewhere. */
body.theme-quiet .status-pill {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--chrome-ink);
}
body.theme-quiet .status-pill .status-num { color: var(--chrome-ink); }
body.theme-quiet .status-pill .status-label { color: var(--chrome-muted); }
body.theme-quiet .status-orb { background: #34d399; box-shadow: none; }
body.theme-quiet .nav-menu-name { color: var(--ink-2); }
body.theme-quiet .nav-menu-caret { color: var(--muted); }
body.theme-quiet .nav-menu-panel { background: #fff; box-shadow: 0 18px 50px -16px rgba(11,20,36,.40), 0 2px 6px rgba(11,20,36,.10); }
/* The dropdown panel sits inside .topbar — and the topbar rule
`body.theme-quiet .topbar a:not(.btn) { color: var(--chrome-ink) !important }`
(specificity 0,3,2, !important) was painting the panel's items in
chrome-ink (a light colour intended for the dark topbar bg), making them
near-invisible on the dropdown's white background.