/* TenTen "v2 desktop" skin for /, /reserve/ and /reward-reserve/.
   Every foundation rule below is a translation of the v2 / TenBlocks styles.css (same values:
   fonts, sizes, paddings, bevels), applied to this site's existing class names. It is loaded after
   each page's own CSS. Content, markup and scripts are untouched. */

:root{
  /* v2 tokens */
  --desktop:#2f4a3e;--desktop-deep:#24382f;
  --paper:#e9e4d3;--paper-raised:#f2eee0;--paper-sunken:#dcd6c2;
  --ink:#23211a;--ink-muted:#5c5648;
  --accent:#0e4f34;--accent-deep:#093824;--accent-bright:#1e7a4e;--accent-wash:#dbe3d6;
  --red:#9c1f1f;--gilt:#8a6d2f;
  --bev-light:#fbf8ec;--bev-dark:#837b62;--bev-darkest:#44402f;
  --lcd-bg:#0d1a12;--lcd-text:#5fdd94;--lcd-dim:#59a37c;--lcd-red:#e0654f;
  --raised:inset -1px -1px 0 var(--bev-darkest),inset 1px 1px 0 var(--bev-light),inset -2px -2px 0 var(--bev-dark),inset 2px 2px 0 var(--paper-raised);
  --sunken:inset -1px -1px 0 var(--bev-light),inset 1px 1px 0 var(--bev-darkest),inset -2px -2px 0 var(--paper-raised),inset 2px 2px 0 var(--bev-dark);
  --chrome:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  --body:Verdana,Geneva,Tahoma,sans-serif;
  --mono:"Courier New",Courier,monospace;
  /* the site's own tokens, re-pointed to the v2 palette and fonts */
  --desk:#2f4a3e;--desk-dark:#24382f;
  --panel:#e9e4d3;--panel-2:#dcd6c2;--panel-3:#d3cdb7;
  --hi:#fbf8ec;--lo:#837b62;--lo2:#44402f;
  --ink-2:#5c5648;
  --title:#0e4f34;--title-2:#093824;
  --lcd:#0d1a12;--lcd-2:#0d1a12;
  --ph:#5fdd94;--ph-dim:#59a37c;--ph-glow:rgba(95,221,148,0);
  --serif:Georgia,"Times New Roman",Times,serif;
  --ui:Verdana,Geneva,Tahoma,sans-serif;
  --lcdf:"TenMono","Courier New",Courier,monospace;
}

/* Courier New scaled to 80% for the page-specific components, whose sizes were drawn for a narrower pixel font.
   The v2 foundation (readouts, tables, inputs) uses the real Courier New at v2's own sizes. */
@font-face{font-family:"TenMono";font-weight:400;src:local("Courier New"),local("CourierNewPSMT"),local("Courier");size-adjust:80%}
@font-face{font-family:"TenMono";font-weight:700;src:local("Courier New Bold"),local("CourierNewPS-BoldMT"),local("Courier Bold");size-adjust:80%}

/* ---- page ---- */
body{margin:0;min-height:100vh;color:var(--ink);font:12px/1.55 var(--body);overflow-x:hidden;
  background:radial-gradient(ellipse at top,#2f4a3e 0%,#24382f 100%) fixed}
.wrap{width:auto;max-width:920px;margin:0 auto;padding:12px 16px 40px}
@media(min-width:760px){.wrap{width:auto;max-width:920px}}
a{color:var(--accent)}

/* ---- ticker (top strip) ---- */
.strip{background:var(--paper-raised);box-shadow:var(--sunken);border:0;padding:6px 12px;text-align:center;
  font:11px var(--chrome);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:400}
.strip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#99aaaa;box-shadow:none;margin-right:8px;vertical-align:middle;animation:none}
.strip{margin:0!important}
.strip+.strip{margin-top:6px!important}

/* ---- masthead on the desktop ---- */
#top.win,#top{background:transparent;box-shadow:none;border:0;padding:0;margin:0}
#top .mast{text-align:center;padding:26px 0 16px;color:var(--paper-raised)}
#top .mast .logo{display:block;width:64px;height:64px;margin:0 auto 10px;box-shadow:var(--raised);padding:3px;background:var(--paper);border:0;object-fit:contain;box-sizing:border-box}
#top .mast h1{margin:0;font:700 clamp(28px,6vw,42px)/1.15 var(--serif);letter-spacing:0;color:var(--paper-raised);text-shadow:0 2px 0 rgba(0,0,0,.35)}
#top .mast h1 em{font-style:italic;font-weight:400}
#top .mast .sub{margin:8px 0 0;font:11px var(--chrome);letter-spacing:.2em;text-transform:uppercase;color:#c6d4c8}
#top .mast .sub code{display:block;margin-top:6px;font:11px var(--chrome);letter-spacing:.08em;color:#9db3a4;text-transform:uppercase}

/* the three readouts sit in a raised panel, like v2's section.panel.stats */
#top .lcds,.lcds{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);background:var(--paper);box-shadow:var(--raised);padding:10px;margin:0 0 12px}
@media(max-width:720px){#top .lcds,.lcds{grid-template-columns:1fr}}
.lcds .lcd{padding:12px 14px}
.lcds .lcd .v{font-size:clamp(22px,4.5vw,30px)}

/* ---- LCD readouts ---- */
.lcd{background-color:var(--lcd-bg);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);box-shadow:var(--sunken);color:var(--lcd-text);font-family:var(--lcdf);padding:14px 16px;text-shadow:0 0 6px rgba(95,221,148,.35);position:relative;overflow:visible}
.lcd::after{display:none}
.lcd.err{text-shadow:0 0 6px rgba(224,101,79,.35)}
.lcd .k{font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.14em;text-transform:uppercase;color:var(--lcd-dim)}
.lcd .v{font:clamp(22px,5vw,32px)/1.55 var(--mono);margin:2px 0 0;letter-spacing:0}
.lcd .s{font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.14em;text-transform:uppercase;color:var(--lcd-dim)}
.lcd.err .v,.lcd.err{color:var(--lcd-red)}

/* ---- menu bar ---- */
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:2px;background:var(--paper);box-shadow:var(--raised);border:0;padding:4px;margin:0 0 12px}
.menu.sticky{position:sticky;top:0;z-index:60;margin-top:0;flex-wrap:wrap}
.menu .brand{font:700 12px var(--chrome);letter-spacing:0;color:var(--ink);padding:4px 10px}
@media(min-width:901px){.menu .brand{display:none}}
.menu a{font:12px var(--chrome);letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);text-decoration:none;padding:4px 8px;border:0;white-space:nowrap}
.menu a .new{font-size:8px;vertical-align:top;margin-left:2px;padding:0 3px;animation:none;background:var(--lcd-text);color:var(--lcd-bg)}
.menu a.on{background:var(--accent);color:var(--paper-raised);box-shadow:none;border:0}
@media(hover:hover){.menu a:hover{background:var(--accent);color:var(--paper-raised);border:0}}
@media(min-width:901px){.menu .links-row{display:flex;gap:0;flex-wrap:wrap}}
.menu .hb{font:700 12px var(--chrome);letter-spacing:.06em}
@media(max-width:900px){.menu.open .links-row a{padding:12px;font-size:13px;border-bottom:1px dotted var(--bev-dark)}.menu.open .links-row{background:var(--paper);box-shadow:var(--raised);border:0}}
.menu .sp{flex:1}
.menu a.b.go,.menu .b.go{background:#9af0b5;color:var(--accent-deep);font-weight:700;box-shadow:var(--raised);padding:4px 12px;font-family:var(--chrome);font-size:12px}
@media(hover:hover){.menu a.b.go:hover{background:var(--accent);color:var(--paper-raised)}}

/* ---- windows ---- */
.win{background:var(--paper);box-shadow:var(--raised);border:0;margin:0 0 14px;padding:3px;scroll-margin-top:52px}
.win .bar{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 8px;color:var(--paper-raised);
  font:700 12px var(--chrome);letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright));gap:10px}
@media(hover:hover){.win .bar:hover{background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright))}}
.win .bar .btns{display:flex;gap:2px}
.win .bar button{width:16px;height:14px;padding:0;border:0;background:var(--paper);box-shadow:var(--raised);font:700 9px/1 var(--chrome);color:var(--ink);cursor:pointer}
.win .bar button:active{box-shadow:var(--sunken)}
.win .body{padding:16px}
.win .body h3{margin:0 0 6px;font:700 13px var(--chrome);letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.win .body p{margin:0 0 12px;font-size:12px}
.win .body li,.card p,td{font-size:12px}
.small{font-size:11px}
.in{border:0;box-shadow:var(--sunken)}
.out{border:0}

/* ---- buttons ---- */
.b{display:inline-flex;align-items:center;font:700 12px var(--chrome);letter-spacing:.04em;color:var(--ink);background:var(--paper-raised);border:0;padding:8px 16px;box-shadow:var(--raised);text-decoration:none;cursor:pointer;gap:8px}
.b:active{box-shadow:var(--sunken);transform:none}
.b.go{color:var(--paper-raised);background:var(--accent);border:0}
@media(hover:hover){.b:hover{filter:none}.b.go:hover{background:var(--accent-bright);box-shadow:var(--raised)}}

/* ---- tabs on the Holder Desk ---- */
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:-1px}
.tabs span{font:12px var(--chrome);text-align:left;background:var(--paper-sunken);color:var(--ink);border:0;padding:6px 14px;box-shadow:var(--raised)}
.tabs span b{display:block;font:700 12px var(--chrome);color:var(--ink)}
.tabs span.on{background:var(--paper-raised);box-shadow:var(--raised)}
.tabs span.on b{color:var(--accent)}
.tabbody{background:var(--paper-raised);box-shadow:var(--sunken);padding:14px 16px;margin-bottom:14px}

/* ---- tables ---- */
.rt{background:var(--paper-raised);box-shadow:var(--sunken)}
.win .body .rt h3,.rt h3{margin:0;padding:6px 10px;background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright));color:var(--paper-raised);font:700 12px var(--chrome);letter-spacing:.1em;text-transform:uppercase}
.rt h3 a{color:var(--paper-raised)}
.rt table{font:13px/1.55 var(--mono);width:100%}
.rt th{font:700 11px var(--chrome);letter-spacing:.08em;text-transform:uppercase;background:var(--paper-sunken);color:var(--ink);padding:9px 12px;border-bottom:1px solid var(--paper-sunken)}
.rt td{padding:9px 12px;border-bottom:1px solid var(--paper-sunken);color:var(--ink)}
.rt tr.tot td{background:var(--accent-wash);font-weight:700;border-top:0}
.rt tr.tot td:first-child{font:700 11px var(--chrome);letter-spacing:.08em}
.rsum{padding:14px 16px}
.rsum .k{font:11px var(--mono);letter-spacing:.14em}
.rsum .v{font-size:clamp(22px,5vw,32px);line-height:1.2}

/* ---- sizes that were tuned for the old pixel font, now Courier New like v2 ---- */
.ca code,.addr code,.status code,.kv b,.desk-txt .rows b,.intro em,.item span em,.fnlist,.legend{font-family:var(--mono);font-size:13px}
.trk input{font:13px var(--mono);padding:9px 10px;border:0;background:var(--paper-raised);box-shadow:var(--sunken)}
.item .ic{font-family:var(--mono);font-size:16px;border:0;box-shadow:var(--sunken)}
.no i{font-family:var(--mono);font-size:16px}
.growth .head,.growth .note{font-family:var(--mono);font-size:11px}
.gtip{font-family:var(--mono);font-size:12px;border:1px solid var(--lcd-text)}
.gchart .ax{font-family:var(--mono);font-size:10px}.gchart .tot{font-family:var(--mono);font-size:11px}
.report{font-family:var(--mono);font-size:12px}
.term{font-family:var(--mono);font-size:clamp(12px,1.3vw,14px)}
.term .t{font-size:11px}
.chart .txt{font-family:var(--mono);font-size:11px}
.rounds li,.report .rows{font-family:var(--mono);font-size:12px}

/* ---- footer ---- */
.status,footer{margin:0;color:#c6d4c8;font:11px var(--chrome);text-align:center;padding:14px 8px 0;letter-spacing:.04em;background:transparent;box-shadow:none;border:0}
.status a,footer a{color:#e4efe6}
.status code{color:#e4efe6;background:none}

/* headings */
h1,h2,.desk-txt h2{font-family:var(--serif)}

/* ===== views (one group of windows per menu entry) ===== */
section.win[hidden]{display:none}

/* ===== Holder Desk ===== */
.desk-txt h2{font:700 22px/1.25 var(--serif);margin:0 0 10px;letter-spacing:0}
.desk-txt h2 em{font-style:italic;font-weight:700;color:var(--accent)}
.desk-txt p{font-size:12px;margin:0 0 10px}
.desk-txt .rows span{font-size:12px}
.desk-txt .rows b{font-size:13px}
.desk2{align-items:stretch;gap:16px}
.monitor{display:flex;flex-direction:column}
.monitor .screen{flex:1;aspect-ratio:auto;min-height:280px}
.desk-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dotted var(--bev-dark)}
.desk-foot .ctas{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.desk-foot .ca{display:flex;flex:1 1 320px;gap:6px;align-items:center;margin:0;min-width:0}
.desk-foot .ca code{flex:1;min-width:0;padding:8px 10px;font-size:12px;line-height:1.3;box-shadow:var(--sunken);background:var(--paper-raised);word-break:break-all}

/* ===== Reserves overview: plain beige panels like the reference mock-up ===== */
#reserves .rv{gap:14px}
#reserves .rt{background:var(--paper-raised);box-shadow:var(--sunken);padding:0}
#reserves .rt h3{margin:0;padding:6px 10px;background:var(--paper);box-shadow:var(--raised);color:var(--ink);font:700 12px var(--chrome);letter-spacing:.08em;text-transform:uppercase}
#reserves .rt h3 a{display:none}
#reserves .rt th{background:transparent;padding:6px 10px;font:700 10px var(--chrome);letter-spacing:.08em;border-bottom:1px solid var(--paper-sunken)}
#reserves .rt td{padding:6px 10px;font-size:13px}
#reserves .rt tr.tot td{background:var(--paper-sunken);font-weight:700;border-top:0}
#reserves .rt tr.tot td:first-child{font:700 11px var(--chrome);letter-spacing:.08em}
#reserves .lcd.rsum{background:var(--paper-raised);background-image:none;box-shadow:var(--sunken);text-shadow:none;color:var(--ink);padding:10px 12px;align-items:center}
#reserves .rsum .k{color:var(--ink);font:700 12px var(--chrome);letter-spacing:.08em}
#reserves .rsum .v{font:700 20px/1.2 var(--mono);color:var(--ink)}
#reserves .rnote{padding:10px 12px;font-size:11px;color:var(--ink-muted)}
#reserves .rnote p{font-size:11px;margin:0 0 6px}

/* ===== big headings and readouts brought down to v2 sizes ===== */
.links a b{font:700 15px/1.2 var(--serif)}
.panel .v{font-family:var(--mono);font-size:clamp(22px,4.2vw,30px);line-height:1.2;white-space:nowrap}
.claimcard .amt{font-size:clamp(22px,4vw,30px);line-height:1.2}
.claimstate b{font-family:var(--mono);font-size:16px;letter-spacing:.04em}
.kmetric b{font:700 clamp(18px,2.6vw,22px)/1.2 var(--serif)}
.lcd .usd{font-family:var(--mono);font-size:11px;opacity:.9}
.report .title .big{font-size:clamp(32px,6vw,52px);line-height:1}
.report .title .small{font-size:clamp(11px,1.4vw,14px);letter-spacing:.4em}
.report .rows{font-size:clamp(12px,1.2vw,13px)}
.rounds ol{font-size:12px}
.gchart .msg{font-family:var(--mono);font-size:12px}
.gauge .v{font-family:var(--mono)}

/* ===== Reward Reserve page ===== */
.viewbar{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 12px}
.viewbar button{font:12px var(--chrome);text-align:left;background:var(--paper-sunken);color:var(--ink);border:0;padding:6px 14px;cursor:pointer;box-shadow:var(--raised)}
.viewbar button.on{background:var(--paper-raised);color:var(--accent);font-weight:700}
.kmetrics{display:none}
table.ovsheet{width:100%;border-collapse:collapse;background:var(--paper-raised);box-shadow:var(--sunken);font-size:12px}
table.ovsheet th{font:700 10px var(--chrome);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--paper-sunken);padding:7px 10px}
table.ovsheet td{padding:6px 10px;border-bottom:1px solid var(--paper-sunken);font-size:12px;color:var(--ink)}
table.ovsheet tbody tr:nth-child(odd){background:transparent}
table.ovsheet td.num{font-family:var(--mono);text-align:right}
table.ovsheet td.num b{font:700 13px var(--mono);color:var(--ink)}
table.ovsheet td.num .usd{display:inline;margin:0 0 0 8px;font-size:11px;color:var(--ink-muted);white-space:nowrap}
table.ovsheet tr.total td{background:var(--paper-sunken);border-top:0;font-weight:700;padding-top:6px}
table.ovsheet tr.total td:first-child{font:700 11px var(--chrome);letter-spacing:.08em;text-transform:uppercase}
.two{gap:14px;margin-top:0}
.walletbar{padding:0 0 14px}
.netchip{font:11px var(--mono);border:0;box-shadow:var(--sunken);background:var(--paper-raised)}

/* ===== event lists: first 10 rows + "Load more" ===== */
li[hidden]{display:none!important}
.rounds li.more,ol li.more{display:block;margin-top:10px;text-align:center}
.rounds li.more .b,ol li.more .b{font-size:11px;padding:6px 14px}

/* ===== Reward Reserve, My rewards: the four readouts on one row ===== */
.trk-lcds{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.trk-lcds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trk-lcds{grid-template-columns:1fr}}
.trk-lcds .lcd .v{font-size:clamp(16px,2.4vw,22px);white-space:nowrap}
.trk-lcds .lcd{padding:12px 12px;min-width:0}

/* ===== Reward Reserve overview: "1.0782 sNET" on one line (no unit under the number) ===== */
table.ovsheet td.num{white-space:nowrap;width:40%}
table.ovsheet td.num b{white-space:nowrap}
table.ovsheet td:first-child{width:60%}

/* ===== Reward Reserve growth chart (same look as the Permanent Reserve one) ===== */
#rgrowth,.growth{padding:12px 16px}
.growth .head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lcd-dim);text-shadow:none;margin-top:8px}
.charttabs{display:flex;gap:2px;flex-wrap:wrap;margin:10px 0 0}
.charttabs button{font:11px var(--chrome);padding:5px 10px;border:0;background:var(--paper-sunken);color:var(--ink);box-shadow:var(--raised);cursor:pointer}
.charttabs button.on{background:var(--lcd-bg);color:var(--lcd-text);box-shadow:var(--sunken)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 6px;font:12px var(--mono)}
.legend button{background:none;border:0;color:var(--lcd-text);font:inherit;display:inline-flex;align-items:center;gap:8px;padding:2px 4px;cursor:pointer}
.legend button i{display:inline-block;width:26px;height:0;border-top:4px solid var(--lcd-text)}
.legend button.dep i{border-color:var(--paper)}
.legend button.off{opacity:.35;text-decoration:line-through}
.legend button b{font-weight:400;color:var(--lcd-dim)}
.gchart{position:relative;width:100%;height:clamp(240px,34vw,320px)}
.gchart svg{width:100%;height:100%;display:block;overflow:visible}
.gchart .grid{stroke:rgba(95,221,148,.22);stroke-width:1;stroke-dasharray:2 4}
.gchart .ax{fill:var(--lcd-dim);font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.gchart .ln{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(95,221,148,.35))}
.gchart .ln.pr,.gchart .ln.earn{stroke:var(--lcd-text)}
.gchart .ln.dep{stroke:var(--paper);filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
.gchart .ar{stroke:none}
.gchart .ar.pr,.gchart .ar.earn{fill:rgba(95,221,148,.32)}
.gchart .ar.dep{fill:rgba(233,228,211,.22)}
.gchart .tot{fill:var(--lcd-text);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.gchart .cur{stroke:var(--lcd-text);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.gtip{position:absolute;display:none;pointer-events:none;background:var(--lcd-bg);border:1px solid var(--lcd-text);padding:6px 9px;font:12px/1.3 var(--mono);color:var(--lcd-text);white-space:nowrap;z-index:5}
.gtip small{display:block;color:var(--lcd-dim);font-size:11px}
.growth .note{margin-top:8px;font:11px/1.45 var(--mono);color:var(--lcd-dim);letter-spacing:.02em}

/* ===== TenBlocks button next to Buy TEN in the menu ===== */
.menu a.b.tb{background:var(--paper-raised);color:var(--ink);font:700 12px var(--chrome);padding:4px 12px;box-shadow:var(--raised);margin-right:4px}
@media(hover:hover){.menu a.b.tb:hover{background:var(--accent);color:var(--paper-raised)}}
@media(max-width:900px){.menu a.b.tb{padding:6px 10px;margin-right:2px}}
@media(max-width:520px){.menu .brand{display:none}.menu{flex-wrap:nowrap}.menu .sp{flex:1}}

/* NEW! flag on the TenBlocks button */
.menu a.b.tb .new{display:inline-block;margin-left:5px;padding:0 4px;font:700 8px/12px var(--chrome);letter-spacing:.08em;text-transform:uppercase;vertical-align:top;position:relative;top:-1px;background:var(--lcd-bg);color:var(--lcd-text);box-shadow:0 0 0 1px var(--lcd-text);animation:none}
@media(hover:hover){.menu a.b.tb:hover .new{background:var(--paper-raised);color:var(--accent);box-shadow:0 0 0 1px var(--paper-raised)}}