/* Kerbway — asphalt ground, one hazard-orange accent, road-sign type. Mobile first; recomposes past 1000px. */
:root{
  --tar:#0E1114; --tar2:#161B21; --tar3:#20262D; --line:#2E363F; --ink:#EEF1F4; --ink2:#A5AEB8; --ink3:#6F7A86;
  --cone:#FF7A1A; --cone-dim:#7A3E14; --cone-ink:#1A0D03;
  --sign:"Overpass",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif; --mono:"Overpass Mono",ui-monospace,monospace;
  --cap:1180px;
}
*{box-sizing:border-box}
html{background:var(--tar)}
body{margin:0;background:var(--tar);color:var(--ink);font:400 15px/1.5 var(--body);padding:12px 14px 250px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
code{font-family:var(--mono)}
[hidden]{display:none !important}

/* the plate: a thin strip, not a header */
.kw-plate{max-width:var(--cap);margin:0 auto 6px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase}
.kw-plate img{border-radius:5px}
.kw-plate b{color:var(--ink);font:800 13px/1 var(--sign);letter-spacing:.06em}
.kw-plate span{margin-right:auto;padding:2px 7px;border:1px solid var(--line);border-radius:99px;font-family:var(--mono);font-size:10.5px;text-transform:none;letter-spacing:0}
.kw-plate a{color:var(--ink2);text-decoration:none;border-bottom:1px dashed var(--ink3)}

/* the sign: the headline, road-sign type */
.kw-sign{max-width:var(--cap);margin:0 auto 10px;font:900 32px/.94 var(--sign);text-transform:uppercase;letter-spacing:-.005em}
.kw-sign em{font-style:normal;color:var(--cone)}

.kw-deck{max-width:var(--cap);margin:0 auto}
.kw-live{margin:0 0 10px;font-size:15px;line-height:1.42;color:var(--ink2);min-height:3em}
.kw-live b{color:var(--ink);font-weight:700}

/* the street: the bay with the car + the ladder rising beside it */
.kw-street{background:var(--tar2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kw-bay{position:relative}
.kw-scene{display:block;width:100%;height:auto}
.kw-kerbpaint rect{fill:var(--cone)}
.kw-baylabel{font:800 13px var(--sign);letter-spacing:.3em;fill:#3A444F}
.kw-metertxt{font:600 10px var(--mono);fill:var(--cone)}
.kw-cartag{font:800 11px var(--sign);letter-spacing:.14em;fill:var(--ink2)}
.kw-car path:first-child{fill:var(--cone);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.kw-car .kw-glass{fill:#1E252C}
.kw-car .kw-wheel{fill:#0A0C0E;stroke:#3A444F;stroke-width:3}
.kw-car-ghost path:first-child{fill:none;stroke:var(--cone);stroke-width:2.5;stroke-dasharray:7 6;animation:kw-breathe 1.8s ease-in-out infinite}
.kw-car-ghost .kw-glass{fill:none;stroke:#3A444F;stroke-width:2}
.kw-car-ghost .kw-wheel{fill:none;stroke:#3A444F;stroke-dasharray:4 4}
.kw-car-in{animation:kw-pullin .7s cubic-bezier(.2,.9,.3,1)}
.kw-pile rect{fill:var(--cone)}
@keyframes kw-breathe{50%{opacity:.35}}
@keyframes kw-pullin{from{transform:translateX(-120px);opacity:.2}to{transform:none;opacity:1}}

.kw-baystats{display:grid;grid-template-columns:1.3fr 1fr .8fr;border-top:1px solid var(--line)}
.kw-baystats div{padding:7px 10px;border-right:1px solid var(--line);min-width:0}
.kw-baystats div:last-child{border-right:0}
.kw-baystats span{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.kw-baystats b{display:block;font:800 17px/1.2 var(--sign);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.kw-rungs{list-style:none;margin:0;padding:22px 10px 6px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end;height:124px;border-top:1px solid var(--line);background:linear-gradient(transparent 0 calc(100% - 1px),var(--line) 0)}
.kw-rung{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;border-radius:4px 4px 0 0;background:var(--tar3);border:1px solid var(--line);border-bottom:0;padding-top:3px;min-width:0;color:var(--ink3);font:600 9.5px/1.1 var(--mono);transition:background .3s}
.kw-rung i{font-style:normal}
.kw-rung u{text-decoration:none;position:absolute;bottom:3px;font:800 10px var(--sign);color:inherit}
.kw-rung-done{background:var(--cone-dim);color:#F3C9A8;border-color:var(--cone-dim)}
.kw-rung-held{background:var(--cone);color:var(--cone-ink);border-color:var(--cone)}
.kw-rung-next{cursor:pointer;background:transparent;border:2px dashed var(--cone);color:var(--cone);animation:kw-breathe 1.4s ease-in-out infinite}
.kw-rung-next:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.kw-rungflag{position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;font:800 9px var(--sign);letter-spacing:.1em;text-transform:uppercase;color:var(--cone)}

.kw-act{display:flex;gap:8px;margin:12px 0 0}
.kw-go{flex:1;min-height:52px;border:0;border-radius:12px;background:var(--cone);color:var(--cone-ink);font:900 16px/1 var(--sign);text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.kw-go:disabled{background:var(--tar3);color:var(--ink3);cursor:default}
.kw-wallet{min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink2);font:600 13px var(--body);cursor:pointer}
.kw-wallet.kw-tied{color:var(--cone);border-color:var(--cone-dim);font-family:var(--mono)}

/* the tape: a ticker strip that prints bids as they land */
.kw-tape{margin:14px -14px 0;border-top:2px solid var(--cone);border-bottom:1px solid var(--line);background:#0A0D10;overflow:hidden;white-space:nowrap}
.kw-taperun{display:inline-flex;gap:0;padding:9px 0;animation:kw-roll 38s linear infinite}
.kw-tape:hover .kw-taperun{animation-play-state:paused}
.kw-tick{display:inline-block;padding:0 22px;font:500 12.5px var(--mono);color:var(--ink2);border-right:1px solid var(--line)}
.kw-tick b{color:var(--ink);font-weight:600}
.kw-tick a{color:var(--cone);text-decoration:none}
.kw-tick-quiet{color:var(--ink3)}
.kw-tick-fresh{color:var(--cone-ink);background:var(--cone);animation:kw-print 2.4s ease-out}
.kw-tick-fresh b,.kw-tick-fresh a{color:var(--cone-ink)}
.kw-tick-drove{color:var(--cone)}
@keyframes kw-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes kw-print{from{filter:brightness(1.6)}to{filter:none}}

.kw-side{margin-top:16px;display:grid;gap:12px}
.kw-card{border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;background:var(--tar2)}
.kw-card h2{margin:0 0 8px;font:800 13px var(--sign);letter-spacing:.16em;text-transform:uppercase;color:var(--cone)}
.kw-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--ink2)}
.kw-steps b{color:var(--ink)}
.kw-fine{margin:10px 0 0;font-size:12.5px;color:var(--ink3)}
.kw-past{display:grid;gap:4px}
.kw-pastrow{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px;color:var(--ink2)}
.kw-pastrow b{font:800 15px var(--sign);color:var(--ink)}
.kw-quiet{margin:0;font-size:13px;color:var(--ink3)}

.kw-alt{max-width:760px;margin:10px auto 0;font-size:15px;color:var(--ink2)}
.kw-alt h1{font:900 34px/1 var(--sign);text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.kw-alt h3{font:800 14px var(--sign);letter-spacing:.14em;text-transform:uppercase;color:var(--cone);margin:18px 0 4px}
.kw-alt code{word-break:break-all;color:var(--ink)}
body.kw-off-curb .kw-deck,body.kw-off-curb .kw-sign{display:none}

.kw-foot{max-width:var(--cap);margin:28px auto 0;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:6px;font-size:12.5px;color:var(--ink3)}
.kw-foot-id{display:flex;align-items:center;gap:8px;font:800 13px var(--sign);color:var(--ink);letter-spacing:.06em}
.kw-foot-kv code{word-break:break-all;color:var(--ink2);font-size:11.5px}
.kw-foot-links{display:flex;flex-wrap:wrap;gap:14px}
.kw-foot-links a,.kw-foot-links span a{color:var(--ink2);margin-right:14px}
.kw-foot-tag{margin:4px 0 0}

/* the CA float: fixed, hovering above the thumb zone — the address in full, a copy button, GMGN second */
.kw-ca{position:fixed;z-index:30;left:10px;right:10px;bottom:calc(128px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"k note gmgn" "addr addr copy";align-items:center;column-gap:8px;row-gap:3px;padding:8px 8px 8px 12px;border-radius:16px;background:rgba(20,24,29,.94);border:1px solid var(--cone-dim);box-shadow:0 10px 30px rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.kw-ca-k{grid-area:k;font:900 11px var(--sign);letter-spacing:.14em;color:var(--cone)}
.kw-ca-note{grid-area:note;font-size:10.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-ca-gmgn{grid-area:gmgn;font-size:10.5px;color:var(--ink3);text-decoration:underline}
.kw-ca-addr{grid-area:addr;font:600 10.5px/1.2 var(--mono);letter-spacing:-.02em;color:var(--ink);word-break:break-all;user-select:all;min-width:0}
.kw-ca-copy{grid-area:copy;min-width:58px;height:32px;border-radius:9px;border:0;background:var(--cone);color:var(--cone-ink);font:900 12px var(--sign);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.kw-ca-copy:disabled{background:var(--tar3);color:var(--ink3);cursor:default}
.kw-ca-copy.kw-copied{background:var(--ink);color:var(--tar)}

.kw-veil{position:fixed;inset:0;z-index:40;background:rgba(5,7,9,.7);display:flex;align-items:flex-end;justify-content:center}
.kw-sheet{width:100%;max-width:520px;background:var(--tar2);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px 16px 26px}
.kw-sheet-h{display:flex;justify-content:space-between;align-items:center;font:800 14px var(--sign);letter-spacing:.12em;text-transform:uppercase;color:var(--cone);margin-bottom:10px}
.kw-sheet-h button{background:none;border:0;color:var(--ink2);font-size:24px;cursor:pointer}
.kw-facts{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px;color:var(--ink2);margin-bottom:12px}
.kw-facts b{font:800 15px var(--sign);color:var(--ink);text-align:right}
.kw-warn{font-size:13px;color:var(--cone);margin:0 0 10px}
.kw-picks{display:grid;gap:8px}
.kw-picks button{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--tar3);color:var(--ink);font:600 14px var(--body);cursor:pointer}
.kw-picks img{width:24px;height:24px}
.kw-toast{position:fixed;z-index:50;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:var(--tar);padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600}

/* ~720-1000: one column, wider measure, bigger sign and street */
@media (min-width:720px){
  body{padding:18px 28px 260px}
  .kw-sign{font-size:52px;margin-bottom:14px}
  .kw-live{font-size:17px;max-width:680px}
  .kw-street{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .kw-rungs{height:auto;min-height:100%;border-top:0;border-left:1px solid var(--line);padding:30px 12px 8px;gap:5px}
  .kw-rung{font-size:10px;letter-spacing:-.03em}
  .kw-baystats b{font-size:19px}
  .kw-tape{margin:18px -28px 0}
  .kw-side{grid-template-columns:1fr 1fr}
  .kw-ca{left:auto;right:28px;width:450px;bottom:140px}
  .kw-ca-addr{font-size:12px;letter-spacing:0}
}
/* >=1000: the page recomposes — the street and its action left, the rules and the lot on a rail right, the tape across */
@media (min-width:1000px){
  body{padding:22px 32px 120px}
  .kw-sign{font-size:66px;max-width:var(--cap)}
  .kw-deck{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"tape tape" "main side";column-gap:28px;align-items:start}
  .kw-main{grid-area:main}
  .kw-side{grid-area:side;margin-top:0;grid-template-columns:1fr;padding-bottom:150px}
  .kw-tape{grid-area:tape;margin:0 0 18px;border-radius:0 0 10px 10px}
  .kw-rung{font-size:11px;letter-spacing:0}
  .kw-go{font-size:19px;min-height:60px}
  .kw-ca{right:max(32px,calc((100vw - var(--cap)) / 2));width:450px;bottom:28px}
  .kw-foot{grid-template-columns:1fr 1fr;align-items:start}
}
@media (prefers-reduced-motion:reduce){.kw-taperun{animation:none}.kw-rung-next,.kw-car-ghost path:first-child{animation:none}}
.kw-rung:first-child .kw-rungflag{left:-2px;transform:none}
.kw-rung:last-child .kw-rungflag{left:auto;right:-2px;transform:none}