/* ==========================================================================
   LebScan — LebCoin Block Explorer

   Palette from the Lebanese flag, used with restraint: white paper, cedar
   green as the working ink, and the flag's red reserved exclusively for live
   state — the tip badge, the newest block, and the trunk pulse. If something
   is red on this page, it is happening right now.
   ========================================================================== */

:root {
  --paper:     #FBFBF9;
  --paper-2:   #FFFFFF;
  --mist:      #E8EDE8;
  --mist-2:    #F2F5F1;
  --rule:      #D3DCD4;

  --cedar:     #1F5B3E;
  --cedar-lo:  #3D7F5C;
  --cedar-pale:#DCE9E0;

  --flag:      #D01C2E;
  --flag-pale: #FBE6E8;

  --ink:       #10201A;
  --muted:     #6A7A70;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --r: 2px;
  --wrap: 1220px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; z-index: 100;
  background: var(--cedar); color: #fff; padding: 10px 16px; }
.skip:focus { left: 8px; top: 8px; }

a { color: var(--cedar); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--cedar); outline-offset: 2px; }

/* ============================================================== masthead */

.masthead {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.mast {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center; min-height: 72px;
  padding-top: 12px; padding-bottom: 12px;
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.cedar-mark { width: 32px; height: 35px; color: var(--cedar); flex: none; }

.brandtext { display: flex; flex-direction: column; line-height: 1.08; }
.brandtext strong {
  font-family: var(--display); font-size: 21px; font-weight: 800;
  letter-spacing: -0.035em;
}
.brandtext em {
  font-style: normal; font-size: 10.5px; color: var(--muted);
  letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500;
}

.search { display: flex; max-width: 640px; width: 100%; }
.search input {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 12.5px;
  padding: 11px 14px;
  border: 1px solid var(--rule); border-right: 0;
  border-radius: var(--r) 0 0 var(--r);
  background: var(--mist-2); color: var(--ink);
}
.search input::placeholder { font-family: var(--body); color: var(--muted); }
.search input:focus { outline: none; border-color: var(--cedar); background: #fff; }
.search button {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 11px 22px; cursor: pointer;
  border: 1px solid var(--cedar); background: var(--cedar); color: #fff;
  border-radius: 0 var(--r) var(--r) 0;
}
.search button:hover { background: var(--ink); border-color: var(--ink); }

.live {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.live[data-state="live"] .live-dot { background: var(--flag); animation: pulse 2.6s ease-out infinite; }
.live[data-state="live"] .live-text { color: var(--ink); font-weight: 600; }
.live[data-state="stale"] .live-dot { background: #C08A12; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(208,28,46,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(208,28,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(208,28,46,0); }
}

/* ═══════════════════════════════ hero: cedar gauges (signature) ═════════ */

.hero { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.hero-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 28px; padding-bottom: 28px;
}

.gauge {
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--mist-2) 0%, var(--paper-2) 55%);
  padding: 15px 16px 18px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.gauge::after {
  /* thin flag-red rule that fills as the gauge fills */
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  width: var(--fill, 0%); background: var(--flag);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

.gauge-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin-bottom: 8px; min-width: 0;
}
/* An empty subtitle should not leave a gap under the reading. */
.gauge-sub:empty { display: none; }
.gauge-eyebrow {
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gauge-algo {
  font-family: var(--mono); font-size: 8.5px; color: var(--muted);
  border: 1px solid var(--rule); padding: 1px 5px; border-radius: var(--r);
  white-space: nowrap; flex: none;          /* never truncate a label */
  letter-spacing: -0.01em;
}

.gauge-body { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; }

.cedar { width: 78px; height: 82px; display: block; }
.cedar .tier {
  fill: var(--mist);
  transition: fill .55s ease;
}
.cedar .tier.on { fill: var(--cedar-lo); }
.cedar .tier.on.top { fill: var(--cedar); }
.cedar .trunk { fill: var(--cedar); }
.cedar .ground { fill: var(--rule); }
.cedar.beat .trunk { animation: trunkbeat 1s ease-out; }

@keyframes trunkbeat {
  0%, 100% { fill: var(--cedar); }
  30%      { fill: var(--flag); }
}

.gauge-read { min-width: 0; }
.gauge-val {
  display: block;
  font-size: clamp(19px, 1.9vw, 27px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1.05; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gauge-unit {
  display: block; font-family: var(--display);
  font-size: 11.5px; font-weight: 600; color: var(--cedar);
  letter-spacing: 0.04em; margin-top: 2px;
}
.gauge-sub {
  display: block; font-size: 11px; color: var(--muted);
  margin-top: 6px; line-height: 1.35;
}

/* ================================================================ vitals */

.vitals-band { background: var(--paper); border-bottom: 1px solid var(--rule); }
.vitals {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding-top: 0; padding-bottom: 0;
}
.vital {
  padding: 16px 18px 15px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  border-right: 1px solid var(--rule);
}
.vital:first-child { padding-left: 0; }
.vital:last-child { border-right: 0; padding-right: 0; }
.vk {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.vv {
  font-size: 20px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
.vn { font-size: 11.5px; color: var(--muted); }

/* ================================================================== tabs */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin: 28px 0 24px; }
.tabs a {
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  padding: 10px 14px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--cedar); border-bottom-color: var(--flag); }

/* ================================================================= cards */

.card { background: var(--paper-2); border: 1px solid var(--rule); margin-bottom: 24px; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--rule);
}
.card-head h2 {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  margin: 0; letter-spacing: -0.02em;
}
.card-head .sub { font-size: 12.5px; color: var(--muted); }
.card-body { padding: 20px; }

/* ================================================================ tables */

.scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 10px 16px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.data td { padding: 11px 16px; border-bottom: 1px solid var(--mist-2); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--mist-2); }
table.data .num { text-align: right; }

.hash {
  font-family: var(--mono); font-size: 12.5px;
  display: inline-block; max-width: 32ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}

.pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r);
  background: var(--cedar-pale); color: var(--cedar);
}
.pill.grey { background: var(--mist); color: var(--muted); }
.pill.red  { background: var(--flag-pale); color: var(--flag); }

.amt { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt .frac { color: var(--muted); }
.amt .sym { color: var(--muted); font-size: 11px; margin-left: 4px; }
.amt.in { color: var(--cedar); }
.amt.zero { color: var(--muted); }

.ago { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.bar { height: 4px; background: var(--mist); border-radius: 2px; overflow: hidden; min-width: 56px; }
.bar > i { display: block; height: 100%; background: var(--cedar-lo); }

/* =============================================================== details */

.kv { display: grid; grid-template-columns: 200px 1fr; }
.kv > dt, .kv > dd { padding: 11px 0; border-bottom: 1px solid var(--mist-2); margin: 0; min-width: 0; }
.kv > dt {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding-right: 16px;
}
.kv > dd { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.kv > dt:last-of-type, .kv > dd:last-of-type { border-bottom: 0; }

.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: start; }
.flow .arrow { align-self: center; color: var(--cedar); font-size: 20px; font-family: var(--mono); }
.flowcol h3 {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.frow {
  padding: 10px 12px; border: 1px solid var(--rule); background: var(--mist-2);
  margin-bottom: 6px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.frow .a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ states */

.empty { text-align: center; padding: 56px 20px; }
.empty-h { font-family: var(--display); font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.empty-b { margin: 0; color: var(--muted); font-size: 14px; }
.loading { padding: 56px 20px; text-align: center; color: var(--muted); font-size: 14px; }

.notice {
  padding: 11px 16px; font-size: 12.5px; color: var(--muted);
  background: var(--mist-2); border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.notice button {
  font-family: var(--body); font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--cedar);
  padding: 5px 12px; border-radius: var(--r);
}
.notice button:hover { border-color: var(--cedar); }

.pager {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  padding: 16px; border-top: 1px solid var(--rule);
}
.pager button {
  font-family: var(--body); font-size: 13px; padding: 7px 16px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); border-radius: var(--r);
}
.pager button:hover:not(:disabled) { border-color: var(--cedar); color: var(--cedar); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .pos { font-family: var(--mono); font-size: 12px; color: var(--muted); }

pre.code {
  font-family: var(--mono); font-size: 12.5px; background: var(--mist-2);
  padding: 14px; overflow: auto; border: 1px solid var(--rule); margin: 0 0 14px;
}

/* ================================================================ footer */

.foot { margin-top: 56px; padding: 30px 0; background: var(--cedar); color: #CFE0D5; }
.foot-in { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.foot-cedar { width: 26px; height: 29px; color: #fff; flex: none; }
.foot-name { font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; margin: 0; }
.foot-note { margin: 0; font-size: 13px; color: #A8C4B3; flex: 1; }
.foot-meta { margin: 0; font-size: 11.5px; color: #85A794; }

/* ============================================================ responsive */

@media (max-width: 1000px) {
  .vitals { grid-template-columns: repeat(3, 1fr); }
  .vital:nth-child(3) { border-right: 0; }
  .vital:nth-child(4) { padding-left: 0; }
  .mast { grid-template-columns: auto auto; row-gap: 12px; }
  .search { grid-column: 1 / -1; order: 3; max-width: none; }
  .kv { grid-template-columns: 150px 1fr; }
}

@media (max-width: 1100px) {
  .hero-in { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .hero-in { grid-template-columns: 1fr; gap: 12px; }
  .gauge-body { grid-template-columns: 88px 1fr; gap: 14px; }
  .cedar { width: 88px; height: 92px; }
  .gauge-val { font-size: 26px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .vitals { grid-template-columns: repeat(2, 1fr); }
  .vital { border-right: 0; padding-left: 0; padding-right: 0; }
  .vv { font-size: 18px; }
  .flow { grid-template-columns: 1fr; }
  .flow .arrow { transform: rotate(90deg); justify-self: center; }
  .kv { grid-template-columns: 1fr; }
  .kv > dt { padding-bottom: 0; border-bottom: 0; }
  .kv > dd { padding-top: 3px; }
  .tabs { overflow-x: auto; }
  .hash { max-width: 18ch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────── burned supply
   The burn gauge is deliberately muted rather than red or fiery. Burning is a
   permanent removal, not an event to celebrate, and Lebanon's cedar forests
   have been depleted enough that flame imagery around the national symbol
   would land badly. Muted stone, filled from the bottom, no animation. */

#g-burn .cedar .tier.on     { fill: #9AA8A0; }
#g-burn .cedar .tier.on.top { fill: #7C8C83; }
#g-burn .cedar .trunk       { fill: #7C8C83; }
#g-burn::after              { background: #9AA8A0; }
#g-burn .cedar.beat .trunk  { animation: none; }

/* When nothing has been burned the gauge should read as empty and calm,
   not as a broken or pending state. */
#g-burn[data-empty="1"] .gauge-val,
#g-hash[data-empty="1"] .gauge-val { color: var(--muted); }