/* AZ dashboard: a ledger surface on the Zenon design system (webdesign-lab/RULES.md,
 * sections 1 to 10), transcribed so the page needs no build step.
 *   - amounts, heights, hashes and times are JetBrains Mono with tabular figures;
 *   - the plasma gradient fills one thing, the wallet button;
 *   - colour is state: green done or Yes, blue waiting, amber needs someone,
 *     crimson No or a failure. Every state is an icon plus a label.
 * Motion always runs, whatever the OS reports (RULES.md section 4): the bars and
 * the live dot are how the page shows the chain is being read.
 */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/space-grotesk.woff2) format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono.woff2) format("woff2-variations");
}

:root {
  color-scheme: dark;
  --bg: hsl(0 0% 8%);
  --card: hsl(0 0% 10.5%);
  --sunken: hsl(0 0% 13%);
  --fg: hsl(0 0% 98%);
  --fg-dim: hsl(0 0% 64%);
  --border: hsl(0 0% 19%);
  --border-strong: hsl(0 0% 28%);

  --green: #00d557;
  --green-soft: hsl(145 100% 42% / 0.14);
  --blue: hsl(214 100% 62%);
  --blue-soft: hsl(214 100% 55% / 0.16);
  --amber: hsl(38 95% 58%);
  --amber-soft: hsl(38 95% 55% / 0.15);
  --crimson: hsl(352 85% 60%);
  --crimson-soft: hsl(352 85% 55% / 0.15);
  --plasma: linear-gradient(90deg, hsl(120 86% 63%) 0%, hsl(145 100% 38%) 100%);
  --on-plasma: hsl(0 0% 6%);

  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 6px;
  --shadow: 0 2px 8px -2px hsl(0 0% 0% / 0.6), inset 0 1px 0 0 hsl(0 0% 100% / 0.045);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: hsl(0 0% 97%);
    --card: hsl(0 0% 100%);
    --sunken: hsl(0 0% 94%);
    --fg: hsl(0 0% 9%);
    --fg-dim: hsl(0 0% 40%);
    --border: hsl(0 0% 87%);
    --border-strong: hsl(0 0% 75%);
    --green: hsl(145 100% 30%);
    --green-soft: hsl(145 80% 40% / 0.12);
    --blue: hsl(214 100% 46%);
    --blue-soft: hsl(214 100% 50% / 0.1);
    --amber: hsl(32 95% 38%);
    --amber-soft: hsl(38 95% 50% / 0.14);
    --crimson: hsl(352 75% 45%);
    --crimson-soft: hsl(352 80% 50% / 0.1);
    --shadow: 0 1px 3px hsl(0 0% 0% / 0.08), 0 1px 2px hsl(0 0% 0% / 0.05);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--fg-dim); }
.grow { flex: 1; }
.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

.wrap { max-width: 60rem; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 700px) { .wrap { padding-inline: 16px; } }

/* ---------- bar ---------- */

.bar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.bar-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { color: var(--fg); font-weight: 600; font-size: 16px; }
.brand:hover { text-decoration: none; }
.node { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); }
.node.live .dot { background: var(--green); animation: breathe 2.4s var(--ease) infinite; }
.node.down .dot { background: var(--crimson); }
@keyframes breathe { 50% { box-shadow: 0 0 0 4px var(--green-soft); } }

.btn {
  --btn-bg: var(--sunken);
  --btn-fg: var(--fg);
  --btn-border: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), filter 150ms var(--ease);
}
.btn:hover { --btn-border: var(--border-strong); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-plasma { --btn-bg: var(--plasma); --btn-fg: var(--on-plasma); --btn-border: transparent; font-weight: 600; }
.btn-plasma:hover { --btn-border: transparent; filter: brightness(1.08); }
.btn-plasma.connected { --btn-bg: var(--sunken); --btn-fg: var(--fg); --btn-border: var(--border); font-weight: 500; }
@media (max-width: 700px) {
  .btn { min-height: 44px; }
  #connect-label { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- intro and strip ---------- */

.intro { padding: 40px 0 20px; }
.intro h1 { font-size: 28px; letter-spacing: -0.015em; margin-bottom: 4px; }
.addr { color: var(--blue); font-size: 0.92em; }

.strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 32px;
}
.stat { background: var(--card); padding: 12px 14px; min-width: 0; }
.label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
.stat .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; margin-top: 2px; }
@media (max-width: 700px) {
  .strip { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(n + 4) { grid-column: span 1; }
  .stat .v { font-size: 17px; }
}

/* ---------- groups and items ---------- */

.group { margin-bottom: 32px; }
.group-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.group-h h2 { font-size: 17px; }
.list { display: grid; gap: 8px; }

.item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 150ms var(--ease);
}
.item:hover, .item.open { border-color: var(--border-strong); }
.head {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
  width: 100%; padding: 14px 16px; background: none; border: 0; text-align: left; cursor: pointer;
}
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.title { font-weight: 600; font-size: 16px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--fg-dim); grid-column: 1; }
.meta .num { color: var(--fg); }
.chev { grid-row: 1 / span 3; grid-column: 2; color: var(--fg-dim); transition: transform 220ms var(--ease); }
.item.open .chev { transform: rotate(180deg); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 9px; border-radius: 999px;
  background: var(--sunken); color: var(--fg-dim);
}
.chip .i { width: 13px; height: 13px; vertical-align: 0; }
.tone-green { background: var(--green-soft); color: var(--green); }
.tone-blue { background: var(--blue-soft); color: var(--blue); }
.tone-amber { background: var(--amber-soft); color: var(--amber); }
.tone-crimson { background: var(--crimson-soft); color: var(--crimson); }

/* Vote bar: Yes and No as shares of the quorum, abstentions after them. */
.tally { grid-column: 1; display: grid; gap: 6px; }
.bar-track {
  position: relative; height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden;
  display: flex;
}
.seg { height: 100%; transition: width 600ms var(--ease); }
.seg.yes { background: var(--green); }
.seg.no { background: var(--crimson); }
.seg.abs { background: var(--fg-dim); opacity: 0.6; }
.tally-text { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fg-dim); }
.tally-text b { font-weight: 500; color: var(--fg); }

/* ---------- body ---------- */

.body { border-top: 1px solid var(--border); padding: 16px; display: grid; gap: 20px; }
.body.enter { animation: slide 240ms var(--ease); }
@keyframes slide { from { opacity: 0; transform: translateY(-8px); } }
.desc { color: var(--fg-dim); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--fg);
  transition: border-color 150ms var(--ease);
}
.link:hover { text-decoration: none; border-color: var(--border-strong); }
.link .i { color: var(--fg-dim); width: 14px; height: 14px; vertical-align: 0; }
.sub-h { margin-bottom: 8px; }

.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.changes li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 14px; }
.changes .i { color: var(--green); margin-top: 3px; }

.rows { display: grid; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 9px 12px; font-size: 13px; border-top: 1px solid var(--border);
}
.row:first-child { border-top: 0; }
.row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .when { color: var(--fg-dim); font-size: 12px; min-width: 9.5em; text-align: right; }
.row .when a { color: var(--fg-dim); }
.row .when a:hover { color: var(--blue); }
.phase-row { grid-template-columns: 1fr auto auto; }

.vote { display: grid; gap: 10px; padding: 14px; background: var(--sunken); border-radius: var(--radius); }
/* A proxy vote is on chain and never counted; the box says so before the click. */
.vote.proxy { box-shadow: inset 0 0 0 1px var(--amber); }

.proxies { margin-top: 14px; }
.proxy-h { display: flex; align-items: center; gap: 6px; }
.proxy-h .i { width: 13px; height: 13px; color: var(--amber); }
.proxy-h .dim { margin-left: auto; text-transform: none; letter-spacing: 0; }
.proxies .rows { border-style: dashed; }
.proxies .row .name a { color: var(--fg); }
.vote-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.vote-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vote-btns .btn { --btn-bg: var(--card); border-radius: var(--radius); min-height: 44px; }
.vote-btns .btn.yes:hover:not(:disabled), .vote-btns .btn.yes.mine { --btn-border: var(--green); --btn-fg: var(--green); }
.vote-btns .btn.no:hover:not(:disabled), .vote-btns .btn.no.mine { --btn-border: var(--crimson); --btn-fg: var(--crimson); }
.vote-btns .btn.abs:hover:not(:disabled), .vote-btns .btn.abs.mine { --btn-border: var(--fg-dim); }
.vote-btns .btn.mine { opacity: 1; }

.loading .ell::after { content: ""; animation: ell 1.2s steps(4) infinite; }
@keyframes ell { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 0% { background: var(--green-soft); } }

.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; color: var(--fg-dim); cursor: pointer; margin-bottom: 32px;
}
.more:hover { color: var(--fg); }

.foot { display: flex; justify-content: space-between; gap: 16px; padding-block: 24px 40px; font-size: 12px; border-top: 1px solid var(--border); }

@media (max-width: 700px) {
  .head { padding: 14px 12px; }
  .body { padding: 14px 12px; }
  .row { grid-template-columns: 1fr auto; }
  .row .when { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .phase-row .when { grid-column: auto; }
}

/* ---------- toasts ---------- */

.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 10; max-width: calc(100vw - 32px); }
.toast {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  min-width: 240px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 14px;
  animation: rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; opacity: 0.6; transform-origin: left;
  animation: drain var(--life, 5s) linear forwards;
}
.toast.ok { color: var(--green); }
.toast.err { color: var(--crimson); }
.toast.info { color: var(--blue); }
.toast span { color: var(--fg); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes drain { to { transform: scaleX(0); } }

[hidden] { display: none !important; }
.changes li.todo { color: var(--fg-dim); }
.changes li.todo .i { color: var(--fg-dim); }

/* Phone width: the bar keeps one line, the five figures fill two rows, a group's
 * total drops under its heading. */
.brand, .group-h h2 { white-space: nowrap; }
.group-h { flex-wrap: wrap; }
@media (max-width: 700px) {
  .bar-in { gap: 10px; }
  .btn-plasma { padding: 0 12px; }
  #connect-label { max-width: 6.5em; }
  .strip { grid-template-columns: repeat(6, 1fr); }
  .stat { grid-column: span 2; }
  .stat:nth-child(n + 4) { grid-column: span 3; }
}