/* Staking web surfaces — shared stylesheet.
 * Implements docs/design/explorer-ui-style.md. Do not fork these tokens
 * into page-local <style> blocks; that is how the surfaces drifted apart.
 * Themes switch on html[data-theme="light"|"dark"] — the attribute is the
 * authority (style guide §1). */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* Brand / accents — theme-independent (guide §3) */
  --primary: #1890ff;
  --header-bg: #0958d9;          /* mainnet */
  --header-bg-testnet: #2d1640;
  --header-bg-local: #4b0000;
  --success: #52c41a;
  --error: #ff4d4f;

  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Monaco, Menlo, Consolas, 'Courier New', monospace;

  --content-max: 1600px;
  --pad-top: 25px; --pad-right: 20px; --pad-bottom: 15px;
}

/* ---------- Light theme (guide §3) ---------- */
html[data-theme='light'] {
  --body-bg: #f0f0f0;
  --surface: #ffffff;
  --surface-inner: #fcfcfc;
  --thead-bg: #ececec;
  --row-alt: #f5f5f5;
  --row-hover: #bae0ff;
  --border: #dfdfdf;
  --border-strong: #dfdfdf;
  --text: rgba(0, 0, 0, 0.88);
  --text-2: rgba(0, 0, 0, 0.70);
  --text-3: rgba(0, 0, 0, 0.50);
  --link: #1890ff;
  --link-hover: #40a9ff;
  --error-row: hsl(8, 100%, 97%);
  --error-row-hover: hsl(8, 100%, 95%);
  --card-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08);
  --scroll-fade: inset 0 8px 8px -8px rgba(0,0,0,.18), inset 0 -8px 8px -8px rgba(0,0,0,.18);
  --tag-green-bg: #f6ffed;  --tag-green-bd: #b7eb8f;  --tag-green-fg: #389e0d;
  --tag-red-bg:   #fff2f0;  --tag-red-bd:   #ffccc7;  --tag-red-fg:   #cf1322;
  --tag-blue-bg:  #e6f7ff;  --tag-blue-bd:  #91d5ff;  --tag-blue-fg:  #096dd9;
  --tag-gray-bg:  #fafafa;  --tag-gray-bd:  #d9d9d9;  --tag-gray-fg:  rgba(0,0,0,.65);
  --tag-gold-bg:  #fffbe6;  --tag-gold-bd:  #ffe58f;  --tag-gold-fg:  #d48806;
}

/* ---------- Dark theme (guide §3) ---------- */
html[data-theme='dark'] {
  --body-bg: #000;
  --surface: #1f1f1f;
  --surface-inner: #141414;
  --thead-bg: #141414;
  --row-alt: #262626;
  --row-hover: #303030;
  --border: #303030;
  --border-strong: rgba(255, 255, 255, 0.55);
  --text: rgba(255, 255, 255, 0.88);
  --text-2: rgba(255, 255, 255, 0.70);
  --text-3: rgba(255, 255, 255, 0.50);
  --link: #69b1ff;
  --link-hover: #91caff;
  --error-row: hsl(8, 30%, 18%);
  --error-row-hover: hsl(8, 30%, 22%);
  --card-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.45);
  --scroll-fade: inset 0 8px 8px -8px rgba(0,0,0,.55), inset 0 -8px 8px -8px rgba(0,0,0,.55);
  --tag-green-bg: rgba(82,196,26,.15);  --tag-green-bd: rgba(82,196,26,.4);  --tag-green-fg: #73d13d;
  --tag-red-bg:   rgba(255,77,79,.15);  --tag-red-bd:   rgba(255,77,79,.4);  --tag-red-fg:   #ff7875;
  --tag-blue-bg:  rgba(24,144,255,.15); --tag-blue-bd:  rgba(24,144,255,.4); --tag-blue-fg:  #69b1ff;
  --tag-gray-bg:  rgba(255,255,255,.06);--tag-gray-bd:  rgba(255,255,255,.2);--tag-gray-fg:  rgba(255,255,255,.65);
  --tag-gold-bg:  rgba(212,136,6,.15);  --tag-gold-bd:  rgba(212,136,6,.4);  --tag-gold-fg:  #e8b339;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--body-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
code, pre, .mono { font-family: var(--font-mono); }
pre {
  background: var(--surface-inner);
  box-shadow: 0 0 0 1px var(--border);
  padding: 7px;
  overflow-x: auto;
}

.ws-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom)
           max(env(safe-area-inset-left), var(--pad-right));
}

/* ---------- Header bar: the color IS the network (guide §5) ---------- */
.ws-header {
  width: 100%;
  background: var(--header-bg);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}
.ws-header.testnet { background: var(--header-bg-testnet); }
.ws-header.local   { background: var(--header-bg-local); }
.ws-header, .ws-header a, .ws-header .ws-nav-text {
  color: #fff !important;
  font-weight: 600;
}
.ws-header .ws-title { text-transform: uppercase; font-size: 15px; letter-spacing: .03em; }
.ws-header a.ws-nav { padding: 6px 12px; border-radius: 6px; text-transform: uppercase; font-size: 13px; }
.ws-header a.ws-nav:hover, .ws-header a.ws-nav.active { background: rgba(255,255,255,.22); }
.ws-header .ws-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ws-badge-net {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 3px 10px 3px 12px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.ws-badge-net .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(82,196,26,.6);
  animation: ws-pulse 1.2s infinite ease-in-out;
}
@keyframes ws-pulse { to { box-shadow: 0 0 0 6px rgba(82,196,26,0); } }
.ws-theme-toggle {
  background: transparent; border: 2px solid #fff; color: #fff;
  font-weight: 600; border-radius: 6px; padding: 3px 10px; cursor: pointer;
}
.ws-theme-toggle:hover { background: rgba(255,255,255,.22); }

/* ---------- Cards (guide §7 stat cards) ---------- */
.ws-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  padding: 18px 24px 16px;
  margin-bottom: 25px;
}
.ws-card h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-2);
}
.ws-stat .value { font-size: 22px; font-weight: 600; font-family: var(--font-mono); }
.ws-stat .label { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.ws-note { color: var(--text-2); font-size: 13px; margin-top: 8px; }
.ws-annot { font-size: 12px; color: var(--text-3); }

/* ---------- Tables (guide §3/§4/§7) ---------- */
.ws-table, table.ws-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.ws-table th {
  background: var(--thead-bg);
  color: var(--text);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ws-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ws-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.ws-table tbody tr:hover td { background: var(--row-hover); }
.ws-table tr.error td { background: var(--error-row); }
.ws-table tr.error:hover td { background: var(--error-row-hover); }
.ws-scroll { overflow: auto; box-shadow: var(--scroll-fade); }

/* ---------- Tags / state badges (guide §7) ---------- */
.ws-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
  line-height: 1.6;
}
.ws-tag-green { background: var(--tag-green-bg); border-color: var(--tag-green-bd); color: var(--tag-green-fg); }
.ws-tag-red   { background: var(--tag-red-bg);   border-color: var(--tag-red-bd);   color: var(--tag-red-fg); }
.ws-tag-blue  { background: var(--tag-blue-bg);  border-color: var(--tag-blue-bd);  color: var(--tag-blue-fg); }
.ws-tag-gray  { background: var(--tag-gray-bg);  border-color: var(--tag-gray-bd);  color: var(--tag-gray-fg); }
.ws-tag-gold  { background: var(--tag-gold-bg);  border-color: var(--tag-gold-bd);  color: var(--tag-gold-fg); }

/* ---------- Callouts & banners (guide §7) ---------- */
.ws-callout {
  background: var(--tag-blue-bg);
  border: 1px solid var(--tag-blue-bd);
  border-left: 5px solid var(--tag-blue-bd);
  padding: 10px 20px;
  margin-bottom: 16px;
}
.ws-banner-error {
  background: var(--tag-red-bg);
  border: 1px solid var(--tag-red-bd);
  border-left: 5px solid var(--error);
  color: var(--tag-red-fg);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.ws-refusal {
  background: var(--error-row);
  border-left: 3px solid var(--error);
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 13px;
}
.ws-cmd {
  background: var(--surface-inner);
  box-shadow: 0 0 0 1px var(--border);
  font-family: var(--font-mono);
  padding: 12px;
  border-radius: 6px;
  margin-top: 12px;
  overflow-x: auto;
}

/* ---------- Count pill (guide §7) ---------- */
.ws-count {
  font-family: var(--font-mono);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--text);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
}

.ws-footer { text-align: center; font-size: 12px; color: var(--text-2); margin: 16px 0; }