/* LibChain layer for the Blockscout frontend, injected by nginx (see explorer.js).
   Lib Wallet tokens: ink as the only accent, paper-grey canvas, near-white cards with
   a 1px border, colour only for status. Hooks are Chakra's stable component classes
   (chakra-table__*, chakra-tabs__*, …) plus classes explorer.js adds (lib-*).
   Motion follows the Lib tokens (100–300 ms) and stops for reduced motion. */

:root {
  --lib-ink: #1c1c1e;
  --lib-ink-2: #5f5f66;
  --lib-on-ink: #fafaf8;
  --lib-on-ink-2: #b4b3b8;
  --lib-canvas: #f2f1ee;
  --lib-surface: #fdfdfc;
  --lib-surface-2: #f7f6f3;
  --lib-surface-3: #ebeae6;
  --lib-line: rgba(28, 27, 22, 0.075);
  --lib-line-2: rgba(28, 27, 22, 0.13);
  --lib-ok: #1d8656;
  --lib-shadow-1: 0 1px 2px rgba(28, 27, 22, 0.06), 0 4px 10px -2px rgba(28, 27, 22, 0.08);
  --lib-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

::selection { background: rgba(28, 28, 30, 0.12); }

/* ---------- top bar: Lib Coin, gas, live block ---------- */
.lib-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--lib-ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lib-topbar img { width: 16px; height: 16px; }
.lib-topbar b { color: var(--lib-ink); font-weight: 600; }
.lib-topbar .lib-sep { width: 1px; height: 14px; background: var(--lib-line-2); }
.lib-topbar .lib-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lib-ink-2); }
.lib-topbar[data-state='live'] .lib-dot { background: var(--lib-ok); }
.lib-topbar a { color: inherit; text-decoration: none; }
.lib-topbar a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- page titles ---------- */
body.lib-inner main h1.chakra-heading { font-size: clamp(28px, 3.4vw, 36px) !important; line-height: 1.1 !important; font-weight: 600 !important; letter-spacing: -0.025em; color: var(--lib-ink); }

/* ---------- live chip under detail titles (tx, block) ---------- */
.lib-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--lib-line-2);
  border-radius: 999px;
  background: var(--lib-surface);
  color: var(--lib-ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lib-confirm b { color: var(--lib-ink); font-weight: 600; }
.lib-confirm .lib-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lib-ok); }
.lib-confirm.lib-bump b { animation: lib-fade 200ms var(--lib-ease-out); }
/* 0x form of the address under the title on address pages: shown in full, wraps on phones. */
.lib-hex { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 640px; margin-top: 6px; padding: 8px 6px 8px 14px; border: 1px solid var(--lib-line-2); border-radius: 12px; background: var(--lib-surface); }
.lib-hex-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.lib-hex-label { font-size: 12px; font-weight: 500; color: var(--lib-ink-2); }
.lib-hex-code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.45; color: var(--lib-ink); overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.lib-hex-copy { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--lib-ink-2); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.lib-hex-copy:hover { background: var(--lib-surface-3); color: var(--lib-ink); }
.lib-hex-copy:focus-visible { outline: 2px solid var(--lib-ink); outline-offset: 2px; }
.lib-hex-copy[data-done] { color: var(--lib-ok); }

/* ---------- tables as framed cards ---------- */
.chakra-table__root {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--lib-surface);
  border: 1px solid var(--lib-line-2);
  border-radius: 16px;
  box-shadow: var(--lib-shadow-1);
}
.chakra-table__columnHeader {
  background: var(--lib-surface-2) !important;
  color: var(--lib-ink-2) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--lib-line-2) !important;
}
.chakra-table__header .chakra-table__row:first-child .chakra-table__columnHeader:first-child { border-top-left-radius: 15px; }
.chakra-table__header .chakra-table__row:first-child .chakra-table__columnHeader:last-child { border-top-right-radius: 15px; }
.chakra-table__body .chakra-table__row:last-child > .chakra-table__cell { border-bottom: 0 !important; }
.chakra-table__body .chakra-table__row:last-child > .chakra-table__cell:first-child { border-bottom-left-radius: 15px; }
.chakra-table__body .chakra-table__row:last-child > .chakra-table__cell:last-child { border-bottom-right-radius: 15px; }
.chakra-table__cell { border-color: var(--lib-line) !important; font-variant-numeric: tabular-nums; transition: background-color 150ms ease; }
.chakra-table__body .chakra-table__row:hover > .chakra-table__cell { background: var(--lib-surface-2); }
/* New rows from the live socket slide in. */
.chakra-table__row.lib-enter > .chakra-table__cell { animation: lib-row-in 200ms var(--lib-ease-out); }

/* ---------- tabs: ink for the selected one ---------- */
.chakra-tabs__trigger { transition: background-color 150ms ease, color 150ms ease; }
.chakra-tabs__trigger[aria-selected='true'] { background: var(--lib-ink) !important; color: var(--lib-on-ink) !important; }
.chakra-tabs__trigger[aria-selected='true'] * { color: inherit !important; }
.chakra-tabs__trigger[aria-selected='false']:hover { background: var(--lib-surface-3) !important; }

/* ---------- tags and notes: neutral unless they carry a status ---------- */
.chakra-badge.lib-tag { background: var(--lib-surface-3) !important; color: var(--lib-ink) !important; }
.chakra-alert__root.lib-note { background: var(--lib-surface-2) !important; color: var(--lib-ink-2) !important; border: 1px solid var(--lib-line); }

/* ---------- fields and links ---------- */
.chakra-input:focus, .chakra-input:focus-visible { border-color: var(--lib-ink) !important; box-shadow: 0 0 0 4px rgba(28, 28, 30, 0.09) !important; }
main a.chakra-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- settings popover: network switch, Lib Testnet shortcuts ---------- */
.lib-hidden { display: none !important; }
.lib-set { display: grid; gap: 8px; }
.lib-set-h { font-weight: 600; color: var(--lib-ink); }
.lib-set-sub { margin-top: -4px; font-size: 13px; color: var(--lib-ink-2); overflow-wrap: anywhere; }
.lib-set-line { height: 1px; margin: 16px 0; background: var(--lib-line-2); }
.lib-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid var(--lib-line-2); border-radius: 12px; background: var(--lib-surface-2); }
.lib-seg-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--lib-ink); text-decoration: none; transition: background-color 150ms ease; }
.lib-seg-opt small { font-size: 11px; font-weight: 400; color: var(--lib-ink-2); }
.lib-seg-opt[aria-current='true'] { background: var(--lib-ink); color: var(--lib-on-ink); }
a.lib-seg-opt:hover { background: var(--lib-surface-3); }
.lib-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--lib-line-2); border-radius: 10px; background: var(--lib-surface); color: var(--lib-ink) !important; font: inherit; font-size: 14px; font-weight: 500; text-decoration: none !important; cursor: pointer; transition: background-color 150ms ease; }
.lib-btn:hover { background: var(--lib-surface-2); }
.lib-btn-ink { background: var(--lib-ink); border-color: var(--lib-ink); color: var(--lib-on-ink) !important; }
.lib-btn-ink:hover { background: #2e2e31; }

/* Blockscout colours this figure blue; keep the explorer monochrome. */
.lib-ink { color: inherit !important; }

/* ---------- home: live strip in the ink hero banner ---------- */
/* The banner is a flex row; give the strip its own full-width row under title and search. */
*:has(> .lib-live) { flex-wrap: wrap !important; }
.lib-live {
  flex: 1 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(250, 250, 248, 0.14);
  color: var(--lib-on-ink);
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.lib-live-wheel { width: 44px; height: 44px; flex: none; transition: transform 300ms var(--lib-ease-out); }
.lib-live-main { flex: 1 1 auto; min-width: 0; }
.lib-live-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lib-live-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lib-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lib-on-ink-2); }
.lib-live[data-state='live'] .lib-live-dot { background: #3ccb7f; }
.lib-live[data-state='down'] .lib-live-dot { background: #f0b44c; }
.lib-live-block { color: var(--lib-on-ink); font-weight: 600; text-decoration: none; }
.lib-live-block:hover { text-decoration: underline; text-underline-offset: 3px; }
.lib-live-muted { color: var(--lib-on-ink-2); }
.lib-live-track { height: 4px; margin-top: 10px; border-radius: 999px; background: rgba(250, 250, 248, 0.16); overflow: hidden; }
/* Live progress to the next block: a functional loop, re-synced every second. */
.lib-live-fill { height: 100%; border-radius: inherit; background: var(--lib-on-ink); transform: scaleX(0); transform-origin: left; transition: transform 1s linear; }
.lib-live-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--lib-on-ink);
  color: var(--lib-ink) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 150ms ease;
}
.lib-live-cta:hover { background: var(--lib-surface-3); }
.lib-live-cta:focus-visible, .lib-live-block:focus-visible { outline: 2px solid var(--lib-on-ink); outline-offset: 2px; }

/* The navigation icon is the Lib pinwheel: it ticks with the chain. */
img.lib-tick { transition: transform 300ms var(--lib-ease-out); }

@keyframes lib-row-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes lib-fade { from { opacity: 0.2; } }

@media (max-width: 767.98px) {
  .lib-live { flex-wrap: wrap; gap: 12px; }
  .lib-live-wheel { width: 36px; height: 36px; }
  .lib-live-main { flex-basis: calc(100% - 52px); }
  .lib-live-cta { flex: 1 1 100%; }
  .lib-topbar .lib-coin-name, .lib-topbar .lib-block-part { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-live-wheel, img.lib-tick, .lib-live-fill { transition: none; }
  .chakra-table__row.lib-enter > .chakra-table__cell { animation: lib-fade 100ms ease; }
  .lib-confirm.lib-bump b { animation: none; }
}