:root { --bg:#0e0f12; --fg:#e7e7ea; --muted:#8a8d96; --accent:#f2a900; --card:#16181d; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
       background:var(--bg); color:var(--fg); }
header { display:flex; justify-content:space-between; align-items:center;
         padding:18px 28px; border-bottom:1px solid #23262d; }
h1 { margin:0; font-size:20px; }
h2 { margin:24px 0 12px; font-size:16px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
section { padding:0 28px 18px; }
.stats { display:flex; gap:16px; padding:24px 28px; flex-wrap:wrap; }
.stat { background:var(--card); border-radius:12px; padding:16px 22px; min-width:220px; }
.stat span { display:block; color:var(--muted); font-size:12px; }
.stat strong { font-size:24px; color:var(--accent); }
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; }
th,td { text-align:left; padding:10px 14px; border-bottom:1px solid #23262d; vertical-align:top; }
th { color:var(--muted); font-weight:500; }
tr:last-child td { border:0; }
a { color:var(--accent); text-decoration:none; }
.login { display:flex; align-items:center; justify-content:center; height:100vh; }
.card { background:var(--card); padding:32px 36px; border-radius:14px; max-width:420px; text-align:center; }
.card p { color:var(--muted); }
code { background:#0a0b0e; padding:2px 6px; border-radius:4px; }
.hint { color:var(--muted); font-size:13px; margin:-6px 0 12px; max-width:80ch; }
.search { display:flex; gap:8px; flex:1; max-width:560px; align-items:center; }
.search input[type=search] { flex:1; padding:10px 14px; border-radius:8px; border:1px solid #23262d;
                             background:#0a0b0e; color:var(--fg); font-size:14px; }
.search input[type=search]:focus { outline:none; border-color:var(--accent); }
.search button { padding:10px 16px; border-radius:8px; border:0; background:var(--accent); color:#000;
                 font-weight:600; cursor:pointer; }
.search button:hover { filter:brightness(1.1); }
.stats { align-items:center; }

/* Docs page */
.docs-layout { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:0; align-items:start; }
.docs-toc { position:sticky; top:0; max-height:100vh; overflow-y:auto;
            padding:24px 16px 24px 28px; border-right:1px solid #23262d;
            font-size:13px; color:var(--muted); }
.docs-toc strong { display:block; margin-bottom:8px; color:var(--fg);
                   text-transform:uppercase; letter-spacing:.05em; font-size:11px; }
.docs-toc ul { list-style:none; padding:0; margin:0; }
.docs-toc li { padding:3px 0; }
.docs-toc ul ul { margin-left:14px; padding-top:2px; }
.docs-toc ul ul li { padding:1px 0; font-size:12px; }
.docs-toc a { color:var(--muted); }
.docs-toc a:hover { color:var(--accent); }
.docs-body { min-width:0; padding:24px 28px 60px; max-width:980px; line-height:1.6; }
.docs-body section { margin-bottom:8px; }
.docs-body h2 { color:var(--fg); font-size:22px; text-transform:none;
                letter-spacing:0; margin:24px 0 12px; padding-top:16px;
                border-top:1px solid #23262d; scroll-margin-top:12px; }
.docs-body section:first-of-type h2 { border-top:0; padding-top:0; }
.docs-body h3 { font-size:16px; color:var(--accent); margin:20px 0 8px; scroll-margin-top:12px; }
.docs-body h3 .muted { color:var(--muted); font-size:13px; font-weight:400; }
.docs-body p { color:var(--fg); margin:8px 0; }
.docs-body dl { display:grid; grid-template-columns:140px 1fr; gap:6px 18px; }
.docs-body dt { color:var(--accent); font-weight:600; }
.docs-body dd { margin:0; color:var(--fg); }
.docs-body a { color:var(--accent); }
.docs-body table { font-size:13px; margin:8px 0 16px; table-layout:fixed; }
.docs-body table th, .docs-body table td { word-break:break-word; vertical-align:top; }
.docs-body table td:nth-child(1) { white-space:nowrap; width:90px; }
.docs-body table th:nth-child(1) { width:90px; }
.docs-body code { word-break:break-word; }

/* Timeline */
.timeline-filters { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; }
.timeline-filters label { display:flex; flex-direction:column; gap:4px; font-size:12px;
                          color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.timeline-filters label.grow { flex:1; min-width:200px; }
.timeline-filters select, .timeline-filters input[type=search] {
  padding:8px 12px; border-radius:8px; border:1px solid #23262d;
  background:#0a0b0e; color:var(--fg); font-size:14px;
}
.timeline-filters select:focus, .timeline-filters input:focus { outline:none; border-color:var(--accent); }
.timeline-filters button { padding:9px 16px; border-radius:8px; border:0;
  background:var(--accent); color:#000; font-weight:600; cursor:pointer; }
table.feed { table-layout:fixed; }
table.feed th:nth-child(1), table.feed td:nth-child(1) { width:170px; white-space:nowrap; }
table.feed th:nth-child(2), table.feed td:nth-child(2) { width:200px; word-break:break-word; }
table.feed th:nth-child(4), table.feed td:nth-child(4) { width:90px; white-space:nowrap; }
table.feed td.content { white-space:pre-wrap; word-break:break-word; }
.muted { color:var(--muted); }
.lang-badge { display:inline-block; padding:0 6px; border-radius:4px;
              background:#23262d; color:var(--accent); font-size:11px;
              text-transform:uppercase; letter-spacing:.05em; margin-right:4px; }

/* Health banner */
.health-banner { display:flex; gap:18px; padding:8px 28px;
  background:#0a0b0e; border-bottom:1px solid #23262d;
  font-size:12px; color:var(--muted); flex-wrap:wrap; }
.health-banner strong { color:var(--accent); font-weight:600; }

/* Watchlist + small forms */
.watchlist-add { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.watchlist-add input { flex:1; min-width:180px; padding:8px 12px;
  border-radius:8px; border:1px solid #23262d; background:#0a0b0e; color:var(--fg); }
.watchlist-add button, .timeline-filters button.link-btn, .link-btn {
  background:transparent; border:0; color:var(--accent); cursor:pointer;
  text-decoration:underline; padding:0; font-size:13px; }
.watchlist-add button { padding:8px 16px; border-radius:8px;
  background:var(--accent); color:#000; font-weight:600; text-decoration:none; }

/* Heatmap */
.heatmap { table-layout:fixed; font-size:11px; }
.heatmap th { color:var(--muted); font-weight:500; padding:4px 2px; text-align:center; }
.heatmap td.hm { padding:4px 2px; text-align:center; min-width:24px;
  border:1px solid #16181d; color:var(--fg); }

/* Profile card on /p/<id> */
.profile-card { display:flex; gap:16px; align-items:flex-start; }
.avatar { width:96px; height:96px; border-radius:12px; object-fit:cover; background:#23262d; }
.profile-meta { flex:1; min-width:0; }
.profile-meta div { margin:4px 0; }

/* Two-col layout for paired panels */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width: 900px) { .two-col { grid-template-columns:1fr; } }

/* CSV download link in section headings */
a.csv { font-size:11px; color:var(--muted); text-decoration:none;
        margin-left:8px; padding:2px 8px; border:1px solid #23262d;
        border-radius:4px; vertical-align:middle; }
a.csv:hover { color:var(--accent); border-color:var(--accent); }

/* Three-column layout (e.g. side-by-side rank lenses) */
.three-col { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width: 1100px) { .three-col { grid-template-columns:1fr; } }
.three-col h3 { margin:6px 0; font-size:14px; color:var(--accent);
                text-transform:uppercase; letter-spacing:.05em; }

/* Rank summary cards (per-pubkey) */
.rank-card { background:var(--card); padding:14px 18px; border-radius:10px; }
.rank-card h3 { margin:0 0 8px; font-size:11px; }
.rank-card .big { font-size:28px; font-weight:600; color:var(--accent); }
.rank-card p { margin:2px 0; font-size:12px; }

/* Inline hover-tip — pairs with native `title="…"` so the explanation
   appears on hover (mouse) and on focus (keyboard). Dotted underline +
   cursor:help signal something to discover without adding visual noise.
   Used wherever a term might be unfamiliar to a non-engineer viewer. */
.tip { cursor:help; text-decoration:underline dotted; text-underline-offset:3px;
       text-decoration-color:var(--muted); }
.tip:hover { text-decoration-color:var(--accent); color:var(--accent); }
/* Small ⓘ icon next to tooltip-labels — extra visual signal beyond the
   dotted underline. The whole containing card should be `title="…"`
   so hovering anywhere on the card surfaces the tooltip. */
.tip-icon { color:var(--muted); font-size:11px; cursor:help; opacity:0.7; }
.rank-card[title] { cursor:help; }
.rank-card[title]:hover .tip-icon { color:var(--accent); opacity:1; }

/* Network Pulse */
section.pulse h2 { margin:18px 28px 8px; }
.pulse > .two-col { padding:0 28px; }
.pulse-card { background:var(--card); padding:18px 22px; border-radius:12px; }
.pulse-card h3 { margin:0 0 12px; font-size:14px; color:var(--accent);
                 text-transform:uppercase; letter-spacing:.05em; }
.pulse-card .muted { color:var(--muted); font-weight:normal; }
.pulse-list { list-style:disc; padding-left:18px; margin:0; line-height:1.55; }
.pulse-list li { margin:6px 0; color:var(--fg); font-size:14px; }
.pulse-list strong { color:var(--accent); font-weight:600; }
.pulse-list a { color:var(--accent); }

/* Delta badges + sparklines */
.delta-up   { color:#3ddc97; font-weight:600; }
.delta-down { color:#ff6b6b; font-weight:600; }
.delta-flat { color:var(--muted); }
svg.spark { display:inline-block; }

/* Auto-narrative insights box at top of home */
.insights { padding:20px 28px; background:linear-gradient(180deg, rgba(242,169,0,0.06), transparent);
            border-bottom:1px solid #23262d; }
.insights h2 { margin:0 0 12px; font-size:18px; color:var(--accent);
               text-transform:none; letter-spacing:0; }
.insight-list { list-style:none; padding:0; margin:0; }
.insight-list li { padding:8px 0 8px 22px; position:relative; font-size:15px; line-height:1.55; }
.insight-list li::before { content:"›"; position:absolute; left:0; top:7px;
                           color:var(--accent); font-size:18px; font-weight:600; }
.insight-list strong { color:var(--accent); }
.insight-list a { color:var(--accent); }

/* Foldable protocol-level breakdown */
details { margin:0 28px 24px; border:1px solid #23262d; border-radius:8px;
          padding:0 16px; background:#0a0b0e; }
details > summary { padding:12px 0; cursor:pointer; color:var(--muted);
                    font-size:13px; text-transform:uppercase; letter-spacing:.05em;
                    list-style:none; }
details > summary::-webkit-details-marker { display:none; }
details[open] > summary { padding-bottom:8px; border-bottom:1px solid #23262d; margin-bottom:12px; }
.protocol-toggle:hover { color:var(--fg); }

/* Marketing sub-nav tabs */
nav.subnav { display:flex; gap:4px; padding:8px 28px 0;
             border-bottom:1px solid #23262d; background:#0a0b0e; }
nav.subnav a { padding:10px 16px; color:var(--muted); text-decoration:none;
               border:1px solid transparent; border-bottom:none;
               border-radius:8px 8px 0 0; font-size:14px;
               position:relative; bottom:-1px; }
nav.subnav a:hover { color:var(--fg); }
nav.subnav a.active { background:var(--bg); border-color:#23262d;
                      color:var(--accent); }

/* Stack on tablet/mobile so nothing overflows on the iPad */
@media (max-width: 900px) {
  .docs-layout { grid-template-columns:1fr; }
  .docs-toc { position:static; max-height:none; border-right:0;
              border-bottom:1px solid #23262d; padding:16px 28px; }
  .docs-body { padding:8px 20px 60px; }
  .docs-body dl { grid-template-columns:1fr; }
  .docs-body dt { margin-top:8px; }
}

/* Chart.js canvas wrapper — gives the chart a real box to fill so it can
   use maintainAspectRatio:false instead of collapsing on narrow screens. */
.chart-box { position:relative; height:320px; margin-top:8px; }

/* ============================================================
   Phone breakpoint — keep everything readable and scrollable on
   small screens. Pairs with the viewport meta now on every page.
   ============================================================ */
@media (max-width: 640px) {
  /* Header: stack the title above the nav so neither gets crushed */
  header { flex-direction:column; align-items:flex-start; gap:6px; padding:12px 16px; }
  header h1 { font-size:17px; line-height:1.25; }
  header .user { font-size:13px; line-height:1.9; }

  h2 { margin:18px 0 10px; }
  section { padding:0 16px 16px; }

  /* Stat cards wrap two-up instead of overflowing in one row */
  .stats { padding:16px; gap:10px; }
  .stat { min-width:0; flex:1 1 calc(50% - 6px); padding:12px 14px; }
  .stat strong { font-size:20px; }

  /* Data tables: single-line rows that scroll horizontally as one unit
     (fixes tall, ragged rows from wrapped cells). Prose cells still wrap. */
  table:not(.heatmap) { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table:not(.heatmap) th, table:not(.heatmap) td { white-space:nowrap; padding:8px 10px; }
  td.content { white-space:pre-wrap; }

  /* Heatmap: per-cell numbers overlap into mush at this width — drop them
     and let the colour grid fit the screen (detail stays in title=). */
  .heatmap { display:table; width:100%; table-layout:fixed; }
  .heatmap td.hm { color:transparent; font-size:0; min-width:0; padding:7px 0; }
  .heatmap thead th { font-size:8px; padding:2px 0; }
  .heatmap tbody th { font-size:10px; padding:2px 4px 2px 0; }

  /* Tighten the full-bleed bars/boxes to the smaller gutter */
  .insights, .health-banner { padding-left:16px; padding-right:16px; }
  nav.subnav { padding:8px 16px 0; overflow-x:auto; }
  details { margin:0 16px 18px; }
  .timeline-filters { gap:8px; }
  .timeline-filters label.grow { min-width:0; }
  .search { max-width:none; }

  /* Network Pulse + paired panels */
  section.pulse h2 { margin:14px 16px 8px; }
  .pulse > .two-col { padding:0 16px; }

  /* Profile header stacks above its details */
  .profile-card { flex-direction:column; }
  .avatar { width:72px; height:72px; }

  /* Charts fill a slightly shorter box on phones */
  .chart-box { height:300px; }
}