/* Every page opens with one sentence and one large figure. Detail pages widen to
   880px for tabs and tables; home stays a 520px column. Colours and type
   come from brand.css: words in Schibsted Grotesk, figures,
   hashes and addresses in IBM Plex Mono, colour only for state. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 700; font-display: swap; src: url(/static/schibsted.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 300; font-display: swap; src: url(/static/plex-300.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/static/plex-400.woff2) format("woff2"); }

body { min-height: 100vh; display: flex; flex-direction: column; isolation: isolate; }
/* Full Mitosis geometry, rendered as a faint cropped planetary contour. */
.planet-scenery { --planet-size: clamp(720px, 76vw, 1400px); position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; }
.planet-scenery svg { position: absolute; display: block; width: var(--planet-size); height: auto; left: calc(96vw - var(--planet-size) / 2); top: calc(104vh - var(--planet-size) / 2); color: var(--fg); }
@media (max-width: 640px) {
  .planet-scenery { --planet-size: clamp(460px, 130vw, 600px); }
  .planet-scenery svg { left: calc(115vw - var(--planet-size) / 2); top: calc(109vh - var(--planet-size) / 2); }
}
main { flex: 1; padding-inline: 16px; }
a { text-decoration: none; }
.mono, .big, td.num, .addr, td.t, .net, .list .val, nav.tabs .n, ul.tree, pre.raw, details.fold .in, dl.args dt, table.t.mono td {
  font-family: var(--figure); font-variant-numeric: tabular-nums;
}
/* Links inside content: a quiet rule under the text that turns --fg on hover. */
.lede a, .route a, .kicker a, dl.facts dd a, table.t a, dl.args a, .ev a, ul.tree a, .note a, p.dim a, .tools a, section.block h2 a {
  color: var(--fg); text-decoration: underline 1px color-mix(in srgb, var(--mute) 50%, transparent); text-underline-offset: 3px;
}
.lede a:hover, .route a:hover, .kicker a:hover, dl.facts dd a:hover, table.t a:hover, dl.args a:hover, .ev a:hover, ul.tree a:hover, .note a:hover, p.dim a:hover, .tools a:hover, section.block h2 a:hover {
  text-decoration-color: var(--fg);
}
@media (prefers-reduced-motion: no-preference) {
  a, button, input { transition: color .15s, background-color .15s, border-color .15s, text-decoration-color .15s; }
}

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; flex-shrink: 0; }
.brand svg { display: block; width: 24px; height: 24px; flex: none; color: inherit; }
.brand span { color: inherit; font: 500 18px/1 var(--voice); letter-spacing: -.02em; }
.brand:hover span { color: var(--fg); }
.bar-right { display: flex; align-items: center; gap: 20px; min-width: 0; }
.mini { position: relative; min-width: 0; }
.mini-search { width: 200px; max-width: 100%; font: var(--text-s) var(--figure); color: var(--fg); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-cell); padding: 5px 10px; }
.mini-search::placeholder, .search input::placeholder { color: var(--mute); }
.mini-search:focus-visible, .search input:focus-visible { outline: none; border-color: var(--mute); }
.mini .suggest { z-index: 2; }
.net { display: flex; align-items: center; gap: 7px; font-size: var(--text-s); color: var(--mute); white-space: nowrap; }
.net:hover { color: var(--fg); }
.net::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.net.live::before { background: var(--ok); }
.foot { padding: 20px 24px 22px; font-size: var(--text-s); color: var(--mute); }
.foot a { color: inherit; text-decoration: underline 1px color-mix(in srgb, var(--mute) 50%, transparent); text-underline-offset: 3px; }
.foot a:hover { color: var(--fg); }

.col { max-width: 520px; margin: 0 auto; padding: 40px 8px 56px; display: grid; gap: 28px; }
.top { display: grid; gap: 8px; }
.kicker { font-size: var(--text-s); color: var(--mute); }
.big { margin: 0; font-size: var(--text-3xl); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.big small { font: 400 var(--text-xl) var(--voice); color: var(--mute); letter-spacing: 0; }
.lede { margin: 0; font-size: var(--text-l); line-height: 1.5; color: var(--mute); overflow-wrap: anywhere; }
.lede b { color: var(--fg); font-weight: 500; }
.route { margin: 0; font-size: var(--text-s); color: var(--mute); overflow-wrap: anywhere; }
.addr { font-size: var(--text-s); color: var(--mute); overflow-wrap: anywhere; }
.note { margin: 6px 0 0; font-size: var(--text-s); color: var(--mute); }
.note.warn { color: var(--warn); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.hold { color: var(--warn); }
.route .u { color: var(--warn); }

.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list > li, .list > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.list .main { min-width: 0; overflow-wrap: anywhere; }
.list .main a { color: var(--fg); }
.list .sub { grid-column: 1; font-size: var(--text-s); color: var(--mute); }
.list .val { font-size: var(--text-s); text-align: right; }
.list .t { font-size: var(--text-s); color: var(--mute); margin-right: 10px; }
.list > a:hover .main, .list .main a:hover { color: var(--mute); }
.list .idle { color: var(--mute); }
.group { display: grid; gap: 6px; }
.more { font-size: var(--text-s); color: var(--mute); padding-top: 8px; justify-self: start; }
.more:hover { color: var(--fg); }

.folds { display: grid; }
details.fold { border-top: 1px solid var(--line); }
details.fold:last-child { border-bottom: 1px solid var(--line); }
details.fold summary { padding: 10px 0; cursor: pointer; font-size: var(--text-s); color: var(--mute); list-style: none; }
details.fold summary:hover { color: var(--fg); }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::before { content: "+ "; }
details.fold[open] summary::before { content: "− "; }
details.fold .in { padding: 0 0 12px; font-size: var(--text-s); line-height: 1.8; color: var(--mute); white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-strip { height: 8px; background: var(--cell); }

.home { min-height: 64vh; display: grid; place-items: center; padding: 48px 8px; }
.home-in { width: 100%; max-width: 520px; display: grid; gap: 26px; }
.home .big { font-size: clamp(var(--text-2xl), 9vw, var(--text-3xl)); }
.cap { font-size: var(--text-s); color: var(--mute); margin-top: -14px; }
.search { position: relative; width: 100%; }
.search input { width: 100%; font: var(--text-m) var(--figure); color: var(--fg); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-cell); padding: 14px 16px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--mute); }
.links a:hover { color: var(--fg); }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-cell); overflow: hidden; }
.suggest a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 10px; padding: 10px 16px; }
.suggest a + a { border-top: 1px solid var(--line); }
.suggest a[aria-selected="true"], .suggest a:hover { background: var(--line); }
.suggest .k { font-size: var(--text-s); color: var(--mute); padding-top: 1px; }
.suggest .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- search and errors ---- */
/* the header box widens while in use, so its list lines up under it */
.mini:focus-within .mini-search { width: 320px; }
/* the native × is louder than any other icon: dimmed where a tap is the only way
   to clear the box, hidden where Esc does it */
input[type="search"]:focus::-webkit-search-cancel-button { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  input[type="search"]::-webkit-search-cancel-button { display: none; }
}
/* the address on a line of its own, so a long name can't push it out of view */
.suggest .s { grid-column: 2; font-size: var(--text-s); color: var(--mute); }
.suggest a:focus-visible { outline-offset: -2px; }
.fail .search { max-width: 520px; }
/* the mono hint would lose its last letter to the native × on a 320px phone */
@media (max-width: 340px) { .search input::placeholder { font-size: var(--text-s); } }
@media (max-width: 520px) {
  .mini:focus-within + .net { display: none; }
  /* with the block height gone, the list can span the screen from the input's right edge */
  .mini .suggest { left: auto; width: calc(100vw - 32px); }
}

/* ---------- detail pages ---------- */
.page { max-width: 880px; margin: 0 auto; padding: 40px 8px 56px; display: grid; gap: 24px; min-width: 0; }
.page > * { min-width: 0; }
.dim { color: var(--mute); }
.small { font-size: var(--text-s); }
.num { text-align: right; white-space: nowrap; }
.num .dim:not(.mono) { font-family: var(--voice); }
/* An amount's unit has a column of its own, so figures end at the same x whatever the unit. */
table.t td.amt { padding-right: 0; }
table.t td.u { padding-left: .3em; color: var(--mute); white-space: nowrap; }
.badge { font-size: var(--text-s); color: var(--mute); border: 1px solid var(--line); padding: 0 6px; white-space: nowrap; }
.badge.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.badge.hold { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
time[data-ts] { cursor: pointer; text-decoration: underline dotted 1px var(--line); text-underline-offset: 3px; }
.copy { font: var(--text-s) var(--voice); color: var(--mute); background: none; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 0 6px; cursor: pointer; vertical-align: 1px; }
.copy:hover { color: var(--fg); border-color: var(--mute); }
.copy.done { color: var(--ok); }

dl.facts { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); }
dl.facts dt, dl.facts dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
dl.facts dt { font-size: var(--text-s); line-height: 1.9; color: var(--mute); }
dl.facts dd { overflow-wrap: anywhere; }

nav.tabs { display: flex; flex-wrap: wrap; gap: 0 22px; border-bottom: 1px solid var(--line); }
nav.tabs a { padding: 10px 0; color: var(--mute); white-space: nowrap; border-bottom: 1px solid transparent; margin-bottom: -1px; }
nav.tabs a:hover { color: var(--fg); }
nav.tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--fg); }
nav.tabs .n { font-size: var(--text-s); color: var(--mute); }
/* The tab bar's rule already closes off what comes right after it. */
nav.tabs + dl.facts > :nth-child(-n+2), nav.tabs + ol.events > li:first-child, nav.tabs + .scroll > table.t > tbody:first-child > tr:first-child > td { border-top: 0; }
nav.filters { display: flex; flex-wrap: wrap; gap: 8px; }
nav.filters a { font-size: var(--text-s); color: var(--mute); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 3px 10px; }
nav.filters a:hover { color: var(--fg); }
nav.filters a[aria-current] { color: var(--fg); border-color: var(--mute); background: var(--cell); }
nav.pager { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--text-s); }
nav.pager a { color: var(--mute); }
nav.pager a:hover { color: var(--fg); }
/* a disabled link: present, so the others keep their place, but faint */
nav.pager > span:not(.dim, [aria-current]) { color: var(--mute); opacity: .5; }
nav.pager span.dim { color: var(--mute); }

.scroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--text-s); }
table.t th { font-weight: 400; color: var(--mute); text-align: left; padding: 8px 12px 8px 0; }
table.t th.num { text-align: right; }
table.t td { padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
table.t td:last-child, table.t th:last-child { padding-right: 0; }
/* Room between a right-aligned figure and the left-aligned column after it, but not
   after a leading "#": that would push a phone's delegator table past its edge. */
table.t td.num:not(:first-child) + td:not(.num, .u), table.t td.num:not(:first-child) + td.u + td, table.t th.num:not(:first-child) + th:not(.num) { padding-left: 24px; }
table.t td.t { color: var(--mute); white-space: nowrap; width: 1%; }
table.t td.what { min-width: 220px; font-size: var(--text-m); }
table.t td.what a { text-decoration-color: transparent; }
table.t td.what a:hover { text-decoration-color: var(--fg); }
table.t.mono td { overflow-wrap: anywhere; }
table.t.mono th { font-family: var(--voice); }

section.block { display: grid; gap: 10px; min-width: 0; }
section.block h2 { margin: 0; font-size: var(--text-m); font-weight: 500; }
section.block h2 a { font-size: var(--text-s); font-weight: 400; }
/* State's sections are named by their account alone: the link is the heading. */
section.block h2.acct a { font-size: inherit; font-weight: inherit; }

/* One label width for every list, so values start at the same x from event to event. */
dl.args { margin: 4px 0 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 16px; }
dl.args dt { font-size: var(--text-s); line-height: 1.9; color: var(--mute); overflow-wrap: anywhere; }
dl.args dd { margin: 0; overflow-wrap: anywhere; }

ol.events { list-style: none; margin: 0; padding: 0; display: grid; }
ol.events > li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
ol.events details.fold, ol.events details.fold:last-child { border: 0; }
ol.events details.fold summary { padding: 2px 0; }
.ev { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ev b { font-weight: 500; }

ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree ul { padding-left: 18px; border-left: 1px solid var(--line); margin-left: 6px; }
ul.tree { font-size: var(--text-s); line-height: 1.9; overflow-x: auto; }
/* A long call wraps under a hanging indent rather than running past the edge. Short
   pieces stay whole; long hex (.mono) may break. */
ul.tree .line { padding-left: 4ch; text-indent: -4ch; overflow-wrap: anywhere; }
ul.tree .line > span:not(.mono, .fn), ul.tree a.mono { white-space: nowrap; }
ul.tree summary { cursor: pointer; list-style: none; }
ul.tree summary::-webkit-details-marker { display: none; }
ul.tree summary::before { content: "− "; color: var(--mute); }
ul.tree details:not([open]) > summary::before { content: "+ "; }
ul.tree div.line::before { content: "· "; color: var(--line); }
ul.tree .op { color: var(--mute); display: inline-block; min-width: 12ch; text-indent: 0; }
ul.tree .fn { color: var(--fg); }
ul.tree li.failed > .line, ul.tree li.failed > details > summary { color: var(--bad); }

pre.raw { margin: 0; padding: 14px; background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-cell); font-size: var(--text-s); line-height: 1.6; color: var(--mute); overflow-x: auto; max-height: 70vh; }

@media (max-width: 640px) {
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { padding-bottom: 0; }
  dl.facts dd { border-top: 0; padding-top: 2px; }
  dl.args { grid-template-columns: minmax(0, 1fr); }
  dl.args dd { padding-bottom: 6px; }
}
/* On a phone tabs stay on one line that swipes sideways. (A narrow window with a mouse
   keeps wrapping: it has no swipe, and the hidden scrollbar would leave no way across.)
   The scroll box would clip the active underline's overlap with the rule, so it sits on
   the rule instead. */
@media (max-width: 640px) and (pointer: coarse) {
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs a { margin-bottom: 0; }
  /* app.js sets data-more while tabs hide past the right edge: a solid "›" there, as the brand has no fades */
  nav.tabs[data-more]::after { content: "›"; position: sticky; right: 0; flex: none; padding: 10px 0 10px 10px; background: var(--bg); color: var(--mute); }
  nav.tabs a:focus-visible { outline-offset: -2px; }
}

@media (max-width: 520px) {
  .bar { padding: 14px 16px; }
  .mini-search { width: 104px; }
  .col, .page { padding: 28px 0 40px; }
  .big { font-size: var(--text-2xl); }
  .home { padding: 40px 0; }
  .foot { padding: 16px; }
  ul.tree ul { padding-left: 10px; margin-left: 3px; }
  ul.tree .op { min-width: 0; }
  table.t td.num:not(:first-child) + td:not(.num, .u), table.t td.num:not(:first-child) + td.u + td, table.t th.num:not(:first-child) + th:not(.num) { padding-left: 12px; }
}

/* ---- figures ---- */
/* A span with a title explains itself on hover ("unlabelled", a time ahead). */
span[title] { cursor: help; }
/* Never broken across lines. */
.nw { white-space: nowrap; }
/* Full hashes and addresses break only at the <wbr>s `whole` puts between runs. */
.full { overflow-wrap: normal; }

/* ---- validator pages (src/web/validator.rs) ---- */
figure.vchart { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 180px auto; gap: 6px 10px; }
figure.vchart .y { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: var(--text-s); color: var(--mute); }
figure.vchart svg, figure.strip svg { display: block; width: 100%; background: var(--cell); border-radius: var(--radius-cell); }
figure.vchart svg { height: 180px; }
figure.vchart path { fill: none; stroke: var(--fg); stroke-width: 1.5; }
figure.vchart .x { grid-column: 2; display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-s); color: var(--mute); }
figure.strip { margin: 0; display: grid; gap: 8px; }
figure.strip svg { height: 40px; }
figure.strip path { fill: none; stroke: var(--fg); stroke-width: 2; }
figure.strip figcaption { font-size: var(--text-s); color: var(--mute); }
nav.pager span[aria-current] { color: var(--fg); }
table.t td.who, table.t .pair, table.t.rates td { white-space: nowrap; }
table.t.rates { width: auto; }

/* ---- staking tab (src/web/staking.rs) ---- */
table.stk.q td:first-child { width: 1%; }

/* ---- tokens ---- */
/* One table per section: fixed columns keep Holders and Supply at the same x in each. */
table.tok { table-layout: fixed; }
table.tok .holders { width: 7em; }
table.tok .supply { width: 10em; }
table.tok .sym { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 520px) {
  table.tok .holders { width: 5.5em; }
  table.tok .supply { width: 8em; }
  /* Unlisted's empty column gives its room back to the names on a phone */
  table.t.tok th.num + th.supply:empty, table.t.tok td.num + td:empty { width: 0; padding: 0; }
}

/* ---- portfolio (src/web/address.rs) ---- */
/* with Staked and Claimable a phone has no room left for the token names */
@media (max-width: 520px) { table.port .nm { display: none; } }

/* ---- simulate (src/web/simulate.rs) ---- */
form.sim { display: grid; grid-template-columns: 140px minmax(0, 1fr); }
form.sim .k, form.sim .v { padding: 8px 0; border-top: 1px solid var(--line); }
form.sim .k { font-size: var(--text-s); line-height: 1.9; color: var(--mute); padding-top: 13px; }
form.sim .v { display: grid; gap: 4px; min-width: 0; }
form.sim input, form.sim textarea { width: 100%; font: var(--text-s)/1.6 var(--figure); color: var(--fg); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-cell); padding: 7px 10px; }
form.sim textarea { resize: vertical; min-height: 84px; overflow-wrap: anywhere; }
form.sim input::placeholder, form.sim textarea::placeholder { color: var(--mute); }
form.sim input:focus-visible, form.sim textarea:focus-visible { outline: none; border-color: var(--mute); }
form.sim [aria-invalid] { border-color: var(--bad); }
form.sim .hint { font-size: var(--text-s); color: var(--mute); }
form.sim .go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
form.sim .go .more { padding: 0; }
form.sim button { font: 500 var(--text-m) var(--voice); color: var(--bg); background: var(--fg); border: 1px solid var(--fg); border-radius: var(--radius-control); padding: 5px 18px; cursor: pointer; }
form.sim button:hover { background: var(--mute); border-color: var(--mute); }
@media (max-width: 640px) {
  form.sim { grid-template-columns: minmax(0, 1fr); }
  form.sim .k { padding-bottom: 0; }
  form.sim .v { border-top: 0; padding-top: 4px; }
}

/* ---- blocks list (src/web/blocks.rs) ---- */
.tools { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--text-s); color: var(--mute); }