/* eco.css (2026-11-03): what every page of the ecosystem shares, whatever its own stylesheet: the app bar that
   scripts/deploy-dashboard.mjs (ecoNav) writes into each sub-page, and the start every tool page opens with. The build
   links this file into every page that carries the bar, with ?v= set to a hash of this file, so no version to bump.
   It reads the page's own colour tokens (--gold, --text, --muted, --border, --card). */
/* THE APP BAR (2026-11-03): written by scripts/deploy-dashboard.mjs (ecoNav) in place of back + name, so every
   sub-page carries the same bar: logo home, the six apps (the open one lit), the page's own name. Under 980 px the
   six fold into "Apps"; the page's buttons on the right are untouched. */
.eco-l{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto}
.eco-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--gold);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.3px;white-space:nowrap;flex:none}
.eco-logo img{width:26px;height:26px;border-radius:7px;box-shadow:0 0 10px rgba(240,185,11,.2)}
.eco-logo:hover{opacity:.85}
.eco-links{display:flex;gap:2px;order:2}
.eco-links a,.eco-menu a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;padding:6px 10px;
  border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.eco-links a:hover,.eco-menu a:hover{color:var(--text);background:rgba(240,185,11,.08)}
.eco-links a.on,.eco-menu a.on{color:var(--gold);background:rgba(240,185,11,.13)}
.eco-here{order:3;color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;padding-left:12px;
  border-left:1px solid var(--border);min-width:0;overflow:hidden;text-overflow:ellipsis}
.eco-here.is-app{display:none}
.eco-m{display:none;position:relative;order:1;flex:none}
.eco-m summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border-radius:8px;background:rgba(240,185,11,.08);border:1px solid rgba(240,185,11,.2);color:var(--gold);
  font-size:12px;font-weight:600;letter-spacing:.3px;white-space:nowrap;user-select:none}
.eco-m summary::-webkit-details-marker{display:none}
.eco-m summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.eco-m[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.eco-m summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.eco-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:200px;display:grid;gap:2px;padding:6px;
  background:#14111c;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.55);z-index:200}
.eco-menu a{font-size:14px;padding:10px 12px;color:var(--text)}
@media (max-width:980px){
  .eco-links{display:none}
  .eco-m{display:block}
  .eco-here.is-app{display:block}
  .eco-here{order:2;font-size:12px}
  .eco-l{gap:10px}
}
@media (max-width:420px){.eco-logo span{display:none}.eco-here{padding-left:10px}}

/* THE START OF A TOOL PAGE (2026-11-03): one shape on /scanner, /registry and /services, so the apps read as one
   ecosystem. Title, one sentence in plain words, the one thing to do (a box, or a row of ways in), a few taps for
   somebody with nothing to type, one line of what is true right now. The form is the Pool Scanner's own (its
   .sc-form), lifted here so every page that asks a question asks it the same way. */
.hx{text-align:center}
.hx-claim{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.02rem,2.3vw,1.28rem);font-weight:500;line-height:1.42;
  color:var(--text);margin:12px auto 0;max-width:44ch}
.hx-claim em{font-style:normal;color:var(--gold)}
.hx .hx-form{display:flex;gap:10px;margin:24px auto 0;max-width:640px;flex-wrap:nowrap}
.hx .hx-form input{flex:1;min-width:0;background:rgba(255,255,255,.04);color:var(--text);
  border:1px solid var(--border);border-radius:14px;padding:15px 17px;font-size:.87rem;font-family:'Space Grotesk',sans-serif}
.hx .hx-form input::placeholder{color:var(--muted);opacity:.7}
.hx .hx-form input:focus{outline:none;border-color:var(--gold)}
.hx .hx-form>button{background:linear-gradient(135deg,var(--gold),#e0a800);color:#000;border:0;border-radius:999px;
  padding:15px 34px;font-weight:700;font-size:.8rem;cursor:pointer;font-family:inherit;white-space:nowrap;letter-spacing:.3px}
.hx .hx-form>button:disabled{opacity:.5;cursor:default}
.hx .hx-form>button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:560px){.hx .hx-form{flex-direction:column}.hx .hx-form>button{width:100%}}
.hx .hx-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:12px auto 0;max-width:680px;font-size:.78rem;color:var(--muted)}
.hx .hx-try button,.hx .hx-try a{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:999px;
  padding:6px 12px;font:inherit;font-size:.78rem;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s}
.hx .hx-try button:hover,.hx .hx-try button:focus-visible,.hx .hx-try a:hover,.hx .hx-try a:focus-visible{border-color:var(--gold);background:rgba(240,185,11,.08);outline:none}
.hx-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:16px auto 0;max-width:900px;
  font-size:.76rem;line-height:1.5;color:var(--muted)}
.hx-trust>span{white-space:nowrap}
.hx-trust b{color:var(--text);font-weight:600}
.hx-trust a{color:var(--gold)}
.hx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#00c96b;box-shadow:0 0 8px rgba(0,230,118,.6);
  margin-right:6px;vertical-align:1px}
@media (max-width:560px){.hx-trust>span{white-space:normal}}
/* PROOF IN THE START (2026-11-03, /token first): a few live rows, each a fact and the transaction behind it. */
.hx-proof{max-width:860px;margin:22px auto 0;border:1px solid var(--border);border-radius:16px;background:var(--card);
  text-align:left;overflow:hidden}
.hx-proof-h,.hx-proof-f{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:11px 16px;font-size:.74rem;line-height:1.5;color:var(--muted)}
.hx-proof-h{border-bottom:1px solid var(--border)}
.hx-proof-h b{color:var(--text);font-weight:600}
.hx-proof-f{border-top:1px solid var(--border);justify-content:flex-start}
.hx-proof a{color:var(--gold);text-decoration:none}
.hx-proof a:hover{text-decoration:underline}
.hx-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:10px 16px;font-size:.84rem;line-height:1.4}
.hx-row+.hx-row{border-top:1px solid rgba(255,255,255,.045)}
.hx-row .k{color:var(--text);font-weight:600;min-width:0}
.hx-row .k i{font-style:normal;font-weight:500;color:var(--gold);font-size:.74rem;margin-left:6px}
.hx-row .v{color:var(--muted);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.hx-row .t{display:flex;gap:10px;justify-content:flex-end;white-space:nowrap}
.hx-row a.tx{font:600 .74rem var(--mono,ui-monospace,monospace)}
@media (max-width:620px){
  .hx-row{grid-template-columns:minmax(0,1fr) auto}
  .hx-row .v{grid-column:1;grid-row:2;font-size:.78rem}
  .hx-row .t{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-end;gap:4px}
}
.intro.hx h1{text-align:center}
/* The long "how it works" under a start: one closed line, opened on a tap (native, no script). */
details.hx-more{margin:18px auto 0;max-width:760px;text-align:left}
details.hx-more>summary{cursor:pointer;list-style:none;font-size:.82rem;color:var(--text);font-weight:600}
details.hx-more>summary::-webkit-details-marker{display:none}
details.hx-more>summary::after{content:' \25BE';color:var(--gold)}
details.hx-more[open]>summary::after{content:' \25B4'}
details.hx-more[open]>summary{margin-bottom:10px}