/* Library & store: the module editor and the selection below it.
   Colours taken from the Steam library on Windows (William, 2026-10-04). */
/* The store's own colours, in one place for the store, the wallet and programs in a frame.
   On :root so the Looks shade slider (js/looks.js) darkens the backgrounds and turns the words red
   with the rest of Dew (dark-all-the-way.md); as they stand here they are Steam's. */
:root {
  --st-bg: #24282f; --st-bg-2: #232c3a; --st-deep: #171d25; --st-edge: #17191b;
  --st-ctl: #2a2f37; --st-ctl-hi: #3d4450; --st-sel: #3e4e69; --st-warn-bg: #8a3a2e; --st-ad-bg: #6b5a1e; --st-frame: #111111;
  --st-text: #dcdedf; --st-muted: #8b929a; --st-strong: #ffffff; --st-soft: #c6c9cc; --st-desc: #c6d4df;
  --st-blue: #1a9fff; --st-blue-hi: #47bfff; --st-sky: #66c0f4; --st-green: #59bf40; --st-green-hi: #47bf54;
  --st-buy: #75b022; --st-buy-2: #588a1b; --st-buy-text: #d2efa9; --st-card: #1a44c2;
  --st-bad: #ff8a7e; --st-danger: #d64040; --st-gold: #e0b24a; --st-gold-text: #ffe9a6; --st-lime: #a4d007;
  --st-mint: #5fe8a8; --st-mint-text: #9fe8c6; --st-age-green: #8fdc7a;
  --st-light: #ffffff;   /* see-through hovers and rows: mixed with transparent where used */
  --st-on: #ffffff;      /* words on a coloured button */
  --st-on-blue: var(--st-on);   /* words on the main-colour button: the store panel sets it from the look */
  /* The store's own base colours, as they are on <html> (Steam's, Meridian's on the Earth, shaded by the slider).
     The store panel below mixes them with the chosen look; read from here so a token never reads itself. */
  --st0-bg: var(--st-bg); --st0-bg-2: var(--st-bg-2); --st0-deep: var(--st-deep); --st0-edge: var(--st-edge);
  --st0-text: var(--st-text); --st0-muted: var(--st-muted); --st0-soft: var(--st-soft); --st0-desc: var(--st-desc);
}
#panel-library.st {
  top: 16px; bottom: var(--st-bottom, 96px);
  /* not the whole screen: at most 960 px wide to begin with, centred (a quarter
     narrower than Steam's 1280, William 2026-10-05) */
  left: max(16px, calc(50% - 480px)); right: max(16px, calc(50% - 480px));
  width: auto; height: auto; transform: none; animation: st-in .14s ease-out;
  background: linear-gradient(120deg, var(--st-bg) 0%, var(--st-bg-2) 100%);
  border: 1px solid var(--st-edge); border-radius: 8px; color: var(--st-text); backdrop-filter: none;
}
/* The store takes the look chosen for the whole of Dew (William, 2026-10-31, IDEA 690: "conform a bit more
   to the current look"). Its surfaces, words, buttons and tiles are Steam's grey (Meridian's green on the
   Earth) mixed half and half with the look's own, so it still reads as the store; in the light theme it
   turns light with the look instead of staying dark. A look given to this one window (js/window-look.js
   puts its tokens on the panel) is read here too, so the program's own look still wins. Derived tokens are
   declared on the panel itself, since a var() is worked out where it is declared.
   Followed: surfaces, edges, controls, selection, words, the main-colour buttons, links, tile and icon frames.
   Not followed: the buy and price green, the red, gold and mint signal colours (their meaning), the dark
   cards over pictures, the shot frame, and the wallet and programs in a frame outside this window. */
#panel-library.st {
  --st-bg: color-mix(in srgb, var(--st0-bg) 50%, var(--solid));
  --st-bg-2: color-mix(in srgb, var(--st0-bg-2) 50%, var(--bg));
  --st-deep: color-mix(in srgb, var(--st0-deep) 50%, var(--bg));
  --st-edge: color-mix(in srgb, var(--st0-edge) 60%, var(--rim));
  --st-ctl: color-mix(in srgb, var(--st-bg) 92%, rgb(var(--tint)));
  --st-ctl-hi: color-mix(in srgb, var(--st-bg) 82%, rgb(var(--tint)));
  --st-sel: color-mix(in srgb, var(--st-bg) 70%, var(--st-accent));
  --st-text: color-mix(in srgb, var(--st0-text) 50%, var(--text));
  --st-muted: color-mix(in srgb, var(--st0-muted) 50%, var(--muted));
  --st-soft: color-mix(in srgb, var(--st0-soft) 65%, var(--text));
  --st-desc: color-mix(in srgb, var(--st0-desc) 65%, var(--text));
  --st-blue: var(--st-accent); --st-blue-hi: color-mix(in srgb, var(--st-accent) 72%, #fff);
  --st-sky: var(--accent-text); --st-on-blue: var(--on-accent);
}
html:where([data-theme="light"]) #panel-library.st {
  --st-bg: var(--solid); --st-bg-2: var(--bg);
  --st-deep: color-mix(in srgb, var(--solid) 90%, rgb(var(--tint)));
  --st-edge: var(--line);
  --st-sel: color-mix(in srgb, var(--solid) 76%, var(--st-accent));
  --st-text: var(--text); --st-muted: var(--muted); --st-strong: var(--text);
  --st-soft: color-mix(in srgb, var(--text) 82%, var(--solid)); --st-desc: color-mix(in srgb, var(--text) 86%, var(--solid));
  --st-light: #000000;
  /* the signal colours, darkened to read on paper */
  --st-bad: #b3261e; --st-danger: #b3261e; --st-gold: #8a6200; --st-gold-text: #5c4100; --st-lime: #587000;
  --st-mint: #0a7a52; --st-mint-text: #0a5f40; --st-age-green: #2f7a1f; --st-green: #2e7d1a; --st-green-hi: #2e7d1a;
}
/* the sunken boxes were black at 20 per cent: on paper they are a touch darker than the page instead */
html:where([data-theme="light"]) :is(#panel-library.st .st-col, #panel-library.st .st-stats div, #panel-library.st .st-pg-side,
  #panel-library.st .st-version, #panel-library.st .mk-sec, #panel-library.st .mk-list, #panel-library.st .mk-sum,
  #panel-library.st #st-setup-list) { background: color-mix(in srgb, var(--solid) 92%, rgb(var(--tint))); }
/* a dark card over a picture keeps light words in every theme */
html:where([data-theme="light"]) #panel-library.st :is(.st-tile .mk, .st-tile .lbl, .st-tile .st-age, .st-hero-txt, .st-hero-note,
  .st-parent, .st-ad-fewer, .st-ad-btn, .st-hidmark, .st-lane-line, .st-tag.ad) {
  --st-text: #dcdedf; --st-muted: #b4bbc2; --st-strong: #ffffff; --st-soft: #e2e5e8; --st-desc: #e0e8ee; --st-bad: #ff8a7e;
  --st-gold: #e0b24a; --st-gold-text: #ffe9a6; --lane-gold: #e8c46a;
  --st-green: #59bf40; --st-green-hi: #47bf54; --st-lime: #a4d007; --st-mint: #5fe8a8; --st-mint-text: #9fe8c6; --st-age-green: #8fdc7a; --st-danger: #d64040;
}
#panel-library.st .st-head h2 { color: var(--st-strong); }
@keyframes st-in { from { opacity: 0; transform: translateY(-6px); } }

.st-head { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--st-edge); background: var(--st-bg); }
.st-head h2 { font-size: 16px; }
.st-mode { display: flex; background: var(--st-deep); border-radius: 4px; padding: 2px; }
.st-mode button { border: 0; background: transparent; color: var(--st-muted); padding: 6px 18px; border-radius: 3px; font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.st-mode button.on { background: var(--st-sel); color: var(--st-strong); }
#st-from { flex: 1; min-width: 0; color: var(--st-sky); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .win-btns button { border-color: transparent; background: var(--st-ctl); border-radius: 4px; color: var(--st-text); }
.st .win-btns button:hover { background: var(--st-ctl-hi); }

/* The window's own buttons are never squeezed or cut off (William, 2026-10-17: the x "is sort of cut
   off on the edge", in Ember and the other looks). The search box had a minimum width of its own
   (the input's 20 characters), so at 960 px the header ran 9 px too wide, the x shrank to 28 px and
   its right half lay outside the window, under the clock. The search gives way instead; the
   window buttons and the x keep their size (nothing-covers-what-you-press.md). */
.st-head > .win-btns { flex-shrink: 0; }
.st-head .win-btns .close { min-width: 44px; min-height: 44px; }   /* a finger's width, inside the – □ × group too (no-accidental-taps.md) */
#st-from:empty { display: none; }

/* The store keeps its own grey (it blends with every look), with one thin line of the chosen look's
   main colour: a rule along the top of the window and under the Store / Library tab you are on
   (William, 2026-10-17). --look-accent is what a look sets; Dew's own look has none, so --accent.
   The store follows the look's light or dark side (STORE-LOOK-1), so the colour needs no lightening. */
#panel-library.st { --st-accent: var(--look-accent, var(--accent)); }
.st-head { box-shadow: inset 0 2px 0 var(--st-accent, var(--st-blue)); }
.st-mode button.on { box-shadow: inset 0 -2px 0 var(--st-accent, var(--st-blue)); }

/* "Search: <term>" under the tabs (js/search-line.js): a calm line in the store's own tokens, there only
   while something is searched for. The term shows whole up to two lines, then "...". The x is 44 px to press. */
.st-sline { display: none; align-items: center; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--st-edge); background: var(--st-bg-2); color: var(--st-soft); font-size: 13px; }
.st-sline.on { display: flex; }
.st-sline-text { flex: 1; min-width: 0; margin: 6px 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.st-sline-x { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--st-sky); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.st-sline-x:hover { background: var(--st-ctl-hi); color: var(--st-strong); }
.st-sline-x:focus-visible { outline: 2px solid var(--st-accent, var(--st-blue)); outline-offset: -2px; }
.st-sline-x[hidden] { display: none; }

/* one column that scrolls as a whole: editor, packs, the details page, then the list */
.st-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.st-body > * { flex: none; }

/* the dock holds the space bar and the editor; on phones and watches it is a tray */
.st-dock { flex: none; display: flex; flex-direction: column; }
.st-handle { display: none; }

/* space needed and free */
.st-space { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 12px; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.st-space .bad { color: var(--st-bad); font-weight: 600; }
.st-space .meter { flex: 1 0 100%; height: 4px; border-radius: 2px; background: var(--st-ctl); overflow: hidden; }
.st-space .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--st-blue-hi), var(--st-blue)); }

/* the editor: base | your setup on top, the packs for it in a strip below
   (William 2026-10-08: the packs for the chosen software go below the editor) */
.st-editor {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 10px;
  grid-template-areas: "base setup" "packs packs";
  padding: 10px 12px; border-bottom: 1px solid var(--st-edge); flex: none;
}
.st-col-base { grid-area: base; }
.st-col-setup { grid-area: setup; }
.st-col-packs { grid-area: packs; }
.st-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 6px; background: rgba(0,0,0,.2); border: 1px solid transparent; transition: background .1s, border-color .1s; }
.st-col h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--st-muted); }
.st-col h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.st-hint { margin: 0; color: var(--st-muted); font-size: 13px; }

#st-bases { max-height: 300px; overflow: hidden auto; display: flex; flex-direction: column; gap: 12px; }
.st-base { display: flex; flex-direction: column; gap: 8px; }
/* the picture and name open the program's page below */
.st-base-top { display: flex; align-items: center; gap: 12px; padding: 4px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; text-align: left; }
.st-base-top:hover { background: color-mix(in srgb, var(--st-light) 5%, transparent); }
.st-base-top:hover b { text-decoration: underline; text-underline-offset: 3px; }
.st-base.viewing .st-base-top { border-color: var(--st-sky); background: color-mix(in srgb, var(--st-sky) 8%, transparent); }
.st-base .art { flex: none; width: 64px; height: 64px; border-radius: 4px; display: grid; place-items: center; font-size: 34px; background: linear-gradient(160deg, var(--tint), var(--st-deep)); }
.st-base .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-base b { font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.st-base .pub { color: var(--st-muted); font-size: 12px; }
.st-base .more { flex: none; align-self: center; color: var(--st-sky); font-size: 13px; white-space: nowrap; }
/* the short text: two lines; the whole of it is on the page below */
.st-base p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--st-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.st-base .row { display: flex; flex-wrap: wrap; gap: 6px; }
.st-base .row:empty { display: none; }

/* the packs strip: as many cards a row as fit, names whole (two lines before the dots) */
.st-col-packs h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.st-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.st-matrix > .st-hint { grid-column: 1 / -1; }
.st-pack {
  display: flex; align-items: center; min-width: 0; border: 1px solid transparent; border-radius: 4px;
  background: var(--st-ctl); color: var(--st-text); user-select: none; transition: background .1s, border-color .1s;
}
.st-pack:hover { background: var(--st-ctl-hi); }
.st-pack.viewing { border-color: var(--st-sky); }
.st-pack-main { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 10px; border: 0; background: none; color: inherit; text-align: left; }
.st-pack-main i { font-style: normal; font-size: 22px; flex: none; }
.st-pack-main > span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.st-pack b { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.st-pack .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.st-pack small { font-size: 11px; color: var(--st-muted); }
.st-pack em { font-style: normal; font-size: 11px; white-space: nowrap; }
.st-pack-add { flex: none; margin-right: 8px; min-width: 64px; padding: 6px 8px; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--st-light) 7%, transparent); color: var(--st-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-pack-add:not(:disabled):hover { background: var(--st-blue); color: var(--st-on-blue); }
.st-pack.chosen { background: color-mix(in srgb, var(--st-green) 10%, transparent); }
.st-pack.chosen .st-pack-add { color: var(--st-green); }
.st-pack.chosen .st-pack-add:hover { background: var(--st-warn-bg); color: var(--st-on); }
.st-pack.soon .st-pack-main { opacity: .6; }
.st-pack[hidden] { display: none; }
.st-more { align-self: center; border: 0; border-radius: 3px; padding: 6px 14px; background: transparent; color: var(--st-sky); font-size: 13px; }
.st-more:hover { background: color-mix(in srgb, var(--st-sky) 10%, transparent); }
.st-more[hidden] { display: none; }
.st-pack-add:disabled { cursor: default; }
#st-setup-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
#st-setup-list .st-pack { flex: none; }
#st-setup-list .st-pack em { display: none; }
#st-setup-list .st-pack-add { min-width: 32px; font-size: 16px; padding: 3px 8px; }
.st-col-setup #st-act { margin-top: auto; }

/* marks: installed / bought, not installed / price */
.mk { font-size: 11px; font-weight: 600; font-style: normal; }
.mk.installed { color: var(--st-green); }
.mk.owned { color: var(--st-sky); }
.mk.price { color: var(--st-text); }
.mk.soon { color: var(--st-muted); }

/* buttons in Steam's manner */
.st-btn { border: 0; border-radius: 3px; padding: 7px 14px; font-weight: 600; color: var(--st-on); }
.st-btn:disabled { opacity: .5; cursor: default; filter: grayscale(.6); }
.st-btn.play { background: linear-gradient(90deg, var(--st-green-hi), var(--st-green)); }
.st-btn.install { background: linear-gradient(90deg, var(--st-blue-hi), var(--st-blue)); color: var(--st-on-blue); }
.st-btn.buy { background: linear-gradient(90deg, var(--st-buy), var(--st-buy-2)); color: var(--st-buy-text); }
.st-btn.ghost { background: var(--st-ctl); color: var(--st-text); }
.st-btn:not(:disabled):hover { filter: brightness(1.12); }
#st-act { width: 100%; padding: 10px; font-size: 14px; }

/* the selection */
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px 6px; flex: none;
  position: sticky; top: 0; z-index: 3; background: var(--st-bg); }
.st-catpick { margin-right: auto; }
/* the Kind choice: All · Things · Services · Software · Auctions (ST1b); 44 px to press, names whole, a second row when the width is short */
.st-kind { display: flex; flex-wrap: wrap; gap: 4px; }
.st-kind button { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 3px; background: var(--st-ctl); color: var(--st-text); font: inherit; font-size: 13px; font-weight: 600; flex: 1 1 auto; }
.st-kind button:hover { filter: brightness(1.12); }
.st-kind button.on { background: var(--st-blue); color: var(--st-on-blue); }
.st-kind button:focus-visible { outline: 2px solid var(--st-sel); outline-offset: 1px; }
.mk.lot { color: var(--st-sky); }
.st-find { position: relative; display: flex; align-items: center; }
.st-find input { width: 180px; padding: 6px 30px 6px 10px; border: 1px solid transparent; border-radius: 3px; background: var(--st-deep); color: var(--st-text); font: inherit; font-size: 13px; outline: none; }
.st-find input:focus { border-color: var(--st-sel); }
.st-find svg { position: absolute; right: 8px; width: 16px; height: 16px; color: var(--st-muted); pointer-events: none; }
.st-sort { color: var(--st-muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.st-sort select { background: var(--st-deep); color: var(--st-text); border: 1px solid transparent; border-radius: 3px; padding: 5px 8px; font: inherit; font-size: 13px; }

.st-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; padding: 6px 14px 16px; align-content: start; }
.st-tile { position: relative; height: 132px; padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; text-align: left; color: var(--st-text);
  background: linear-gradient(160deg, var(--tint), var(--st-deep)); user-select: none; transition: transform .1s, filter .1s; }
.st-tile:hover { transform: translateY(-2px); filter: brightness(1.12); }
.st-tile.in-editor { border-color: var(--st-blue); box-shadow: 0 0 0 1px var(--st-blue); }
.st-tile .art { position: absolute; inset: 0 0 40px; display: grid; place-items: center; font-size: 46px; }
.st-tile .mk { position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.6); }
.st-tile .lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
/* a name takes two lines before it is ever shortened (words-fit-their-space.md) */
.st-tile .lbl b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; line-height: 1.2; overflow: hidden; overflow-wrap: anywhere; }
.st-tile .lbl small { display: block; color: var(--st-soft); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-empty { color: var(--st-muted); grid-column: 1 / -1; padding: 24px 0; }

/* dragging: show where it can go */
.st-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: .85; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
body.st-dragging-item #st-editor .st-col,
body.st-dragging-pack.st-from-matrix .st-col-setup,
body.st-dragging-pack.st-from-setup .st-col-packs { border: 1px dashed var(--st-blue); }
#st-editor.st-over .st-col, .st-col.st-over { background: color-mix(in srgb, var(--st-blue) 14%, transparent); }
body[class*="st-dragging"] { cursor: grabbing; }

/* the round button beside the search bar */
.search-wrap { display: flex; align-items: center; gap: 8px; }
.search-wrap .search-pair { flex: 1; min-width: 0; width: auto; }
#store-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--muted); }
#store-btn svg { width: 18px; height: 18px; fill: currentColor; }
#store-btn:hover { color: var(--text); background: rgba(var(--tint), .12); }

/* the wallet: the confirm sheet (#pay), the wallet screen (#wallet) and programs in a frame
   (#app-frame). They sit over everything, in the store's colours. */
#pay, #wallet, #app-frame {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55);
}
#pay { z-index: 82; }
#wallet { z-index: 81; }
#app-frame { z-index: 80; }
#pay[hidden], #wallet[hidden], #app-frame[hidden] { display: none; }
.pay-box { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); max-height: calc(var(--kv-height, 100dvh) - 32px); overflow: auto; padding: 20px;
  border-radius: 8px; background: var(--st-bg); border: 1px solid var(--st-edge); color: var(--st-text); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.pay-box.wide { width: min(620px, 100%); }
.pay-box h3 { margin: 0 0 10px; font-size: 18px; padding-right: 36px; }
.pay-box p { margin: 6px 0; color: var(--st-soft); }
.pay-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 4px; background: var(--st-ctl); color: var(--st-text); font-size: 18px; }
.pay-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.pay-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--st-light) 6%, transparent); }
.pay-lines b { white-space: nowrap; }
.pay-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 8px 0; font-variant-numeric: tabular-nums; }
.pay-sums dt { color: var(--st-muted); }
.pay-sums dd { margin: 0; text-align: right; }
.pay-sums .small { font-size: 12px; }
.pay-sums .total { font-size: 22px; font-weight: 700; color: var(--st-strong); align-self: end; }
.pay-sums.small { font-size: 12px; grid-template-columns: auto 1fr; }
.pay-sums.small dd { text-align: left; overflow-wrap: anywhere; }
.pay-fine { font-size: 12px; color: var(--st-muted) !important; }
.pay-card { font-size: 13px; }
.pay-consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 10px; border-radius: 6px; background: color-mix(in srgb, var(--st-light) 4%, transparent); font-size: 13px; }
.pay-consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.pay-problem { color: var(--st-bad) !important; font-size: 13px; }
.pay-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pay-actions .st-btn { padding: 10px 16px; }
.pay-testcard { display: grid; gap: 4px; width: 100%; margin-top: 10px; padding: 18px; border: 0; border-radius: 10px; text-align: left; color: var(--st-on);
  background: linear-gradient(135deg, var(--st-card), var(--st-blue-hi)); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.pay-testcard span { font-size: 20px; letter-spacing: 2px; }
.pay-testcard small { opacity: .8; }
.pay-test { margin-top: 14px !important; font-size: 12px; color: var(--st-gold) !important; text-align: center; }
/* the testers' free pass (RP1.0): the real price stays visible, struck through; the pass is said in the gold of the test line */
.pay-struck { text-decoration: line-through; opacity: .65; font-weight: 400; }
.pay-freepass { padding: 10px; border-radius: 6px; border: 1px solid var(--st-gold); color: var(--st-strong) !important; font-size: 13px; }
/* the price question after it: three answers that wrap rather than shrink, the chosen one outlined */
.pay-ask-choices { flex-wrap: wrap; justify-content: flex-start; margin-top: 10px; }
.pay-ask-choices .st-btn[aria-pressed="true"] { outline: 2px solid var(--st-gold); outline-offset: 1px; font-weight: 700; }
.pay-ask-why { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--st-ctl); border-radius: 6px; background: var(--st-ctl); color: var(--st-text); font: inherit; }
.st-btn.small { padding: 5px 10px; font-size: 12px; }
.st-btn.warn { background: var(--st-warn-bg); color: var(--st-on); }

.wl-sec { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--st-light) 7%, transparent); display: grid; gap: 8px; }
.wl-sec h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--st-muted); }
.wl-credit { font-size: 26px; font-weight: 700; color: var(--st-strong); }
.wl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.wl-item span { display: grid; min-width: 0; }
.wl-item small { color: var(--st-muted); }
.wl-item small.bad { color: var(--st-bad); }
.wl-earn { margin-top: 6px; font-size: 13px; }
.wl-earn summary { cursor: pointer; color: var(--st-text); }
.wl-earn ul { margin: 6px 0; padding-left: 18px; }
.wl-order { border-radius: 6px; background: color-mix(in srgb, var(--st-light) 3%, transparent); padding: 0 10px; }
.wl-order summary { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; cursor: pointer; font-size: 13px; }
.wl-order summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-order summary b { white-space: nowrap; }
.wl-order.refunded summary { color: var(--st-muted); }
.wl-order > .st-btn, .wl-order > p { margin: 0 0 10px; }
.wl-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 13px; }
.wl-set select { max-width: 100%; background: var(--st-ctl); color: var(--st-text); border: 1px solid var(--st-edge); border-radius: 3px; padding: 6px 8px; font: inherit; }

/* a program in a frame (the in-game shop demo) */
.af-box { width: min(900px, 100%); height: min(640px, 100%); display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;
  background: var(--st-bg); border: 1px solid var(--st-edge); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.af-box header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; color: var(--st-text); }
.af-x { width: 32px; height: 32px; border: 0; border-radius: 4px; background: var(--st-ctl); color: var(--st-text); font-size: 18px; }
.af-box.big { width: 100%; height: 100%; border-radius: 0; }
.af-box header span { display: flex; gap: 6px; }
a.af-x { display: grid; place-items: center; text-decoration: none; }
a.af-x[hidden] { display: none; }
@media (pointer: coarse), (max-width: 760px) { .af-x { width: 44px; height: 44px; } }
.af-box iframe { flex: 1; width: 100%; border: 0; background: var(--st-frame); }

/* store header button and the in-app list on a program's page */
.st-wallet { flex: none; border: 0; border-radius: 3px; padding: 6px 12px; background: var(--st-ctl); color: var(--st-text); font-weight: 600; font-size: 13px; }
.st-wallet:hover { background: var(--st-ctl-hi); }
.st-gift { margin-left: 4px; padding: 1px 6px; border-radius: 3px; background: var(--accent, #2f7d5b); color: var(--on-accent, var(--st-strong)); font-weight: 600; white-space: nowrap; }
.st-inapp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-inapp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 12px; align-items: center; padding: 8px 10px; border-radius: 4px; background: color-mix(in srgb, var(--st-light) 4%, transparent); font-size: 13px; }
.st-inapp-list small { grid-column: 1; color: var(--st-muted); }
.st-inapp-list b { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.st-inapp-list li > button { grid-column: 3; grid-row: 1 / span 2; padding: 4px 12px; }
.st-buyall { margin: 0 0 8px; }
.st-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 320px) {
  #pay, #wallet, #app-frame { padding: 4px; }
  .pay-box { padding: 12px; max-height: calc(100vh - 8px); max-height: calc(var(--kv-height, 100dvh) - 8px); }
  .pay-actions { flex-direction: column-reverse; }
  .st-wallet { padding: 4px 8px; }
}

/* age rating and tags */
.st-age { display: inline-block; align-self: flex-start; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
  background: color-mix(in srgb, var(--st-green) 16%, transparent); color: var(--st-age-green); border: 1px solid color-mix(in srgb, var(--st-green) 35%, transparent); }
.st-age.adult { background: color-mix(in srgb, var(--st-gold) 14%, transparent); color: var(--st-gold); border-color: color-mix(in srgb, var(--st-gold) 40%, transparent); }
.st-age.nsfw { background: color-mix(in srgb, var(--st-danger) 18%, transparent); color: var(--st-bad); border-color: color-mix(in srgb, var(--st-danger) 50%, transparent); }
.st-tile .st-age { position: absolute; top: 7px; left: 7px; background-color: rgba(0,0,0,.65); }
.st-pack .st-age { margin-top: 2px; }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-tag { padding: 3px 9px; border-radius: 3px; font-size: 12px; background: color-mix(in srgb, var(--st-sky) 12%, transparent); color: var(--st-sky); }
.st-tag.cat { background: var(--st-sel); color: var(--st-strong); font-weight: 600; }
.st-tags .st-age { align-self: center; font-size: 11px; padding: 3px 8px; }

/* the details page: opens right below the editor, in the same colours */
.st-body { position: relative; }
.st-page { margin: 10px 12px 4px; display: flex; flex-direction: column; background: var(--st-deep); border: 1px solid var(--st-edge); border-radius: 6px; overflow: clip; animation: st-in .12s ease-out; }
.st-page[hidden] { display: none; }
.st-pg-nav { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--st-bg); border-bottom: 1px solid var(--st-edge); }
.st-pg-nav button { flex: none; width: 34px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: var(--st-ctl); color: var(--st-text); font-size: 20px; line-height: 1; }
.st-pg-nav button:not(:disabled):hover { background: var(--st-ctl-hi); }
.st-pg-nav button:disabled { opacity: .35; cursor: default; }
.st-pg-nav svg { width: 18px; height: 18px; }
#st-pg-crumb { flex: 1; min-width: 0; padding: 0 6px; color: var(--st-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pg-body { flex: 1; min-height: 0; }

.st-hero { position: relative; flex: none; height: clamp(170px, 30vh, 280px); height: clamp(170px, 30dvh, 280px); display: flex; align-items: flex-end; overflow: hidden;
  background: radial-gradient(120% 140% at 75% 30%, var(--tint) 0%, transparent 70%), linear-gradient(160deg, var(--tint), var(--st-deep) 85%);
  background-size: cover; background-position: center; }
.st-hero.small { height: clamp(130px, 22vh, 190px); height: clamp(130px, 22dvh, 190px); }
.st-hero-art { position: absolute; right: 6%; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: clamp(90px, 18vh, 170px); font-size: clamp(90px, 18dvh, 170px); opacity: .9; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); }
.st-hero.small .st-hero-art { font-size: clamp(64px, 12vh, 110px); font-size: clamp(64px, 12dvh, 110px); }
.st-hero-txt { position: relative; padding: 18px 24px; max-width: 70%; }
.st-hero-txt h2 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.st-hero-txt small { display: block; margin-top: 4px; color: var(--st-desc); font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.st-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, color-mix(in srgb, var(--st-deep) 85%, transparent)); pointer-events: none; }
.st-hero > * { z-index: 1; }
.st-hero > .st-hero-preview { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; }
.st-hero-note { position: absolute; top: 12px; right: 12px; z-index: 2; max-width: 55%; padding: 3px 9px; border-radius: 3px; background: rgba(0,0,0,.6); color: var(--st-desc); font-size: 12px; text-align: right; }
.st-parent { position: absolute; top: 14px; left: 18px; display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border: 0; border-radius: 6px;
  background: rgba(0,0,0,.55); color: var(--st-text); font-size: 13px; font-weight: 600; }
.st-parent i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px; font-style: normal; font-size: 24px; background: linear-gradient(160deg, var(--tint), var(--st-deep)); }
.st-parent:hover { background: rgba(0,0,0,.75); color: var(--st-strong); }

.st-pg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding: 16px 24px 28px; max-width: 1180px; }
.st-pg-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.st-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--st-desc); max-width: 68ch; }
.st-save { margin: 0; color: var(--st-lime); font-weight: 600; }
.st-note { margin: 0; font-size: 12px; color: var(--st-muted); }
.st-pg-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--st-light) 6%, transparent); }
.st-pg-sec h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--st-muted); }
.st-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.st-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 4px; text-align: left; color: var(--st-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 45%, var(--st-ctl)), var(--st-ctl) 60%); }
.st-link:hover { filter: brightness(1.18); }
.st-link i { flex: none; font-style: normal; font-size: 24px; }
.st-link span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-link b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-link small { font-size: 11px; color: var(--st-muted); }
.st-link em { flex: none; }

.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-stats div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 4px; background: rgba(0,0,0,.25); }
.st-stats b { font-size: 18px; color: var(--st-sky); font-variant-numeric: tabular-nums; }
.st-stats small { font-size: 12px; color: var(--st-muted); }
.st-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two cells: opens here, last opened (375 px: the one-column rule below still wins) */
.st-sortnote { padding: 2px 14px 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }   /* what is counted, said in a line, with the Clear step */
.st-sortnote[hidden] { display: none; }
.st-clear { padding: 2px 10px; min-height: 28px; }

.st-pg-side { align-self: start; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 6px; background: rgba(0,0,0,.25); }
.st-pg-price { font-size: 18px; }
.st-pg-side .st-btn { padding: 10px; font-size: 14px; }
.st-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: 13px; }
.st-facts dt { color: var(--st-muted); }
.st-facts dd { margin: 0; }

/* phones and narrow windows: the list fills the screen and the editor is a tray
   at the bottom, like a shopping-cart bar. Closed it shows what's chosen and
   the one button; a tap on it pulls up the whole editor. */
@media (max-width: 760px) {
  /* what is really on screen, not the layout viewport: a browser bar under the page (Android Brave) or the keyboard
     must not cover the tray (kit/keep-in-view sets --kv-top / --kv-bottom; without it: as before) */
  #panel-library.st { left: 8px; right: 8px; top: calc(var(--kv-top, 0px) + 16px); bottom: calc(var(--kv-bottom, 0px) + 8px); }
  /* phones: the list scrolls by itself, the details page covers it */
  .st-body { overflow: hidden; }
  .st-tiles { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .st-bar { position: static; }
  .st-head { gap: 10px; padding: 8px 8px 8px 12px; }
  .st-head h2 { display: none; }
  .st-bar { order: 1; padding: 8px 10px 6px; }
  .st-sortnote { order: 1; padding: 2px 10px 6px; }   /* under the sort choice, above the tiles */
  .st-catpick { margin-right: 0; }
  .st-kind { flex: 1 1 100%; gap: 3px; }
  .st-kind button { padding: 0 3px; font-size: 12px; }
  .st-find { flex: 1; }
  .st-find input { width: 100%; }
  .st-tiles { order: 2; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 6px 10px 12px; }

  .st-dock { order: 3; position: relative; max-height: 82%; background: var(--st-deep); border-top: 1px solid var(--st-edge);
    border-radius: 12px 12px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.45); }
  .st-handle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 14px 6px; border: 0;
    background: transparent; color: var(--st-text); text-align: left; }
  .st-handle::before { content: ""; position: absolute; top: 5px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 2px; background: var(--st-ctl-hi); }
  .st-handle i { font-style: normal; font-size: 26px; flex: none; }
  .st-handle span:not(.st-hint) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .st-handle b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-handle small { font-size: 12px; color: var(--st-muted); }
  .st-handle svg { flex: none; width: 20px; height: 20px; color: var(--st-muted); transition: transform .15s; }
  .st-dock.open .st-handle svg { transform: rotate(180deg); }

  .st-editor { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 0 10px 10px; border: 0; }
  .st-editor > .st-col { grid-area: auto; }
  .st-dock.open .st-space { padding: 0 4px; }
  /* closed: only the button shows */
  .st-dock:not(.open) :is(.st-space, .st-col-base, .st-col-packs, #st-setup-list, .st-col-setup h3) { display: none; }
  .st-dock:not(.open) .st-col-setup { padding: 0; background: none; }
  /* open: the whole editor, scrolling inside the tray */
  /* open: the top of the tray stays put, the editor scrolls under it,
     and the button stays in reach at the bottom */
  .st-dock.open .st-editor { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .st-dock.open .st-editor > *, .st-dock.open .st-col-setup > * { flex: none; }
  .st-dock.open .st-col-setup { display: contents; }
  .st-dock.open .st-col-setup h3 { margin: 4px 0 -4px 10px; }
  .st-dock.open #st-setup-list { padding: 10px; border-radius: 6px; background: rgba(0,0,0,.2); }
  .st-dock.open #st-act { position: sticky; bottom: 0; box-shadow: 0 -8px 16px var(--st-deep); }
  .st-dock.open #st-act:disabled { opacity: 1; filter: none; background: var(--st-ctl); color: var(--st-muted); }
  .st-col h3 small { display: none; }
  /* the details page: one column, price and button first */
  .st-page { position: absolute; inset: 0; z-index: 6; margin: 0; border: 0; border-radius: 0; }
  .st-pg-body { overflow-y: auto; overscroll-behavior: contain; }
  .st-matrix { grid-template-columns: minmax(0, 1fr); }
  .st-base .more { display: none; }
  .st-pg-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px 12px 24px; }
  .st-pg-side { order: -1; position: static; }
  .st-hero-txt { max-width: 100%; padding: 14px; }
  .st-hero-art { right: 4%; font-size: 90px; opacity: .55; }
  .st-links { grid-template-columns: minmax(0, 1fr); }
  .st-stats b { font-size: 15px; }
  #st-bases, #st-setup-list { max-height: 220px; flex: none; }
}

/* watches: one column, big rows, only what a wrist needs */
@media (max-width: 320px) {
  #panel-library.st { top: calc(var(--kv-top, 0px) + 4px); left: 4px; right: 4px; bottom: calc(var(--kv-bottom, 0px) + 4px); z-index: 60; border-radius: 14px; }
  .st-head { padding: 6px; gap: 6px; }
  .st-mode button { padding: 6px 10px; font-size: 12px; }
  #st-from, .st-sort:not(.st-catpick), .st-find { display: none; }
  .st-bar { padding: 6px; }
  .st-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 4px 6px 10px; }
  .st-tile { height: 52px; }
  .st-tile .art { inset: 0 auto 0 0; width: 48px; font-size: 26px; }
  .st-tile .lbl { inset: 0 0 0 52px; padding: 8px 6px; background: none; }
  .st-tile .mk { top: auto; bottom: 6px; right: 6px; }
  .st-tile .lbl small { display: none; }
  .st-dock { max-height: 100%; }
  .st-body:has(.st-dock.open) :is(.st-bar, .st-tiles) { display: none; }
  .st-dock.open { flex: 1 1 auto; min-height: 0; }
  .st-base p { display: none; }
  .st-space .meter, .st-space span:first-of-type { display: none; }
  .st-tile .st-age { top: auto; left: 52px; bottom: 6px; }
  .st-hero, .st-hero.small { height: 110px; }
  .st-hero > .st-hero-preview { display: none; }   /* the still is enough on a wrist */
  .st-hero-note { top: 6px; right: 6px; max-width: 45%; padding: 2px 6px; font-size: 10px; }
  .st-hero-art { font-size: 56px; }
  .st-hero-txt h2 { font-size: 18px; }
  .st-parent { top: 6px; left: 6px; font-size: 11px; max-width: calc(100% - 12px); }
  .st-parent span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-hero-txt { padding: 8px 10px; }
  .st-hero-txt small { display: none; }
  .st-parent i { width: 28px; height: 28px; font-size: 16px; }
  .st-stats { grid-template-columns: minmax(0, 1fr); }
  /* back leaves the page from its first step, so one exit is enough on a wrist */
  #st-pg-crumb, #st-pg-x { display: none; }
  .st-pg-nav { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  #panel-library.st { animation: none; }
  .st-tile { transition: none; }
}

/* an item's own icon file (Walk the Ørth) in place of an emoji: as big as the emoji would be */
.st-icon { width: 1em; height: 1.2em; object-fit: contain; display: block; }
/* device pictures (img/devices/*.svg) fill their card art space; the drawings keep a margin of their own */
.art .st-icon[src^="img/devices/"] { width: 2.2em; height: 2.2em; transform: translateY(-4%); }
/* the price badge sits in the top-right corner: a card holding a device picture starts its art box below it */
.st-tile .art:has(> .st-icon[src^="img/devices/"]) { top: 14px; bottom: 32px; display: flex; justify-content: center; align-items: center; }
.st-tile .art:has(> .st-icon[src^="img/devices/"]) .st-icon { width: auto; height: 100%; aspect-ratio: 1; transform: none; }

/* one step deeper (every-road-leads-to-rome.md): a calm offer, never a pop-up */
/* You might be interested in: a row that scrolls sideways, each card with its Why this? (ST2b) */
.st-rel-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
.st-rel-card { flex: 0 0 min(260px, 82%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-rel-ask { min-height: 44px; align-self: flex-start; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--st-sky); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.st-rel-ask:hover { background: color-mix(in srgb, var(--st-sky) 10%, transparent); }
.st-rel-why-text { margin: 0; padding: 0 4px 6px; color: var(--st-muted); font-size: 13px; }
.st-rel-why-text[hidden] { display: none; }
.st-deeper { padding: 12px; border: 1px solid color-mix(in srgb, var(--st-mint) 25%, transparent); border-top-color: color-mix(in srgb, var(--st-mint) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--st-mint) 5%, transparent); }
.st-deeper h3 { color: var(--st-mint-text); text-transform: none; letter-spacing: 0; font-size: 15px; }
.st-deeper p { margin: 0; color: var(--st-muted); font-size: 13px; }

/* a device's versions, side by side; each with its own Order button */
.st-versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.st-version { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 6px; background: rgba(0,0,0,.25); }
.st-version b { font-size: 16px; }
.st-version small { color: var(--st-muted); line-height: 1.4; flex: 1; }
.st-version-price { font-size: 15px; font-weight: 700; }

/* Publish: your own program, the bundle editor and your creator links (js/store-make.js) */
.st-tag.ad { margin-left: 8px; background: var(--st-ad-bg); color: var(--st-gold-text); font-weight: 600; }
.st-pg-body .mk-title { font-size: 22px; margin: 4px 0 6px; }
.mk-lead { color: var(--st-muted); margin: 0 0 14px; max-width: 62ch; }
.mk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.mk-grid { display: grid; gap: 10px 14px; }
.mk-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--st-muted); min-width: 0; }
.mk-field small { font-size: 11px; }
.mk-field :is(input, select, textarea), .mk-link input, .mk-plain, .mk-pick > input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--st-edge); border-radius: 4px;
  background: var(--st-deep); color: var(--st-text); font: inherit; font-size: 14px; }
.mk-field input[type=color] { padding: 2px; height: 38px; width: 64px; }
.mk-field .mk-art { width: 64px; text-align: center; font-size: 20px; }
.mk-field textarea { resize: vertical; }
.mk-check { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-size: 13px; }
.mk-err { color: var(--st-bad); font-size: 13px; min-height: 1em; margin: 6px 0; }
.mk-fine { color: var(--st-muted); font-size: 12px; margin: 6px 0; }
.mk-sec { margin: 18px 0 0; padding: 14px; border-radius: 6px; background: rgba(0,0,0,.2); }
.mk-sec h3 { margin: 0 0 6px; font-size: 15px; }
.mk-sec > p { margin: 0 0 10px; font-size: 13px; }
.mk-sec.ask { outline: 2px solid var(--st-blue); }
.mk-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--st-light) 6%, transparent); }
.mk-item > i { font-style: normal; font-size: 24px; flex: none; }
.mk-item > span:not(.mk-acts) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-item b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-item small { color: var(--st-muted); font-size: 12px; }
.mk-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mk-bin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; color: var(--st-muted); }
.mk-sums { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-sums dt { color: var(--st-muted); }
.mk-sums dd { margin: 0; }
.mk-sums .mk-total { color: var(--st-sky); font-weight: 700; }
.mk-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; }
.mk-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-list { max-height: 340px; overflow-y: auto; border-radius: 4px; background: rgba(0,0,0,.2); }
.mk-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--st-light) 5%, transparent); cursor: pointer; }
.mk-opt.on { background: color-mix(in srgb, var(--st-blue) 14%, transparent); }
.mk-opt > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-opt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-opt small { font-size: 11px; color: var(--st-muted); }
.mk-opt em, .mk-part em { font-style: normal; flex: none; font-variant-numeric: tabular-nums; color: var(--st-sky); font-size: 13px; }
.mk-sum { padding: 12px; border-radius: 6px; background: rgba(0,0,0,.25); min-width: 0; }
.mk-sum h3 { margin: 0 0 8px; font-size: 14px; }
.mk-part { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.mk-part > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-part .st-btn { padding: 2px 8px; }
.mk-alone { margin: 10px 0; font-size: 13px; color: var(--st-muted); }
.mk-link { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.mk-note { font-size: 13px; color: var(--st-muted); }
.mk-own { margin: 10px 0; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb, var(--st-green) 12%, transparent); font-size: 13px; }
@media (max-width: 760px) {
  /* phones: Publish and Wallet on a second header line, so the window buttons stay on screen */
  .panel > .st-head { flex-wrap: wrap; gap: 6px 8px; padding: 8px 8px 8px 12px; }
  .st-head::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  #st-publish, #st-wallet, #st-dirs { order: 4; }
  .mk-grid.two, .mk-cols { grid-template-columns: minmax(0, 1fr); }
  .mk-list { max-height: 260px; }
  .mk-item { flex-wrap: wrap; }
  .mk-acts { width: 100%; justify-content: flex-start; }
}

/* Other stores, packs from anywhere, and hiding (js/store-sources.js, js/private-sphere.js) */
.st-tile-add { background: transparent; border: 1px dashed var(--st-edge); }
.st-tile-add .art { color: var(--st-sky); }
.st-tile-add .lbl { background: none; }
.st-hid { opacity: .72; }
.st-hidmark { display: inline-block; margin: 2px 0 0; padding: 0 6px; border-radius: 3px; background: rgba(0,0,0,.55); color: var(--st-soft); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.st-panel.st-dropping, .panel.st-dropping { outline: 3px dashed var(--st-sky); outline-offset: -6px; }
.mk-file { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.mk-gesture { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; max-width: 360px; }
.mk-pad { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--st-edge); border-radius: 6px; background: var(--st-deep); touch-action: manipulation; user-select: none; cursor: pointer; }
.mk-pad:focus-visible { outline: 2px solid var(--st-blue); }
.mk-pad > span { position: absolute; font-size: 20px; color: var(--st-muted); pointer-events: none; }
.mk-pad > span:nth-child(1) { top: 8px; left: 10px; }
.mk-pad > span:nth-child(2) { top: 8px; right: 10px; }
.mk-pad > span:nth-child(3) { bottom: 8px; left: 10px; }
.mk-pad > span:nth-child(4) { bottom: 8px; right: 10px; }
.mk-pad.hit { animation: mk-hit .25s ease-out; }
@keyframes mk-hit { from { background: color-mix(in srgb, var(--st-sky) 18%, transparent); } to { background: var(--st-deep); } }
.mk-dots { min-height: 1.2em; color: var(--st-sky); font-size: 13px; letter-spacing: .15em; }
@media (prefers-reduced-motion: reduce) { .mk-pad.hit { animation: none; } }

/* The one ad spot in the store's list (js/library.js adSpot; js/ads.js): marked "Ad" top left,
   who paid under the name, "Fewer ads like this" behind the ⋯ top right */
.st-ad { padding: 0; }
.st-ad-go { position: absolute; inset: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-ad .art img { max-width: 100%; max-height: 100%; object-fit: cover; }
.st-ad .art { inset: 0 0 58px; }
.st-tile .mk.ad { left: 7px; right: auto; background: var(--st-sky); color: #06121f; font-weight: 700; letter-spacing: .03em; }
.st-ad .lbl { padding-top: 14px; padding-right: 64px; }
.st-ad .lbl .st-ad-from { color: var(--st-muted); }
.st-ad-btn { position: absolute; right: 8px; bottom: 9px; padding: 3px 9px; border-radius: 3px; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 600; }
.st-ad-fewer { position: absolute; top: 4px; right: 4px; width: 32px; height: 28px; border: 0; border-radius: 3px; background: rgba(0,0,0,.45); color: var(--st-text); font-size: 16px; line-height: 1; cursor: pointer; }
.st-ad-fewer:hover, .st-ad-fewer:focus-visible { background: rgba(0,0,0,.75); }
.st-ad-why { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 5px 7px; overflow: auto; background: var(--st-deep); }
.st-ad-why b { font-size: 12px; color: var(--st-soft); padding-right: 30px; }
.st-ad-why button { padding: 1px 8px; border: 1px solid var(--st-edge); border-radius: 3px; background: none; color: var(--st-text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.st-ad-why button:hover, .st-ad-why button:focus-visible { border-color: var(--st-sel); }
.st-ad-why .st-ad-keep { position: absolute; top: 4px; right: 4px; width: 28px; height: 24px; padding: 0; border-color: transparent; color: var(--st-muted); font-size: 16px; text-align: center; }
.st-ad-here .art { inset: 0 0 66px; font-size: 34px; }
.st-ad-here .lbl { padding-top: 6px; }
.st-ad-here .lbl small { white-space: normal; }

/* ---- the store's logo (js/store-logo.js): crisp, in the colour of the text around it ---- */
.store-logo { width: 20px; height: 20px; flex: none; overflow: visible; }
.store-logo .sl-box { fill: var(--st-blue-hi, currentColor); opacity: 0; }
.st-head h2 { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.st-head h2 .store-logo { color: var(--st-blue-hi, currentColor); }

/* the Install button while it downloads: box drops into the cart, the bar fills, then the cart nods */
#st-act.st-dling { display: flex; align-items: center; gap: 10px; opacity: 1; cursor: progress; filter: none; }
#st-act.st-dling .store-logo .sl-box { opacity: 1; fill: currentColor; }
#st-act .sl-dropping .sl-box { animation: sl-drop 0.62s steps(6, end) infinite; }
@keyframes sl-drop { from { transform: translateY(-7px); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(3px); opacity: 1; } }
#st-act.st-dl-done .store-logo .sl-box { animation: none; transform: translateY(3px); }
#st-act.st-dl-done .store-logo { animation: sl-nod 0.36s steps(4, end); }
@keyframes sl-nod { 50% { transform: translateY(2px); } }
.st-dl-bar { flex: 1; height: 6px; background: rgba(0, 0, 0, 0.28); overflow: hidden; }
.st-dl-bar i { display: block; height: 100%; width: 0; background: currentColor; }
.st-dl-pc { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { #st-act.st-dl-done .store-logo { animation: none; } }

/* ---- the store's search, at the top where every store has it; Ask Dew opens Dew's own bar ---- */
.st-hfind { flex: 1 1 220px; max-width: 460px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; border: 1px solid transparent; border-radius: 3px; background: var(--st-deep); color: var(--st-muted); }
.st-hfind:focus-within { border-color: var(--st-sel); }
.st-hfind > svg { width: 16px; height: 16px; flex: none; }
.st-hfind input { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: none; color: var(--st-text); font: inherit; font-size: 13px; outline: none; }
#st-ask { flex: none; padding: 4px 10px; border: 0; border-radius: 3px; background: linear-gradient(90deg, var(--st-blue-hi), var(--st-blue)); color: var(--st-on-blue); font: inherit; font-size: 12px; cursor: pointer; }
#st-ask[hidden] { display: none; }
@media (max-width: 700px) { .st-hfind { order: 4; flex-basis: 100%; max-width: none; } }
/* the search gives way first: no minimum width of its own, and where there is no room for the header
   in one line (a window narrower than ~960 px) it takes a line of its own, under the buttons */
.st-hfind { min-width: 0; }
.st-hfind input { width: 0; }
@media (min-width: 761px) and (max-width: 1000px) {
  .st-head { flex-wrap: wrap; gap: 8px 10px; }
  .st-hfind { order: 4; flex-basis: 100%; max-width: none; }
}
@media (min-width: 761px) and (max-width: 840px) { .st-head h2 { display: none; } }

/* the one gold rim (suggestions-in-your-lane.md): a thin rim and one quiet line, no badge, no motion.
   --lane-gold can come from a look; this is the fallback. The line lets clicks through to the tile. */
.st-tile.st-lane { border-color: var(--lane-gold, #d8b04a); box-shadow: 0 0 0 1px var(--lane-gold, #d8b04a); }
.st-lane-line { position: absolute; left: 7px; top: 7px; max-width: calc(100% - 14px); padding: 2px 7px; border-radius: 3px;
  background: rgba(0,0,0,.6); color: var(--lane-gold, #d8b04a); font-size: 11px; line-height: 1.3; pointer-events: none; }
.st-tile.st-lane .mk { top: auto; bottom: 46px; }

/* One store, two looks (William, 2026-10-15: "we can keep them as a separate look but I want only
   one store"). While the 3D Earth is the desktop, the one store wears Meridian's colours (its dark
   green panels and amber, from meridian-simple.html :root) instead of Steam's: from the start, so
   the look never changes while the Earth loads, and not when the Earth failed. Same store, same
   pack editor; only the tokens change. On <html>, like the Steam ones, so looks.js shades them too. */
html:has(> body.earth-desk:not(.earth-failed)) {
  --st-bg: #131b18; --st-bg-2: #0f1614; --st-deep: #0b100e; --st-edge: #2a3733;
  --st-ctl: #182220; --st-ctl-hi: #22302c; --st-sel: #3a3320; --st-frame: #0b100e;
  --st-text: #dce3df; --st-muted: #8a9591; --st-strong: #e9e4d3; --st-soft: #c9d1cd; --st-desc: #c9d1cd;
  --st-blue: #ffb020; --st-blue-hi: #ffc659; --st-sky: #ffb020;
  --st-buy: #ffb020; --st-buy-2: #d9902a; --st-buy-text: #1a1206; --st-card: #d9702e;
  --st-on: #1a1206;   /* dark words on amber, green and gold buttons */
}

/* Picks of the week, month and year (js/picks.js): the first thing in the tile grid on the Store's front,
   in the store's own tokens so both looks wear it. Fine print and links stay readable; nothing is told by colour alone. */
.pk { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pk-lane { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--st-muted); }
.pk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pk-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--st-edge); border-radius: 4px; background: var(--st-ctl); color: var(--st-text); overflow: hidden; }
.pk-top { display: flex; gap: 12px; align-items: flex-start; flex: 1; padding: 12px; border: 0; background: transparent; color: inherit; text-align: left; }
.pk-top:hover { background: color-mix(in srgb, var(--st-light) 5%, transparent); }
.pk-top:focus-visible, .pk-link:focus-visible, .pk-item:focus-visible { outline: 2px solid var(--st-sky); outline-offset: -2px; }
.pk-art { flex: none; width: 56px; height: 56px; border-radius: 4px; display: grid; place-items: center; font-size: 30px; background: linear-gradient(160deg, var(--tint), var(--st-deep)); }
.pk-art.small { width: 40px; height: 40px; font-size: 22px; }
.pk-art .st-icon { width: 70%; height: 70%; object-fit: contain; }
.pk-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-kind { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--st-sky); }
.pk-name { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; color: var(--st-strong); }
.pk-why { font-size: 13px; line-height: 1.4; color: var(--st-soft); }
.pk-when { font-size: 12px; color: var(--st-muted); }
.pk-since { font-style: normal; font-weight: 600; color: var(--st-soft); }
.pk-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 12px 12px; }
.pk-have { margin-right: auto; font-size: 12px; font-weight: 600; color: var(--st-age-green); }
.pk-note { margin: 0; font-size: 12px; color: var(--st-muted); }
.pk-link { border: 0; background: transparent; padding: 2px 4px; color: var(--st-sky); font-size: 12px; text-decoration: underline; }
.pk-link:hover { color: var(--st-blue-hi); }
.pk-earlier { display: flex; flex-direction: column; gap: 10px; }
.pk-era h4 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--st-muted); }
.pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border: 1px solid var(--st-edge); border-radius: 4px; background: var(--st-ctl); color: var(--st-text); text-align: left; }
.pk-item:hover { background: var(--st-ctl-hi); }
.pk-none { margin: 0; font-size: 13px; color: var(--st-muted); }

/* the way a thing or service comes, under its line in the confirm sheet (ST3a) */
.pay-lines li.pay-delivery { color: var(--st-muted); font-size: 12px; padding-top: 0; }

/* the Delivery choice (ST3a): the Kind choice's look, a second row; 44 px to press; the long name wraps rather than cuts */
.st-delivery button { white-space: normal; line-height: 1.15; padding-top: 4px; padding-bottom: 4px; }
/* a thing's page: the ways it comes, one pressable row each */
.st-dmodes { display: flex; flex-direction: column; gap: 6px; }
.st-dmode { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; text-align: left; min-height: 44px; padding: 6px 12px; border: 1px solid var(--st-line, transparent); border-radius: 3px; background: var(--st-ctl); color: var(--st-text); font: inherit; }
.st-dmode b { font-weight: 600; }
.st-dmode small { grid-column: 1; color: var(--st-muted); }
.st-dmode span { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; white-space: nowrap; }
.st-dmode.on { background: var(--st-blue); color: var(--st-on-blue); }
.st-dmode.on small { color: inherit; opacity: .85; }
.st-dmode:focus-visible { outline: 2px solid var(--st-sel); outline-offset: 1px; }
.st-dsum { margin: 8px 0 0; color: var(--st-muted); font-size: 13px; }
#st-pg-body .st-btn.buy { min-height: 44px; }

/* Example marks, the test-mode line and the seller card (ST4b) */
.st-kind[hidden] { display: none; }
.st-testmode { margin: 0; padding: 6px 18px; border-bottom: 1px solid var(--st-edge); background: var(--st-bg-2); color: var(--st-soft); font-size: 13px; overflow-wrap: anywhere; }
.st-testmode::before { content: "●"; margin-right: 8px; color: #e0a43a; }
.st-testmode[hidden] { display: none; }
.st-tile .mk.example { top: 31px; right: 7px; font-size: 11px; background: #e0a43a; color: #1a1304; font-weight: 700; letter-spacing: .03em; }
.st-hero-example { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 9px; border-radius: 3px; background: #e0a43a; color: #1a1304; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.st-seller { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--st-edge); }
.st-seller-name { font-size: 15px; overflow-wrap: anywhere; }
.st-seller small { color: var(--st-muted); font-size: 12px; overflow-wrap: anywhere; }
.st-seller-row { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.st-seller .st-btn { min-height: 44px; }
.st-seller-nolink { display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--st-muted); font-size: 13px; opacity: .8; }
.st-share { margin: 6px 0 0; color: var(--st-muted); font-size: 12px; }
.pay-fine.pay-share { margin-top: 0; }
@media (max-width: 480px) {
  .st-testmode { padding: 6px 12px; font-size: 12px; }
}
@media (max-width: 320px) {
  .st-tile .mk.example { top: 6px; right: 6px; }
}

/* A lot's small line: the estimate and the time left, on two lines when the tile is narrow (ST5b) */
.st-tile .lbl small.lot-line { white-space: normal; overflow-wrap: anywhere; }

/* The wallet's moving dollar (DS3, IDEA 394; the picture is kit/icons, "dollar" animated). At rest it is the plain
   dollar. It moves once when the wallet opens (.go) and while the pointer is over it or over its button/row, then
   rests again. Reduce motion keeps it still, both the system setting and Dew's own (battery.css has the same pair). */
.dw-dollar { display: inline-flex; vertical-align: -0.2em; margin-right: 6px; color: var(--st-accent, var(--accent, currentColor)); }
.dw-dollar .kit-icon { display: block; }
.dw-dollar .kit-dollar-s, .dw-dollar .kit-dollar-bar, .dw-dollar .kit-dollar-shine { animation: none; }
/* The character build (DS4, from 64 px: the wallet sheet's heading) rests the same way: its faces stop the row loop.
   Only animation-name and the timing are set below, never the shorthand, so each row keeps its own delay (kit-dollar-rN). */
.dw-dollar .kit-dollar-face { animation-name: none; }
.dw-dollar.go .kit-dollar-face,
:is(.pay-box h3, #st-wallet, #results li):hover .dw-dollar .kit-dollar-face,
#results li.active .dw-dollar .kit-dollar-face { animation-name: kit-dollar-row; animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }
/* On the wallet sheet's 64 px heading the grid sits on the title's line, not on the text baseline */
.pay-box h3 > .dw-dollar { vertical-align: middle; }
.dw-dollar.go .kit-dollar-s,
:is(.pay-box h3, #st-wallet, #results li):hover .dw-dollar .kit-dollar-s,
#results li.active .dw-dollar .kit-dollar-s { animation: kit-dollar-draw 2.6s ease-in-out 1; }
.dw-dollar.go .kit-dollar-bar,
:is(.pay-box h3, #st-wallet, #results li):hover .dw-dollar .kit-dollar-bar,
#results li.active .dw-dollar .kit-dollar-bar { animation: kit-dollar-fade 2.6s ease-in-out 1; }
.dw-dollar.go .kit-dollar-shine,
:is(.pay-box h3, #st-wallet, #results li):hover .dw-dollar .kit-dollar-shine,
#results li.active .dw-dollar .kit-dollar-shine { animation: kit-dollar-shine 2.6s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
  .dw-dollar .kit-dollar-s, .dw-dollar .kit-dollar-bar, .dw-dollar .kit-dollar-shine, .dw-dollar .kit-dollar-face { animation: none !important; }
}
html[data-motion="reduce"] .dw-dollar .kit-dollar-s,
html[data-motion="reduce"] .dw-dollar .kit-dollar-bar,
html[data-motion="reduce"] .dw-dollar .kit-dollar-shine,
html[data-motion="reduce"] .dw-dollar .kit-dollar-face { animation: none !important; }
#results li > span:first-child.dw-dollar { margin-right: 0; vertical-align: baseline; }

/* "Should we make this?" on a Coming soon page (js/soon-vote-ui.js): two plain buttons, each at least 44 px high,
   well apart so one tap cannot hit the other; the chosen one shows a tick as well as a colour */
.st-soonvote-row { display: flex; flex-wrap: wrap; gap: 16px; }
.st-soonvote-btn { min-height: 44px; min-width: 132px; padding: 0 20px; font-size: 14px; border: 2px solid transparent; background: var(--st-ctl); color: var(--st-text); }
.st-soonvote-btn.on { border-color: var(--st-strong); }
.st-soonvote-btn.on::before { content: "\2713\00a0"; }
.st-soonvote-btn.yes.on { background: linear-gradient(90deg, var(--st-green-hi), var(--st-green)); color: var(--st-on); }
.st-soonvote-btn.no.on { background: var(--st-ctl-hi); color: var(--st-strong); }
.st-soonvote-line { min-height: 2.7em; }
/* a header picture is always dark at the bottom, so the title over it is always light, in the light theme too */
.st-hero-img .st-hero-txt h2 { color: #fff; }
.st-hero-img .st-hero-txt small { color: rgba(255,255,255,.9); }
.st-hero-img::after { background: linear-gradient(transparent 45%, rgba(23,29,37,.85)); }

/* A placeholder game (PH1.1): "Not built yet" and one "I want this" button. The picture and name open the page; the
   real button sits under them (a button cannot hold a button, so the tile is a div). The bar after a vote is three
   cells, the lit ones gold, with the words beside it - never colour alone (everyone-can-use-it.md) and never the number. */
.st-tile .mk.placeholder, .st-pg-price.mk.placeholder { border: 1px dashed var(--st-gold); color: var(--st-gold-text); }
/* overflow visible: a tile that hides overflow is a scroll box, and at phone width the list has a fixed height, so the
   grid shrank the lower placeholders' rows to 2 px (their want zones vanished). Visible, the tile keeps its content height. */
.st-tile.st-placeholder { height: auto; display: flex; flex-direction: column; overflow: visible; }
.st-tile.st-placeholder:hover { transform: none; filter: none; }
.st-ph-open { position: relative; flex: none; height: 132px; cursor: pointer; }
.st-ph-open:hover { filter: brightness(1.12); }
.st-ph-open:focus-visible { outline: 2px solid var(--st-blue); outline-offset: -2px; }
.st-want-zone { padding: 8px 10px 10px; background: var(--st-deep); border-radius: 0 0 4px 4px; }   /* the tile's own 4 px corners */
.st-want { width: 100%; min-height: 44px; padding: 6px 10px; border: 2px solid transparent; border-radius: 4px; background: var(--st-ctl); color: var(--st-text); font: inherit; font-size: 14px; line-height: 1.25; cursor: pointer; }
.st-want:hover { background: var(--st-ctl-hi); }
.st-want:disabled { opacity: .6; cursor: default; }
.st-want.on { border-color: var(--st-strong); }
.st-want.on::before { content: "\2713\a0"; }
.st-want-soon { margin: 0 0 6px; color: var(--st-soft); font-size: 12px; line-height: 1.3; }   /* "Coming soon: not playable yet" above the interest button (STORE-MUJAFFA) */
.st-want-sends { display: block; margin-top: 4px; color: var(--st-muted); font-size: 11px; line-height: 1.3; }
.st-want-status { min-height: 1.4em; margin-top: 4px; color: var(--st-soft); font-size: 12px; line-height: 1.3; }
.st-want-bar-row { display: flex; align-items: center; gap: 8px; }
.st-want-bar { display: inline-flex; gap: 3px; flex: none; }
.st-want-bar i { width: 18px; height: 8px; border-radius: 2px; background: var(--st-ctl-hi); }
.st-want-bar i.on { background: var(--st-gold); }
.st-pg-side .st-want-box { margin: 10px 0; }
@media (max-width: 320px) { .st-tile.st-placeholder .st-ph-open { height: 52px; } }

/* ---- Directories (SD-1, js/store-directories.js) ---- */
.dirs-row.off b, .dirs-row.dim b { opacity: .65; }           /* not added, or hidden for now: still readable */
.dirs-row.off, .dirs-row.dim { opacity: .9; }
.dirs-level { color: var(--st-muted); }
.dirs-sec .mk-row { margin-top: 10px; }
.dirs-takeback { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; outline: 2px solid var(--st-blue); }
.dirs-takeback span { flex: 1 1 14em; }
.dirs-held { margin-top: 14px; }
/* the compact view (STORE-SOURCES-1): one line per directory, round symbol buttons that stay on that line at every width */
.dirs-row { padding: 4px 0; gap: 8px; flex-wrap: nowrap; }
.dirs-row > i { font-size: 20px; width: 26px; text-align: center; }
.dirs-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dirs-row .mk-acts { flex: none; width: auto; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
.dirs-sym { width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.dirs-sym svg { width: 20px; height: 20px; }
.dirs-sym[aria-pressed="false"] { opacity: .7; }
.dirs-lock { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--st-muted); font-style: normal; }
.dirs-lock svg { width: 14px; height: 14px; }
.dirs-sec { padding-top: 8px; padding-bottom: 8px; }
.dirs-sec h3 { margin: 0 0 4px; }
@media (max-width: 600px) {
  .dirs-row .mk-acts { width: auto; }
  .dirs-row small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* two lines on a phone rather than a cut-off one */
}

/* ---- the splash of an entry that opens (js/store-splash.js, STORE-ART-1): its own picture for a moment, every press goes through ---- */
.ss {
  position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 12px;
  background: rgba(5, 7, 13, .78); opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
html[data-theme="light"] .ss { background: rgba(230, 236, 245, .82); }
.ss * { pointer-events: none; }
.ss.in { opacity: 1; }
.ss[data-still] { transition: none; }
html[data-motion="reduce"] .ss { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .ss { transition: none; } }
.ss-pic { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius, 12px); box-shadow: 0 18px 60px rgba(0,0,0,.5); }

/* ---- "Discover more" on an entry's page (js/store-discover.js, js/library.js discoverBox) ---- */
.st-discover { margin: 14px 0 6px; }
.st-discover-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; }
.st-discover-btn svg { width: 22px; height: 22px; flex: none; }
.st-discover-shelf { margin-top: 10px; }
.st-discover-all { margin-top: 10px; min-height: 44px; }
/* OSP-3: moving a tile in the Library (= the Earth's apps tray): a thin amber line shows the slot it lands in */
.st-tiles { position: relative; }
.st-slot { position: absolute; width: 3px; border-radius: 2px; background: var(--st-amber, #e0a030); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-amber, #e0a030) 40%, transparent); pointer-events: none; z-index: 5; }
.st-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }