/* binder: paper, ink, card gold, one purple for want, one coral for pass. cards tilt, badges are stickers. */
:root { --paper: #FFFDF7; --ink: #1B1A17; --gold: #F4D35E; --want: #7C5CFF; --pass: #FF5A5F; --own: #22C55E; --own-dark: #166534; --line: #ECE8DF; --muted: #6F6C64; --faint: #9A968C; --card: #FFFFFF; --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; --disp: "Sora", "DM Sans", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
.d { font-family: var(--disp); letter-spacing: -0.02em; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; } .pad { padding: 0 20px; } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gap { gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
.app { height: 100%; height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; position: relative; }
.top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--safe-t)) 20px 8px; flex: none; }
.brand { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.mark { display: inline-block; width: 18px; height: 24px; border-radius: 4px; background: var(--ink); transform: rotate(-12deg); box-shadow: 3px 0 0 var(--want); }
.top-right { display: flex; align-items: center; gap: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(27,26,23,.12); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 13px; white-space: nowrap; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips { display: flex; flex: none; gap: 8px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view.scroll { overflow-y: auto; padding-bottom: 24px; }
.vhead { padding: 6px 20px 12px; } .vhead h1 { margin: 0; font-size: 30px; font-weight: 800; } .vhead h1 .muted { font-size: 17px; font-weight: 600; } .vhead p { margin: 4px 0 0; font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(27,26,23,.06); }
.pad-card { padding: 16px; margin: 0 20px 12px; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .eyebrow.pad { margin: 6px 20px 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 16px; font-family: var(--disp); font-weight: 700; font-size: 16px; border: 1.5px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn.wide { width: 100%; } .btn.sm { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 12px; } .btn.danger { color: #C8102E; }
.link { color: var(--muted); font-weight: 600; }
.toast { pointer-events: none; position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; z-index: 20; }

/* onboarding */
.progress { display: flex; gap: 6px; padding: 4px 20px 0; } .progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .progress i.on { background: var(--ink); }
.ob-body { padding: 24px 20px 0; flex: 1; overflow-y: auto; } .ob-body h2 { margin: 0; font-size: 32px; line-height: 1.05; font-weight: 800; } .ob-body .lede { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.picks { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .picks.one { grid-template-columns: 1fr; }
.pick { text-align: left; padding: 14px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); } .pick.on { border-color: var(--ink); } .pick b { display: block; font-family: var(--disp); font-size: 17px; font-weight: 800; } .pick span { font-size: 13px; color: var(--muted); }
.ob-foot { padding: 12px 20px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }

/* the stack */
.stack-meta { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .stack-meta b { color: var(--ink); }
.stack { overflow: hidden; position: relative; flex: 1; margin: 10px 12px 0; min-height: 0; touch-action: none; }
/* the card is centred in whatever room it has, and sized to fit both dimensions rather than only the width */
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; will-change: transform; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s; }
.sc.front { transition: none; } .sc.front.settle { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s; }
/* the width is computed against both axes in js, because css cannot fit a ratio to a box on both at once
   without either distorting or collapsing. with the width fixed, aspect-ratio gives an exact height. */
.sc .img { position: relative; width: var(--cardw, 100%); height: auto; max-width: 100%; aspect-ratio: 240 / 330; flex: none; border-radius: 16px; background: linear-gradient(160deg, #FFF3C4, #F4D35E); overflow: hidden; box-shadow: 0 18px 40px rgba(27,26,23,.14); }
/* the scan fills the box exactly, so nothing of the placeholder frames the card once it is in */
.sc .img.loaded { background: transparent; }
/* the two image hosts ship slightly different ratios (240x330 and 245x342), so 'contain' would band one of
   them whatever frame we pick. 'cover' trims about a percent of the card's own edge and never bands. the zoom
   shows the whole scan at its true ratio. */
.sc .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .sc .img img.large { opacity: 0; transition: opacity .35s; } .sc .img img.large.in { opacity: 1; }
.sc .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; opacity: 1; pointer-events: none; } .sc .img.loaded::after { opacity: 0; transition: opacity .3s; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sc, .sc.front.settle { transition: none; } .sc .img::after { animation: none; } }
.sc.front .img { box-shadow: 0 24px 50px rgba(27,26,23,.18); }
.sc.back1 { transform: translateY(8px) scale(.96) rotate(-2deg); opacity: .85; } .sc.back2 { transform: translateY(16px) scale(.92) rotate(3deg); opacity: .6; }
.sc.back1 .meta, .sc.back2 .meta, .sc.back1 .stamp, .sc.back2 .stamp { visibility: hidden; }
.stamp { position: absolute; top: 24px; padding: 4px 12px; border: 4px solid; border-radius: 10px; font-family: var(--disp); font-weight: 800; font-size: 28px; letter-spacing: .06em; background: rgba(255,253,247,.92); opacity: 0; transform: rotate(-14deg); }
.stamp.want { left: 16px; color: var(--want); border-color: var(--want); } .stamp.pass { right: 16px; color: var(--pass); border-color: var(--pass); transform: rotate(14deg); } .stamp.own { left: 50%; top: 40%; transform: translateX(-50%) rotate(-6deg); color: var(--own-dark); border-color: var(--own); }
.zoom { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(27,26,23,.5); color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0; }
.sc.back1 .zoom, .sc.back2 .zoom { display: none; }
.zoomer { position: absolute; inset: 0; z-index: 40; background: rgba(20,19,17,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b)); }
.zoomer img { max-width: 100%; max-height: 72%; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.zoom-meta { color: var(--paper); font-family: var(--disp); font-weight: 800; font-size: 17px; text-align: center; }
.zoom-meta span { display: block; font-family: var(--sans); font-weight: 500; font-size: 13px; opacity: .72; margin-top: 3px; }
.zoom-close { position: absolute; top: calc(14px + var(--safe-t)); right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,253,247,.16); color: var(--paper); font-size: 17px; padding: 0; }
.tapchip { cursor: pointer; }
.counts .card { cursor: pointer; }
.sc .meta { width: var(--cardw, 100%); max-width: 100%; margin-top: 10px; padding: 0 2px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .sc .meta .n { font-family: var(--disp); font-size: 16px; font-weight: 800; } .sc .meta .s { font-size: 12px; color: var(--muted); } .sc .meta .p { font-family: var(--mono); font-size: 16px; font-weight: 600; text-align: right; } .sc .meta .p small { display: block; font-size: 11px; color: var(--faint); }
.why { margin: 10px 20px 0; padding: 0 14px; height: 38px; box-sizing: border-box; border-radius: 14px; background: #F6F3FF; color: #4C3BB5; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; flex: none; } .why span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .why.hush { visibility: hidden; } .why::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--want); flex: none; }
.actions { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 14px 0 10px; flex: none; }
.act { width: 58px; height: 58px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: var(--muted); box-shadow: 0 4px 12px rgba(27,26,23,.08); }
.act.small-act { width: 46px; height: 46px; font-size: 18px; } .act.pass { border-color: var(--pass); color: var(--pass); } .act.own { width: 46px; height: 46px; font-size: 18px; border-color: var(--own); color: var(--own-dark); } .act.want { background: var(--want); color: #fff; border-color: var(--want); box-shadow: 0 8px 20px rgba(124,92,255,.35); }
.act:active { transform: scale(.94); }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px; color: var(--muted); }

/* the want list */
.list { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.wrow { display: flex; gap: 12px; align-items: center; padding: 12px; } .wrow.first { border: 2px solid var(--ink); }
.thumb { position: relative; width: 56px; height: 78px; border-radius: 6px; background: #FFF3C4; flex: none; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.rank { position: absolute; left: -6px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--card); }
.wrow .mid { flex: 1; min-width: 0; } .wrow .n { font-family: var(--disp); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wrow .s { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sticker { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-family: var(--disp); font-weight: 700; font-size: 9px; letter-spacing: .02em; text-transform: uppercase; background: var(--ink); color: var(--paper); transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(27,26,23,.15); }
.bar { height: 8px; border-radius: 4px; background: #F1EEE6; overflow: hidden; width: 120px; margin-top: 6px; } .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--want), #38D3C6); }
.wrow .right { text-align: right; flex: none; } .wrow .price { font-family: var(--mono); font-size: 15px; font-weight: 600; } .wrow .trend { font-family: var(--mono); font-size: 11px; color: var(--faint); } .wrow .buy { display: block; font-size: 12px; font-weight: 700; color: var(--want); margin-top: 4px; text-decoration: none; } .wrow .drop { font-size: 11px; color: var(--faint); background: none; margin-top: 2px; }

/* sets */
.setgrid { padding: 12px 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set { text-align: left; padding: 10px; display: flex; flex-direction: column; gap: 5px; } .set .thumbs { display: flex; gap: 4px; height: 48px; } .set .thumbs img { width: 34px; height: 48px; border-radius: 4px; object-fit: cover; background: #FFF3C4; } .set .thumbs img:first-child { transform: rotate(-6deg); } .set .thumbs img:nth-child(2) { transform: rotate(4deg); }
.set .thumbs img.sym, .set .thumbs .sym { width: 48px; height: 48px; transform: none; border-radius: 0; background: none; object-fit: contain; }
.set .thumbs .sym.blank { display: block; border-radius: 6px; background: var(--line); opacity: .5; }
#b-logo { height: 44px; width: auto; max-width: 180px; object-fit: contain; flex: none; }
.set .n { font-family: var(--disp); font-size: 15px; font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: 6px; }
.set .n .sym { width: 17px; height: 17px; flex: none; object-fit: contain; } .set .s { font-size: 12px; color: var(--muted); } .set .bar { width: 100%; margin-top: 2px; } .set .bar i { background: var(--own); } .set .c { font-size: 12px; } .set .c b.w { color: var(--want); }
.closest { margin: 10px 20px 0; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .closest .t { font-family: var(--disp); font-size: 15px; font-weight: 800; } .closest .s { font-size: 12px; opacity: .8; } .closest .btn { height: 38px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 0; font-size: 13px; }

/* profile */
.me-head { display: flex; gap: 14px; align-items: center; padding: 6px 20px 16px; } .me-head .avatar { width: 64px; height: 64px; border: 3px solid #fff; } .me-name { font-size: 24px; font-weight: 800; }
.taste { font-size: 20px; font-weight: 800; line-height: 1.2; margin: 8px 0; } .pad-card .chips { padding: 0; flex-wrap: wrap; margin-top: 4px; }
.counts { padding: 0 20px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .counts .card { padding: 12px; } .counts .mono { font-size: 22px; font-weight: 600; } .counts .muted { font-size: 12px; }
.share-row { display: flex; gap: 12px; align-items: center; } .share-row img { width: 84px; border-radius: 10px; display: block; flex: none; } .share-copy { flex: 1; } .share-copy .d { font-size: 16px; font-weight: 800; } .share-copy .row { margin-top: 8px; }
.settings label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; } .settings input { height: 44px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); font-size: 15px; width: 100%; outline: 0; } .settings input:focus { border-color: var(--ink); }
.settings .pct { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding-left: 12px; } .settings .pct input { border: 0; padding-left: 4px; } .settings .pct span { font-family: var(--mono); color: var(--muted); }
.settings p { margin: 10px 0 0; }

/* tabs */
.tabs { flex: none; display: flex; justify-content: space-between; padding: 10px 24px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--card); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--faint); } .tab.on { color: var(--ink); }
.ico { width: 24px; height: 24px; border-radius: 7px; border: 2.5px solid currentColor; } .stack-ico { transform: rotate(-8deg); } .want-ico { border-radius: 50%; } .sets-ico { border-radius: 6px; box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 6px currentColor; } .me-ico { border-radius: 50%; background: currentColor; opacity: .85; }
@media (min-width: 521px) { .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* the gate */
/* the landing: a real card above the fold, one button, nothing to read before the product is visible */
.land { justify-content: space-between; }
.land-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 20px 0; text-align: center; }
.fan { position: relative; width: 100%; max-width: 340px; height: 300px; flex: none; }
.fc { position: absolute; width: 176px; border-radius: 10px; background: #fff; box-shadow: 0 18px 40px rgba(27,26,23,.20); top: 6px; }
.fc1 { left: 4px; transform: rotate(-11deg) scale(.92); }
.fc2 { right: 4px; transform: rotate(9deg) scale(.92); }
.fc3 { left: 50%; margin-left: -88px; transform: rotate(-2deg); z-index: 2; }
.fan-stamp { position: absolute; z-index: 3; left: 50%; top: 84px; margin-left: -74px; transform: rotate(-13deg); font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: .06em; color: var(--want); border: 4px solid var(--want); border-radius: 10px; padding: 3px 12px; background: rgba(255,253,247,.74); }
.land h1 { margin: 22px 0 0; font-family: var(--disp); font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.land .lede { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); max-width: 330px; }
.land-foot { padding: 14px 20px calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.proof { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; color: var(--faint); }
.proof i { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); display: block; }
@media (max-height: 720px) {
  .fan { height: 232px; max-width: 300px; } .fc { width: 140px; } .fc3 { margin-left: -70px; }
  .fan-stamp { font-size: 21px; top: 62px; margin-left: -60px; }
  .land h1 { font-size: 28px; margin-top: 16px; } .land .lede { font-size: 14px; margin-top: 9px; }
}
.install { justify-content: space-between; }
.install-body { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.bigmark { display: flex; justify-content: center; padding: 6px 0 4px; }
.mark.big { width: 54px; height: 72px; border-radius: 10px; box-shadow: 8px 0 0 var(--want), 16px 0 0 #38D3C6; margin-right: 16px; }
.install h2 { margin: 0; font-size: 30px; line-height: 1.08; font-weight: 800; text-align: center; }
.uses { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.use { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); } .use b { display: block; font-family: var(--disp); font-size: 14px; font-weight: 800; line-height: 1.25; } .use span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.use-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 2px; } .use-ico.want-ico { background: var(--want); border: 0; border-radius: 8px; } .use-ico.gold-ico { background: var(--gold); } .use-ico.own-ico { background: var(--own); }
.how-head { margin-top: 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; }
.install .lede { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--muted); }
.how { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--line); font-size: 15px; line-height: 1.4; }
/* a phone with two browser toolbars leaves about 600px: shrink the pitch so the three steps that are the
   point of this screen are visible without scrolling for them. */
@media (max-height: 720px) {
  .install .bigmark { padding: 0; }
  .install .mark.big { width: 38px; height: 50px; box-shadow: 6px 0 0 var(--want), 12px 0 0 #38D3C6; margin-right: 12px; }
  .install h2 { font-size: 23px; }
  .install .lede { font-size: 13px; line-height: 1.45; }
  .install-body { gap: 7px; padding-top: 6px; }
  .uses { gap: 6px; margin-top: 2px; }
  .use { padding: 8px 11px; gap: 10px; } .use b { font-size: 13px; } .use span { font-size: 12px; }
  .use-ico { width: 20px; height: 20px; border-radius: 6px; }
  .how-head { margin-top: 6px; font-size: 12px; }
  .how { margin-top: 4px; gap: 6px; }
  .step { padding: 10px 12px; font-size: 14px; }
  .ob-foot { padding: 8px 20px calc(12px + var(--safe-b)); }
}
.step .num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--disp); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.step .share-svg { width: 26px; height: 26px; flex: none; margin-left: auto; color: var(--want); }
.ob-body .handle { margin-top: 20px; } .ob-body .handle input { width: 100%; height: 56px; border: 2px solid var(--line); border-radius: 16px; padding: 0 16px 0 40px; font-family: var(--disp); font-weight: 700; font-size: 20px; background: var(--card); outline: 0; } .ob-body .handle { position: relative; } .ob-body .handle .at { position: absolute; left: 16px; top: 15px; font-family: var(--disp); font-weight: 800; font-size: 20px; color: var(--faint); } .ob-body .handle input:focus { border-color: var(--ink); }
.ob-body .hint { margin-top: 10px; font-size: 13px; color: var(--muted); } .ob-body .hint.bad { color: #C8102E; }

/* want list tools */
.wt-tools { display: flex; gap: 8px; padding: 0 20px 10px; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); } .search svg { width: 18px; height: 18px; color: var(--faint); flex: none; } .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
#wt-sort { height: 40px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 10px; font-size: 13px; font-weight: 600; max-width: 150px; }
.chips.types { margin-top: 8px; } .chips.types .chip { height: 30px; font-size: 12px; padding: 0 10px; }
.group { padding: 14px 4px 4px; font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; } .group span { font-family: var(--mono); font-weight: 500; font-size: 12px; }
.wrow .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: 4px; } .wrow .acts button { font-size: 11px; color: var(--faint); } .wrow .acts .got { color: var(--own-dark); font-weight: 700; }
/* the stack: the small image shows at once, the large one replaces it when it has loaded */


/* the account card */
.account .claim { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .account .claim .row { gap: 8px; } .account .claim input { flex: 1; height: 40px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; font-family: var(--disp); font-weight: 700; background: var(--card); outline: 0; } .account .claim .ok { color: var(--own-dark); font-weight: 600; font-size: 13px; } .account .claim .bad { color: #C8102E; font-weight: 600; font-size: 13px; }
/* the arrow to safari's share button */
.arrow { text-align: center; font-family: var(--disp); font-size: 34px; font-weight: 800; color: var(--want); line-height: 1; margin-top: 6px; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .arrow { animation: none; } }

/* the scope chip and the sheet */
.scope-chip { height: 30px; font-size: 12px; } .scope-chip .x { opacity: .7; margin-left: 2px; }
.sheet { position: absolute; inset: 0; background: rgba(27,26,23,.45); display: flex; align-items: flex-end; z-index: 30; }
.sheet-card { width: 100%; background: var(--card); border-radius: 22px 22px 0 0; padding: 20px 20px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -10px 30px rgba(27,26,23,.15); }
.sheet-t { font-size: 20px; font-weight: 800; } .sheet-card p { margin: 0 0 10px; }
@media (prefers-reduced-motion: no-preference) { .sheet-card { animation: rise .22s cubic-bezier(.2,.8,.2,1); } @keyframes rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } } }

/* the public switch and the link */
.settings .switch { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); } .settings .switch small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.settings .switch input { width: 44px; height: 26px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--line); position: relative; margin: 0; flex: none; cursor: pointer; } .settings .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; } .settings .switch input:checked { background: var(--own); } .settings .switch input:checked::after { left: 21px; }
.linkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 12px; font-size: 12px; } .linkrow .mono { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#acct-gsi { min-height: 0; margin-bottom: 4px; }

/* today's stack, done */
.empty.done { gap: 10px; } .big-done { font-size: 26px; font-weight: 800; color: var(--ink); }
/* the header's search button */
.top-right { display: flex; align-items: center; gap: 8px; }
.iconbtn { width: 36px; height: 36px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.iconbtn svg { width: 18px; height: 18px; }

/* search: a row is the card, its set, its price, and the two things you can say about it */
.srow { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.srow .mid { flex: 1; min-width: 0; }
.srow .n { font-family: var(--disp); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .s { font-size: 12px; color: var(--muted); }
.srow .right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.srow .price { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.srow .sacts { display: flex; gap: 6px; }
.sbtn { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font-size: 14px; font-weight: 800; color: var(--muted); padding: 0; }
.sbtn.want { border-color: var(--want); color: var(--want); }
.sbtn.own { border-color: var(--own); color: var(--own-dark); }
.sbtn.on { background: var(--want); border-color: var(--want); color: #fff; }
.sbtn.own.on { background: var(--own); border-color: var(--own); color: #fff; }
.state { font-size: 11px; font-weight: 700; color: var(--muted); }

/* the set, opened: a header, then the pages */
.bhead { padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.bhead .brow { display: flex; gap: 12px; align-items: center; }
.bhead img { width: 64px; height: 34px; object-fit: contain; flex: none; }
.bhead h1 { font-size: 22px; margin: 0; }
.bar.big { width: 100%; height: 10px; margin: 0; }
.binder { display: flex; flex-direction: column; gap: 18px; padding: 0 20px 20px; }
.bslot { position: relative; aspect-ratio: 240 / 330; border-radius: 8px; overflow: hidden; background: #F1EEE6; border: 0; padding: 0; }
.bslot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a set you have not swiped is still a set you came to look at: unseen stays legible, passed is the one that fades */
.bslot.unseen img { opacity: .78; }
.bslot.pass img { opacity: .34; filter: grayscale(1); }
.bslot.own { box-shadow: inset 0 0 0 3px var(--own); }
.bslot.want { box-shadow: inset 0 0 0 3px var(--want); }
.bslot .dot { position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; box-shadow: 0 0 0 2px rgba(255,253,247,.85); }
.bslot.own .dot { background: var(--own); }
.bslot.want .dot { background: var(--want); }
.bslot.pass .dot { background: var(--faint); }
.bslot .no { position: absolute; left: 4px; bottom: 4px; font-family: var(--mono); font-size: 9px; color: #fff; background: rgba(27,26,23,.6); border-radius: 4px; padding: 1px 4px; }
/* pages of nine, the unit a collector can actually finish */
.bpage { display: flex; flex-direction: column; gap: 7px; }
.bpage-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.bpage-head b { font-family: var(--disp); font-size: 14px; font-weight: 800; }
.bpage-head .mono { font-family: var(--mono); color: var(--muted); }
.bwant { color: var(--want); font-weight: 600; }
.bdone { color: var(--own-dark); font-weight: 700; }
.bpage-bar { height: 5px; border-radius: 3px; background: #F1EEE6; overflow: hidden; }
.bpage-bar i { display: block; height: 100%; background: var(--own); border-radius: 3px; }
.bpage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* the zoom, when it can also act */
.zoom-acts { display: flex; gap: 10px; }
.zoom-acts button { height: 46px; padding: 0 18px; border-radius: 14px; border: 2px solid rgba(255,253,247,.3); background: transparent; color: var(--paper); font-family: var(--disp); font-weight: 800; font-size: 14px; }
.zoom-acts button.want { background: var(--want); border-color: var(--want); }
.zoom-acts button.own { background: var(--own); border-color: var(--own); }
.zoom-acts button.on { outline: 3px solid rgba(255,253,247,.5); }

/* the want list arrives a page at a time */
.wt-more { padding: 14px 0 4px; text-align: center; }

/* what is on screen, and what it would cost */
.wt-total { padding: 6px 20px 2px; font-size: 13px; color: var(--muted); }
.wt-total b { color: var(--ink); font-weight: 700; }
.chip.clear { border-style: dashed; color: var(--muted); }


/* a short screen gives the card its room back by spending less on everything else */
@media (max-height: 720px) {
  .stack { margin-top: 6px; }
  .actions { gap: 14px; padding: 8px 0 6px; }
  .act { width: 50px; height: 50px; font-size: 21px; }
  .act.small-act, .act.own { width: 40px; height: 40px; font-size: 16px; }
  .sc .meta { margin-top: 6px; }
  .sc .meta .n { font-size: 15px; }
  .tabs { padding: 7px 24px calc(9px + var(--safe-b)); }
}

/* what your list did while you were away: the return for the swiping */
.wt-moved { margin: 8px 20px 0; padding: 12px 14px; border-radius: 14px; background: var(--own-tint, #E3F8EA); color: var(--own-dark); font-size: 14px; }
.wt-moved b { font-weight: 700; }
.wt-moved .mv-best { display: block; font-size: 13px; opacity: .8; margin-top: 3px; }
.wrow .trend.down { color: var(--own-dark); font-weight: 700; }
.wrow .trend.up { color: var(--pass); font-weight: 700; }

/* buy the list: the want list stops being homework */
.wt-buy { display: block; width: calc(100% - 40px); margin: 10px 20px 0; padding: 13px 16px; border: 0; border-radius: 16px;
  background: var(--ink); color: var(--paper); font-family: var(--disp); font-weight: 700; font-size: 15px; text-align: center; }
.wt-buy b { font-weight: 800; }
.wt-buy span { display: block; font-family: var(--sans); font-weight: 500; font-size: 12px; opacity: .65; margin-top: 2px; }

/* the update bar: the worker found new code on the server, so say so once and offer the reload */
.newver { position: fixed; left: 12px; right: 12px; top: calc(10px + var(--safe-t)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(27,26,23,.28); font-size: 14px; font-weight: 600; }
.newver .btn { background: #fff; color: var(--ink); border-color: #fff; }
@media (min-width: 640px) { .newver { left: auto; right: 20px; width: 320px; } }

/* the beta block in Me: says what this is, and gives one way to answer back */
.beta-block { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }

/* two shops on a want row: the exact card on tcgplayer, and the one that pays us on ebay */
.wrow .buy.alt { margin-top: 6px; background: transparent; color: var(--muted); border-color: var(--line); }
.wrow .buy.alt:hover { color: var(--ink); }

/* the tune prompt: the update bar's look, centred, over the header so it never covers the swipe buttons */
.tunebar { position: fixed; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 40; width: min(560px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(27,26,23,.28); font-size: 14px; font-weight: 600; }
.tunebar .tb-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.tunebar .btn { background: #fff; color: var(--ink); border-color: #fff; }
.tunebar .link { color: rgba(255,255,255,.75); }
.prefs .prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ob-cancel { display: block; margin: 10px auto 0; }