/* rugyomi site: one small stylesheet, dark only (design-brief.md). No framework, no web fonts, no inline styles (CSP: style-src 'self'). */
:root {
  color-scheme: dark;
  --bg: #0e1217; --surface: #151b22; --raised: #1b232c; --line: #2a343f;
  --text: #e6eaf0; --muted: #98a3b1; --link: #7db4f0;
  --low: #52c08a; --elevated: #e5a93d; --high: #f0716a;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.78rem; --fs-s: 0.875rem; --fs-m: 0.95rem; --fs-l: 1.2rem; --fs-xl: 1.55rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;
  --r: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-m)/1.5 var(--sans); overflow-wrap: break-word; }
[id] { scroll-margin-top: var(--s3); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
a { color: var(--link); text-decoration: underline; text-decoration-color: rgb(125 180 240 / 0.4); text-underline-offset: 2px; touch-action: manipulation; }
a:hover { text-decoration-color: currentColor; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--s4); }
.skip { position: absolute; left: var(--s2); top: -4rem; background: var(--raised); color: var(--text); padding: var(--s2) var(--s3); border-radius: var(--r); z-index: 10; }
.skip:focus { top: var(--s2); }

/* header and navigation */
.site-head { border-bottom: 1px solid var(--line); }
.site-nav { display: flex; align-items: center; gap: var(--s2) var(--s5); flex-wrap: wrap; }
.site-nav .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; padding: var(--s3) 0; }
.site-nav ul { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav li a { display: block; padding: var(--s3) 0; color: var(--muted); text-decoration: none; font-size: var(--fs-s); white-space: nowrap; }
.site-nav li a:hover, .site-nav li a[aria-current] { color: var(--text); }
.site-nav li a[aria-current] { box-shadow: inset 0 -2px 0 var(--link); }
.demo-note { background: var(--raised); box-shadow: 0 0 0 100vmax var(--raised); clip-path: inset(0 -100vmax); padding-top: var(--s2); padding-bottom: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.demo-note p { margin: var(--s2) 0 0; }
.demo-note strong { color: var(--text); }
main { display: block; padding-bottom: var(--s5); }
footer { border-top: 1px solid var(--line); padding-top: var(--s3); padding-bottom: var(--s5); color: var(--muted); font-size: var(--fs-xs); }

/* type */
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--fs-xl); letter-spacing: -0.015em; margin: var(--s5) 0 var(--s1); }
h2 { font-size: var(--fs-l); margin: 0 0 var(--s3); }
h3 { font-size: var(--fs-m); margin: var(--s4) 0 var(--s2); }
h1 small, h2 small, h3 small { font-size: var(--fs-s); font-weight: 400; color: var(--muted); }
h1 small { margin-left: var(--s1); }
p { margin: 0 0 var(--s3); max-width: 70ch; }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.2em; max-width: 70ch; }
li { margin-bottom: var(--s1); }
strong { font-weight: 650; }
small { font-size: var(--fs-s); }
code { font-family: var(--mono); font-size: 0.86em; background: var(--raised); padding: 0.05em 0.35em; border-radius: var(--r); overflow-wrap: anywhere; }
.muted { color: var(--muted); font-size: var(--fs-s); }
.nw { white-space: nowrap; }
.token-id { font-family: var(--mono); font-size: var(--fs-xs); overflow-wrap: anywhere; margin-bottom: var(--s3); }
.num, .big, strong, td, th { font-variant-numeric: tabular-nums; }

/* sections: a hairline and a title; only the risk card and notices are boxed */
section { margin: var(--s5) 0 var(--s6); }
section > h2 { padding-top: var(--s4); border-top: 1px solid var(--line); }
article { margin: 0 0 var(--s4); }
.panel { max-width: 50rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); }
.notice { background: var(--surface); border-left: 3px solid var(--elevated); padding: var(--s2) var(--s3); margin: var(--s3) 0; border-radius: 0 var(--r) var(--r) 0; }
.notice p { margin: var(--s1) 0; }
.notice p:last-child { margin-bottom: var(--s1); }

/* chips: risk band, small tags, jump links */
.band { display: inline-block; padding: 0 0.5em; border-radius: var(--r); font-weight: 650; font-size: var(--fs-s); line-height: 1.55; border: 1px solid currentColor; vertical-align: baseline; }
.band-low { color: var(--low); background: rgb(82 192 138 / 0.1); }
.band-elevated { color: var(--elevated); background: rgb(229 169 61 / 0.1); }
.band-high { color: var(--high); background: rgb(240 113 106 / 0.1); }
.tag { display: inline-block; padding: 0 0.4em; border-radius: var(--r); font-size: var(--fs-xs); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; text-decoration: none; }
a.tag { color: var(--link); }
.jump { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: var(--s1) 0 var(--s2); margin: 0 0 var(--s2); }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: none; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; font-size: var(--fs-s); white-space: nowrap; }
.jump a:hover { background: var(--raised); }

/* the headline of the risk card */
.score-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0 0 var(--s1); }
.score-line .band { font-size: var(--fs-m); }
.score-line > strong { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.score-line > .muted { flex: 1 1 100%; }
.chance { margin: var(--s2) 0; }
.verdict { font-size: 1.05rem; margin-bottom: var(--s2); }
.verdict .muted { font-size: var(--fs-s); }
.big { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
ul.reasons { list-style: none; padding: 0; margin: var(--s3) 0; }
ul.reasons li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); margin: 0; }
ul.reasons li > strong { color: var(--text); }
ul.reasons li > div { min-width: 0; }

/* details: long explanations folded away */
details { margin: 0 0 var(--s3); max-width: 70ch; }
details > summary { cursor: pointer; color: var(--link); font-size: var(--fs-s); padding: var(--s2) 0; list-style-position: inside; }
details > summary:hover { text-decoration: underline; }
details[open] > summary { margin-bottom: var(--s1); }
details > p, details > ul { margin-top: 0; }
.demo-note details { margin: 0; max-width: none; }
.demo-note summary { color: var(--muted); font-size: var(--fs-xs); padding: 0; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); margin: 0 0 var(--s3); }
th, td { padding: 0.55rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); white-space: nowrap; border-bottom-color: var(--line); }
th[scope="row"] { color: var(--muted); font-weight: 400; width: 9rem; }
.kv { max-width: 56rem; }
.kv td, .kv th { overflow-wrap: anywhere; }
.c-token a, .jump a, .site-nav a { text-decoration: none; }
.c-token a:hover { text-decoration: underline; }
tbody tr:hover > td { background: rgb(255 255 255 / 0.02); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
.scroll { overflow-x: auto; margin: 0 calc(var(--s4) * -1) var(--s3); padding: 0 var(--s4); -webkit-overflow-scrolling: touch; }
.scroll table { width: max-content; min-width: 100%; margin: 0; }
.scroll td:first-child, .scroll th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 8rem; max-width: 11rem; padding-right: var(--s3); box-shadow: 1px 0 0 var(--line); }
.scroll td.nw, .scroll th { white-space: nowrap; }
.scroll td { min-width: 5.5rem; }
.scroll td:first-child { white-space: normal; }

/* the feed: the band is the left edge of every row */
.feed tr { --band: transparent; }
.feed tr.r-low { --band: var(--low); }
.feed tr.r-elevated { --band: var(--elevated); }
.feed tr.r-high { --band: var(--high); }
.feed .tok-id { font-family: var(--mono); font-size: var(--fs-xs); }
.wide { overflow-x: auto; }
/* a table that nobody wrapped yet (the pages of DSN-002): scroll inside the page instead of widening it */
main > table, section > table:not(.kv), article > table:not(.kv) { display: block; max-width: 100%; overflow-x: auto; }
td .muted { font-size: var(--fs-xs); }
.empty { color: var(--muted); padding: var(--s5) 0; }

@media (min-width: 720px) {
  .container { padding-inline: var(--s5); }
  .scroll { margin: 0 0 var(--s3); padding: 0; }
  h1 { margin-top: var(--s6); }
  section { margin-bottom: 48px; }
  .jump { flex-wrap: wrap; overflow: visible; }
  th[scope="row"] { width: 14rem; }
  .feed tbody td:first-child { box-shadow: inset 3px 0 0 var(--band); }
  .feed .c-s5, .feed .c-s60 { min-width: 13rem; }
  .feed th:first-child, .feed td:first-child { padding-left: var(--s3); }
}

/* phones: stacked rows for lists (token and band first, facts as labelled chips); time series scroll sideways */
@media (max-width: 719px) {
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack, .stack tbody { display: block; }
  .stack tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); padding: var(--s3) 0 var(--s3) var(--s3); border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--band, transparent); }
  .stack td { display: block; padding: 0; border: 0; min-width: 0; font-size: var(--fs-s); }
  .stack td:first-child { box-shadow: none; padding-left: 0; }
  .stack td:last-child { padding-right: 0; }
  .stack td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: var(--fs-xs); }
  .stack td.blk::before { display: block; }
  .stack td.full { flex: 1 1 100%; }
  .stack td.half { flex: 1 1 40%; }
  .stack td.quarter { flex: 1 1 22%; }
  /* feed: token and risk on the first line, context on the second, the two snapshots on the third */
  .feed .c-token { order: 1; flex: 1 1 0; font-size: var(--fs-m); }
  .feed tbody tr { position: relative; }
  .feed .c-token a { display: inline-block; padding: 2px 0; }
  .feed .c-token a::after { content: ""; position: absolute; inset: 0; }
  .feed .c-token a:focus-visible { outline: none; }
  .feed .c-token a:focus-visible::after { outline: 2px solid var(--link); outline-offset: -2px; }
  .feed .c-creator a { position: relative; z-index: 1; display: inline-block; padding: 3px 0; }
  .feed .c-risk { order: 2; flex: none; }
  .feed tr::before, .feed tr::after { content: ""; flex: 1 1 100%; height: 0; }
  .feed tr::before { order: 3; }
  .feed .c-time, .feed .c-pad, .feed .c-creator, .feed .c-dev, .feed .c-out, .feed .c-data { color: var(--muted); }
  .feed .c-time { order: 4; }
  .feed .c-pad { order: 5; }
  .feed .c-creator { order: 6; }
  .feed .c-dev, .feed .c-out, .feed .c-data { order: 7; }
  .feed tr::after { order: 8; }
  .feed .c-s5 { order: 9; }
  .feed .c-s60 { order: 10; }
  .feed .c-s5, .feed .c-s60 { flex: 1 1 40%; white-space: normal; }
  /* early buyers: rank and wallet first, the four numbers next, the links last */
  .buyers .c-rank { flex: 0 0 1.5rem; color: var(--muted); }
  .buyers .c-rank::before { content: "#"; }
  .buyers .c-wallet { flex: 1 1 calc(100% - 2.5rem); min-width: 0; font-size: var(--fs-m); }
  .buyers .c-links { flex: 1 1 100%; margin-top: var(--s1); }
  .buyers .c-metric { flex: 1 1 40%; white-space: normal; }
  .buyers .c-links::before { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}