/* Plain, dependency-free styling. Monospace for chain primitives (hashes,
   addresses, amounts); clean sans-serif for chrome. Light + dark adapt to OS. */
:root {
  --bg: #fafafa; --fg: #1a1a1a; --muted: #666;
  --accent: #1f6feb; --accent-fg: #fff;
  --border: #e1e1e1; --row-alt: #f3f3f3;
  --good: #1a7f37; --bad: #c93434;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0d1117; --fg:#e6edf3; --muted:#8b949e; --border:#30363d;
          --row-alt:#161b22; --accent:#58a6ff; }
}
* { box-sizing: border-box; }
/* Never let the page scroll sideways on mobile. Hover tooltips ([data-tip]::after)
   are absolutely-positioned at up to 360px wide and, though hidden, are still laid
   out — on a narrow screen they'd extend the page. `clip` (not `hidden`) prevents
   horizontal page scroll WITHOUT creating a scroll container or breaking sticky. */
html { overflow-x: clip; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
       line-height:1.5; }
header { padding:1rem 1.5rem; border-bottom:1px solid var(--border);
         display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }

/* Dashboard header is item-heavy (brand + nav + search + indicators +
   refresh-picker). On phones flex-wrap alone produces 3–4 stacked rows
   eating half the viewport. Two breakpoints: tablet shrinks gaps; phone
   stacks search to its own row + reduces secondary chrome. */
@media (max-width:880px) {
  header { padding:0.7rem 1rem; gap:0.7rem; }
  header h1 { font-size:1.05rem; flex:0 0 auto; }
  header nav a { margin-right:0.6rem; font-size:0.88em; }
  .header-search { flex:1 1 100%; margin-left:0; order:10; }
  .header-search input { width:100%; }
  .header-search input:focus { width:100%; }
  #last-refresh, #backend-indicator { font-size:0.75em; }
  .refresh-picker { font-size:0.78em; }
}
@media (max-width:560px) {
  header { padding:0.6rem 0.8rem; gap:0.5rem 1rem; }
  header h1 { font-size:0.98rem; flex:1 1 auto; }
  header nav { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:0.4rem 0.9rem; order:5; }
  header nav a { margin-right:0; font-size:0.85em; }
  #backend-indicator { display:none; }  /* Save space — info is in /status anyway. */
  #last-refresh { font-size:0.72em; order:20; }
  .refresh-picker { font-size:0.72em; order:30; gap:0.3rem; }
  .refresh-picker select { padding:0.18rem 0.4rem; }
}
/* Server-side filter form — submits new query params, persists across
   pagination. Distinct from .table-filter (client-only). */
.server-filter { display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap;
                 padding:0.6rem 0.8rem; margin:0.5rem 0;
                 background:var(--row-alt); border:1px solid var(--border);
                 border-radius:6px; }
.server-filter label { display:flex; flex-direction:column; gap:0.2rem;
                       color:var(--muted); font-size:0.78em;
                       text-transform:uppercase; letter-spacing:0.04em; }
.server-filter select,
.server-filter input { padding:0.32rem 0.5rem; background:var(--bg);
                       color:var(--fg); border:1px solid var(--border);
                       border-radius:4px; font-family:var(--mono);
                       font-size:0.9em; min-width:8rem; }
.server-filter input[type="number"] { min-width:10rem; }
.server-filter select:focus,
.server-filter input:focus { outline:none; border-color:var(--accent); }
.server-filter .apply { padding:0.4rem 0.9rem; background:var(--accent);
                        color:var(--accent-fg); border:0; border-radius:4px;
                        cursor:pointer; font-size:0.88em; font-weight:600; }
.server-filter .clear-btn { padding:0.4rem 0.7rem; background:transparent;
                            color:var(--muted); border:1px solid var(--border);
                            border-radius:4px; cursor:pointer; font-size:0.85em; }
.server-filter .clear-btn:hover { color:var(--fg); border-color:var(--accent); }

/* Recent-blocks pager — server-driven (each click = new fetch). Visual
   style borrowed from investor's makeTablePager for muscle-memory parity. */
.blocks-pager { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap;
                margin:0.4rem 0 1rem;
                transition:opacity .15s; }
.blocks-pager.loading { opacity:0.55; pointer-events:none; }
.blocks-pager.loading::before { content:"↻ "; margin-right:0.3rem;
                                color:var(--accent);
                                animation:bp-spin 0.9s linear infinite;
                                display:inline-block; }
@keyframes bp-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
#last-refresh { font-size:0.78em; opacity:0.7; }
.blocks-pager .page-btn { padding:0.32rem 0.7rem; background:var(--row-alt);
                          color:var(--fg); border:1px solid var(--border);
                          border-radius:4px; cursor:pointer;
                          font-family:var(--mono); font-size:0.88em;
                          transition:border-color .12s, background .12s; }
.blocks-pager .page-btn:hover:not(:disabled) { border-color:var(--accent); }
.blocks-pager .page-btn:disabled { color:var(--muted); cursor:not-allowed;
                                   opacity:0.55; }
.blocks-pager .page-info { color:var(--muted); font-size:0.88em;
                           font-family:var(--mono); padding:0 0.5rem; }
.blocks-pager .pager-size-label { margin-left:auto; display:inline-flex;
                                  align-items:center; gap:0.4rem;
                                  font-size:0.78em; color:var(--muted);
                                  text-transform:uppercase; letter-spacing:0.04em; }
.blocks-pager .pager-size-label select { padding:0.28rem 0.5rem;
                                          background:var(--bg); color:var(--fg);
                                          border:1px solid var(--border);
                                          border-radius:4px;
                                          font-family:var(--mono); font-size:0.88em; }
.blocks-pager .pager-jump { display:inline-flex; align-items:center; gap:0.35rem;
                            margin-left:0.4rem; }
.blocks-pager .pager-jump-label { color:var(--muted); font-size:0.78em;
                                  text-transform:uppercase; letter-spacing:0.04em; }
.blocks-pager .pager-jump input { width:9ch; padding:0.28rem 0.5rem;
                                   background:var(--bg); color:var(--fg);
                                   border:1px solid var(--border);
                                   border-radius:4px;
                                   font-family:var(--mono); font-size:0.88em; }

/* Per-view filter bar — distinct from header search (which navigates).
   Sits above the table it filters; hides rows on the current view only. */
.table-filter { display:flex; align-items:center; gap:0.6rem; margin:0.4rem 0 0.6rem;
                flex-wrap:wrap; }
.table-filter .wrap { position:relative; display:inline-flex; align-items:center; }
.table-filter input { width:22ch; padding:0.32rem 1.8rem 0.32rem 0.55rem;
                      background:var(--bg); color:var(--fg);
                      border:1px solid var(--border); border-radius:4px;
                      font-family:var(--mono); font-size:0.88em;
                      transition:border-color .15s, width .15s; }
.table-filter input:focus { outline:none; border-color:var(--accent); width:32ch; }
.table-filter .clear { position:absolute; right:0.35rem; top:50%;
                       transform:translateY(-50%); cursor:pointer;
                       background:transparent; border:0; color:var(--muted);
                       font-size:1.1em; line-height:1; padding:0 0.2rem;
                       visibility:hidden; }
.table-filter .clear:hover { color:var(--fg); }
.table-filter .count { color:var(--muted); font-size:0.85em; font-family:var(--mono); }
.table-filter .hint  { color:var(--muted); font-size:0.75em; margin-left:auto; }

.header-search { display:flex; align-items:center; gap:0.3rem;
                 margin-left:auto; }
.header-search input { width:22ch; padding:0.32rem 0.55rem;
                       background:var(--bg); color:var(--fg);
                       border:1px solid var(--border); border-radius:4px;
                       font-family:var(--mono); font-size:0.85em;
                       transition:border-color .15s, width .15s; }
.header-search input:focus { outline:none; border-color:var(--accent);
                              width:30ch; }
.header-search button { padding:0.32rem 0.65rem; background:var(--accent);
                        color:var(--accent-fg); border:0; border-radius:4px;
                        cursor:pointer; font-size:0.85em; font-weight:600; }
.header-search button:hover { opacity:0.85; }
/* When header-search sits next to refresh-picker (dashboard only), the
   picker shouldn't push to the far right anymore — search already
   claimed margin-left:auto. */
.header-search + .muted.mono + .refresh-picker,
.header-search + .refresh-picker { margin-left:0.6rem; }
.refresh-picker { display:inline-flex; align-items:center;
                  gap:0.45rem; font-size:0.85em; color:var(--muted); }
.refresh-picker select { background:var(--bg); color:var(--fg);
                          border:1px solid var(--border); border-radius:4px;
                          padding:0.25rem 0.5rem; font-family:var(--mono);
                          font-size:0.92em; cursor:pointer; }
.refresh-picker select:hover { border-color:var(--accent); }
header h1 { margin:0; font-size:1.2rem; font-weight:600; }
header h1 a { color:inherit; text-decoration:none; }
header nav a { margin-right:1rem; color:var(--muted); text-decoration:none; }
header nav a:hover { color:var(--accent); }
main { max-width:1100px; margin:0 auto; padding:1.5rem; }
h2 { font-size:1.05rem; margin:1.5rem 0 0.6rem; font-weight:600; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.mono, code, td.mono, .hash, .addr { font-family:var(--mono); font-size:0.92em; }
.muted { color:var(--muted); }
.error { color:var(--bad); padding:0.5rem 0.75rem; border:1px solid var(--bad);
         border-radius:4px; background:rgba(201,52,52,0.05); }
.loading { color:var(--muted); font-style:italic; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:0.4rem 1rem;
      margin:0.5rem 0 1.5rem; }
.kv dt { color:var(--muted); font-size:0.9em; }
.kv dd { margin:0; word-break:break-all; }
/* Wide data tables scroll INSIDE this wrapper on small screens, so the table
   never widens the page (which would scroll the whole layout sideways on mobile). */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table { width:100%; border-collapse:collapse; margin:0.5rem 0; font-size:0.92em; }
th, td { padding:0.45rem 0.6rem; text-align:left; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:500; font-size:0.85em; text-transform:uppercase;
     letter-spacing:0.04em; }
tr:nth-child(even) td { background:var(--row-alt); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
         gap:0.75rem; margin:0.5rem 0 1.5rem; }
.card { padding:0.85rem 1rem; border:1px solid var(--border); border-radius:6px;
        background:var(--row-alt); }
.card .label { color:var(--muted); font-size:0.8em; text-transform:uppercase;
               letter-spacing:0.04em; }
.card .value { font-family:var(--mono); font-size:1.25rem; margin-top:0.2rem;
               word-break:break-all; }
.card .sub { color:var(--muted); font-size:0.95em; margin-top:0.4rem;
             line-height:1.45; word-break:normal; }
.card .value .unit { font-size:0.65em; color:var(--muted); margin-left:0.35em;
                     font-weight:normal; }
.card.hero { background:linear-gradient(135deg,
             var(--row-alt), color-mix(in srgb, var(--accent) 8%, var(--row-alt))); }
.card.hero .value { font-size:1.85rem; line-height:1.1; }
.card.hero .value .unit { font-size:0.55em; }

/* Custom tooltip (data-tip="…"). Replaces the browser-native title= so
   we control font size and line wrap. Triggered on hover/focus.
   col-tip is used inside <th> to work around border-collapse: collapse
   breaking position:relative on table cells in some browsers. */
[data-tip] { position:relative; }
.col-tip { display:inline-block; }
/* Keep multi-token cell values (stake "1,234 TESC", consensus "3 · …") on one
   line so they don't wrap to several rows in a narrow column. */
.nowrap { white-space:nowrap; }
[data-tip]::after {
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#1a1f29; color:#f0f3f7;
  padding:0.7rem 0.85rem; border-radius:6px;
  font-size:0.92rem; line-height:1.5; font-family:var(--font);
  font-weight:normal; text-transform:none; letter-spacing:0;
  white-space:normal; width:max-content; max-width:360px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  pointer-events:none; opacity:0; visibility:hidden;
  /* display:none when hidden so the up-to-360px-wide tooltip never occupies layout
     and widens the page on a narrow screen (it's only shown on hover, which touch
     devices don't have). */
  display:none;
  transition:opacity 0.12s ease-out 0.1s, visibility 0s linear 0.22s;
  z-index:100;
}
[data-tip]:hover::after, [data-tip]:focus-within::after {
  display:block; opacity:1; visibility:visible;
  transition:opacity 0.15s ease-in 0.15s, visibility 0s linear 0.15s;
}
.fee-status { display:inline-block; padding:0.1rem 0.5rem; border-radius:3px;
              font-size:0.72em; font-weight:600; text-transform:uppercase;
              letter-spacing:0.04em; margin-left:0.4em; vertical-align:middle; }
.fee-status.calm     { background:rgba(26,127,55,0.15);  color:var(--good); }
.fee-status.spiking  { background:rgba(255,165,0,0.15);  color:#b15c00; }
.fee-status.congested{ background:rgba(201,52,52,0.15);  color:var(--bad); }
.bar-row { display:flex; gap:0.25rem; align-items:flex-end; height:2.4rem;
           margin-top:0.3rem; }
.bar-row .bar { flex:1; background:var(--accent); border-radius:2px 2px 0 0;
                min-height:0.4rem; opacity:0.45; transition:opacity .15s; }
.bar-row .bar.floor { opacity:0.25; }
.bar-row .bar.above { opacity:0.95; background:#E5651F; }
form.search { display:flex; gap:0.5rem; margin:0.5rem 0 1rem; }
form.search input { flex:1; padding:0.5rem 0.75rem; border:1px solid var(--border);
                    border-radius:4px; background:var(--bg); color:var(--fg);
                    font-family:var(--mono); font-size:0.9em; }
form.search button { padding:0.5rem 1rem; background:var(--accent); color:var(--accent-fg);
                     border:0; border-radius:4px; cursor:pointer; font-weight:500; }
.progress { height:1.5rem; background:var(--row-alt); border-radius:4px;
            border:1px solid var(--border); overflow:hidden; }
.progress > div { height:100%; background:var(--accent); transition:width 0.3s; }
svg.chart { width:100%; height:240px; display:block; margin:0.5rem 0; }
/* Two charts side by side at EQUAL width, so their x-axes (and the ref labels
   under them) render at the same screen level. Stacks on narrow screens. */
.chart-pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.chart-pair .card { min-width:0; }
@media (max-width:760px){ .chart-pair { grid-template-columns:1fr; } }
svg.chart .axis { stroke:var(--border); stroke-width:1; }
svg.chart .line { fill:none; stroke:var(--accent); stroke-width:1.5; }
svg.chart .dot { fill:var(--accent); }
svg.chart text { fill:var(--muted); font-size:11px; font-family:var(--mono); }
.block-nav { display:flex; align-items:center; gap:0.5rem; margin:0.75rem 0;
             font-size:0.9em; flex-wrap:wrap; }
.navbtn { padding:0.4rem 0.8rem; border:1px solid var(--border); border-radius:4px;
          color:var(--accent); text-decoration:none; font-family:var(--mono);
          background:var(--row-alt); }
.navbtn:hover { border-color:var(--accent); }
.navbtn.disabled { color:var(--muted); cursor:default; background:transparent; }
.navlabel { color:var(--muted); margin:0 auto; font-family:var(--mono); }
.badge { display:inline-block; padding:0.1rem 0.45rem; border-radius:3px;
         font-size:0.8em; font-family:var(--mono); font-weight:600; }
.badge.good { background:rgba(26,127,55,0.15); color:var(--good); }
.badge.warn { background:rgba(255,165,0,0.15); color:#b15c00; }
.badge.bad  { background:rgba(201,52,52,0.15); color:var(--bad); }
.badge.accent { background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); }
.badge.muted  { background:var(--row-alt); color:var(--muted); }
@media (prefers-color-scheme: dark) {
  .badge.warn { color:#ffa657; }
}
/* Network-variant pill injected into every page header by network-badge.js */
.network-badge { font-size:0.7rem; letter-spacing:0.05em; vertical-align:middle; cursor:default; }
.fee-explainer {
  margin:1rem 0 2rem;
  padding:0.5rem 1rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--row-alt);
  font-size:0.92em;
}
.fee-explainer summary {
  cursor:pointer;
  padding:0.4rem 0;
  font-weight:600;
  color:var(--accent);
  list-style:none;
  user-select:none;
}
.fee-explainer summary::-webkit-details-marker { display:none; }
.fee-explainer summary::before {
  content:"▸ ";
  display:inline-block;
  width:1em;
  transition:transform 0.15s;
}
.fee-explainer[open] summary::before { content:"▾ "; }
.fee-explainer p {
  margin:0.6rem 0;
  line-height:1.55;
}
.fee-explainer code {
  background:var(--bg);
  padding:0 0.25em;
  border-radius:3px;
  font-size:0.9em;
}

.footer { padding:1.5rem; text-align:center; color:var(--muted); font-size:0.85em; }

/* Canonical GitHub link styling — mirrors the landing-page header's
   .nav-gh exactly so the brand is recognisable wherever the link
   appears (footer, nav, in-body). Gold-soft text + icon, brightens
   to full gold on hover. The gold tones match the landing page's
   CSS vars; they're imported here too so the explorer stays
   visually consistent with tesseracoin.com even though it has its
   own neutral color scheme overall. */
.nav-gh { display:inline-flex; align-items:center; gap:6px;
          color:#dcc07e !important; text-decoration:none;
          font-size:0.92rem; font-weight:500; transition:color .18s; }
.nav-gh:hover { color:#C9A24B !important; }
.nav-gh svg { display:block; }

/* Cross-surface nav links (Home, Wallet) — set apart from the explorer tabs. */
header nav .nav-div { color:var(--border); margin:0 0.2rem; }
header nav a.nav-ext { color:var(--fg); }
header nav a.nav-wallet { color:var(--accent); font-weight:600; }