/* Hugging Face design system tokens (colors_and_type.css), same as the State of OSS report */
:root {
  --hf-yellow:#FFD21E; --hf-blue:#496EF0;
  --hf-gray-900:#1B1B1D; --hf-gray-800:#32343D; --hf-gray-700:#475169; --hf-gray-600:#6A768F;
  --hf-gray-500:#9BA3AF; --hf-gray-400:#D1D5DB; --hf-gray-300:#E5E7EB; --hf-gray-200:#EEEFF2;
  --hf-gray-100:#F5F6F8; --hf-white:#FFFFFF; --hf-cream:#FFF8DE;

  --fg-1:var(--hf-gray-900); --fg-2:var(--hf-gray-700); --fg-3:var(--hf-gray-600); --fg-link:var(--hf-blue);
  --bg-1:var(--hf-white); --bg-2:var(--hf-gray-100); --bg-3:var(--hf-gray-200);
  --border-1:var(--hf-gray-200); --border-2:var(--hf-gray-300);
  --pill-fg:#B45309; --pill-bg:#FEF3C7;
  --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --font-sans:"Source Sans 3","Source Sans Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* chart palette: HF hues in the order that passes the dataviz validator (CVD, contrast) on both surfaces */
  --series-1:#496EF0; --series-2:#D97706; --series-3:#0E9F8E; --series-4:#DB3328; --series-5:#9747FF; --series-6:#009B3A;
  --series-other:var(--hf-gray-500);
  --grid:var(--hf-gray-200); --tip-bg:var(--hf-gray-900); --tip-fg:var(--hf-gray-100);
  --hero-bg:var(--hf-cream);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg-1:var(--hf-gray-100); --fg-2:var(--hf-gray-400); --fg-3:var(--hf-gray-500);
    --bg-1:var(--hf-gray-900); --bg-2:#121214; --bg-3:var(--hf-gray-800);
    --border-1:var(--hf-gray-800); --border-2:var(--hf-gray-700);
    --pill-bg:#3a2a12; --pill-fg:#FBBF24;
    --series-other:var(--hf-gray-600);
    --grid:var(--hf-gray-800); --tip-bg:var(--hf-gray-100); --tip-fg:var(--hf-gray-900);
    --hero-bg:#221f14; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fg-1:var(--hf-gray-100); --fg-2:var(--hf-gray-400); --fg-3:var(--hf-gray-500);
  --bg-1:var(--hf-gray-900); --bg-2:#121214; --bg-3:var(--hf-gray-800);
  --border-1:var(--hf-gray-800); --border-2:var(--hf-gray-700);
  --pill-bg:#3a2a12; --pill-fg:#FBBF24;
  --series-other:var(--hf-gray-600);
  --grid:var(--hf-gray-800); --tip-bg:var(--hf-gray-100); --tip-fg:var(--hf-gray-900);
  --hero-bg:#221f14; color-scheme: dark;
}

* { box-sizing:border-box; }
html, body { margin:0; font-family:var(--font-sans); color:var(--fg-1); background:var(--bg-2); -webkit-font-smoothing:antialiased; }
body { font-size:16px; line-height:24px; }
a { color:var(--fg-link); text-underline-offset:3px; }
code { font-family:var(--font-mono); font-size:.88em; }
h1, h2, h3 { margin:0; letter-spacing:-0.01em; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* header */
.top { background:var(--bg-1); border-bottom:1px solid var(--border-1); }
.top .wrap { display:flex; align-items:center; gap:12px; height:56px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:18px; white-space:nowrap; }
.brand img { width:28px; height:28px; }
.icon-btn { margin-left:auto; font:inherit; font-size:13px; color:var(--fg-2); background:transparent; border:1px solid var(--border-2); border-radius:var(--radius-md); padding:4px 10px; cursor:pointer; }
.icon-btn:hover { background:var(--bg-3); }
.hero { background:var(--hero-bg); border-bottom:1px solid var(--border-1); }
.hero .wrap { padding-top:32px; padding-bottom:32px; }
.eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px; }
.hero h1 { font-size:34px; line-height:40px; font-weight:700; max-width:24em; }
.hero p { font-size:17px; line-height:26px; color:var(--fg-2); margin:12px 0 0; max-width:50em; }

/* cards */
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:24px; }
.card { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:20px; min-width:0; display:flex; flex-direction:column; }
.card h3 { font-size:18px; line-height:24px; font-weight:600; }
.card .take { font-size:15px; line-height:22px; color:var(--fg-2); margin:4px 0 0; min-height:66px; }
.card .cap { font-size:13px; line-height:18px; color:var(--fg-3); margin:12px 0 0; }
.pill { display:inline-flex; font-family:var(--font-mono); font-size:11px; line-height:16px; padding:1px 8px; border-radius:var(--radius-pill); background:var(--pill-bg); color:var(--pill-fg); vertical-align:middle; margin-left:8px; }
.seg { display:inline-flex; align-self:flex-start; border:1px solid var(--border-2); border-radius:var(--radius-md); overflow:hidden; margin-top:16px; }
.seg button { font:inherit; font-size:14px; padding:4px 14px; background:var(--bg-1); color:var(--fg-2); border:none; border-right:1px solid var(--border-2); cursor:pointer; }
.seg button:last-child { border-right:none; }
.seg button[aria-pressed="true"] { background:var(--bg-3); color:var(--fg-1); font-weight:600; }
.chart { position:relative; height:460px; margin-top:16px; }
.tbl { display:none; height:460px; margin-top:16px; overflow:auto; border:1px solid var(--border-1); border-radius:var(--radius-md); }
.card.show-table .chart { display:none; }
.card.show-table .tbl { display:block; }
.card-foot { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.actions { display:flex; gap:14px; margin-top:12px; white-space:nowrap; }
.link-btn { font:inherit; font-size:13px; color:var(--fg-link); background:none; border:none; padding:0; cursor:pointer; }
.link-btn:hover { text-decoration:underline; }
table.data { width:100%; border-collapse:collapse; font-size:13px; line-height:18px; }
table.data th, table.data td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--border-1); white-space:nowrap; }
table.data th { position:sticky; top:0; background:var(--bg-1); color:var(--fg-3); font-weight:600; }
table.data .num { text-align:right; font-variant-numeric:tabular-nums; }

/* embed section + dialog */
section.block { padding:40px 0 0; }
section.block h2 { font-size:24px; line-height:30px; font-weight:700; }
section.block p.intro { color:var(--fg-2); margin:8px 0 0; max-width:52em; }
.embeds { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:16px; }
.snip { background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:14px 16px; min-width:0; }
.snip .row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:600; font-size:15px; }
.snip .row a { font-weight:400; font-size:13px; }
pre.code { margin:8px 0 0; padding:10px 12px; background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:12px; line-height:18px; white-space:pre-wrap; word-break:break-all; color:var(--fg-2); }
.copy { font:inherit; font-size:13px; color:var(--fg-1); background:var(--bg-3); border:1px solid var(--border-2); border-radius:var(--radius-md); padding:2px 10px; cursor:pointer; }
dialog { border:1px solid var(--border-2); border-radius:var(--radius-lg); background:var(--bg-1); color:var(--fg-1); padding:20px; width:min(760px, calc(100vw - 32px)); }
dialog .seg { margin-top:12px; }
iframe.preview { display:block; width:100%; height:min(480px, 50vh); margin-top:12px; border:1px solid var(--border-1); border-radius:var(--radius-md); background:var(--bg-2); }
dialog::backdrop { background:rgba(0,0,0,.4); }
dialog h3 { font-size:18px; }
dialog .row { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.notes { color:var(--fg-2); font-size:15px; line-height:22px; max-width:56em; }
.notes li { margin-top:6px; }
footer { padding:40px 0 48px; color:var(--fg-3); font-size:13px; }

/* embed page: one card fills the frame */
body.embed { background:var(--bg-1); }
body.embed .card { border:none; border-radius:0; height:100vh; padding:16px; }
body.embed .chart, body.embed .tbl { flex:1; height:auto; min-height:240px; }
body.embed .card > :not(.chart):not(.tbl) { flex-shrink:0; }   /* text keeps its height in short frames; the chart gives way */
body.embed .src { font-size:12px; color:var(--fg-3); }

@media (max-width: 860px) {
  .grid, .embeds { grid-template-columns:minmax(0,1fr); }
  .wrap { padding:0 16px; }
  .hero h1 { font-size:28px; line-height:34px; }
  .chart, .tbl { height:400px; }
}