/* Main-site marketplace, leaderboard and banner strip. Brand guideline Part B: Bricolage headings, Manrope body,
   22px cards, pill buttons, soft wells, no card in a card. The For Geeks sheets give the structure; this one skins it. */
body[data-main-store]{--well:var(--field);--soft:var(--panel);--glow:20,168,116;--accent2:var(--azure)}
body[data-main-store] main :focus-visible{outline:3px solid var(--azure);outline-offset:3px}

/* buttons: the same look as .btn-primary and .btn-secondary on every other page */
body[data-main-store] .acct .btn,body[data-main-store] .lb-next .btn,body[data-main-store] .lb-more .btn,body[data-main-store] .mkt-win .btn{height:48px;min-height:48px;padding:0 22px;gap:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--nile);border-radius:999px;background:var(--nile);color:var(--on-nile);font:700 15px/1 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s}
body[data-main-store] .acct .btn:hover,body[data-main-store] .lb-next .btn:hover,body[data-main-store] .mkt-win .btn:hover{background:var(--nile-2);border-color:var(--nile-2)}
body[data-main-store] .btn.ghost{background:var(--white);color:var(--ink);border-color:var(--line-ctl)}
body[data-main-store] .btn.ghost:hover{background:var(--white);border-color:var(--green)}
body[data-main-store] .btn:disabled,body[data-main-store] .mkt-cell button[disabled]{opacity:.65;cursor:default}
body[data-main-store] .mkt-mini{height:36px;min-height:36px;padding:0 16px;border:1px solid var(--line-ctl);border-radius:999px;background:var(--white);color:var(--ink);font:700 14px/1 var(--body)}
body[data-main-store] .mkt-mini:hover{border-color:var(--green)}
body[data-main-store] .lb-tab{min-height:44px;padding:0 20px;border:1px solid var(--line-ctl);border-radius:999px;background:var(--white);color:var(--ink);font:700 14px var(--body)}
body[data-main-store] .lb-tab:hover{border-color:var(--green);color:var(--ink)}
body[data-main-store] .lb-tab[aria-selected=true]{background:var(--nile);border-color:var(--nile);color:var(--on-nile)}
body[data-main-store] .linkish{color:var(--ink);font:600 14px var(--body)}

/* the banner the member equipped, above the page heading */
.site-banner{height:140px;border-radius:22px;margin:0 0 28px;border:1px solid var(--line)}
.site-banner[hidden]{display:none}
@media(max-width:640px){.site-banner{height:96px;border-radius:16px}}

/* marketplace */
body[data-main-store] .mkt-bar{margin-bottom:48px}
body[data-main-store] .mkt .fine{color:var(--muted);font:500 14px/1.5 var(--body)}
body[data-main-store] .mkt-bar .chip{background:var(--field);color:var(--ink);font:700 14px var(--body);min-height:44px;align-items:center}
body[data-main-store] .mkt-sec>h2,body[data-main-store] .mkt-sub{font:800 clamp(26px,3.4vw,34px)/1.15 var(--display);color:var(--ink);margin:0 0 8px}
body[data-main-store] .mkt-sub{font-size:21px;margin:40px 0 14px}
body[data-main-store] .mkt-sec .why{color:var(--muted);font:500 16px/1.6 var(--body);max-width:62ch}
body[data-main-store] .mkt-grid,body[data-main-store] .mkt-free{gap:20px;border:0;overflow:visible}
body[data-main-store] .mkt-cell{gap:12px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:none}
body[data-main-store] .mkt-cell.compact{padding:16px 18px}
body[data-main-store] .mkt-cell.equipped{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
body[data-main-store] .mkt-cell .fg-banner,body[data-main-store] .mkt-pv{border-radius:14px;border:1px solid var(--line)}
body[data-main-store] .mkt-name{font:700 18px var(--display);color:var(--ink)}
body[data-main-store] .mkt-tag{font:700 13px var(--body);color:var(--muted)}
body[data-main-store] .mkt-note{color:var(--muted);font:500 15px/1.55 var(--body)}
body[data-main-store] .mkt-state{font:700 13px var(--body);color:var(--green)}
body[data-main-store] .mkt-acts{min-height:36px}
body[data-main-store] .mkt-sum div{font:500 14px var(--body)}
body[data-main-store] .mkt-win h2{font:800 22px var(--display);color:var(--ink)}
body[data-main-store] .mkt-dlg-pv .mkt-pv,body[data-main-store] .mkt-dlg-pv .fg-banner{border-radius:14px}
body[data-main-store] .mkt-cell .dots i,body[data-main-store] .dots i{border-radius:50%}

/* leaderboard */
body[data-main-store] .lb-top{padding:64px 0 32px}
body[data-main-store] .lb-top h1,body[data-main-store] .lb-members h2,body[data-main-store] .lb-next h2{font-family:var(--display);color:var(--ink);font-weight:800}
body[data-main-store] .lb-members h2,body[data-main-store] .lb-next h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 12px}
body[data-main-store] .lb-top .lede{margin-bottom:0}
body[data-main-store] .lb-note,body[data-main-store] .lb-status{font:500 14px/1.5 var(--body);color:var(--muted)}
body[data-main-store] .lb-sub,body[data-main-store] .lb-how{color:var(--muted);font:500 16px/1.6 var(--body)}
body[data-main-store] .lb-how b{color:var(--ink);font-weight:700}
body[data-main-store] .lb-how a,body[data-main-store] .lb-empty a{color:var(--ink)}
body[data-main-store] .lb-list,body[data-main-store] .lb-empty{border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden}
body[data-main-store] .lb-list{border-collapse:separate;border-spacing:0;font:500 16px var(--body)}
body[data-main-store] .lb-list th{padding:14px 24px;border-bottom:1px solid var(--line);color:var(--muted);font:700 13px var(--body)}
body[data-main-store] .lb-list td{padding:14px 24px;color:var(--ink)}
body[data-main-store] .lb-list .rk{width:72px}
body[data-main-store] .lb-list td.rk{color:var(--muted);font-weight:700}
body[data-main-store] .lb-row.top td.rk{color:var(--ink);font-weight:800}
body[data-main-store] .lb-list .ct,body[data-main-store] .lb-list .sc{width:150px}
body[data-main-store] .lb-list td.ct{color:var(--muted)}
body[data-main-store] .lb-list td.sc{font-weight:800}
body[data-main-store] .nm{font-weight:700}
body[data-main-store] .lb-list tbody tr:not(.has-banner):hover td{background:var(--track)}
/* Over a banner the row's words are white on a dark scrim, the same on every banner, light or dark (owner, 2026-11-10:
   the white plates looked pasted on). The scrim is darkest behind the words (rank and name at the start, the figures at
   the end) and lifts in the middle, so the art still shows where nothing is written. At its lightest under any word it is
   62% near-black: white keeps at least 6:1 even over the palest banner. */
body[data-main-store] .lb-veil{background:linear-gradient(90deg,rgb(8 10 22/.62) 0 36%,rgb(8 10 22/.2) 52% 64%,rgb(8 10 22/.62) 78% 100%)}
[dir=rtl] body[data-main-store] .lb-veil,body[data-main-store][dir=rtl] .lb-veil{background:linear-gradient(270deg,rgb(8 10 22/.62) 0 36%,rgb(8 10 22/.2) 52% 64%,rgb(8 10 22/.62) 78% 100%)}
@media(max-width:640px){body[data-main-store] .lb-veil,[dir=rtl] body[data-main-store] .lb-veil{background:rgb(8 10 22/.62)}}
body[data-main-store] .lb-row.has-banner td,
body[data-main-store] .lb-row.has-banner .lb-text,
body[data-main-store] .lb-row.has-banner .lb-coder,
body[data-main-store] .lb-row.has-banner .lb-coder a{color:#fff;text-shadow:0 1px 2px rgb(0 0 0/.55)}
body[data-main-store] .lb-row.has-banner td.ct,body[data-main-store] .lb-row.has-banner .lb-coder{color:rgb(255 255 255/.86)}
body[data-main-store] .lb-row .nm{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
body[data-main-store] .lb-sample{font:500 14px/1.5 var(--body);color:var(--muted)}
body[data-main-store] .lb-empty .lb-empty-title{font:700 18px var(--display)}
body[data-main-store] .av{background:var(--field);border:1px solid var(--line-ctl);font:700 14px var(--body)}
body[data-main-store] .lb-members{padding:32px 0 56px}
body[data-main-store] .mgrid{gap:20px;border:0;overflow:visible}
body[data-main-store] .mc{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:none;overflow:hidden}
body[data-main-store] .mc .fg-banner{height:72px;border-radius:0;border:0;border-bottom:1px solid var(--line)}
body[data-main-store] .mc .av.lg{box-shadow:0 0 0 3px var(--paper)}
body[data-main-store] .mc-name{font:700 17px var(--display)}
body[data-main-store] .mc-sc{font:700 13px var(--body);color:var(--muted)}
body[data-main-store] .mc-bio{font:500 15px var(--body);color:var(--muted)}
body[data-main-store] .mc-tags{font:500 13px var(--body);color:var(--muted)}
body[data-main-store] .lb-next{padding:24px 0 72px}
body[data-main-store] .lb-next .cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:640px){body[data-main-store] .lb-top{padding-top:40px}body[data-main-store] .lb-list th,body[data-main-store] .lb-list td{padding:12px 14px}body[data-main-store] .lb-list .rk{width:44px}body[data-main-store] .lb-list .ct,body[data-main-store] .lb-list .sc{width:auto}body[data-main-store] .lb-next .btn,body[data-main-store] .mkt-win .btn{width:100%}}

/* ---- one community area: shared sub-navigation, story cards, steps (all pages use these) ---- */
.com-bar{border-bottom:1px solid var(--line);background:var(--paper)}
.com-nav{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.com-nav::-webkit-scrollbar{display:none}
.com-nav a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid transparent;color:var(--muted);font:700 14px var(--body);text-decoration:none;white-space:nowrap}
.com-nav a:hover{color:var(--ink);background:var(--field)}
.com-nav a[aria-current=page]{background:var(--nile);color:var(--on-nile)}
.com-nav a:focus-visible{outline:3px solid var(--azure);outline-offset:2px}
.com-h{font:800 clamp(24px,3vw,32px)/1.15 var(--display);color:var(--ink);margin:48px 0 16px}
.com-lead{color:var(--muted);font:500 16px/1.6 var(--body);max-width:66ch}
.com-lead a,.com-rules a,.com-steps a{color:var(--ink)}
.com-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.com-steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.com-steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--nile);color:var(--on-nile);font:800 14px var(--body)}
.com-steps b{font:700 17px var(--display);color:var(--ink)}
.com-steps span{color:var(--muted);font:500 14px/1.5 var(--body)}
.com-rules{margin:20px 0 28px;padding-inline-start:20px;color:var(--muted);font:500 14px/1.6 var(--body);max-width:72ch}
.com-rules li+li{margin-top:6px}
@media(max-width:900px){.com-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.com-steps{grid-template-columns:1fr}}

/* story cards: the same card on the stories page, the Guides strip and a profile */
.story-card,.story-strip{--bg:var(--paper);--well:var(--field)}
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
.story-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--ink)}
.story-title{font:800 20px/1.25 var(--display);margin:0;color:var(--ink);overflow-wrap:anywhere}
.story-title a{color:inherit;text-decoration:none}.story-title a:hover{text-decoration:underline}
.story-by{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font:600 14px var(--body)}
.story-by .av{width:32px;height:32px;display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--field);border:1px solid var(--line-ctl);font:700 13px var(--body);margin-inline-end:4px}
.story-by .av img{width:100%;height:100%;object-fit:cover}
.story-author{color:var(--ink);text-decoration:none}.story-author:hover{text-decoration:underline}
.story-date{color:var(--muted);font:500 13px var(--body)}
.story-body{margin:0;color:var(--muted);font:500 15px/1.6 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.story-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:auto;font:700 14px var(--body)}
.story-foot a{color:var(--ink)}
.story-flag{flex-basis:100%;padding:8px 12px;border-radius:12px;background:var(--field);color:var(--muted);font:600 13px/1.4 var(--body)}
.story-strip .wrap{padding-block:56px}
.story-strip h2{margin:6px 0 24px}
.story-more{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pf-stories{padding-block:0 56px}
.pf-stories .story-grid{margin-top:8px}
body[data-main-store] #story-feed:empty::after{content:"No published stories yet.";color:var(--muted)}
body[data-main-store] #story-mine .panel,body[data-main-store] #story-queue .panel{margin-block:16px;padding:22px;border-radius:22px}
body[data-main-store] #story-form{padding:24px;border-radius:22px}
body[data-main-store] #story-form .fields{display:grid;gap:16px}
body[data-main-store] #story-form label{display:grid;gap:6px;font:700 14px var(--body);color:var(--ink)}
body[data-main-store] #story-status:empty{display:none}

.story-grid{margin-bottom:8px}
body[data-main-store] #story-feed+.acct,body[data-main-store] #story-feed~.com-lead{margin-top:32px}
.d-label{font:700 14px var(--body);color:var(--muted)}
.mkt-pv-item .av{width:52px;height:52px;display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--field);border:1px solid var(--line-ctl);font:700 18px var(--body);color:var(--ink)}
.story-foot .story-src{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-ctl);border-radius:999px;background:var(--white);color:var(--ink);text-decoration:none}
.story-foot .story-src:hover{border-color:var(--green)}

.stories-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px;align-items:start}.stories-content{min-width:0}.community-rules{position:sticky;top:100px;border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--panel);font:500 14px/1.65 var(--body)}.community-rules h2{font:800 21px var(--display);margin:0 0 14px;color:var(--ink)}.community-rules h3{font:700 16px var(--body);margin-top:24px}.community-rules p{margin-block:12px}.community-rules a{color:var(--ink)}@media(max-width:900px){.stories-layout{grid-template-columns:1fr}.community-rules{position:static;grid-row:1;font-size:14px}}

/* Wallet (topup.html): balance paired with how a top-up works, then the form and the history (owner, 2026-10-25) */
.wal .lede{max-width:62ch}
.wal .acct{max-width:980px;margin-top:0}
.wal-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;margin:28px 0 20px}
.wal .panel{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--panel);margin:0 0 20px}
.wal-top .panel{margin:0}
.wal-bal{display:flex;flex-direction:column;gap:12px}
.wal-bal h2{margin:0}
.wal-fig{display:flex;align-items:center;gap:10px;margin:0;font:800 44px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.wal-fig .coin-i{width:30px;height:30px;image-rendering:pixelated}
.wal-fig span{font:600 16px var(--body);color:var(--muted);align-self:flex-end;padding-bottom:6px}
.wal-bal .row{display:flex;flex-wrap:wrap;gap:10px}
.wal-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:auto 0 0;font:700 14px var(--body)}
.wal-links a{color:var(--ink)}
.wal-fine{margin:0;color:var(--muted);font:500 14px/1.55 var(--body)}
.wal-fine:empty,#topup-status:empty{display:none}
.wal-how h2,.wal .panel>h2{margin:0 0 14px;font:800 21px/1.2 var(--display);color:var(--ink)}
.wal-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px;counter-reset:w}
.wal-steps li{counter-increment:w;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;row-gap:2px}
.wal-steps li::before{content:counter(w);grid-row:1/span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--nile);color:var(--on-nile);font:800 14px var(--body)}
.wal-steps b{font:700 16px var(--display);color:var(--ink)}
.wal-steps span{color:var(--muted);font:500 14px/1.5 var(--body)}
#topup-history{display:grid}
.wal-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:12px 0;border-bottom:1px solid var(--line);font:500 14px var(--body);color:var(--muted)}
.wal-row:last-child{border-bottom:0}
.wal-row b{font:700 16px var(--body);color:var(--ink);min-width:96px}
.wal-st{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--field);color:var(--ink);font:700 12px var(--body)}
.wal-approved{background:var(--t-green);color:var(--green-text)}
.wal-rejected,.wal-cancelled,.wal-expired{background:var(--t-rose);color:var(--rose-strong)}
.wal-row .btn{margin:0!important}
@media(max-width:820px){.wal-top{grid-template-columns:minmax(0,1fr)}.wal-fig{font-size:38px}}

/* Stories on a phone: the posts first, the four steps as a compact two-by-two, the rules after the posts */
@media(max-width:900px){
  .stories-layout .community-rules{grid-row:auto}
}
@media(max-width:560px){
  .com-steps{gap:0;margin-top:20px;border-top:1px solid var(--line)}
  .com-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
  .com-steps li::before{grid-row:1/span 2}
}

.wal-packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.wal-packs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:72px;padding:12px 14px;border:1px solid var(--line-ctl);border-radius:16px;background:var(--white);color:var(--ink);text-align:start;cursor:pointer}
.wal-packs button:hover{border-color:var(--green)}
.wal-packs b{font:800 17px var(--display)}
.wal-packs small{color:var(--muted);font:600 12.5px var(--body)}
.wal-packs em{font:700 12px var(--body);font-style:normal;color:var(--green-text)}
.wal-packs em:empty{display:none}
@media(max-width:640px){.wal-packs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wal-hint{display:block;margin:4px 0 0;color:var(--muted);font:500 13px/1.5 var(--body)}
#topup-details dt{color:var(--muted);font:700 13px var(--body)}
#topup-details dd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:700 16px var(--body);color:var(--ink)}
#topup-details dd .btn{margin:0;min-height:36px;height:36px}

/* InstaPay top-up (owner, 2026-10-26): what to copy, the note row picked out, then the confirm form */
#topup-details{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:16px 0 14px}
#topup-details dd{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);justify-content:space-between;overflow-wrap:anywhere}
#topup-details dt.wal-key{margin-top:4px;padding:12px 14px 0;border-radius:14px 14px 0 0;background:var(--field)}
#topup-details dd.wal-key{padding:4px 14px 12px;border:0;border-radius:0 0 14px 14px;background:var(--field)}
.wal .wal-back{min-height:36px;height:36px;margin:0 0 12px}
#topup-adjustments:empty{display:none}

/* sharing a story (8R): the code to put in the post, and the owner's one-row review */
.story-kit-text{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink);font:600 14px/1.6 var(--body);white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.story-row textarea{width:100%;min-height:72px;margin:10px 0}
.story-row .row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
#story-mine article+article,#story-queue article+article{margin-top:14px}

/* Story tickets: excerpt remains readable, with a cut-edge divider rather than extra instructions. */
.story-card{position:relative;border-radius:8px}
.story-card .story-foot{border-top:1px dashed var(--line);padding-top:14px;margin-top:14px}
/* A name style's own colours are tuned for the page, not for a banner: over a banner the name is plain white. */
body[data-main-store] .lb-row.has-banner .nm{color:#fff!important;-webkit-text-fill-color:#fff;background-image:none}