/* ============================================================================
genbuzz — "Signal" design system
Cool neutrals · Hanken Grotesk + JetBrains Mono · vivid color-coded categories
Light is default; [data-theme="dark"] on flips every token.
========================================================================== */
:root {
/* neutrals — light */
--bg: oklch(0.984 0.003 255);
--surface: #ffffff;
--surface-2: oklch(0.972 0.004 262);
--surface-3: oklch(0.955 0.005 262);
--ink: oklch(0.26 0.02 262);
--ink-2: oklch(0.38 0.018 262);
--muted: oklch(0.52 0.015 262);
--faint: oklch(0.65 0.012 262);
--line: oklch(0.92 0.005 262);
--line-2: oklch(0.87 0.007 262);
--brand: oklch(0.55 0.16 252);
--brand-2: oklch(0.50 0.17 252);
--brand-tint:oklch(0.96 0.04 252);
--on-brand: #fff;
--ok: oklch(0.56 0.13 150);
--ok-ink: oklch(0.45 0.13 150);
--ok-tint: oklch(0.95 0.05 150);
--danger: oklch(0.55 0.18 28);
--danger-ink:oklch(0.47 0.18 28);
--danger-tint:oklch(0.955 0.04 28);
--accent-ink: oklch(0.45 0.22 293);
--shadow-sm: 0 1px 2px rgba(20,22,40,.04), 0 1px 3px rgba(20,22,40,.03);
--shadow-md: 0 2px 8px rgba(20,22,40,.06), 0 8px 24px rgba(20,22,40,.05);
--shadow-lg: 0 8px 24px rgba(20,22,40,.08), 0 24px 64px rgba(20,22,40,.08);
--radius: 16px;
--radius-sm: 9px;
/* category colors — light */
--c-tool:252; /* hue, used only for reference */
--cat-tool: oklch(0.58 0.158 252); --cat-tool-ink: oklch(0.45 0.158 252); --cat-tool-tint: oklch(0.962 0.05 252); --cat-tool-line: oklch(0.86 0.09 252);
--cat-event: oklch(0.58 0.158 305); --cat-event-ink: oklch(0.46 0.158 305); --cat-event-tint: oklch(0.962 0.05 305); --cat-event-line: oklch(0.87 0.08 305);
--cat-funding: oklch(0.55 0.150 150); --cat-funding-ink: oklch(0.44 0.150 150); --cat-funding-tint: oklch(0.955 0.05 150); --cat-funding-line: oklch(0.85 0.09 150);
--cat-acquisition: oklch(0.56 0.130 190); --cat-acquisition-ink: oklch(0.44 0.130 190); --cat-acquisition-tint: oklch(0.957 0.045 190); --cat-acquisition-line: oklch(0.85 0.08 190);
--cat-research: oklch(0.60 0.140 78); --cat-research-ink: oklch(0.47 0.130 78); --cat-research-tint: oklch(0.962 0.06 78); --cat-research-line: oklch(0.87 0.09 78);
--cat-legal: oklch(0.57 0.180 28); --cat-legal-ink: oklch(0.47 0.180 28); --cat-legal-tint: oklch(0.96 0.05 28); --cat-legal-line: oklch(0.87 0.08 28);
--cat-general: oklch(0.60 0.004 262); --cat-general-ink: oklch(0.46 0.006 262); --cat-general-tint: oklch(0.955 0.003 262); --cat-general-line: oklch(0.88 0.004 262);
}
[data-theme="dark"] {
--bg: oklch(0.178 0.012 264);
--surface: oklch(0.214 0.013 264);
--surface-2: oklch(0.244 0.013 264);
--surface-3: oklch(0.275 0.014 264);
--ink: oklch(0.945 0.008 264);
--ink-2: oklch(0.82 0.01 264);
--muted: oklch(0.68 0.012 264);
--faint: oklch(0.55 0.012 264);
--line: oklch(0.30 0.012 264);
--line-2: oklch(0.37 0.013 264);
--brand: oklch(0.70 0.15 252);
--brand-2: oklch(0.76 0.14 252);
--brand-tint:oklch(0.32 0.08 252);
--on-brand: oklch(0.16 0.02 262);
--ok: oklch(0.74 0.15 150);
--ok-ink: oklch(0.80 0.13 150);
--ok-tint: oklch(0.30 0.07 150);
--danger: oklch(0.68 0.17 28);
--danger-ink:oklch(0.78 0.14 28);
--danger-tint:oklch(0.32 0.08 28);
--accent-ink: oklch(0.82 0.15 293);
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 2px 8px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
--shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.45);
--cat-tool: oklch(0.74 0.150 252); --cat-tool-ink: oklch(0.82 0.12 252); --cat-tool-tint: oklch(0.33 0.08 252); --cat-tool-line: oklch(0.48 0.10 252);
--cat-event: oklch(0.74 0.150 305); --cat-event-ink: oklch(0.83 0.11 305); --cat-event-tint: oklch(0.33 0.08 305); --cat-event-line: oklch(0.50 0.10 305);
--cat-funding: oklch(0.74 0.150 150); --cat-funding-ink: oklch(0.82 0.13 150); --cat-funding-tint: oklch(0.31 0.08 150); --cat-funding-line: oklch(0.46 0.10 150);
--cat-acquisition: oklch(0.74 0.120 190); --cat-acquisition-ink: oklch(0.82 0.10 190); --cat-acquisition-tint: oklch(0.31 0.07 190); --cat-acquisition-line: oklch(0.47 0.09 190);
--cat-research: oklch(0.78 0.140 78); --cat-research-ink: oklch(0.84 0.12 78); --cat-research-tint: oklch(0.33 0.07 78); --cat-research-line: oklch(0.50 0.10 78);
--cat-legal: oklch(0.72 0.170 28); --cat-legal-ink: oklch(0.81 0.13 28); --cat-legal-tint: oklch(0.33 0.09 28); --cat-legal-line: oklch(0.50 0.12 28);
--cat-general: oklch(0.70 0.006 264); --cat-general-ink: oklch(0.80 0.008 264); --cat-general-tint: oklch(0.30 0.006 264); --cat-general-line: oklch(0.44 0.008 264);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
.mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--brand-tint); }
/* ── App shell ──────────────────────────────────────────────────────── */
.app { min-height: 100%; background: var(--bg); transition: background .25s; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }
/* ── Flash toasts ───────────────────────────────────────────────────── */
.flash-stack { position: fixed; top: 116px; left: 50%; transform: translateX(-50%); z-index: 60;
display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 24px); }
.flash { padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.35;
border: 1px solid; box-shadow: var(--shadow-sm); cursor: pointer; animation: flash-in .18s ease-out; }
.flash-success { background: var(--ok-tint); color: var(--ok-ink); border-color: color-mix(in oklch, var(--ok) 35%, transparent); }
.flash-error { background: var(--danger-tint); color: var(--danger-ink); border-color: color-mix(in oklch, var(--danger) 35%, transparent); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
/* ── Header / nav ───────────────────────────────────────────────────── */
.hd { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--surface) 88%, transparent);
backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.hd-row { display: flex; align-items: center; gap: 18px; height: 52px; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex: 0 0 auto; }
.logo-img { display: block; height: 27px; width: auto; }
/* Tagline beneath the wordmark — signed-out visitors, all viewports.
margin-left ≈ asterisk width so the line starts under the "g", not the logo mark. */
.logo-tagline { display: block; margin-left: 16px; font-size: 11px; font-style: italic; line-height: 1.15; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
@media (max-width: 560px) {
.hd-row { height: auto; padding: 8px 0; }
}
/* Wordmark color scheme for "genbuzz" in body copy (matches the logo). */
.wm-gen { color: var(--brand); }
.wm-buzz { color: var(--ok-ink, var(--ok)); }
/* Inline SVG wordmark dropped into copy in place of the word "genbuzz".
The traced lockup sits 0.209·height below its baseline (the g descender). */
.wm-inline { height: 1.1em; width: auto; vertical-align: -0.23em; }
/* Collapsed it's a 38px magnifier sitting just to the right of the filters; the
.is-searching state (set by search_reveal_controller) expands it in place over the
filter row — the filters hide so the row keeps its height (no jump). */
.search { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
width: 38px; height: 38px; padding: 0 9px; background: var(--surface); border: 1px solid var(--line-2);
border-radius: 999px; color: var(--faint); font-size: 14px; cursor: text; overflow: hidden; white-space: nowrap;
transition: width .28s cubic-bezier(.4, 0, .2, 1), border-color .15s; }
.search:hover { border-color: var(--faint); }
.search .search-ic { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; color: var(--muted); }
.search input { border: 0; background: transparent; outline: none; font: inherit; color: var(--ink); flex: 1; min-width: 0;
opacity: 0; transition: opacity .18s ease; }
.search input::placeholder { color: var(--faint); }
.subnav.is-searching .search { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); z-index: 2; width: 60%; }
.subnav.is-searching .search input { opacity: 1; }
/* Hide the filter links while searching so the search overlays the same row (no height jump). */
.subnav.is-searching .navlink { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .search, .search input, .subnav-row { transition: none; } }
.hd-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hd-acts-inline { display: contents; }
/* Mobile collapses the theme toggle + Sign in behind a "…" disclosure (see media query). */
.hd-more { position: relative; display: none; }
/* Info/legal dropdown: shown on desktop, hidden on mobile where its links fold into
the overflow/account menu instead. */
.hd-info { position: relative; display: inline-flex; }
/* Legal links inside the account/overflow menu are mobile-only (the desktop info
dropdown is their home there). `contents` keeps them as direct flex children of the menu. */
.menu-mobile-only { display: contents; }
/* Placed after the base rules above so these overrides win on mobile (equal specificity). */
@media (max-width: 560px) {
.hd-acts-inline { display: none; }
.hd-more { display: block; }
.hd-info { display: none; }
}
@media (min-width: 561px) {
.menu-mobile-only { display: none; }
}
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface);
display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.avatar { display: inline-flex; align-items: center; gap: 5px; height: 40px; border: 0; padding: 0; background: transparent; color: var(--muted); cursor: pointer; }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
background: linear-gradient(135deg, oklch(0.7 0.13 252), oklch(0.62 0.15 305)); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }
.avatar-caret { transition: transform .15s ease; }
.avatar[aria-expanded="true"] .avatar-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .avatar-caret { transition: none; } }
.usermenu { position: relative; display: inline-flex; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 184px; padding: 6px; z-index: 50;
background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 2px; }
.menu[hidden] { display: none; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.menu-item:hover { background: var(--surface-2); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu .button_to { margin: 0; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn-ghost:hover { background: var(--surface-2); }
/* secondary nav (categories) + the expandable search */
.subnav { border-bottom: 1px solid var(--line); background: var(--surface); }
.subnav .wrap { position: relative; }
.subnav-row { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px;
overflow-x: auto; scrollbar-width: none; }
.subnav-row::-webkit-scrollbar { display: none; }
.navlink { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; border: 1px solid transparent; transition: all .14s; }
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink .dot { width: 8px; height: 8px; border-radius: 50%; }
.navlink.on { background: var(--ink); color: var(--surface); }
.navlink.on .dot { box-shadow: 0 0 0 2px color-mix(in oklch, var(--surface) 40%, transparent); }
.navlink .x { display:none; }
/* ── Category pill ──────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-radius: 7px;
font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--on-cat, #fff); background: var(--cat, var(--brand)); white-space: nowrap; }
.pill.lg { height: 28px; font-size: 13px; padding: 0 13px; }
/* Neutral fallback so .pill.soft is visible outside a category scope (e.g. the
"aggregator" badge on the sources list), where --cat-tint/--cat-ink are undefined. */
.pill.soft { background: var(--cat-tint, var(--surface-2)); color: var(--cat-ink, var(--ink-2)); }
/* ── Tag chip ───────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); background: var(--surface-2);
border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px; white-space: nowrap; transition: all .14s; }
.tag:hover { color: var(--ink); border-color: var(--line-2); }
.tag .h { opacity: .5; margin-right: 1px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* ── Admin inbox tabs ───────────────────────────────────────────────── */
.inbox-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 8px; }
.inbox-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; margin-bottom: -1px;
color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; }
.inbox-tab:hover { color: var(--ink); }
.inbox-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.inbox-tab-count { font-size: 11px; color: var(--faint); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; }
.inbox-body { display: block; }
.inbox-body img { max-width: 100%; height: auto; }
/* ── Post card (the workhorse list-item) ────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 14px; padding: 22px 0 60px; }
.feed-more { display: flex; justify-content: center; padding: 8px 0 40px; }
/* Front page: feed alongside a sticky subscribe rail (signed-out visitors only). */
.front-grid.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.front-aside { position: sticky; top: 120px; margin-top: 22px; background: var(--surface); border: 1px solid var(--line);
border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); }
.front-cta__lead { margin: 0 0 10px; font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ink); }
.front-cta__body { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.front-cta__btn { width: 100%; }
/* Inline mobile subscribe card woven into the feed; hidden on desktop where the rail shows. */
.feed-cta { display: none; background: var(--surface); border: 1px solid var(--line);
border-radius: 16px; padding: 22px; margin: 4px 0 8px; box-shadow: var(--shadow-sm); }
@media (max-width: 860px) {
.front-grid.has-aside { grid-template-columns: 1fr; }
/* On mobile the rail falls below the fold; the inline .feed-cta carries the CTA instead. */
.front-aside { display: none; }
.feed-cta { display: block; }
}
.card { display: block; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; }
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.card.feat { display: grid; grid-template-columns: 1fr 250px; gap: 24px; }
/* Stretched-link pattern: the title link covers the whole card, so the card is
one valid rather than an nesting other s (invalid HTML). Tag chips
sit above it (z-index) so they stay independently clickable. */
.card-link { color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card .tag { position: relative; z-index: 1; }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-time { margin-left: auto; font-size: 12px; color: var(--faint); }
/* Admin-only "unapprove" control (a Turbo PATCH link); sits above the card-link overlay
so it stays clickable. */
.card-unapprove { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 26px;
padding: 0 10px; border-radius: 8px; border: 1px solid var(--danger-tint); background: var(--surface);
color: var(--danger-ink); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.card-unapprove:hover { background: var(--danger-tint); }
.card h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.22; margin: 0 0 8px; color: var(--ink); text-wrap: pretty; }
.card.feat h2 { font-size: 26px; letter-spacing: -0.6px; }
.card p.snip { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
/* Digest card: a collapsed run of consecutive same-category posts. Reuses the .card
shell and the featured-card two-column layout — headline list on the left, the most
recent post's hero in a 250px column on the right (top-aligned). */
.card.card-group { display: grid; grid-template-columns: 1fr 250px; gap: 24px; align-items: start; }
.card-group .card-group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.card-group-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.card-group-fav { flex: 0 0 auto; }
.card-group-item:first-child { border-top: 0; padding-top: 4px; }
.card-group-link { font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.card-group-link:hover { color: var(--accent, var(--ink)); }
.card-group-time { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.card-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.srcfavs { display: inline-flex; align-items: center; gap: 5px; }
.srcfav-link { position: relative; z-index: 1; display: inline-flex; }
.srcfav-link:hover .srcfav { border-color: var(--accent, var(--ink)); }
.srcfav { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; border: 1px solid var(--line-2); background: var(--surface-3); }
.srcfav-letter { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.srcfav-more { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.favs { display: flex; }
.favs span { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--surface); margin-left: -6px;
background: var(--surface-3); display: grid; place-items: center; font-size: 8px; color: var(--faint); }
.favs span:first-child { margin-left: 0; }
.sep { color: var(--faint); }
.art { background:
radial-gradient(140px 100px at var(--art-shift, 70%) 18%, color-mix(in oklch, var(--cat-ink, var(--accent)) 20%, transparent), transparent),
linear-gradient(var(--art-rot, 135deg), var(--cat-tint, var(--surface-2)), var(--surface-2));
border-radius: 12px; position: relative; overflow: hidden; min-height: 160px; border: 1px solid var(--line); }
.art-img { display: block; width: 100%; object-fit: cover; }
/* Heroless fallback: a large category glyph watermark bleeding off the bottom-right,
over the per-post seeded gradient. Color-coordinated (category ink), no text. */
.art-glyph { position: absolute; right: -6%; bottom: -12%; width: 55%; color: var(--cat-ink, var(--accent)); opacity: .15; }
.art-glyph svg { display: block; width: 100%; height: auto; }
.img-credit { margin: 6px 2px 0; font-size: 11.5px; color: var(--faint); }
.img-credit a { color: var(--muted); }
.img-credit a:hover { color: var(--ink-2); text-decoration: underline; }
/* Video embeds: oEmbed iframes ship fixed pixel sizes (YouTube returns 200×113), so
without this the tiny player sits in the corner of the .art panel. Drop the panel
gradient/border (the player supplies its own visuals) and let iframe providers fill
a responsive 16:9 frame; the .art overflow:hidden clips it to the rounded corners. */
.video-embed { background: none; border: 0; min-height: 0; }
.video-embed--youtube, .video-embed--vimeo { aspect-ratio: 16 / 9; }
.video-embed--youtube iframe, .video-embed--vimeo iframe {
position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
/* TikTok renders a portrait blockquote via embed.js — let it size itself, centered. */
.video-embed--tiktok { aspect-ratio: auto; display: flex; justify-content: center; }
/* ── Buttons ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
border-radius: 11px; border: 1px solid transparent; font-weight: 700; font-size: 14.5px; transition: all .15s; white-space: nowrap; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-2); }
.btn-outline { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { background: var(--surface-2); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { filter: brightness(1.05); }
.btn-danger { background: var(--surface); border-color: var(--danger-tint); color: var(--danger-ink); }
.btn-danger:hover { background: var(--danger-tint); }
.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 9px; }
/* ── Page header (category landing, search, etc.) ───────────────────── */
.phead { padding: 36px 0 20px; border-bottom: 1px solid var(--line); }
.phead .ey { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cat-ink, var(--brand)); margin-bottom: 12px; }
.phead .ey i { width: 9px; height: 9px; border-radius: 3px; background: var(--cat, var(--brand)); }
.phead h1 { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; color: var(--ink); }
.phead p { font-size: 15.5px; color: var(--muted); margin: 0; max-width: 64ch; }
.phead .count { font-size: 13px; color: var(--faint); margin-top: 12px; }
.phead .count b { color: var(--ink); }
/* ── Detail / article ───────────────────────────────────────────────── */
.detail { padding: 30px 0 80px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.crumb a:hover { color: var(--ink); }
.article h1 { font-size: 38px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.13; margin: 14px 0 16px; color: var(--ink); text-wrap: balance; }
.article .by { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.article .by .agent { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); }
.article .by .agent .glow { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.article .lead-art { width: 100%; aspect-ratio: 16/8; border-radius: 14px; margin-bottom: 28px; }
/* Heroless placeholder panels (gradient + glyph) hold a fixed 16:9 in cards and the lead,
rather than stretching to the text height. Placed after lead-art to win its 16/8. */
.art:not(.art-img) { aspect-ratio: 16 / 9; min-height: 0; align-self: start; }
.prose { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }
.prose p { margin: 0 0 18px; }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
/* ── Sources / provenance block ─────────────────────────────────────── */
.sources { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.sources-hd { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--ink); }
.sources-hd .n { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 600; }
.src { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background .14s; }
.src:last-child { border-bottom: 0; }
.src:hover { background: var(--surface-2); }
.src .ico { width: 44px; height: 44px; border-radius: 9px; background: var(--surface-3); flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; color: var(--muted); font-size: 15px; overflow: hidden; }
.src .ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.src .body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.src .kind { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.src .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 1px 0 2px; }
.src .host { display: block; font-size: 12px; color: var(--muted); }
.src .ext { color: var(--faint); flex: 0 0 auto; align-self: center; }
.src:hover .ext { color: var(--brand); }
/* ── Rail (related) ─────────────────────────────────────────────────── */
.rail-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.mini { display: block; padding: 13px 0; border-top: 1px solid var(--line); cursor: pointer; }
.mini:first-of-type { border-top: 0; }
.mini .m-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mini h4 { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); }
.mini:hover h4 { color: var(--brand); }
.mini .m-meta { font-size: 11.5px; color: var(--faint); margin-top: 5px; }
/* ── Moderation card (review queue) ─────────────────────────────────── */
.modcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: opacity .3s, transform .3s; }
.modcard.gone { opacity: 0; transform: scale(.98); }
.mod-top { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.mod-conf { flex: 0 0 auto; text-align: center; }
.mod-conf .ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.mod-conf .ring b { font-size: 15px; font-weight: 800; color: var(--ink); font-family: "JetBrains Mono", monospace; }
.mod-conf .lab { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.mod-head { flex: 1; min-width: 0; }
.mod-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; margin: 6px 0 8px; color: var(--ink); }
.mod-reason { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
.mod-body { padding: 16px 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.mod-body p { margin: 0 0 12px; } .mod-body p:last-child { margin: 0; }
.mod-srcs { padding: 0 20px 16px; }
.mod-srclist { display: flex; flex-direction: column; gap: 8px; }
.mod-src { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.mod-src .k { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-left: auto; }
.mod-actions { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.mod-actions .btn { flex: 1; }
.mod-flash { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-weight: 600; font-size: 14px; }
/* ── Forms (auth, preferences) ──────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.input { width: 100%; height: 46px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface);
font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.input::placeholder { color: var(--faint); }
.srcform { max-width: 480px; }
.field-hint { margin: 7px 2px 0; font-size: 12.5px; color: var(--muted); }
.formerr { margin-bottom: 18px; padding: 11px 14px; border-radius: 11px; font-size: 14px;
background: var(--danger-tint); border: 1px solid var(--danger-tint); color: var(--danger-ink); }
.checkrow { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.checkrow input { width: 17px; height: 17px; accent-color: var(--brand); }
.authcard { max-width: 420px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 34px 32px; box-shadow: var(--shadow-md); }
.auth-h { font-size: 25px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 6px; text-align: center; }
.auth-sub { font-size: 14px; color: var(--muted); text-align: center; margin: 0 0 26px; }
.auth-alt { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 20px; }
.auth-alt a { color: var(--brand); font-weight: 600; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.forgot { font-size: 12.5px; color: var(--brand); font-weight: 600; float: right; }
/* toggle switch */
.switch { width: 42px; height: 25px; border-radius: 999px; background: var(--line-2); border: 0; position: relative; transition: background .18s; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.switch.on { background: var(--brand); } .switch.on::after { transform: translateX(17px); }
/* selectable category card (preferences) */
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 13px; border: 1.5px solid var(--line-2); background: var(--surface); transition: all .15s; text-align: left; }
.pick:hover { border-color: var(--faint); }
.pick.on { border-color: var(--cat, var(--brand)); background: var(--cat-tint); }
.pick .sw { width: 30px; height: 30px; border-radius: 9px; background: var(--cat, var(--brand)); flex: 0 0 auto; display: grid; place-items: center; color: #fff; }
.pick .sw svg { display: block; }
.pick .nm { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.25; color: var(--ink); }
.pick .ds { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.pick .chk { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.pick.on .chk { background: var(--cat, var(--brand)); border-color: var(--cat, var(--brand)); }
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; gap: 3px; }
.seg button { height: 34px; padding: 0 14px; border: 0; background: transparent; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
/* ── Search facets ──────────────────────────────────────────────────── */
.search-grid { display: grid; grid-template-columns: 230px 1fr; gap: 36px; align-items: start; padding: 28px 0 60px; }
.facet { position: sticky; top: 130px; }
.facet h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.facet-group { margin-bottom: 24px; }
.facet-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.facet-row .box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff; flex: 0 0 auto; transition: all .14s; }
.facet-row.on .box { background: var(--cat, var(--brand)); border-color: var(--cat, var(--brand)); }
.facet-row .n { margin-left: auto; font-size: 12px; color: var(--faint); }
.facet-row .dot { width: 9px; height: 9px; border-radius: 3px; }
.bigsearch { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.bigsearch input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; font-size: 17px; color: var(--ink); }
.bigsearch input::placeholder { color: var(--faint); }
.active-facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: var(--cat-tint); color: var(--cat-ink); }
.fchip button { border: 0; background: transparent; color: inherit; opacity: .7; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; }
.fchip button:hover { opacity: 1; background: color-mix(in oklch, var(--cat) 20%, transparent); }
/* ── Empty / 404 states ─────────────────────────────────────────────── */
.empty { text-align: center; padding: 80px 20px; max-width: 420px; margin: 0 auto; }
.empty .glyph { width: 76px; height: 76px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--faint); margin: 0 auto 22px; }
.empty h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 8px; color: var(--ink); }
.empty p { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; }
@media (max-width: 720px) {
.card.feat, .card.card-group { grid-template-columns: 1fr; }
.card.feat .art, .card.card-group .art { order: -1; }
/* The per-headline timestamp is nowrap and right-pinned; on a phone it steals ~half
the row and crushes the title into a tall, skinny column. Let it wrap to its own
line under the title (indented past the 20px favicon + 10px gap) so the title gets
the full width. */
.card-group-item { flex-wrap: wrap; }
.card-group-link { flex: 1 1 0; min-width: 0; }
.card-group-time { flex-basis: 100%; margin-left: 30px; margin-top: 2px; }
.detail-grid { grid-template-columns: 1fr; gap: 30px; }
.search-grid { grid-template-columns: 1fr; }
}
/* ── Subscribe form ─────────────────────────────────────────────────── */
.subscribe-cta { max-width: none; margin: 28px 0 0; }
.subscribe-form { display: block; }
.subscribe-form .input { height: 44px; }
.subscribe-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Name, email and the Subscribe button share one row; align-items:end keeps the
button's bottom flush with the inputs (which sit under their labels). */
.subscribe-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 14px; margin-bottom: 18px; }
.subscribe-row .field { margin-bottom: 0; }
.subscribe-submit { height: 44px; padding: 0 26px; white-space: nowrap; }
.subscribe-form .pick-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.subscribe-form .pick-field legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* Compact category toggles so a full row of them fits comfortably on desktop. */
.subscribe-form .pickgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.subscribe-form .pick { padding: 8px 11px; gap: 9px; border-radius: 10px; }
.subscribe-form .pick .sw { width: 22px; height: 22px; border-radius: 7px; }
.subscribe-form .pick .sw svg { width: 13px; height: 13px; }
.subscribe-form .pick .nm { font-size: 13px; }
.subscribe-form .pick .chk { width: 18px; height: 18px; }
@media (max-width: 560px) {
.subscribe-row { grid-template-columns: 1fr; }
.subscribe-submit { width: 100%; }
}
.article-tags { margin-top: 26px; }
.related { margin-top: 28px; }
/* ── Site footer ────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 40px 28px 60px; margin-top: 20px; }
.site-footer__lead { max-width: 1040px; }
/* Heading and pitch share one line; they stack on narrow screens via flex-wrap. */
.site-footer__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.site-footer__head .rail-h { margin: 0; }
.site-footer__head .site-footer__pitch { margin: 0; max-width: none; }
.site-footer__pitch { color: var(--muted); font-size: 14px; margin: 0 0 18px; max-width: 460px; }
.site-footer__tag { color: var(--faint); font-size: 12px; margin-top: 30px; }
.site-footer__legal { color: var(--faint); font-size: 12px; margin-top: 8px; }
.site-footer__legal a { color: var(--muted); text-decoration: none; }
.site-footer__legal a:hover { color: var(--ink-2); text-decoration: underline; }
.subscribe-consent { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 12px 0 14px; }
.subscribe-consent a { color: var(--brand); }
/* Static legal/info pages (privacy, terms, contact). */
.legal { max-width: 760px; padding-top: 36px; padding-bottom: 64px; color: var(--ink-2); line-height: 1.65; }
.legal h1 { font-size: 30px; margin: 0 0 6px; color: var(--ink); }
.legal h2 { font-size: 18px; margin: 32px 0 8px; color: var(--ink); }
.legal p, .legal li { font-size: 15px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--brand); }
.legal__meta { color: var(--faint); font-size: 13px; margin: 0 0 24px; }
/* Desktop: fit every category toggle on a single row in the footer. */
@media (min-width: 1000px) {
.site-footer .pickgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
/* ── Preference selectors (native inputs hidden; state shown via :has) ──── */
.pick { cursor: pointer; }
.pick input, .tag.chip input, .seg label input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--cat, var(--brand)); background: var(--cat-tint); }
.pick:has(input:checked) .chk { background: var(--cat, var(--brand)); border-color: var(--cat, var(--brand)); color: #fff; }
.tag.chip { cursor: pointer; }
.tag.chip:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.seg label { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.seg label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
/* Keyboard focus: the native input is visually hidden, so surface the ring on the container. */
.pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.tag.chip:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.seg label:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.prefs-actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
/* ── Search facet checkboxes (native input hidden; state via :has) ──────── */
/* (.tag.chip inputs are already hidden + :has-styled by the preferences rules.) */
.facet-row input { position: absolute; opacity: 0; pointer-events: none; }
/* The checkmark only shows when the row is actually checked, so an unchecked facet reads
as an empty box (no filter) instead of looking selected. */
.facet-row .box svg { opacity: 0; transition: opacity .14s; }
.facet-row:has(input:checked) { color: var(--ink); }
.facet-row:has(input:checked) .box { background: var(--cat, var(--brand)); border-color: var(--cat, var(--brand)); }
.facet-row:has(input:checked) .box svg { opacity: 1; }
.facet-row:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.search-results-count { font-size: 13px; color: var(--faint); margin: 4px 0 6px; }
.search-results-count b { color: var(--ink); }
/* ── Pipeline status row (header slot while a run is in progress) ───────── */
.pipeline-status { color: var(--brand); font-weight: 600; cursor: default; }
.pipeline-status svg { animation: gb-spin 1s linear infinite; }
@keyframes gb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pipeline-status svg { animation: none; } }
/* ── Admin control-room dashboard ─────────────────────────────────────── */
.dash { padding-bottom: 80px; }
.dash-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.dash-panel > h2 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 14px; color: var(--ink); }
.dash-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; margin: 16px 0 8px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat .num { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--ink); line-height: 1; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }
.stat.warn .num { color: var(--danger-ink); }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.dash-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-empty { color: var(--faint); font-size: 13px; padding: 6px 0; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.warn-text { color: var(--danger-ink); font-weight: 700; }
@media (max-width: 720px) { .dash-cols { grid-template-columns: 1fr; } }
/* Editorial feedback — review queue */
.mod-notes { margin: 10px 0; padding: 10px 12px; background: var(--surface-2, #f6f6f7); border-radius: 8px; }
.mod-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; padding: 3px 0; }
.note-reason { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; color: var(--accent-ink, #6d28d9); }
.note-body { color: var(--ink, #222); }
.note-meta { color: var(--faint, #999); font-size: 11px; margin-left: auto; }
.mod-feedback { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 0 20px 4px; }
.note-lab { font-size: 12px; color: var(--muted, #666); }
.note-select, .note-text { width: 100%; padding: 7px 9px; border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; color: var(--ink); background: var(--surface, #fff); }
.note-text { resize: vertical; }
/* Admin settings form (review/settings) */
.settings-form .note-lab { display: block; margin-bottom: 12px; }
.settings-form .prompt-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.settings-form .prompt-row .btn { align-self: flex-start; }
.settings-form .btn-primary { margin-top: 8px; }
.form-errors { margin-bottom: 12px; color: var(--danger-ink); }
.form-errors p { margin: 0 0 4px; font-size: 14px; }
/* Public contact form (legal page). Reuses .field/.input; the textarea needs to
shed the fixed input height, and the honeypot must stay offscreen. */
.contact-form { max-width: 480px; margin: 4px 0 8px; }
.contact-form textarea.input { height: auto; min-height: 132px; padding: 11px 14px; line-height: 1.5; resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Editorial feedback — show-page admin panel */
.editorial-panel { margin-bottom: 20px; padding: 14px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: var(--surface-2, #f6f6f7); }
.editorial-panel .ep-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
/* Admin shell: left sidebar + main content */
.admin-shell { display: flex; gap: 24px; max-width: 1120px; margin: 0 auto; padding: 20px; align-items: flex-start; }
.admin-sidebar { flex: 0 0 176px; position: sticky; top: calc(52px + 52px + 8px); } /* below the sticky .hd-row + .subnav-row */
.admin-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-heading { display: block; padding: 14px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.admin-nav-heading:first-child { padding-top: 0; }
.admin-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; }
.admin-nav-link:hover { background: var(--surface-2); }
.admin-nav-link.active { background: var(--surface-2); color: var(--brand); font-weight: 600; }
.nav-dot { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.admin-main { flex: 1; min-width: 0; }
.admin-main .wrap { padding-left: 0; padding-right: 0; }
@media (max-width: 720px) {
.admin-shell { flex-direction: column; }
.admin-sidebar { position: static; flex-basis: auto; }
}
/* ── Events calendar (admin) ──────────────────────────────────────────── */
.cal .calendar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal .calendar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
.cal .calendar-heading a { font-size: 13px; color: var(--muted); text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cal .calendar-heading a:hover { border-color: var(--line-2); color: var(--ink); }
.cal table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 600; padding: 6px 8px; }
.cal td.day { vertical-align: top; height: 104px; border: 1px solid var(--line); padding: 6px 7px; background: var(--surface); overflow: hidden; }
.cal td.prev-month, .cal td.next-month { background: var(--surface-2); }
.cal td.prev-month .cal-daynum, .cal td.next-month .cal-daynum { color: var(--faint); }
.cal td.today { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.cal .cal-daynum { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.cal .cal-chip { display: block; margin-top: 4px; padding: 3px 6px; border-radius: 6px; background: var(--surface-2);
border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cal .cal-chip:hover { border-color: var(--line-2); }
.cal .cal-chip-type { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cal .cal-chip-title { display: block; font-size: 11.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cal-upcoming { margin-top: 30px; }
.cal-upcoming h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-list li { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cal-when { flex: none; min-width: 178px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-body { display: flex; flex-direction: column; gap: 2px; }
.cal-link { font-size: 14px; color: var(--ink); text-decoration: none; }
.cal-link:hover { text-decoration: underline; }
.cal-where { font-size: 12px; color: var(--faint); }
.cal-empty { color: var(--faint); margin-top: 24px; }
/* ── Personalized digest webview ──────────────────────────────────────── */
.digest-web { max-width: 680px; }
.digest-web > h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 4px; color: var(--ink); }
.digest-meta { font-size: 13px; color: var(--faint); margin: 0 0 24px; }
.digest-post { padding: 18px 0; border-bottom: 1px solid var(--line); }
.digest-cat { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.digest-post h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; margin: 0 0 6px; }
.digest-title { color: var(--ink); text-decoration: none; }
.digest-title:hover { text-decoration: underline; }
.digest-snip { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 64ch; }
.digest-cta { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
.digest-cta:hover { text-decoration: underline; }
/* ---- Festival roster ---- */
.select-sm { height: 36px; padding: 0 10px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; }
.festival-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.festival-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.festival-card {
border: 1px solid var(--line);
border-radius: 0.75rem;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--surface);
}
.festival-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.festival-name { font-size: 1.05rem; line-height: 1.25; margin: 0; }
.festival-meta { color: var(--muted); font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; }
.festival-deadline { font-size: 0.8rem; color: var(--muted); }
.festival-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.festival-cat {
font-size: 0.72rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
}
.festival-card-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.festival-website { font-size: 0.85rem; color: var(--muted); }
.fstance {
font-size: 0.72rem;
font-weight: 600;
padding: 0.12rem 0.5rem;
border-radius: 999px;
color: #fff;
}
.fstance-ai-native { background: var(--cat-event, oklch(0.58 0.158 305)); }
.fstance-accepts { background: var(--cat-tool, oklch(0.58 0.158 252)); }
/* Admin review queue rows */
.festival-review { display: flex; flex-direction: column; gap: 0.4rem; }
.festival-review-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.festival-review-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.festival-stance-form { display: flex; align-items: center; gap: 0.4rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }