/* ProofLines Monad — the MOST theme, extracted so pages share one file instead of
   each carrying its own copy. First used on /monad/most/, then /monad/trust-layer/.
   Self-contained: a page linking this needs nothing from ../styles.css. */

:root{
  --bg:#0a0e1c; --panel:#0e1424; --panel2:#101830; --line:rgba(140,160,200,.14);
  --ink:#eef1f6; --ink2:#b9c4dd; --muted:#8d99b5; --accent:#8f7bf8; --accent2:#5f8afa;
  --ok:#5ad1a5; --bad:#f0798f; --warn:#f0c274;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:
    radial-gradient(ellipse 640px 460px at 92% 4%, rgba(143,123,248,.11) 0%, transparent 62%),
    linear-gradient(150deg,#0a0e1c 0%,#0a1020 55%,#070a14 100%);
  color:var(--ink); font-family:"Space Grotesk",sans-serif; min-height:100vh;
}
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(140,160,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,160,200,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 100%)}
.wrap{position:relative;z-index:1;max-width:62rem;margin:0 auto;padding:2rem 1.25rem 4rem}
a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}

/* header */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2.8rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.brand img{width:30px;height:30px}
.brand b{font-family:"Oxanium";font-size:.95rem;letter-spacing:.18em}
.brand span{font-family:"JetBrains Mono",monospace;font-size:.8rem;letter-spacing:.18em;color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.nav a.gh{font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--muted);border:1px solid var(--line);padding:.45rem .8rem;border-radius:8px}
.nav a.gh:hover{color:var(--ink);text-decoration:none;border-color:rgba(143,123,248,.4)}

/* title block */
h1{font-family:"Oxanium";font-weight:700;font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.1}
.tagline{color:var(--ink2);font-size:1.05rem;margin:.7rem 0 1rem;max-width:46rem;line-height:1.55}
.accent-bar{width:120px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));margin-bottom:1.2rem}
.disclaimer{font-size:.85rem;color:var(--muted);margin-bottom:2rem;max-width:47rem;line-height:1.55}
.meta-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem}
.meta-row span,.meta-row a{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem}
.meta-row a:hover{color:var(--ink);text-decoration:none;border-color:rgba(143,123,248,.4)}

/* number tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:2.4rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.tile .label{font-size:.78rem;color:var(--muted);line-height:1.35}
.tile .value{font-weight:600;font-size:1.7rem;margin-top:.25rem}
.tile .value.small{font-size:1.05rem;line-height:1.35;margin-top:.4rem;font-family:"JetBrains Mono",monospace;color:var(--accent)}

/* body copy */
h2{font-family:"Oxanium";font-weight:700;font-size:1.35rem;margin:3rem 0 .5rem;scroll-margin-top:1rem}
h3{font-family:"Oxanium";font-weight:600;font-size:1.05rem;margin:1.8rem 0 .4rem}
p{color:var(--ink2);font-size:.95rem;line-height:1.65;margin:0 0 .9rem;max-width:52rem}
p b,li b,p strong,li strong{color:var(--ink);font-weight:600}
.q-lead{color:var(--ink2);font-size:.98rem;margin:0 0 1.1rem;max-width:47rem;line-height:1.6}
ul,ol{color:var(--ink2);font-size:.95rem;line-height:1.65;margin:0 0 1rem 1.15rem;max-width:52rem}
li{margin:.3rem 0}
li::marker{color:var(--muted)}
code{font-family:"JetBrains Mono",monospace;font-size:.82rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:5px;padding:.05rem .35rem;color:var(--ink)}
pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;
  overflow-x:auto;margin:0 0 1.1rem;max-width:52rem}
pre code{background:none;border:0;padding:0;font-size:.8rem;line-height:1.55}
blockquote{border-left:3px solid var(--line);padding-left:1rem;margin:0 0 1rem;color:var(--muted)}

/* callout */
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:1rem 1.1rem;margin:1.6rem 0;max-width:52rem}
.note strong{display:block;font-family:"Oxanium";font-size:1rem;margin-bottom:.4rem;color:var(--ink)}
.note p:last-child,.note ul:last-child{margin-bottom:0}

/* tables */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  scrollbar-width:thin;scrollbar-color:rgba(140,160,200,.28) transparent;margin:1.2rem 0}
.tblwrap::-webkit-scrollbar{height:8px}
.tblwrap::-webkit-scrollbar-track{background:transparent}
.tblwrap::-webkit-scrollbar-thumb{background:rgba(140,160,200,.28);border-radius:999px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .85rem;border-bottom:1px solid var(--line);font-size:.88rem;
  vertical-align:top;line-height:1.5}
th{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.07em;color:var(--muted);
  text-transform:uppercase;background:var(--panel2);white-space:nowrap}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.mono{font-family:"JetBrains Mono",monospace;font-size:.8rem}
tr:last-child td{border-bottom:none}

/* small labels */
.lbl{display:inline-block;font-size:.7rem;font-weight:600;border-radius:999px;padding:.05rem .55rem;white-space:nowrap}
.lbl.yes{color:var(--ok);border:1px solid rgba(90,209,165,.35)}
.lbl.no{color:var(--bad);border:1px solid rgba(240,121,143,.35)}
.lbl.warn{color:var(--warn);border:1px solid rgba(240,194,116,.35)}
.pill{font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem}

/* download rows */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.5rem;margin:1rem 0}
.dl a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem;
  font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--ink2)}
.dl a:hover{color:var(--ink);text-decoration:none;border-color:rgba(143,123,248,.4)}
.dl a span:last-child{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}

.foot-note{color:var(--muted);font-size:.85rem;margin-top:1rem;max-width:48rem;line-height:1.55}
footer{margin-top:3rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem}

/* ---- compatibility layer for the JS-rendered pages ----
   x402-survey, x402-discovery and observed build their tables and tiles in JavaScript,
   with class names that predate this theme. Mapping the old names here is cheaper and
   safer than rewriting three working scripts. */
.sub,.mut{color:var(--ink2);font-size:.98rem;margin:0 0 1.1rem;max-width:47rem;line-height:1.6}
.tiles,.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1.3rem 0}
.tile,.fact{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.tile b,.fact b{display:block;font-weight:600;font-size:1.7rem;font-variant-numeric:tabular-nums}
.tile span,.fact span{color:var(--muted);font-size:.78rem;line-height:1.35}
.foot{margin-top:2.6rem;color:var(--muted);font-size:.85rem;line-height:1.55}
.foot p{color:var(--muted);font-size:.85rem}
.resp{color:var(--muted);font-size:.8rem;margin-top:.35rem;word-break:break-word}
.url{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.5rem .8rem;margin:.5rem 0;font-family:"JetBrains Mono",monospace;font-size:.8rem}
.lbl.na,.lbl.none{color:var(--muted);border:1px solid var(--line)}
.lbl.PAID{color:var(--ok);border:1px solid rgba(90,209,165,.35)}
.lbl.LIVE{color:var(--accent2);border:1px solid rgba(95,138,250,.35)}
.lbl.dead{color:var(--bad);border:1px solid rgba(240,121,143,.35)}

/* ---- card grid, used by the hub ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.8rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.5rem}
.card:hover{border-color:rgba(143,123,248,.4)}
.card .kicker{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.card h3{font-family:"Oxanium";font-size:1.05rem;font-weight:600;margin:0}
.card p{color:var(--ink2);font-size:.88rem;line-height:1.55;margin:0}
.pills{display:flex;flex-wrap:wrap;gap:.35rem}
.pill.live{color:var(--accent);border-color:rgba(143,123,248,.4)}
.links{margin-top:auto;padding-top:.35rem;display:flex;flex-wrap:wrap;gap:.9rem;
  font-family:"JetBrains Mono",monospace;font-size:.78rem}
.tile .value.live{font-size:1rem;line-height:1.35;margin-top:.45rem;
  font-family:"JetBrains Mono",monospace;color:var(--accent)}

/* ERC-8004 трекер рисует плитки и заметки своими классами (.v/.l/.note как абзац),
   они появились до этой темы. Правим здесь, а не в скрипте страницы. */
.tile .v{font-weight:600;font-size:1.7rem;font-variant-numeric:tabular-nums}
.tile .l{font-size:.78rem;color:var(--muted);line-height:1.35;margin-top:.25rem}
p.note{background:none;border:0;border-radius:0;padding:0;margin:.8rem 0;
  color:var(--muted);font-size:.85rem;line-height:1.55;max-width:52rem}
.mine{color:var(--accent);font-weight:600}
.uri{display:inline-block;max-width:26rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}
.lead{color:var(--ink2);font-size:.98rem;line-height:1.6;margin:0 0 1.1rem;max-width:47rem}

/* Сортировка таблиц кликом по заголовку (most-sort.js). Стрелка резервирует место
   всегда, иначе колонка дёргается по ширине при первом клике. */
th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.th-sort:hover{color:var(--ink)}
th.th-sort::after{content:"↕";opacity:.3;margin-left:.35rem;font-size:.85em}
th.th-sort.sorted-asc::after{content:"↑";opacity:1;color:var(--accent)}
th.th-sort.sorted-desc::after{content:"↓";opacity:1;color:var(--accent)}
th.th-sort:focus-visible{outline:1px solid var(--accent);outline-offset:2px}