/* ctipilot.ch — production stylesheet.
Dark-first, dense, monospace-leaning. Designed for technical readers
(SOC, IR, threat hunting). Theme: dark by default, light by user
preference (prefers-color-scheme), explicit override via
set by theme.js.
Layout breakpoints:
• <640px — phone. Single column, hamburger nav, search collapses inside menu.
• 640-959 — tablet. Brand + search + theme inline; nav inside hamburger.
• ≥960px — desktop. Brand + nav + tools all in one bar.
Mobile-first overflow rule: NO horizontal scrolling at the page level
under any width. The brief renders in the available space. Wide
children (markdown tables, code blocks) get their own contained
horizontal scrollable wrapper instead of pushing the page wider.
*/
:root {
/* Dark palette (default) */
--bg: #0e1116;
--bg-elev: #161b22;
--bg-elev-2: #1d242c;
--border: #2a313a;
--border-soft: #1f252d;
--text: #e6edf3;
--text-soft: #b1bac4;
--text-muted: #7d8590;
--link: #79c0ff;
--link-hover: #a5d6ff;
--accent: #e85d75;
--accent-soft: #ff7a8c;
--accent-fg: #0e1116;
--warn: #ffd866;
--crit: #ff6b6b;
--ok: #56d364;
--info: #79c0ff;
--kbd-bg: #21262d;
--selection: #264f78;
--topbar-bg: rgba(14, 17, 22, 0.92);
--shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
--radius: 6px;
--radius-lg: 10px;
--topbar-h: 56px;
--mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #fafbfc;
--bg-elev: #ffffff;
--bg-elev-2: #f4f6f8;
--border: #d8dee4;
--border-soft: #eaeef2;
--text: #1c2128;
--text-soft: #4d555e;
--text-muted: #69707a;
--link: #0969da;
--link-hover: #0550ae;
--accent: #b62b46;
--accent-soft: #d8425f;
--accent-fg: #ffffff;
--kbd-bg: #f0f3f6;
--selection: #b6e3ff;
--topbar-bg: rgba(255, 255, 255, 0.92);
--shadow: 0 1px 0 rgba(27, 31, 35, 0.04), 0 8px 24px rgba(140, 149, 159, 0.2);
}
}
:root[data-theme="light"] {
--bg: #fafbfc;
--bg-elev: #ffffff;
--bg-elev-2: #f4f6f8;
--border: #d8dee4;
--border-soft: #eaeef2;
--text: #1c2128;
--text-soft: #4d555e;
--text-muted: #69707a;
--link: #0969da;
--link-hover: #0550ae;
--accent: #b62b46;
--accent-soft: #d8425f;
--accent-fg: #ffffff;
--kbd-bg: #f0f3f6;
--selection: #b6e3ff;
--topbar-bg: rgba(255, 255, 255, 0.92);
--shadow: 0 1px 0 rgba(27, 31, 35, 0.04), 0 8px 24px rgba(140, 149, 159, 0.2);
}
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* No horizontal scroll at the page level, ever. */
overflow-x: hidden;
/* Reserve scrollbar gutter so short pages don't shift horizontally
when navigating from a long page (where the vertical scrollbar
consumed ~15px) to a short one (where it didn't). Without this,
the topbar and content visibly jump on every page change. */
scrollbar-gutter: stable;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* Prevent iOS Safari from blowing past viewport width. */
width: 100%;
max-width: 100vw;
/* Sticky-footer pattern: full-viewport flex column so the .footer
always sits at the bottom of the viewport on short pages (home,
empty CVE detail, etc.) and pushes down naturally on long pages. */
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
.main { flex: 1 0 auto; }
.footer { flex: 0 0 auto; }
::selection { background: var(--selection); color: var(--text); }
a {
color: var(--link);
text-decoration: none;
}
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code, kbd, pre, samp { font-family: var(--mono); font-size: 0.9em; }
img, svg { max-width: 100%; height: auto; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: 0; top: 0;
padding: 0.5rem 1rem;
background: var(--accent); color: var(--accent-fg);
transform: translateY(-200%);
transition: transform 0.1s linear;
z-index: 100;
font-weight: 600;
}
.skip:focus { transform: translateY(0); }
/* ── topbar ──────────────────────────────────────────────────────── */
.topbar {
position: sticky; top: 0; z-index: 50;
background: var(--topbar-bg);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--border);
}
/* Mobile-first layout. Each top-bar element is a direct grid child of
.bar-inner so we can place them with grid-area names. The nav and the
searchbox live in panel rows that only appear when the hamburger is
open. On tablet+, searchbox moves up to the top row alongside the
theme + hamburger; on desktop, nav also moves to the top row and the
hamburger disappears. */
.bar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0.55rem 0.85rem;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
grid-template-areas: "brand github theme menu";
gap: 0.5rem 0.4rem;
align-items: center;
}
/* Mobile: search hidden in top row; appears in panel-search row when open. */
.bar-inner > .searchbox { display: none; grid-area: search; }
.bar-inner > .nav { display: none; grid-area: nav; }
.bar-inner.is-open {
grid-template-areas:
"brand github theme menu"
"search search search search"
"nav nav nav nav";
}
.bar-inner.is-open > .searchbox {
display: block;
margin-top: 0.45rem;
padding-top: 0.45rem;
border-top: 1px solid var(--border-soft);
}
.bar-inner.is-open > .nav { display: flex; }
.brand {
grid-area: brand;
display: inline-flex; align-items: center; gap: 0.55rem;
color: var(--text); text-decoration: none;
min-width: 0;
overflow: hidden;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark {
display: inline-grid; place-items: center;
width: 30px; height: 30px;
background: var(--accent); color: var(--accent-fg);
font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em;
border-radius: 6px;
flex: 0 0 auto;
}
.brand-text { min-width: 0; overflow: hidden; }
.brand-text strong {
display: block; font-size: 0.95rem; line-height: 1.1;
white-space: nowrap;
}
.brand-text small {
display: block; font-size: 0.7rem; color: var(--text-muted);
letter-spacing: 0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Mobile: hide the subtitle to keep the bar compact. */
@media (max-width: 479px) {
.brand-text small { display: none; }
}
/* Square 38×38 buttons for theme + hamburger. Same size = aligned.
The GitHub link is the same height; it grows wider when the star
count is present. */
.theme-toggle, .nav-toggle {
display: inline-grid;
place-items: center;
width: 38px; height: 38px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elev);
color: var(--text-soft);
flex: 0 0 auto;
}
.theme-toggle { grid-area: theme; }
.nav-toggle { grid-area: menu; }
.github-link {
grid-area: github;
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 38px;
padding: 0 0.55rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elev);
color: var(--text-soft);
text-decoration: none;
flex: 0 0 auto;
font-size: 0.82rem;
font-weight: 500;
}
.github-link:hover {
color: var(--text);
background: var(--bg-elev-2);
text-decoration: none;
}
.github-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.github-stars {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--text-soft);
}
.github-stars::before {
content: '★';
color: var(--warn);
font-size: 0.85rem;
line-height: 1;
}
/* On very narrow phones drop the count, keep just the icon — the
topbar grid only has so much room. */
@media (max-width: 419px) {
.github-stars { display: none; }
.github-link { padding: 0; width: 38px; justify-content: center; }
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--text); background: var(--bg-elev-2); }
.theme-icon { width: 18px; height: 18px; display: none; }
.theme-toggle[data-theme="system"] .theme-icon--system { display: block; }
.theme-toggle[data-theme="light"] .theme-icon--light { display: block; }
.theme-toggle[data-theme="dark"] .theme-icon--dark { display: block; }
.nav-toggle {
gap: 5px;
grid-auto-flow: row;
padding: 9px;
}
.nav-toggle-bar {
display: block;
width: 18px; height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Searchbox — full-width inside its container. */
.searchbox {
position: relative;
width: 100%;
min-width: 0;
}
.searchbox input {
width: 100%;
padding: 0.5rem 1.85rem 0.5rem 0.7rem;
background: var(--bg-elev);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
font: inherit;
font-size: 0.85rem;
outline: none;
transition: border-color 0.1s linear, box-shadow 0.1s linear;
}
.searchbox input::placeholder { color: var(--text-muted); }
.searchbox input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(232, 93, 117, 0.18);
}
.searchbox .kbd-hint {
position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
font-family: var(--mono);
font-size: 0.7rem;
background: var(--kbd-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
color: var(--text-muted);
pointer-events: none;
}
.searchbox input:focus + .kbd-hint { display: none; }
.suggestions {
position: absolute;
left: 0; right: 0; top: calc(100% + 4px);
margin: 0; padding: 0.25rem;
list-style: none;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
max-height: min(60vh, 480px);
overflow-y: auto;
z-index: 60;
}
.suggestions li {
padding: 0.45rem 0.55rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.55rem;
align-items: center;
border-radius: 5px;
cursor: pointer;
}
.suggestions li:hover, .suggestions li[aria-selected="true"] {
background: var(--bg-elev-2);
}
.suggestions .kind-pill {
font-family: var(--mono); font-size: 0.7rem;
padding: 1px 6px; border-radius: 4px;
border: 1px solid var(--border);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
min-width: 48px; text-align: center;
}
.suggestions .s-title { font-weight: 500; color: var(--text); font-size: 0.85rem; }
.suggestions .s-hint { color: var(--text-muted); font-size: 0.75rem; }
.suggestions .s-row { display: grid; gap: 0; min-width: 0; }
.suggestions .s-row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nav: stacked vertically when shown inside the open hamburger panel.
Becomes inline on desktop. */
.nav {
flex-direction: column;
gap: 0.15rem;
}
.nav a {
padding: 0.6rem 0.75rem;
color: var(--text-soft);
border-radius: var(--radius);
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
}
.nav a:hover { background: var(--bg-elev); color: var(--text); text-decoration: none; }
.nav a.active {
color: var(--text);
background: var(--bg-elev);
box-shadow: inset 0 -2px 0 var(--accent);
}
/* Tablet: search slides into the top row, beside the theme toggle.
Hamburger stays — nav still drops down in a panel when wide-but-short. */
@media (min-width: 640px) {
.bar-inner {
grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto auto;
grid-template-areas: "brand search github theme menu";
gap: 0.5rem 0.5rem;
}
.bar-inner > .searchbox { display: block; }
.searchbox { width: 100%; max-width: 320px; }
.bar-inner.is-open {
grid-template-areas:
"brand search github theme menu"
"nav nav nav nav nav";
}
.bar-inner.is-open > .searchbox {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
}
/* Desktop: nav inline; no hamburger. */
@media (min-width: 960px) {
.bar-inner {
grid-template-columns: auto auto minmax(0, 1fr) auto auto;
grid-template-areas: "brand nav search github theme";
padding: 0.55rem 1rem;
column-gap: 0.8rem;
}
.bar-inner > .nav,
.bar-inner.is-open > .nav {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
gap: 0.2rem;
}
.nav a { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.nav-toggle { display: none; }
.searchbox { max-width: 320px; justify-self: end; width: 28vw; }
.bar-inner.is-open {
grid-template-areas: "brand nav search github theme";
}
}
/* ── main / view ─────────────────────────────────────────────────── */
.main {
max-width: 1280px;
margin: 0 auto;
padding: 1.1rem 0.85rem 4rem;
/* Make sure the main column never grows wider than the viewport. */
width: 100%;
min-width: 0;
}
@media (min-width: 600px) { .main { padding: 1.5rem 1.1rem 4rem; } }
.loading { color: var(--text-muted); }
.view { min-height: 60vh; min-width: 0; }
.view * { min-width: 0; }
.view h1 {
font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.7rem);
font-weight: 700;
margin: 0 0 0.3rem;
letter-spacing: -0.01em;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.view h2 {
font-size: 1.15rem;
margin: 1.6rem 0 0.6rem;
font-weight: 600;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.view h2.section-head {
border-bottom: 1px solid var(--border-soft);
padding-bottom: 0.4rem;
}
.subtitle { color: var(--text-muted); margin: 0 0 1.5rem; font-size: 0.95rem; }
/* ── home — preview banner + TL;DR + CTA ─────────────────────────── */
.home-banner {
display: grid;
gap: 0.9rem;
align-items: stretch;
padding: 1rem 1.1rem;
background: linear-gradient(135deg, var(--bg-elev), var(--bg-elev-2));
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: var(--radius-lg);
margin-bottom: 1.2rem;
}
@media (min-width: 720px) {
.home-banner {
grid-template-columns: 1fr auto;
align-items: center;
}
}
.home-banner-left { min-width: 0; }
.home-banner-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.home-banner-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-soft);
font-weight: 600;
}
.home-banner h1 {
font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
line-height: 1.25;
margin: 0.15rem 0 0;
letter-spacing: -0.01em;
}
.cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.95rem;
background: var(--accent);
color: var(--accent-fg) !important;
border-radius: var(--radius);
text-decoration: none !important;
font-weight: 600;
white-space: nowrap;
transition: filter 0.1s linear, transform 0.1s linear;
}
.cta:hover { filter: brightness(1.07); transform: translateY(-1px); text-decoration: none; }
.cta--secondary {
background: var(--bg-elev);
color: var(--text) !important;
border: 1px solid var(--border);
}
.preview-tldr {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1rem 1.1rem;
margin-bottom: 1.2rem;
}
.preview-tldr h2 {
margin: 0 0 0.5rem;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.preview-tldr ul { padding-left: 1.2rem; margin: 0.3rem 0; }
.preview-tldr li {
margin: 0.5rem 0;
line-height: 1.55;
color: var(--text-soft);
word-wrap: break-word;
overflow-wrap: anywhere;
}
.preview-tldr li strong { color: var(--text); }
.preview-tldr-cta {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.home-footer { margin-top: 2.2rem; }
/* ── stats grid ─────────────────────────────────────────────────── */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.55rem;
}
.stat {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 0.7rem 0.8rem;
}
.stat .v {
font-family: var(--mono);
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
line-height: 1.1;
}
.stat .l {
font-size: 0.72rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stat a { color: inherit; }
/* ── lists / tables ─────────────────────────────────────────────── */
.entity-list {
list-style: none; padding: 0; margin: 0;
}
.entity-list > li {
padding: 0.7rem 0;
border-bottom: 1px solid var(--border-soft);
display: grid;
gap: 0.4rem;
align-items: start;
}
@media (min-width: 600px) {
.entity-list > li {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem;
}
}
.entity-list > li:last-child { border-bottom: 0; }
.e-title {
font-weight: 500;
color: var(--text);
word-wrap: break-word;
overflow-wrap: anywhere;
}
.e-meta {
font-size: 0.78rem; color: var(--text-muted);
display: flex; gap: 0.4rem 0.6rem; flex-wrap: wrap;
align-items: center;
margin-top: 0.15rem;
}
.e-tag {
display: inline-block;
font-family: var(--mono); font-size: 0.72rem;
background: var(--bg-elev-2); border: 1px solid var(--border-soft);
padding: 1px 6px; border-radius: 4px; color: var(--text-soft);
white-space: nowrap;
}
.data-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
width: 100%; border-collapse: collapse;
font-size: 0.88rem;
min-width: 520px;
}
table.data th, table.data td {
text-align: left;
padding: 0.55rem 0.7rem;
border-bottom: 1px solid var(--border-soft);
vertical-align: top;
}
table.data thead th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
background: var(--bg-elev);
/* Sticky-thead removed: with `position: sticky` on `| ` only (the
| isn't sticky-positionable cross-browser), the header band
visibly bleeds behind the first scrolled-past data row, which
looked like a layout bug. Tables on this site (CVEs, Sources, Ops)
are short enough that scroll-locked headers add no value.
`!important` here defends against any older cached stylesheet
resurrecting the sticky positioning. */
position: static !important;
top: auto !important;
z-index: auto !important;
}
table.data tbody tr:hover { background: var(--bg-elev); }
table.data .cve-id { font-family: var(--mono); white-space: nowrap; }
/* ── filters / chips ────────────────────────────────────────────── */
.toolbar {
display: flex; flex-wrap: wrap; gap: 0.45rem;
align-items: center;
margin: 0.5rem 0 1rem;
}
.toolbar .input {
flex: 1 1 220px;
min-width: 0;
padding: 0.55rem 0.75rem;
background: var(--bg-elev);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
font: inherit; font-size: 0.9rem;
outline: none;
}
.toolbar .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 93, 117, 0.18); }
.chip {
font-size: 0.8rem;
padding: 0.35rem 0.7rem;
border: 1px solid var(--border);
background: var(--bg-elev);
color: var(--text-soft);
border-radius: 999px;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.chip:hover { background: var(--bg-elev-2); color: var(--text); }
.chip.active {
background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
font-weight: 600;
}
a.chip { text-decoration: none; }
.badge {
display: inline-block;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--border);
color: var(--text-soft);
background: var(--bg-elev-2);
}
.badge--high { color: var(--ok); border-color: rgba(86, 211, 100, 0.3); }
.badge--med { color: var(--warn); border-color: rgba(255, 216, 102, 0.3); }
.badge--low { color: var(--crit); border-color: rgba(255, 107, 107, 0.3); }
.badge--accent { color: var(--accent-soft); border-color: rgba(232, 93, 117, 0.4); }
.badge--cve { color: var(--info); border-color: rgba(121, 192, 255, 0.4); }
a.badge { text-decoration: none; }
a.badge:hover { color: var(--text); border-color: var(--accent-soft); text-decoration: none; }
/* ── brief detail ───────────────────────────────────────────────── */
.brief-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.2rem;
align-items: start;
}
@media (min-width: 1000px) {
.brief-layout {
grid-template-columns: minmax(0, 1fr) 240px;
gap: 2.2rem;
}
}
.brief-meta {
font-size: 0.83rem;
color: var(--text-muted);
display: flex; gap: 0.5rem 0.85rem; flex-wrap: wrap;
align-items: center;
margin-bottom: 1rem;
}
.brief-meta strong { color: var(--text-soft); font-weight: 500; }
.brief-meta .meta-actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* GitHub-style split-button: primary action + caret that opens a menu. */
.md-split {
position: relative;
display: inline-flex;
align-items: stretch;
font-size: 0.78rem;
}
.md-split__primary,
.md-split__caret {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
font: inherit;
color: var(--text-soft);
background: var(--bg-elev);
border: 1px solid var(--border);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
}
.md-split__primary {
border-radius: var(--radius) 0 0 var(--radius);
}
.md-split__caret {
border-left: 0;
border-radius: 0 var(--radius) var(--radius) 0;
padding: 0.25rem 0.4rem;
}
.md-split__primary:hover,
.md-split__caret:hover {
color: var(--text);
background: var(--bg-elev-2);
text-decoration: none;
}
.md-split__primary:focus-visible,
.md-split__caret:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -1px;
z-index: 1;
}
.md-split__icon,
.md-split__chevron {
width: 12px;
height: 12px;
flex: none;
}
.md-split__caret[aria-expanded="true"] .md-split__chevron {
transform: rotate(180deg);
}
.md-split__menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 30;
min-width: 240px;
max-width: min(320px, calc(100vw - 2rem));
padding: 4px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
gap: 1px;
}
.md-split__menu[hidden] { display: none; }
.md-split__item {
display: grid;
grid-template-rows: auto auto;
gap: 1px;
padding: 6px 10px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--text-soft);
text-align: left;
text-decoration: none;
cursor: pointer;
font: inherit;
width: 100%;
}
.md-split__item:hover,
.md-split__item:focus-visible {
background: var(--bg-elev-2);
color: var(--text);
text-decoration: none;
outline: none;
}
.md-split__item-title {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--text);
font-size: 0.82rem;
font-weight: 500;
}
.md-split__item-sub {
color: var(--text-muted);
font-size: 0.72rem;
}
.md-split__ext {
width: 11px;
height: 11px;
flex: none;
opacity: 0.7;
}
@media (max-width: 540px) {
.md-split__menu {
right: auto;
left: 0;
min-width: 220px;
}
}
/* The brief content rule: it must always render in the available space.
Anything that wants to be wider gets contained inside its own scroll
wrapper (tables, pre). Inline code, links, and plain prose break long
tokens at any character if needed (no horizontal page scroll, ever). */
.brief-prose {
font-size: 0.96rem;
line-height: 1.65;
word-wrap: break-word;
overflow-wrap: anywhere;
hyphens: auto;
/* Critical: the prose container itself must never push wider than its grid track. */
min-width: 0;
max-width: 100%;
}
.brief-prose * { min-width: 0; max-width: 100%; }
.brief-prose h1 { display: none; } /* page already has its own H1 */
.brief-prose h2 {
margin-top: 2rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--border-soft);
font-size: 1.2rem;
scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.brief-prose h3 {
margin-top: 1.6rem;
font-size: 1rem;
scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.brief-prose h4 { margin-top: 1.2rem; font-size: 0.95rem; }
.brief-prose p, .brief-prose li { color: var(--text-soft); }
.brief-prose strong { color: var(--text); }
.brief-prose blockquote {
border-left: 3px solid var(--accent);
background: var(--bg-elev-2);
margin: 1rem 0;
padding: 0.6rem 1rem;
color: var(--text-soft);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 0.92rem;
}
.brief-prose blockquote p:first-child { margin-top: 0; }
.brief-prose blockquote p:last-child { margin-bottom: 0; }
.brief-prose hr {
border: 0; border-top: 1px solid var(--border-soft);
margin: 1.5rem 0;
}
.brief-prose code {
background: var(--bg-elev-2);
padding: 1px 5px; border-radius: 3px;
font-size: 0.85em;
word-break: break-word;
overflow-wrap: anywhere;
}
.brief-prose pre {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
padding: 0.8rem 1rem;
border-radius: var(--radius);
overflow-x: auto;
font-size: 0.82rem;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.brief-prose pre code {
background: none; padding: 0;
word-break: normal;
overflow-wrap: normal;
white-space: pre;
}
/* Tables: scrollable container so the page never grows. */
.brief-prose table {
display: block;
width: 100%;
max-width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
margin: 1rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: normal;
}
.brief-prose th, .brief-prose td {
border: 1px solid var(--border-soft);
padding: 0.4rem 0.6rem; text-align: left;
vertical-align: top;
}
.brief-prose thead th {
background: var(--bg-elev-2);
color: var(--text);
font-weight: 600;
}
.brief-prose a {
word-break: break-word;
overflow-wrap: anywhere;
}
.brief-prose ul, .brief-prose ol { padding-left: 1.4rem; }
.brief-prose li + li { margin-top: 0.2rem; }
.brief-prose mark {
background: rgba(255, 216, 102, 0.25);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* ── TOC sidebar — minimal, sections-only by default ───────────── */
.aside-toc {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 0.85rem 0.95rem;
font-size: 0.86rem;
min-width: 0;
}
@media (min-width: 1000px) {
.aside-toc {
position: sticky; top: calc(var(--topbar-h) + 16px);
max-height: calc(100vh - var(--topbar-h) - 32px);
overflow-y: auto;
}
}
.aside-toc h3 {
margin: 0 0 0.5rem; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
font-weight: 600;
}
.aside-toc ul.toc-sections {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.05rem;
}
.aside-toc ul.toc-sections li { margin: 0; }
.aside-toc ul.toc-sections a {
display: block;
padding: 0.32rem 0.5rem;
border-radius: 4px;
color: var(--text-soft);
font-size: 0.85rem;
line-height: 1.35;
border-left: 2px solid transparent;
}
.aside-toc ul.toc-sections a:hover {
color: var(--text);
background: var(--bg-elev-2);
text-decoration: none;
border-left-color: var(--accent);
}
.aside-toc details {
margin-top: 0.85rem;
border-top: 1px solid var(--border-soft);
padding-top: 0.6rem;
}
.aside-toc details summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
padding: 0.15rem 0;
}
.aside-toc details summary::-webkit-details-marker { display: none; }
.aside-toc details summary::after {
content: '+';
color: var(--text-muted);
font-family: var(--mono);
font-weight: 400;
font-size: 0.95rem;
}
.aside-toc details[open] summary::after { content: '−'; }
.aside-toc details ul {
list-style: none;
padding: 0.4rem 0 0;
margin: 0;
display: grid;
gap: 0.18rem;
}
.aside-toc details li { margin: 0; }
.aside-toc details a {
color: var(--text-soft);
font-size: 0.82rem;
display: inline-block;
padding: 0.1rem 0;
}
.aside-toc details a:hover { color: var(--text); text-decoration: none; }
.aside-toc details a.mono { font-family: var(--mono); font-size: 0.78rem; }
/* Mobile collapsible TOC: shown above the brief body. */
.toc-mobile {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 1.1rem;
font-size: 0.88rem;
min-width: 0;
}
.toc-mobile summary {
cursor: pointer;
padding: 0.7rem 0.95rem;
font-weight: 600;
color: var(--text-soft);
list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after {
content: '▸';
color: var(--text-muted);
transition: transform 0.15s ease;
}
.toc-mobile[open] summary::after { transform: rotate(90deg); }
.toc-mobile-body {
padding: 0.2rem 0.95rem 0.85rem;
border-top: 1px solid var(--border-soft);
}
@media (min-width: 1000px) { .toc-mobile { display: none; } }
@media (max-width: 999px) { .aside-toc.aside-toc--desktop { display: none; } }
.callout {
background: var(--bg-elev);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
padding: 0.6rem 0.85rem;
border-radius: var(--radius);
font-size: 0.85rem;
margin: 0.5rem 0;
}
.callout strong { color: var(--text); }
/* Citation list on the CVE detail page — one row per cited URL, with the
row itself being the clickable thing (one-tap pivot to the article).
The visual hierarchy: host name (bold) → article label → muted full
URL. A second muted line below offers the source-profile + brief
links so the reader can also stay inside the site. */
.cite-list {
list-style: none;
padding: 0;
margin: 0.4rem 0 0;
display: grid;
gap: 0.5rem;
}
.cite {
display: grid;
gap: 0.2rem;
padding: 0.7rem 0.85rem;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
min-width: 0;
}
.cite:hover { border-color: var(--accent); }
.cite-link {
display: grid;
gap: 0.15rem;
text-decoration: none !important;
color: var(--text);
min-width: 0;
}
.cite-link:hover { color: var(--accent-soft); text-decoration: none; }
.cite-link:hover .cite-host { color: var(--accent-soft); }
.cite-host {
font-weight: 600;
font-size: 0.92rem;
color: var(--link);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.cite-label {
font-size: 0.85rem;
color: var(--text-soft);
word-wrap: break-word;
overflow-wrap: anywhere;
}
.cite-url {
font-family: var(--mono);
font-size: 0.74rem;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.cite-meta {
font-size: 0.78rem;
margin-top: 0.2rem;
word-wrap: break-word;
}
.cite-meta a { color: var(--text-soft); }
.cite-meta a:hover { color: var(--text); }
.cite .badge { vertical-align: middle; }
.timeline-strip {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin: 0.4rem 0 0.2rem;
}
.timeline-strip a {
font-family: var(--mono); font-size: 0.78rem;
padding: 2px 7px; border-radius: 3px;
background: var(--bg-elev-2); color: var(--text-soft);
border: 1px solid var(--border-soft);
}
.timeline-strip a.current {
background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600;
}
.timeline-strip a:hover { color: var(--text); text-decoration: none; }
.toast {
position: fixed;
left: 50%; bottom: 1.5rem;
transform: translateX(-50%);
background: var(--bg-elev);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.55rem 0.95rem;
font-size: 0.85rem;
z-index: 200;
box-shadow: var(--shadow);
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
max-width: calc(100vw - 2rem);
}
.toast.show { opacity: 1; }
/* "Cited in this brief" footer — replaces the old in-sidebar lists. */
.brief-cited {
margin-top: 2.5rem;
padding-top: 1.2rem;
border-top: 1px solid var(--border-soft);
display: grid;
gap: 1rem;
}
@media (min-width: 720px) {
.brief-cited { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}
@media (min-width: 1000px) {
.brief-cited { grid-template-columns: 1fr 1fr 1fr; }
}
.brief-cited section {
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 0.85rem 1rem;
min-width: 0;
}
.brief-cited h3 {
margin: 0 0 0.5rem; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
font-weight: 600;
}
.brief-cited ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.3rem;
}
.brief-cited li {
font-size: 0.85rem;
word-wrap: break-word;
overflow-wrap: anywhere;
}
/* ── empty state ────────────────────────────────────────────────── */
.empty {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
.empty svg { width: 32px; height: 32px; opacity: 0.5; margin-bottom: 0.6rem; }
/* ── footer ─────────────────────────────────────────────────────── */
.footer {
border-top: 1px solid var(--border);
background: var(--bg-elev);
margin-top: 3rem;
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 1.2rem 0.85rem;
font-size: 0.82rem;
color: var(--text-muted);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
}
.footer-inner .meta { font-family: var(--mono); font-size: 0.75rem; }
@media (min-width: 600px) { .footer-inner { padding: 1.2rem 1.1rem; } }
/* ── small utilities ────────────────────────────────────────────── */
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--mono); }
.tight { margin: 0; }
.right { text-align: right; }
.kbd {
font-family: var(--mono); font-size: 0.78rem;
background: var(--kbd-bg); border: 1px solid var(--border);
border-bottom-width: 2px;
padding: 1px 5px; border-radius: 4px;
color: var(--text-soft);
}
.section-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 900px) { .section-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.panel {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.1rem 1.2rem;
min-width: 0;
}
.section h2 a { color: inherit; }
.section h2 a:hover { color: var(--accent-soft); text-decoration: none; }
/* ── print ──────────────────────────────────────────────────────── */
@media print {
:root {
--bg: #ffffff; --bg-elev: #ffffff; --bg-elev-2: #ffffff;
--text: #000000; --text-soft: #1a1a1a; --text-muted: #555555;
--link: #000000; --link-hover: #000000;
--accent: #000000; --accent-soft: #000000; --accent-fg: #ffffff;
--border: #cccccc; --border-soft: #dddddd;
}
body { background: #fff; color: #000; font-size: 11pt; }
.topbar, .footer, .aside-toc, .toc-mobile, .skip,
.toolbar, .meta-actions, .preview-tldr-cta, .nav-toggle, .theme-toggle,
.searchbox, .home-banner-right, .toast, .brief-cited {
display: none !important;
}
.main { padding: 0; max-width: none; }
.home-banner { background: none; border: 0; border-left: 0; padding: 0 0 1rem; }
.home-banner-eyebrow { color: #555; }
.brief-layout { grid-template-columns: 1fr; gap: 0; }
.brief-prose a { color: #000; text-decoration: underline; }
.brief-prose a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; word-break: break-all; }
.brief-prose h2, .brief-prose h3 { page-break-after: avoid; }
.brief-prose pre, .brief-prose blockquote, .brief-prose table { page-break-inside: avoid; }
.badge, .e-tag, .chip { border-color: #999; color: #000; background: none; }
}
/* ── v2 SSG additions: filter chips on the brief page, region/tag pills,
per-item metadata footer rendering. The previous SPA classes
(entity-list, brief-layout, brief-cited, panel, data-wrap, etc.)
are unchanged above this section. ───── */
/* Mobile horizontal-scroll guards: any wide content (markdown tables,
long permalink rows, code blocks, citation URLs) gets its own
contained scroller — never the page itself. */
.main, .view, .brief-prose { min-width: 0; }
.brief-prose pre,
.brief-prose code:not(pre code) {
overflow-x: auto;
max-width: 100%;
word-break: break-word;
}
.brief-prose pre { white-space: pre; }
.brief-prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.brief-prose table { table-layout: auto; }
.brief-prose td, .brief-prose th { word-break: break-word; }
.brief-prose a { word-break: break-word; }
.brief-prose img { max-width: 100%; height: auto; }
.cite-list .cite-url,
.cite-list .cite-host,
.cite-list .cite-label { word-break: break-word; }
/* The data-wrap helper used on list pages must not push the page wider. */
.data-wrap { max-width: 100%; overflow-x: auto; }
/* Filter chip bar at the top of every brief page. */
.filter-bar {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 0.6rem 0.8rem;
margin: 1.2rem 0 1.2rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: flex-start;
min-width: 0;
}
.filter-group { flex: 0 1 auto; min-width: 0; }
.filter-group > summary {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
cursor: pointer;
padding: 0.25rem 0;
list-style: none;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group .chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.4rem;
max-width: 100%;
}
/* The brief-page chip filter buttons get an aria-pressed-driven look on
top of the existing `.chip` class (which list-page filter chips also
use). */
button.chip {
font-family: var(--mono);
font-size: 0.75rem;
cursor: pointer;
background: var(--bg);
color: var(--text-soft);
}
button.chip:hover { border-color: var(--accent); color: var(--text); }
button.chip[aria-pressed="true"] {
background: var(--accent);
color: var(--accent-fg);
border-color: var(--accent);
}
button.chip-section[aria-pressed="false"] {
opacity: 0.45;
background: var(--bg);
color: var(--text-muted);
text-decoration: line-through;
}
.filter-clear {
font-size: 0.78rem;
border: 1px solid var(--border-soft);
background: transparent;
color: var(--text-muted);
padding: 0.2rem 0.6rem;
border-radius: 4px;
cursor: pointer;
}
.filter-clear:hover { color: var(--text); border-color: var(--border); }
.filter-status {
flex: 1 1 100%;
font-size: 0.82rem;
color: var(--text-muted);
margin: 0.2rem 0 0;
}
.section-hidden { display: none !important; }
.filter-section-empty { display: none; }
.brief-item.filter-hidden { display: none; }
/* Section toggles inside the aside-toc — each TOC entry is a row with
the section title (link, scrolls to anchor) and a small eye icon
(button, toggles section visibility). Subtle by default; only the
"hidden" state has visual weight. */
.toc-row {
display: flex;
align-items: baseline;
gap: 0.4rem;
justify-content: space-between;
}
.toc-row .toc-link {
flex: 1 1 auto;
min-width: 0;
}
.toc-row .toc-toggle {
flex: 0 0 auto;
background: transparent;
border: 0;
padding: 0.1rem 0.2rem;
margin: 0;
cursor: pointer;
color: var(--text-muted);
border-radius: 3px;
opacity: 0.45;
transition: opacity 0.1s linear, color 0.1s linear;
line-height: 0;
}
.toc-row:hover .toc-toggle { opacity: 0.85; }
.toc-row .toc-toggle:hover { color: var(--accent); opacity: 1; }
.toc-row .toc-toggle svg { width: 14px; height: 14px; display: block; }
.toc-row .toc-toggle .eye-shut { display: none; }
.toc-row .toc-toggle[aria-pressed="false"] {
opacity: 1;
color: var(--accent);
}
.toc-row .toc-toggle[aria-pressed="false"] .eye-open {
opacity: 0.45;
}
.toc-row .toc-toggle[aria-pressed="false"] .eye-shut { display: block; }
.toc-row.toc-row-hidden .toc-link {
text-decoration: line-through;
color: var(--text-muted);
}
/* Filter groups inside the aside-toc. Subtle, collapsed by default. */
.toc-filters {
margin-top: 0.9rem;
padding-top: 0.8rem;
border-top: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.toc-filters .filter-group { margin: 0; }
.toc-filters .filter-group > summary {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
cursor: pointer;
padding: 0.3rem 0;
list-style: none;
user-select: none;
}
.toc-filters .filter-group > summary::-webkit-details-marker { display: none; }
.toc-filters .filter-group > summary::after {
content: "›";
float: right;
transform: rotate(0deg);
transition: transform 0.1s linear;
font-size: 0.9rem;
line-height: 1;
}
.toc-filters .filter-group[open] > summary::after { transform: rotate(90deg); }
.toc-filters .filter-count { float: none; }
.filter-chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.35rem 0 0.6rem;
}
.filter-chip {
font-family: var(--mono);
font-size: 0.7rem;
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--text-soft);
padding: 0.1rem 0.5rem;
border-radius: 999px;
cursor: pointer;
line-height: 1.4;
transition: all 0.1s linear;
white-space: nowrap;
}
.filter-chip:hover { border-color: var(--accent); color: var(--text); }
.filter-chip[aria-pressed="false"] {
background: transparent;
color: var(--text-muted);
text-decoration: line-through;
opacity: 0.55;
border-color: var(--border-soft);
}
.filter-reset {
align-self: flex-start;
margin-top: 0.4rem;
font-size: 0.78rem;
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-soft);
padding: 0.18rem 0.55rem;
border-radius: 4px;
cursor: pointer;
}
.filter-reset:hover { color: var(--text); border-color: var(--border); }
.filter-status {
font-size: 0.78rem;
color: var(--text-muted);
margin: 0.4rem 0 0;
font-style: italic;
}
/* Region / tag / CVE pills inside the per-item metadata footer. */
.pill {
display: inline-block;
font-family: var(--mono);
font-size: 0.72rem;
padding: 0.05rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--border);
margin-right: 0.2rem;
text-decoration: none;
color: var(--text-soft);
background: var(--bg-elev-2);
white-space: nowrap;
}
.pill:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.pill-region { border-color: var(--info); color: var(--info); }
.pill-tag { border-color: var(--border); }
.pill-cve { border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* Each brief item rendered inside the brief body. */
.brief-prose .brief-item {
border-bottom: 1px solid var(--border-soft);
padding-bottom: 1rem;
margin-bottom: 1.2rem;
min-width: 0;
}
.brief-prose .item-header h3 {
margin: 1rem 0 0.4rem;
font-size: 1.15rem;
line-height: 1.3;
}
.brief-prose .item-header h3 a { color: var(--text); }
.brief-prose .item-header h3 a:hover { color: var(--accent-soft); text-decoration: none; }
.brief-prose .item-body { font-size: 0.95rem; min-width: 0; }
.item-footer {
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--border-soft);
font-size: 0.82rem;
color: var(--text-soft);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.9rem;
align-items: baseline;
}
.item-footer strong {
color: var(--text-muted);
font-weight: 500;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-right: 0.25rem;
}
.item-footer .src-primary { font-weight: 600; }
.item-footer .src-additional { color: var(--text-muted); }
.item-footer > span { min-width: 0; }
.item-footer a { word-break: break-word; }
/* Mobile narrowing: tighten the topbar so search + brand + actions fit. */
@media (max-width: 639px) {
.filter-bar { padding: 0.5rem 0.6rem; gap: 0.4rem; }
.filter-group .chip-row { gap: 0.25rem; }
.item-footer { font-size: 0.78rem; gap: 0.4rem 0.7rem; }
.item-header h3 { font-size: 1rem; }
}
/* ── decluttered home (v2.x) ─────────────────────────────────────────
Replaces the old home-banner gradient + stat-grid layout with a clean
three-section home: hero / today / recent. The previous classes are
kept above this block for the print stylesheet and any historical
pages that still reference them. */
/* Home page sections fill the main column width like every other page
(briefs list, cves list, sources list, ...) so navigating between
sections never visibly changes the content column width. Inner
readability is provided by the prose itself (the bullets are short
and the date / heading sit on their own lines). */
.home-hero,
.home-today,
.home-recent,
.home-empty { max-width: none; }
.home-hero { margin: 0.5rem 0 2rem; }
.home-hero h1 {
margin: 0 0 0.4rem;
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
letter-spacing: -0.01em;
}
.home-hero .lede {
margin: 0;
color: var(--text-soft);
font-size: 1rem;
line-height: 1.55;
}
.home-today {
margin-bottom: 2.4rem;
}
.home-today > h2 {
margin: 0 0 0.3rem;
font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
font-weight: 600;
letter-spacing: -0.005em;
/* Heading is plain text, not a link — the CTA below is the single
click target for the latest brief in this section. */
}
.home-today > .muted {
font-size: 0.85rem;
margin: 0 0 1rem;
}
.home-today ul {
margin: 0 0 1.2rem;
padding-left: 1.2rem;
}
.home-today ul li { margin-bottom: 0.6rem; line-height: 1.5; }
.home-today-cta { margin: 0; }
.home-recent {
border-top: 1px solid var(--border-soft);
padding-top: 1.4rem;
}
.home-recent h3 {
margin: 0 0 0.6rem;
font-size: 1rem;
font-weight: 600;
color: var(--text-soft);
}
.home-recent-list { list-style: none; padding: 0; margin: 0; }
.home-recent-list li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.home-recent-list li:last-child { border-bottom: 0; }
.home-recent-list li > a { font-weight: 500; }
.home-empty { color: var(--text-muted); margin-top: 1.5rem; }
/* Brief-meta strip — small inline tag badge for the parsed
Classification field (TLP:CLEAR, etc.) */
.brief-meta .meta-tag {
display: inline-block;
padding: 0.05rem 0.4rem;
border: 1px solid var(--border);
border-radius: 3px;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--text-soft);
background: var(--bg-elev);
}