/* Robot Cybersecurity Lab — design system
   Minimalist (pi.website) shell + distill.pub-style articles + zerodayclock dashboard.
   Owned, self-hosted, dependency-free. */

:root{
  --bg:#ffffff; --panel:#ffffff; --ink:#111418; --muted:#6b7280; --faint:#9aa0a8;
  --line:#e7e7e9; --line2:#f1f1f2; --accent:#e0322b; --accent-ink:#b21e18;
  --ok:#1f9d55; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1080px; --readw: 680px;
  --sev-critical:#b21e18; --sev-high:#e0322b; --sev-medium:#e08a00; --sev-low:#1f9d55; --sev-unknown:#9aa0a8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1;}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
img{max-width:100%;height:auto}

/* ---------- header / nav ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600;letter-spacing:-.01em}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(224,50,43,.14);flex:0 0 auto}
.brand small{display:block;font-weight:400;font-size:.7rem;color:var(--muted);letter-spacing:.02em;margin-top:-2px}
.nav{display:flex;gap:1.4rem;font-size:.92rem}
.nav a{color:var(--muted)} .nav a:hover{color:var(--ink);text-decoration:none}
.nav a.active{color:var(--ink)}

/* ---------- generic sections ---------- */
.section-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.18}
.lede{font-size:1.15rem;color:#333;max-width:40rem}
.cite,.source{font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.01em}
.cite a,.source a{color:var(--muted)}

/* ---------- HOME: thesis hero ---------- */
.hero{padding:4.5rem 0 2rem}
.hero h1{font-size:2.7rem;margin:.4rem 0 1rem;max-width:18ch}
.hero .accent{color:var(--accent)}
.hero .thesis{font-size:1.2rem;color:#333;max-width:44rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:2.4rem 0}
.kpi{background:#fff;padding:1.2rem 1.1rem}
.kpi .n{font-size:2rem;font-weight:640;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .l{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.kpi .s{font-family:var(--mono);font-size:.66rem;color:var(--faint);margin-top:.5rem}

/* dashboard panels */
.panel{border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.5rem;margin:1.2rem 0;background:#fff}
.panel h3{margin:.1rem 0 .3rem;font-size:1.15rem}
.panel .sub{color:var(--muted);font-size:.92rem;margin:0 0 1rem}
.panel .source{display:block;margin-top:1rem;padding-top:.7rem;border-top:1px dashed var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:820px){.grid2{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:2rem}}

/* milestone cards (zerodayclock-style) */
.milestones{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ms{background:#fff;padding:1.1rem .9rem;text-align:center}
.ms .y{font-family:var(--mono);font-size:.72rem;color:var(--accent)}
.ms .big{font-size:1.15rem;font-weight:600;margin:.35rem 0 .2rem;letter-spacing:-.01em}
.ms .d{font-size:.76rem;color:var(--muted);line-height:1.35}
@media(max-width:820px){.milestones{grid-template-columns:repeat(2,1fr)}}

/* charts (inline SVG) */
.chart{width:100%;height:auto;display:block}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line2);stroke-width:1}
.chart .bar{fill:var(--ink)}
.chart .bar.crit{fill:var(--sev-critical)} .chart .bar.high{fill:var(--sev-high)}
.chart .bar.med{fill:var(--sev-medium)} .chart .bar.low{fill:var(--sev-low)} .chart .bar.unk{fill:var(--sev-unknown)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2}
.chart .area{fill:rgba(224,50,43,.08)}
.chart .lab{font-family:var(--mono);font-size:10px;fill:var(--faint)}
.chart .val{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.chart .dot{fill:var(--accent)}

/* timeline */
.timeline{position:relative;margin:.5rem 0}
.tl-item{display:grid;grid-template-columns:64px 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line2)}
.tl-item:first-child{border-top:0}
.tl-year{font-family:var(--mono);color:var(--accent);font-size:.9rem;padding-top:.1rem}
.tl-body{font-size:.95rem}
.tl-body .src{font-family:var(--mono);font-size:.68rem;color:var(--faint)}

/* ---------- entry list (pi.website) ---------- */
.entries{margin:1rem 0 2rem}
.entry{display:grid;grid-template-columns:56px 1fr auto;gap:1rem;align-items:start;
  padding:1.1rem 0;border-top:1px solid var(--line)}
.entry .thumb{width:56px;height:56px;border-radius:8px;background:#f4f4f5 center/cover;border:1px solid var(--line)}
.entry .t{font-weight:600;letter-spacing:-.01em}
.entry .desc{color:var(--muted);font-size:.92rem;margin-top:.2rem;max-width:56ch}
.entry .kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.entry .date{font-family:var(--mono);font-size:.78rem;color:var(--faint);white-space:nowrap;padding-top:.15rem}
.entry:hover .t{color:var(--accent-ink)}

/* ---------- distill-lite article ---------- */
.article{padding:3rem 0 2rem}
.article .a-head{max-width:var(--readw);margin:0 auto 2rem}
.a-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.article h1.title{font-size:2.2rem;margin:.5rem 0 .6rem;letter-spacing:-.025em}
.byline{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.8rem 0;margin-top:1rem}
.byline b{display:block;color:var(--ink);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem;font-family:var(--mono)}
.a-abstract{max-width:var(--readw);margin:0 auto 1.5rem;font-size:1.08rem;color:#2b2b2b;font-family:var(--serif)}
/* body grid: reading column + right margin gutter for notes */
.a-body{display:grid;grid-template-columns:minmax(0,var(--readw)) 220px;gap:36px;
  justify-content:center;font-family:var(--serif);font-size:1.06rem;line-height:1.72;color:#1c1c1e}
.a-body>*{grid-column:1}
.a-body h2{grid-column:1;font-family:var(--sans);font-size:1.4rem;margin:2.2rem 0 .6rem;letter-spacing:-.02em}
.a-body h3{grid-column:1;font-family:var(--sans);font-size:1.12rem;margin:1.6rem 0 .4rem}
.a-body p{margin:0 0 1.1rem}
.a-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.a-body figure{grid-column:1 / -1;margin:2rem 0;text-align:center}
.a-body figure.wide{grid-column:1 / -1}
.a-body figcaption{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin-top:.5rem}
.a-body blockquote{grid-column:1;margin:1.5rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--accent);color:#333;font-style:italic}
.a-body pre{grid-column:1 / -1;background:#0f1115;color:#eaeaea;padding:1rem 1.2rem;border-radius:8px;overflow:auto;font-family:var(--mono);font-size:.86rem;line-height:1.5}
.a-body code{font-family:var(--mono);font-size:.9em;background:#f4f4f5;padding:.08em .35em;border-radius:4px}
.a-body pre code{background:none;padding:0}
.a-body ul,.a-body ol{margin:0 0 1.1rem;padding-left:1.3rem}
.margin-note{grid-column:2;font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--muted);
  border-left:2px solid var(--line);padding-left:.8rem;align-self:start}
.a-body table{grid-column:1 / -1;border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.9rem;margin:1.5rem 0}
.a-body th,.a-body td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.a-body th{background:#fafafa}
@media(max-width:900px){.a-body{grid-template-columns:minmax(0,1fr)}.margin-note{grid-column:1;border-left:0;border-top:1px solid var(--line);padding:.6rem 0 0;margin:.2rem 0 1rem}}

/* TOC */
.toc{max-width:var(--readw);margin:0 auto 1.5rem;border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem}
.toc .section-label{display:block;margin-bottom:.5rem}
.toc ol{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--muted)}
.toc a:hover{color:var(--accent-ink)}

/* citations / bibliography */
.a-cite-block{max-width:var(--readw);margin:2.5rem auto 0;border:1px solid var(--line);border-radius:10px;
  padding:1.1rem 1.3rem;background:#fafafa}
.a-cite-block .section-label{display:block;margin-bottom:.5rem}
.a-cite-block .bibtex{font-family:var(--mono);font-size:.74rem;white-space:pre-wrap;color:#333;line-height:1.5}
.readpaper{display:inline-block;margin-top:.8rem;font-family:var(--mono);font-size:.8rem;
  border:1px solid var(--ink);border-radius:20px;padding:.4rem 1rem;color:var(--ink)}
.readpaper:hover{background:var(--ink);color:#fff;text-decoration:none}
.footnotes{max-width:var(--readw);margin:2rem auto 0;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem}

/* ---------- explorer ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.filters select,.filters input{font-family:var(--mono);font-size:.8rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.vtable{width:100%;border-collapse:collapse;font-size:.88rem}
.vtable th{position:sticky;top:58px;background:#fff;text-align:left;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:.6rem .5rem}
.vtable td{border-bottom:1px solid var(--line2);padding:.6rem .5rem;vertical-align:top}
.sev{font-family:var(--mono);font-size:.68rem;padding:.15rem .5rem;border-radius:20px;color:#fff;white-space:nowrap}
.sev.critical{background:var(--sev-critical)}.sev.high{background:var(--sev-high)}
.sev.medium{background:var(--sev-medium)}.sev.low{background:var(--sev-low)}.sev.unknown{background:var(--sev-unknown)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:4rem;padding:2.5rem 0 3rem;color:var(--muted);font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot-grid h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 .7rem}
.sponsors{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.4rem}
.sponsor{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.people{list-style:none;margin:0;padding:0}
.people li{margin:.2rem 0}
.foot-legal{margin-top:2rem;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}
.archive-flag{font-family:var(--mono);font-size:.74rem;color:var(--muted);background:#faf7f0;border:1px solid #efe7d6;border-radius:8px;padding:.5rem .8rem;margin:1rem auto;max-width:var(--readw)}

/* interactive chart boxes */
.chart-box{position:relative;height:340px;margin:.6rem 0 .3rem}
@media(max-width:820px){.chart-box{height:300px}}
.source-badges{display:inline-flex;gap:.3rem;flex-wrap:wrap}
.src-badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;padding:.1rem .4rem;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.src-badge.RVD{border-color:#e0322b;color:#b21e18}
.src-badge.NVD{border-color:#111418;color:#111418}
.src-badge.EUVD{border-color:#4b6bfb;color:#4b6bfb}
.src-badge.KEV{background:#e08a00;color:#fff;border-color:#e08a00}