/* BidStar demo (prompt 23): sample bids, no script. Steps switch by page link (:target). */
@font-face{font-family:"BS Middot";src:local("Arial"),local("Helvetica"),local("Roboto"),local("DejaVu Sans");unicode-range:U+00B7}
@font-face{font-family:"Overpass";src:url(/fonts/overpass-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Overpass";src:url(/fonts/overpass-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Overpass";src:url(/fonts/overpass-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Overpass";src:url(/fonts/overpass-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Overpass";src:url(/fonts/overpass-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url(/fonts/overpass-mono-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#EDEFED;--surface:#FFFFFF;--sunken:#E4E7E5;--ink:#17191B;--muted:#565D61;--line:#D3D8D5;
  --band:#17191B;--on-band:#FFFFFF;--band-muted:#B4BABD;
  --accent:#C21858;--accent-hover:#A3124A;--on-accent:#FFFFFF;--focus:#C21858;--flag:#FF4589;
  --open-ink:#17693B;--open-bg:#E1F2E6;--soon-ink:#7A4A00;--soon-bg:#FFEFCC;--soon-line:#E3A21A;
  --font:"BS Middot","Overpass",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Overpass Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#111314;--surface:#1B1E20;--sunken:#232729;--ink:#ECEEEE;--muted:#A3AAAD;--line:#2E3336;
  --band:#1B1E20;--on-band:#FFFFFF;--band-muted:#A3AAAD;
  --accent:#FF6FA3;--accent-hover:#FF8DB7;--on-accent:#17191B;--focus:#FF6FA3;
  --open-ink:#86D9A6;--open-bg:#10301E;--soon-ink:#FFC45C;--soon-bg:#36270A;--soon-line:#B07A12}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#111314;--surface:#1B1E20;--sunken:#232729;--ink:#ECEEEE;--muted:#A3AAAD;--line:#2E3336;
  --band:#1B1E20;--on-band:#FFFFFF;--band-muted:#A3AAAD;
  --accent:#FF6FA3;--accent-hover:#FF8DB7;--on-accent:#17191B;--focus:#FF6FA3;
  --open-ink:#86D9A6;--open-bg:#10301E;--soon-ink:#FFC45C;--soon-bg:#36270A;--soon-line:#B07A12}
@media (min-width:768px){:root{--gut:32px}}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
main{flex:1}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1040px;margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.icon{width:20px;height:20px;flex:none;fill:none}
.label{font:800 12px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* Top: the lockup, what this page is, and the sample line (on every step) */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px 6px}
.lockup{display:block;width:139px;height:26px;color:var(--ink)}
.intro{display:grid;gap:4px;padding-block:6px 20px}
.sample{font-size:14px;color:var(--muted)}

/* One step at a time. Step 1 shows with no hash; every swap lands at the top of the page. */
.step{display:none;scroll-margin-top:100vh}
/* Separate rules: a browser without :has() drops only the last one and still shows a step, never a blank page. */
#trade{display:grid}
.step:target{display:grid}
body:has(.step:target) #trade:not(:target){display:none}
.step{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;padding-bottom:40px}
@media (min-width:768px){.step{grid-template-columns:minmax(0,1fr) 390px;gap:56px}}

/* The guide: where to tap */
.guide{display:grid;gap:10px;align-content:start}
.guide h2{font:900 clamp(1.625rem,1.2rem + 1.8vw,2.5rem)/1.08 var(--font);letter-spacing:-.03em;text-wrap:balance}
.guide p{color:var(--muted);max-width:44ch}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-top:6px}
.next{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;border:2px solid var(--accent);border-radius:10px;font-weight:800;text-decoration:none}
.next:hover{background:var(--sunken)}
.back{font-size:15px;color:var(--muted)}
@media (min-width:768px){.guide{position:sticky;top:24px;padding-top:24px}}

/* The phone: the page itself at phone width, a frame on wide screens */
.phone{display:grid;gap:12px;min-width:0}
@media (min-width:768px){.phone{border:1px solid var(--line);border-radius:28px;padding:18px 14px 22px;background:var(--bg);box-shadow:0 24px 48px -28px rgba(23,25,27,.35)}}
.appbar{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 2px 6px;border-bottom:1px solid var(--line)}
.appbar b{font:900 17px/1.2 var(--font);letter-spacing:-.01em}
.appbar span{font-size:13.5px;color:var(--muted)}
.count{font:800 15px/1.35 var(--font)}
.sort,.fitline{font-size:13.5px;color:var(--muted);line-height:1.4}

/* Step 1: pick a trade */
.pick{display:grid;gap:14px;padding:18px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.pick h3{font:800 20px/1.25 var(--font)}
.trade{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 16px;border:2px solid var(--accent);border-radius:10px;font:800 18px/1.1 var(--font);text-decoration:none}
.trade:hover{background:var(--sunken)}
.trade .icon{width:24px;height:24px}
.shop{font-size:14.5px;color:var(--muted)}

/* The bid card: the landing's card, the same component as the app */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 14px 6px;display:grid;gap:10px}
.card h3{font:800 18px/1.25 var(--font)}
.who{font-size:14.5px;color:var(--muted);line-height:1.35}
.dist{font:600 13.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.mid{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tags{display:inline-flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 3px 6px;border-radius:6px;background:var(--sunken);font:700 12.5px/1.2 var(--font)}
.tag .icon{width:15px;height:15px}
.fit{display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1 var(--font);white-space:nowrap}
.dots{display:inline-flex;gap:2px}
.dots i{width:7px;height:10px;border-radius:2px;background:var(--line)}
.dots i.on{background:var(--ink)}
.moved{display:flex;gap:6px;align-items:flex-start;font-size:14px;font-weight:700;color:var(--soon-ink)}
.moved .icon{width:16px;height:16px;margin-top:1px}
.made-up{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--muted)}
.made-up .icon{width:15px;height:15px}
.foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:4px}
.notice{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700;font-size:15px}
.notice .icon{width:16px;height:16px}
.flagbtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font:700 15px/1 var(--font);text-decoration:none;color:var(--ink)}
.flagbtn .icon{width:22px;height:22px}
/* The one Watch the guide asks for: the page's action color, so it's easy to find */
a.flagbtn{border:2px solid var(--accent)}
a.flagbtn:hover{background:var(--sunken)}
.flagbtn.on .icon{fill:currentColor}
.chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;padding:5px 9px 4px;border-radius:6px;font:600 13.5px/1.25 var(--mono);border:1px solid transparent;font-variant-numeric:tabular-nums;justify-self:start}
.chip b{font:800 11px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;padding-top:1px}
.chip .icon{width:15px;height:15px}
.chip.open{background:var(--open-bg);color:var(--open-ink)}
.chip.soon{background:var(--soon-bg);color:var(--soon-ink);border-color:var(--soon-line)}
.slot{border:1.5px dashed currentColor;border-radius:4px;padding:0 5px;letter-spacing:.08em;opacity:.85}
.notime{font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:-4px}.toast{position:sticky;bottom:16px;padding:12px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font:700 15px/1.35 var(--font);box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}

/* The fold: bids that don't fit sit one tap away */
.fold{border-top:1px solid var(--line);padding-top:4px}
.fold>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font:700 15px/1.3 var(--font);list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.fold[open]>summary::before{transform:rotate(45deg)}
.fold .card{margin-top:8px}

/* The sample email */
.mail{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#FFFFFF;color:#17191B}
.mailhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:#17191B;color:#C9CDCF;font:600 13px/1.2 var(--font)}
.maillogo{display:block;width:104px;height:20px;color:#FFFFFF}
.mailbody{display:grid;gap:14px;padding:18px 16px 20px}
.mailbody h3{font:900 23px/1.15 var(--font);letter-spacing:-.02em}
.mailbody .reach{font-size:15px;color:#565D61;margin-top:-8px}
.group{font:700 12px/1.3 var(--font);letter-spacing:1px;text-transform:uppercase;color:#565D61}
.row{display:grid;gap:6px;padding:12px 14px;border:1px solid #D3D8D5;border-radius:10px}
.row .chip{font-size:13px}
.row .chip.soon{background:#FFEFCC;color:#7A4A00;border-color:#E3A21A}
.row .chip.open{background:#E1F2E6;color:#17693B}
.row h4{margin:0;font:800 17px/1.3 var(--font);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#D3D8D5}
.row .who{color:#565D61}
.row .dist{color:#565D61}
.row .moved{color:#7A4A00}
.row .made-up{color:#565D61}
.rowfit{font:700 14px/1.4 var(--font)}
.cta{display:flex;align-items:center;justify-content:center;min-height:52px;padding:14px 22px 12px;border-radius:10px;background:#17191B;color:#FFFFFF;font:800 16px/1.1 var(--font);text-decoration:none}
.cta:hover{opacity:.88}
.mailnote{font-size:13px;line-height:1.45;color:#565D61}
.tagline{display:inline-block;justify-self:start;padding:3px 8px 2px;border-radius:6px;background:#E4E7E5;color:#565D61;font:800 11px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase}

/* The end */
.end{display:grid;gap:14px;padding:22px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.end h3{font:900 24px/1.15 var(--font);letter-spacing:-.02em}
.end p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 22px 12px;border-radius:10px;background:var(--accent);color:var(--on-accent);font:800 17px/1.1 var(--font);text-decoration:none;justify-self:start}
.btn:hover{background:var(--accent-hover)}
.tel{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--line);white-space:nowrap}

/* Footer */
.footer{background:var(--band);color:var(--band-muted);padding-block:36px;font-size:15px}
.footer .wrap{display:grid;gap:10px}
.footer a{color:var(--on-band)}