/* Simple mode (AoS, 17 Oct): one plain column per page, bigger text and buttons, a bottom bar on phones. Pro is floor.css as before.
   js/theme.js sets these on <html> before the first paint: data-mode="simple|pro", data-text="l|xl", data-contrast="high", data-motion="less". */

/* which half shows */
:root:not([data-mode="pro"]) .pro-only,:root[data-mode="pro"] .simple-only{display:none!important}

/* the header has room for the switch: the host name goes, and below 1160px the tabs take their own row instead of being cut off */
header .brand small{display:none}
@media (max-width:1160px){nav.tabs{order:3;flex-basis:100%}}

/* the switch in the header, the gear's new rows */
.modesw{display:inline-flex;border:1px solid var(--edge);border-radius:999px;background:var(--slab);padding:3px;gap:2px}
.modesw button{border:0;background:none;color:var(--muted);font:800 12.5px/1 var(--body);padding:7px 11px;border-radius:999px;cursor:pointer}
.modesw button[aria-pressed="true"]{color:var(--on-accent);background:linear-gradient(120deg,var(--a1),var(--a2))}
.opts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.opts button{border:1px solid var(--edge);background:var(--bg2);color:var(--fg);font:700 13px var(--body);padding:8px 6px;border-radius:999px;cursor:pointer;min-height:38px}
.opts button[aria-pressed="true"]{border-color:var(--a1);box-shadow:0 0 0 2px var(--glow)}
.tgl{display:flex;gap:10px;align-items:center;cursor:pointer;padding:4px 0}
.tgl input{width:20px;height:20px;accent-color:var(--a1);flex:none;margin:0}
.tgl span{display:grid;font:700 13.5px var(--body)} .tgl small{font-weight:500;font-size:12px;color:var(--muted)}
.gearpanel{width:330px;grid-template-columns:minmax(0,1fr);max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden}
@media (max-width:700px){.gearpanel{width:auto}}
.gearpanel>*{min-width:0} .gearpanel .pals{grid-template-columns:repeat(3,minmax(0,1fr))} .gearpanel .pals button{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- Simple ---------- */
:root:not([data-mode="pro"]) body{font-size:17px}
:root:not([data-mode="pro"]) main .k{font-size:12.5px;letter-spacing:.1em}
:root:not([data-mode="pro"]) main .btn{min-height:48px}
:root:not([data-mode="pro"]) main .muted,:root:not([data-mode="pro"]) main .hint{font-size:max(1em,14px)}

/* the header: Docs sits in the footer and on Help, so the tabs keep room for the switch */
:root:not([data-mode="pro"]) nav.tabs a[href="/docs"]{display:none}

/* board */
:root:not([data-mode="pro"]) #v-board>:not(.sboard){display:none!important}
.sboard{display:grid;gap:14px;max-width:640px;margin:0 auto;width:100%}
.shead{display:grid;gap:12px;padding-top:6px} .shead h1{font-size:clamp(40px,11vw,64px);line-height:.98} .shead p{color:var(--muted);font-size:18px}
.shead h1 em{font-style:normal;background:linear-gradient(100deg,var(--floor-deep),var(--floor),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-contrast="high"] .shead h1 em{background:none;color:var(--floor)}
#sq{width:100%;min-height:52px;border:1px solid var(--edge);border-radius:14px;background:var(--bg2);padding:12px 16px;font-size:17px}
.schips{display:flex;gap:8px;flex-wrap:wrap}
.schips button{min-height:44px;padding:8px 16px;border:1px solid var(--edge);border-radius:999px;background:var(--slab);font:800 15px var(--body);cursor:pointer}
.schips button[aria-pressed="true"]{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 18%,var(--slab))}
.snote{font-size:14px;color:var(--muted)}
.slist{display:grid;gap:12px}
.sempty{color:var(--muted);text-align:center;padding:28px 10px}
#sMore{justify-self:center;min-height:48px;padding:10px 24px;border:1px solid var(--edge);border-radius:999px;background:var(--slab);font:800 15px var(--body);cursor:pointer}

/* a coin card */
.scard{display:grid;gap:10px;width:100%;text-align:left;border:1px solid var(--edge);border-radius:18px;background:var(--slab);padding:16px;color:inherit;font:inherit;cursor:pointer;min-width:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.scard.feat{border-color:var(--floor);box-shadow:inset 0 2px 0 var(--floor)}
.scard.mine,.scard.made{cursor:default}
.srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;min-width:0}
.srow .lg{width:48px;height:48px;margin:0;border-radius:12px;font-size:22px} .srow .lg img{width:100%;height:100%}
.snm{display:grid;min-width:0} .snm b{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snm span{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sval{display:grid;justify-items:end;font-family:var(--mono)} .sval b{font-size:18px}
.schg{font:700 14px var(--mono);color:var(--muted)} .schg.up{color:var(--up)} .schg.down{color:var(--down)}
.snet{display:flex;justify-content:space-between;gap:10px;font-size:15px} .snet span{color:var(--muted)} .snet b{color:var(--floor)}
.sbar{display:block;height:8px;border-radius:99px;background:var(--bg2);overflow:hidden;border:1px solid var(--edge)} .sbar i{display:block;height:100%;background:var(--floor)}
.stags{display:flex;gap:6px;flex-wrap:wrap}
.stg{display:inline-flex;align-items:center;font:700 13px/1.2 var(--body);padding:5px 10px;border-radius:999px;border:1px solid var(--edge);background:var(--bg2);color:var(--fg)}
.stg.feat{border-color:var(--floor);color:var(--floor)}
.stg.bump{border-color:var(--sky);color:var(--sky)}
.stg.lift{border-color:var(--a3);color:var(--a3)}
.stg.trap{border-color:var(--down);color:var(--down)}
.stg.raise{color:var(--muted)}
.stg.grad{border-color:var(--up);color:var(--up)}
.stg.stop{border-color:var(--down);background:color-mix(in srgb,var(--down) 14%,var(--bg2))}

/* token */
:root:not([data-mode="pro"]) #v-token{max-width:600px;margin-inline:auto}
:root:not([data-mode="pro"]) #v-token .thead{grid-template-columns:minmax(0,1fr)}
:root:not([data-mode="pro"]) #v-token .ccard,:root:not([data-mode="pro"]) #v-token .thead .links,:root:not([data-mode="pro"]) #tBanner,:root:not([data-mode="pro"]) #trapTag{display:none!important}
:root:not([data-mode="pro"]) #v-token .split{grid-template-columns:minmax(0,1fr)}
:root:not([data-mode="pro"]) #v-token .split>.stack:first-child,:root:not([data-mode="pro"]) #v-token .split>.stack>:not(#tradeBox){display:none!important}
:root:not([data-mode="pro"]) #tradeBox .seg button{min-height:48px;font-size:16px}
:root:not([data-mode="pro"]) #tradeBox .pcts button{min-height:44px}
:root:not([data-mode="pro"]) #amt{min-height:54px;font-size:22px}
.stok{display:grid;gap:12px;margin-bottom:14px}
.sprice{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:end;border:1px solid var(--edge);border-radius:18px;background:var(--slab);padding:16px}
.sprice>div{display:grid} .sprice b{font:700 30px var(--mono)} .sprice .r{text-align:right} .sprice .num{font-size:18px}
.snetcard{border:1px solid color-mix(in srgb,var(--floor) 55%,var(--edge));border-radius:18px;padding:16px;background:linear-gradient(0deg,color-mix(in srgb,var(--floor) 14%,transparent),transparent),var(--bg2);display:grid;gap:4px}
.snetcard b{color:var(--floor);font-size:18px}
.snetcard.stop{border-color:var(--down);background:color-mix(in srgb,var(--down) 12%,var(--bg2))} .snetcard.stop b{color:var(--down)}
.slock{display:block;border:1px solid var(--edge);border-radius:14px;padding:12px 14px;background:var(--bg2);font-size:15px}
.smore{display:grid;gap:10px;margin-top:16px}
.slink{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:54px;border:1px solid var(--edge);border-radius:16px;background:var(--slab);padding:12px 16px;font:800 16px var(--body);color:inherit;cursor:pointer;text-align:left}
.slink span{color:var(--muted);font-weight:600}
.slink.boost{border-color:var(--floor);color:var(--floor)} .slink.boost span{color:var(--floor)}

/* launch: three steps */
:root:not([data-mode="pro"]) #createForm [data-sstep="pro"]{display:none!important}
:root:not([data-mode="pro"]) #createForm[data-step="1"] [data-sstep]:not([data-sstep="1"]),
:root:not([data-mode="pro"]) #createForm[data-step="2"] [data-sstep]:not([data-sstep="2"]),
:root:not([data-mode="pro"]) #createForm[data-step="3"] [data-sstep]:not([data-sstep="3"]){display:none!important}
:root:not([data-mode="pro"]) #v-create .lgrid{grid-template-columns:minmax(0,1fr);max-width:600px;margin-inline:auto}
:root:not([data-mode="pro"]) #createForm input,:root:not([data-mode="pro"]) #createForm textarea{font-size:17px;min-height:50px}
.ssteps{display:grid;gap:8px}
.ssteps .sbar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:auto;border:0;background:none}
.ssteps .sbar i{height:8px;border-radius:99px;background:var(--bg2);border:1px solid var(--edge)} .ssteps .sbar i.on{background:var(--floor);border-color:var(--floor)}
#sStepText{font-weight:800}
.sknow{display:grid;gap:6px;border:1px solid var(--edge);border-radius:16px;padding:14px;background:var(--bg2);font-size:15px}
.snav{display:flex;gap:10px;justify-content:space-between} .snav .btn{flex:1}

/* my coins */
:root:not([data-mode="pro"]) #v-mine .tablewrap{display:none!important}
.smine{display:grid;gap:12px;max-width:640px;margin:0 auto;width:100%}
.sbig{width:100%;min-height:56px}
.sworth{font-size:18px} .sworth b{font-family:var(--mono)}
.sopen{display:contents;cursor:pointer;text-align:left;font:inherit;color:inherit}
.sopen>*{cursor:pointer}
.scard.mine .srow{grid-template-columns:auto minmax(0,1fr) auto}
.ssafe{display:grid;border-radius:12px;padding:10px 12px;background:var(--bg2);border:1px solid color-mix(in srgb,var(--floor) 45%,var(--edge))}
.ssafe b{color:var(--floor)} .ssafe span{font-size:14px;color:var(--muted)}
.sacts{display:flex;gap:10px} .sacts .btn{flex:1;min-height:50px;font-size:16px}
.btn.cash{border-color:var(--floor);color:var(--floor)}
.scard.made{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .scard.made>span{display:grid} .scard.made>span span{font-size:14px;color:var(--muted)}

/* how it works */
.sdocs{margin-top:14px;font-size:17px;font-weight:700}

/* bottom bar on phones */
.bnav{display:none}
@media (max-width:760px){
  :root:not([data-mode="pro"]) nav.tabs,:root:not([data-mode="pro"]) .chip.eco,:root:not([data-mode="pro"]) .chip.dex{display:none!important}
  :root:not([data-mode="pro"]) body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  :root:not([data-mode="pro"]) .bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--edge);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bnav button{display:grid;justify-items:center;gap:2px;min-height:58px;border:0;background:none;color:var(--muted);font:800 13px/1.1 var(--body);cursor:pointer;border-radius:12px}
  .bnav button i{font-style:normal;font-size:21px;line-height:1}
  .bnav button[aria-current="page"]{color:var(--fg);background:var(--slab)}
  .modesw button{padding:7px 9px}
  :root:not([data-mode="pro"]) #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:400px){.modesw{padding:2px} .modesw button{padding:6px 7px;font-size:12px} .chips{gap:6px} .srow{gap:9px} .srow .lg{width:40px;height:40px;font-size:19px} .sval b{font-size:16px} .sprice b{font-size:24px}}

/* ---------- reading aids (both modes) ---------- */
:root[data-text="l"]{zoom:1.15} :root[data-text="xl"]{zoom:1.3}
:root[data-contrast="high"]{--muted:var(--fg);--faint:color-mix(in srgb,var(--fg) 75%,transparent);--edge:color-mix(in srgb,var(--fg) 45%,transparent);--slab:var(--bg);--bg2:var(--bg)}
:root[data-contrast="high"] .slab,:root[data-contrast="high"] .scard{backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-contrast="high"] a,:root[data-contrast="high"] .linkish{text-decoration:underline}
:root[data-motion="less"] *,:root[data-motion="less"] *::before,:root[data-motion="less"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion="less"] #field{display:none}