/* ————————————————————————————————————————————————————————————
   RADIUM — home view.

   Home is no longer a separate document: it is the third view on the
   desk page, beside Swap and Leverage. That means these rules share a
   page with app.css, so every one of them is scoped under #view-home.
   Nothing here can reach the desk, and the desk's own .btn/.hero rules
   cannot reach in — the few class names that collided were renamed
   (.hbtn, .hhero…) rather than fought over with specificity.

   The globals this file used to carry (reset, body, particles, links,
   scrollbars, scanline) are all in app.css already, byte for byte the
   same treatment, so they are gone from here.
   ———————————————————————————————————————————————————————————— */

/* The landing page carried a global reset; app.css does not (it only sets
   box-sizing), so h1/h2/p/ul would arrive here with the browser's default
   margins and every gap on the page would be wrong. Same reset, scoped. */
#view-home *, #view-home *::before, #view-home *::after{
  box-sizing:border-box;margin:0;padding:0;
}

#view-home {
  /* the landing palette, redeclared on the subtree that uses it: --muted
     and --glow mean something different on the desk, and this keeps both
     right without renaming either */
  --surface: #0c0c10;
  --border: #1a1a24;
  --yellow: #c8b400;
  --amber: #ff9500;
  --muted: #52525b;
  --dim: #3a3a44;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
  --glow: 0 0 20px rgba(57,255,20,.3), 0 0 60px rgba(57,255,20,.1);
  --glow-sm: 0 0 8px rgba(57,255,20,.25);
  font-family: var(--sans);
  line-height: 1.6;
}

#view-home .container{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ─── HERO ─── */
/* Full-height on its own page; here it sits under the desk topbar and
   inside .main, so the viewport it should fill is what is left below. */
#view-home .hhero{
  min-height:calc(100vh - 150px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:40px 24px 60px;position:relative;
}
#view-home .hhero-trefoil{
  width:150px;height:auto;margin-bottom:28px;
  filter:drop-shadow(0 0 26px rgba(57,255,20,.35)) drop-shadow(0 0 70px rgba(57,255,20,.12));
  animation:trefoilPulse 5s ease-in-out infinite;
}
@keyframes trefoilPulse{
  0%,100%{filter:drop-shadow(0 0 26px rgba(57,255,20,.35)) drop-shadow(0 0 70px rgba(57,255,20,.12))}
  50%{filter:drop-shadow(0 0 40px rgba(57,255,20,.5)) drop-shadow(0 0 100px rgba(57,255,20,.2))}
}
/* The heading carries the claim. It used to be the word RADIUM, directly
   under the logo that already says RADIUM: the name twice and nothing
   about what the thing does. Display face, tight, mostly white -- green
   is spent on one word here and on one button below, instead of on the
   tile, the wordmark, all three figures and the button at once, which is
   why nothing used to lead. */
#view-home .hhero-title{
  font-family:var(--sans);font-size:clamp(38px,6vw,68px);font-weight:700;
  color:#fff;letter-spacing:-.03em;line-height:1.03;margin:0;max-width:15ch;
}
#view-home .hhero-title em{
  font-style:normal;color:var(--green);text-shadow:0 0 40px rgba(57,255,20,.45);
}
#view-home .hhero-sub{
  font-family:var(--sans);font-size:clamp(15px,2vw,17px);line-height:1.6;
  color:#9aa39b;letter-spacing:0;text-transform:none;
  margin-top:18px;max-width:560px;
}
#view-home .hhero-sub b{color:#e8f2e6;font-weight:500}

/* half-life meter — three cards. They used to be bare divs on the page,
   which is why the row read as a list rather than as a panel. */
#view-home .hl-meter{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:36px;
  width:100%;max-width:620px;
}
#view-home .hl-block{
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:16px 14px;text-align:left;
}
#view-home .hl-label{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:0;
}
/* A value is a number and a unit, not a sentence. Splitting them is what
   makes 149 read as a figure instead of as a line of text. */
#view-home .hl-value{
  font-family:var(--sans);font-size:clamp(26px,4vw,34px);font-weight:700;
  color:#fff;line-height:1;margin-top:9px;
  display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums;
}
/* a status word rather than a figure: reading size, not display size */
#view-home .hl-value.is-text{
  font-size:clamp(16px,2.2vw,19px);font-weight:500;color:#9aa39b;line-height:1.3;
}
#view-home .hl-value u{
  font-family:var(--mono);font-size:13px;font-weight:400;color:var(--muted);
  text-decoration:none;letter-spacing:.04em;
}
/* the one figure that is counting down gets the colour */
#view-home .hl-block.is-live .hl-value{color:var(--green);text-shadow:var(--glow-sm)}
/* the minutes between a cycle falling due and its transfer appearing on
   chain: the page is watching for it, and says so by breathing rather than
   by sitting still on a number that has stopped moving */
#view-home .hl-block.is-live .hl-value.is-burning{color:var(--green);animation:burnPulse 1.4s ease-in-out infinite}
@keyframes burnPulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
#view-home .hl-value.amber{color:var(--amber)}

/* decay progress */
#view-home .decay-progress{
  width:100%;max-width:620px;margin-top:10px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:15px 16px;
}
#view-home .decay-progress-label{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-bottom:11px;letter-spacing:1px;
}
#view-home .decay-bar{
  width:100%;height:6px;background:#15151d;border-radius:999px;overflow:hidden;
}
#view-home .decay-bar-fill{
  height:100%;background:var(--green);border-radius:999px;
  box-shadow:0 0 12px rgba(57,255,20,.6);transition:width 1s ease;width:0%;
}

/* CTA — .hbtn, not .btn: the desk's .btn is a different button and this
   page is now the same document as the desk.
   Two buttons, not four. Four of equal weight meant no primary action,
   and two of the four were footnotes; those are links now. */
#view-home .hhero-cta{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap;justify-content:center}
#view-home .hbtn{
  font-family:var(--mono);font-size:12px;font-weight:600;
  padding:14px 26px;border-radius:10px;cursor:pointer;
  letter-spacing:1.4px;text-transform:uppercase;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;line-height:1.2;
}
#view-home .hbtn-primary{
  background:var(--green);color:#04120a;border:1px solid var(--green);
  box-shadow:0 0 0 1px rgba(57,255,20,.5),0 12px 36px rgba(57,255,20,.2);
}
#view-home .hbtn-primary:hover{box-shadow:var(--glow);opacity:1}
#view-home .hbtn-ghost{
  background:rgba(255,255,255,.03);color:#e8f2e6;border:1px solid rgba(255,255,255,.12);
}
#view-home .hbtn-ghost:hover{border-color:var(--muted);color:#fff;opacity:1}

#view-home .hhero-links{
  display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:1px;
}
#view-home .hhero-links a{
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:2px;
}
#view-home .hhero-links a:hover{color:#fff;border-bottom-color:var(--muted)}

/* ─── SECTIONS ─── */
#view-home section{padding:100px 0}
#view-home .section-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:4px;
  text-transform:uppercase;color:var(--green);margin-bottom:12px;
}
#view-home .section-title{
  font-family:var(--sans);font-size:clamp(28px,5vw,40px);font-weight:700;
  color:#fff;margin-bottom:16px;letter-spacing:0;
}
#view-home .section-desc{
  font-size:16px;color:var(--muted);max-width:600px;line-height:1.7;
}

/* ─── HOW IT WORKS ─── */
#view-home .flow{
  margin-top:56px;display:flex;flex-direction:column;gap:0;
  position:relative;padding-left:32px;
}
#view-home .flow::before{
  content:'';position:absolute;left:11px;top:12px;bottom:12px;
  width:1px;background:var(--border);
}
#view-home .flow-step{position:relative;padding:20px 0 20px 32px}
#view-home .flow-dot{
  position:absolute;left:-32px;top:24px;width:22px;height:22px;
  border-radius:50%;border:2px solid var(--green);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
#view-home .flow-dot::after{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:var(--glow-sm);
}
#view-home .flow-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--green);text-transform:uppercase;margin-bottom:6px;
}
#view-home .flow-title{
  font-family:var(--sans);font-size:18px;font-weight:600;color:#fff;
  margin-bottom:4px;
}
#view-home .flow-desc{font-size:14px;color:var(--muted)}

/* ─── THE DESK ─── */
#view-home .desk-grid{
  margin-top:48px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
#view-home .desk-card{
  border:1px solid var(--border);border-radius:12px;padding:24px;
  background:rgba(8,8,12,.6);
}
#view-home .desk-card h3{
  font-family:var(--sans);font-size:18px;font-weight:600;color:#fff;
  margin:0 0 8px;letter-spacing:0;
}
#view-home .desk-card p{font-size:14px;color:var(--muted);margin:0 0 14px;line-height:1.65}
#view-home .desk-card ul{margin:0;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.8}
#view-home .desk-card li::marker{color:var(--green)}
#view-home .desk-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--green);margin-bottom:8px;
}
#view-home .desk-note{
  margin-top:32px;padding:20px 24px;border-radius:12px;
  border:1px solid rgba(57,255,20,.18);background:rgba(57,255,20,.03);
  font-size:15px;color:var(--text);line-height:1.7;
}
#view-home .desk-note strong{color:var(--green)}

/* ─── DECAY LOG ─── */
#view-home .log-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
#view-home .live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:var(--glow-sm);animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
#view-home .live-label{
  font-family:var(--mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--green);
}
#view-home .log-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#view-home .log-table table{
  width:100%;min-width:480px;border-collapse:collapse;font-family:var(--mono);font-size:13px;
}
#view-home .log-table th{
  text-align:left;padding:10px 16px;color:var(--muted);font-weight:500;
  border-bottom:1px solid var(--border);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;
}
#view-home .log-table td{
  padding:10px 16px;border-bottom:1px solid var(--border);color:var(--text);
}
#view-home .log-table tr:hover td{background:rgba(57,255,20,.02)}
#view-home .log-type{
  display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;
  font-weight:500;
}
/* pager — fifteen burns a page, so the log does not run the page into
   the ground once there are hundreds of them */
#view-home .pager{
  display:flex;align-items:center;gap:6px;margin-top:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;
}
#view-home .pg-btn{
  min-width:30px;padding:5px 9px;background:transparent;color:var(--muted);
  border:1px solid var(--border);border-radius:5px;cursor:pointer;
  font-family:inherit;font-size:inherit;transition:color .15s,border-color .15s;
}
#view-home .pg-btn:hover:not(:disabled){color:var(--green);border-color:rgba(57,255,20,.4)}
#view-home .pg-btn.is-on{color:var(--green);border-color:var(--green);background:rgba(57,255,20,.06)}
#view-home .pg-btn:disabled{opacity:.3;cursor:default}
#view-home .pg-gap{color:var(--muted);padding:0 2px}
#view-home .pg-count{margin-left:auto;color:var(--muted);font-size:11px;letter-spacing:1px}
@media(max-width:480px){
  #view-home .pg-count{margin-left:0;width:100%;text-align:center;margin-top:6px}
}
#view-home .log-type.burn{background:rgba(57,255,20,.1);color:var(--green)}
#view-home .log-type.collect{background:rgba(200,180,0,.1);color:var(--yellow)}

/* ─── SUPPLY CURVE ─── */
#view-home .curve-wrap{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:32px;margin-top:40px;
}
#view-home #curveCanvas{width:100%;height:300px;display:block}

/* ─── STATS ─── */
#view-home .stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;margin-top:48px;
}
#view-home .stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:24px;
}
#view-home .stat-label{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
#view-home .stat-value{font-family:var(--mono);font-size:28px;font-weight:700}
#view-home .stat-value.green{color:var(--green);text-shadow:var(--glow-sm)}
#view-home .stat-value.amber{color:var(--amber)}
#view-home .stat-active{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--green);
}
#view-home .stat-active .live-dot{width:6px;height:6px}

/* ─── CONTRACT BAR ─── */
#view-home .contract-bar{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:48px;flex-wrap:wrap;
}
#view-home .contract-bar-label{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);
}
#view-home .contract-bar-addr{
  font-family:var(--mono);font-size:14px;color:var(--green);
  word-break:break-all;flex:1;
}
#view-home .btn-copy{
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:8px 16px;border-radius:4px;cursor:pointer;
  background:transparent;color:var(--green);border:1px solid var(--green);
  letter-spacing:1px;text-transform:uppercase;transition:all .2s;
}
#view-home .btn-copy:hover{background:rgba(57,255,20,.1)}
#view-home .btn-copy.copied{background:var(--green);color:var(--bg)}

/* ─── CHART EMBED ─── */
#view-home .chart-section{margin-top:48px}
#view-home .chart-section-title{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
#view-home .chart-embed{
  width:100%;height:400px;border-radius:8px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
}
#view-home .chart-embed iframe{width:100%;height:100%;border:none}

/* ─── FOOTER ─── */
#view-home footer{
  border-top:1px solid var(--border);padding:48px 0;margin-top:40px;
}
#view-home .footer-links{
  display:flex;gap:24px;flex-wrap:wrap;justify-content:center;
  margin-bottom:32px;
}
#view-home .footer-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);transition:color .2s;
}
#view-home .footer-links a:hover{color:var(--green)}
#view-home .footer-tagline{
  text-align:center;font-family:var(--mono);font-size:12px;
  color:var(--muted);margin-top:24px;letter-spacing:2px;
}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  #view-home .container{padding:0 16px}
  #view-home section{padding:64px 0}
  /* svh, not vh: on iOS vh is the LARGE viewport, taller than what is on
     screen, and the desk page does not scroll the document — .rb-scroll
     does — so the toolbar never collapses to make that height real. */
  #view-home .hhero{padding:24px 16px 40px;min-height:auto;min-height:calc(100svh - 130px)}
  #view-home .hhero-trefoil{width:120px;height:auto;margin-bottom:20px}
  #view-home .hhero-sub{margin-top:14px}
  #view-home .hl-meter{grid-template-columns:1fr;gap:8px;margin-top:28px}
  #view-home .hl-label{font-size:9px;letter-spacing:2px}
  #view-home .hl-value{font-size:clamp(24px,7vw,32px)}
  #view-home .decay-progress{margin-top:24px}
  #view-home .hhero-cta{margin-top:28px;gap:10px}
  #view-home .hbtn{padding:13px 22px;font-size:12px}
  #view-home .section-title{font-size:clamp(22px,6vw,32px)}
  #view-home .section-desc{font-size:14px}
  #view-home .flow{padding-left:24px}
  #view-home .flow-step{padding:14px 0 14px 24px}
  #view-home .flow-dot{left:-24px;width:18px;height:18px}
  #view-home .flow-dot::after{width:6px;height:6px}
  #view-home .flow-title{font-size:16px}
  #view-home .flow-desc{font-size:13px}
  #view-home .stats-grid{grid-template-columns:1fr 1fr;gap:12px}
  #view-home .stat-card{padding:16px}
  #view-home .stat-value{font-size:22px}
  #view-home .stat-value[style*="font-size:20px"]{font-size:16px !important}
  #view-home .contract-bar{flex-direction:column;align-items:flex-start;padding:14px 16px;gap:12px}
  #view-home .contract-bar-addr{font-size:12px}
  /* the table forced a 480px min-width, so Tx sat off-screen and the whole
     row had to be swiped sideways. Drop the floor and shed the Event
     column — every row in this log is a BURN, so it carries no
     information on a narrow screen. */
  #view-home .log-table table{font-size:11px;min-width:0}
  #view-home .log-table th,#view-home .log-table td{padding:8px 10px}
  #view-home .log-table th:nth-child(2),#view-home .log-table td:nth-child(2){display:none}
  #view-home .log-table td:first-child{white-space:normal;line-height:1.35}
  #view-home .log-table th:last-child,#view-home .log-table td:last-child{text-align:right;padding-right:6px}
  #view-home .log-table td:last-child a{font-size:10px;white-space:nowrap}
  #view-home .curve-wrap{padding:16px}
  #view-home #curveCanvas{height:220px}
  #view-home .chart-embed{height:300px}
  #view-home .footer-links{gap:16px}
  #view-home .footer-links a{font-size:11px}
}
@media(max-width:400px){
  #view-home .hhero-trefoil{width:104px;height:auto}
  #view-home .hhero{padding:20px 12px 32px}
  #view-home .container{padding:0 12px}
  #view-home .hl-meter{grid-template-columns:1fr;gap:8px}
  #view-home .hhero-cta{flex-direction:column;align-items:stretch}
  #view-home .hbtn{justify-content:center}
  #view-home .stats-grid{grid-template-columns:1fr}
  #view-home .flow-title{font-size:15px}
  #view-home .flow-desc{font-size:12px}
  #view-home .section-title{font-size:22px}
  #view-home .log-table th,#view-home .log-table td{padding:6px 6px;font-size:10px}
  #view-home .contract-bar-addr{font-size:11px}
  #view-home .footer-links{flex-direction:column;align-items:center;gap:12px}
}

/* Home is not laid out inside <main>: it is full-bleed, the way the
   landing page was, with its own .container doing the gutters. And while
   it is showing, the desk's <main> is empty of anything visible, so its
   padding would leave a hundred pixels of nothing under the footer. */
#view-home{max-width:none;margin:0}
body.home-on .main{display:none}