/* ubi.world ledger v3 — top-bar navigation, Etherscan-style responsive tables,
   Blue/Red horizontal bar component. System fonts only. Dark by default. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#16161a;
  --bg-elev:#1d1d23;
  --fg:#e8e6df;
  --muted:#a8a69e;
  --rule:#2c2c33;
  --rule-strong:#3a3a42;
  --accent:#d6c7a8;
  --link:#d6c7a8;
  --link-hover:#ffffff;
  --code-bg:#22222a;
  --row-hover:#1a1a20;
  --row-alt:#191920;
  --blue:#3e80c4;
  --red:#c25a4a;
  --bar-track:#22222a;
  --bar-border:#3a3a42;
}
[data-theme="light"]{
  --bg:#f6f1e3;
  --bg-elev:#efe8d3;
  --fg:#1d1d1b;
  --muted:#5a5a55;
  --rule:#d8d0bb;
  --rule-strong:#bdb39a;
  --accent:#5a4632;
  --link:#5a4632;
  --link-hover:#1d1d1b;
  --code-bg:#ece5cf;
  --row-hover:#ece4ca;
  --row-alt:#f0e9d2;
  --blue:#1e5a96;
  --red:#9a3a2a;
  --bar-track:#e6dcc0;
  --bar-border:#bdb39a;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family: Georgia, "Iowan Old Style", "Apple Garamond", "Palatino Linotype", "Times New Roman", serif;
  line-height:1.7;
  font-size:18px;
  -webkit-text-size-adjust:100%;
  min-height:100vh;
}

/* TOP BAR */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:1rem;
  padding:0.55rem 1.2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.topbar-left{display:flex;align-items:center;gap:0.7rem;flex:0 0 auto}
.topbar-flag{display:inline-flex;align-items:center;gap:0.55rem;text-decoration:none;color:var(--fg);line-height:0}
.topbar-flag img{height:24px;width:auto;border-radius:2px;opacity:0.95;display:block}
.topbar-flag .brand{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);line-height:1;
}
.topbar-flag:hover .brand{color:var(--fg)}
.topbar-title{
  flex:1 1 auto;text-align:center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.topbar-right{display:flex;align-items:center;gap:0.9rem;flex:0 0 auto}
.topbar-eco{display:flex;align-items:center;gap:0.9rem;font-size:0.82rem}
.topbar-eco a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent}
.topbar-eco a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
.theme-toggle{
  background:transparent;border:1px solid var(--rule-strong);color:var(--fg);
  font:inherit;font-size:1.05rem;width:2.1rem;height:2.1rem;padding:0;
  border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle .glyph{font-size:1.1rem;line-height:1}
.menu-toggle{
  display:none;background:transparent;border:1px solid var(--rule-strong);
  color:var(--fg);font:inherit;font-size:0.85rem;padding:0.3rem 0.6rem;
  border-radius:4px;cursor:pointer;line-height:1;
}
.mobile-drawer{
  display:none;position:fixed;top:3rem;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--rule);
  padding:0.8rem 1rem;z-index:45;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mobile-drawer.open{display:block}
.mobile-drawer a{
  display:block;padding:0.55rem 0.3rem;color:var(--link);
  text-decoration:none;border-bottom:1px solid var(--rule);font-size:0.95rem;
}
.mobile-drawer a:last-child{border-bottom:none}

/* MAIN — full width, centered, generous max-width for tables */
.wrap{max-width:1140px;margin:0 auto;padding:2.4rem 1.6rem 4rem}
.wrap > p, .wrap > h1{max-width:70ch}

.tagline{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 1.1rem;
}
h1{
  font-family: Georgia, serif;font-weight:700;font-size:2.1rem;color:var(--fg);
  line-height:1.2;margin:0 0 1.1rem;letter-spacing:-0.01em;
}
h2{
  font-family: Georgia, serif;font-weight:700;font-size:1.5rem;color:var(--fg);
  margin:2.6rem 0 0.9rem;line-height:1.3;padding-bottom:0.4rem;border-bottom:1px solid var(--rule);
}
p{margin:0 0 1.05rem}
a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent}
a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
strong{font-weight:700;color:var(--fg)}
code, .mono{
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size:0.88em;color:var(--accent);background:var(--code-bg);
  padding:0.1em 0.35em;border-radius:3px;border:1px solid var(--rule);
}

/* Stats grid */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0.9rem;margin:1.4rem 0 0.4rem;
}
.stat-card{
  background:var(--bg-elev);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
  padding:1rem 1.1rem;
}
.stat-card .label{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:0.35rem;
}
.stat-card .value{
  font-family: Georgia, serif;font-size:1.55rem;font-weight:700;color:var(--fg);
  line-height:1.15;
}
.stat-card .sub{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.78rem;color:var(--muted);margin-top:0.25rem;
}

/* ETHERSCAN-STYLE TX TABLE.
   Desktop (>=700px): true table.
   Mobile  (<700px):  each row becomes a stacked card; cells use data-label. */
.tx-table-wrap{margin:1rem 0 1.4rem;}
.tx-table{
  width:100%;border-collapse:collapse;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.9rem;
}
.tx-table th, .tx-table td{
  text-align:left;padding:0.6rem 0.75rem;border-bottom:1px solid var(--rule);
  vertical-align:middle;
}
.tx-table th{
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;border-bottom:1px solid var(--rule-strong);
  background:var(--bg-elev);
}
.tx-table tbody tr:nth-child(even) td{background:var(--row-alt)}
.tx-table tbody tr:hover td{background:var(--row-hover)}
.tx-table td.amount{font-family: "SF Mono", Menlo, Consolas, monospace;color:var(--fg);white-space:nowrap}
.tx-table td.time{font-family: "SF Mono", Menlo, Consolas, monospace;color:var(--muted);white-space:nowrap;font-size:0.85rem}
.tx-table td.handle{font-family: "SF Mono", Menlo, Consolas, monospace;font-size:0.88rem}
.tx-table td.node{font-family: "SF Mono", Menlo, Consolas, monospace;color:var(--muted);font-size:0.85rem;white-space:nowrap}

/* BLUE / RED HORIZONTAL BAR — replaces the old circle/percentage pill.
   <span class="br-bar" data-blue="80" aria-label="80% blue, 20% red">
     <span class="br-fill br-blue" style="width:80%"></span>
     <span class="br-fill br-red"  style="width:20%"></span>
   </span>
   <span class="br-num">80% blue</span>
*/
.br-cell{display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap}
.br-bar{
  display:inline-flex;width:80px;height:10px;
  border:1px solid var(--bar-border);border-radius:5px;
  background:var(--bar-track);overflow:hidden;flex:0 0 auto;
}
.br-fill{display:block;height:100%}
.br-fill.br-blue{background:var(--blue)}
.br-fill.br-red{background:var(--red)}
.br-num{
  font-family: "SF Mono", Menlo, Consolas, monospace;font-size:0.82rem;
  color:var(--blue);font-weight:600;
}
.br-num.red-leaning{color:var(--red)}
/* Larger variant for detail pages */
.br-bar.br-bar-lg{width:160px;height:14px;border-radius:7px}
.br-bar-lg + .br-num{font-size:1rem}

/* Key/value list (tx detail) */
.kv{
  display:grid;grid-template-columns:max-content 1fr;column-gap:1.4rem;row-gap:0.55rem;
  margin:1rem 0 0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.92rem;
}
.kv dt{
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding-top:0.15rem;
}
.kv dd{margin:0;color:var(--fg);font-family: "SF Mono", Menlo, Consolas, monospace;word-break:break-all}
.kv dd.serif{font-family: Georgia, serif}

.sig-block{
  margin-top:0.4rem;padding:0.7rem 0.9rem;background:var(--code-bg);
  border:1px solid var(--rule);border-radius:4px;
  font-family: "SF Mono", Menlo, Consolas, monospace;font-size:0.8rem;
  color:var(--muted);word-break:break-all;
}
.sig-toggle{
  background:none;border:none;color:var(--link);cursor:pointer;
  font:inherit;font-size:0.78rem;padding:0;margin-left:0.4rem;
  border-bottom:1px solid var(--rule-strong);
}

/* Crumbs (for /ledger/, /ledger/transactions/, /ledger/nodes/ subpages) */
.crumbs{
  font-family: "SF Mono", Menlo, Consolas, monospace;font-size:0.82rem;
  color:var(--muted);margin-bottom:1.5rem;letter-spacing:0.04em;
}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted)}
.crumbs a:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}

.notice{
  background:var(--bg-elev);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
  padding:1.1rem 1.3rem;margin:1.5rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.92rem;line-height:1.55;
}
.notice strong{color:var(--accent);display:block;font-size:0.74rem;
  letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.5rem;}

footer{
  border-top:1px solid var(--rule);padding:1.1rem 0 0;margin-top:3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:0.78rem;color:var(--muted);letter-spacing:0.05em;
}

/* Mobile breakpoint — top bar collapses, tables become cards */
@media (max-width:780px){
  .topbar{padding:0.45rem 0.8rem;gap:0.5rem}
  .topbar-title{display:none}
  .topbar-eco{display:none}
  .menu-toggle{display:inline-block}
  body{font-size:17px}
  .wrap{padding:1.6rem 1rem 3rem}
  h1{font-size:1.7rem}
  h2{font-size:1.25rem}
  .kv{grid-template-columns:1fr}
  .kv dt{padding-top:0.6rem}
}

/* Etherscan-style card layout for tables on mobile */
@media (max-width:700px){
  .tx-table{display:block;font-size:0.92rem}
  .tx-table thead{display:none}
  .tx-table tbody{display:block}
  .tx-table tbody tr{
    display:block;
    background:var(--bg-elev);
    border:1px solid var(--rule);
    border-radius:5px;
    margin-bottom:0.7rem;
    padding:0.6rem 0.8rem;
  }
  .tx-table tbody tr:nth-child(even) td{background:transparent}
  .tx-table tbody tr:hover td{background:transparent}
  .tx-table tbody td{
    display:flex;
    align-items:flex-start;
    gap:0.8rem;
    padding:0.35rem 0;
    border-bottom:1px dashed var(--rule);
    white-space:normal;
    word-break:break-word;
  }
  .tx-table tbody td:last-child{border-bottom:none}
  .tx-table tbody td::before{
    content: attr(data-label);
    flex:0 0 6.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
    padding-top:0.15rem;
  }
  .tx-table tbody td.time{font-size:0.84rem}
  .br-bar{width:60px;height:9px}
  .br-num{font-size:0.78rem}
}