:root{
  --paper:#EDEFEA; --surface:#FFFFFF; --surface-2:#F6F7F3;
  --ink:#14181C; --ink-2:#3C443F; --ink-3:#767E75;
  --line:#D8DCD4; --line-2:#C3C9BE;
  --accent:#1B47C4; --accent-soft:#E3E9FB;
  --pin:#8A3A0B; --pin-soft:#F7E5D6;
  --hot:#C43217; --hot-soft:#FBE4DF;
  --warm:#9A6206; --warm-soft:#F8ECD8;
  --fresh:#0F6E43; --fresh-soft:#DEEFE5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111518; --surface:#1A1F23; --surface-2:#20262B;
    --ink:#E6EAE3; --ink-2:#AFB7AE; --ink-3:#7D857C;
    --line:#2B3238; --line-2:#3A4249;
    --accent:#8FAAFF; --accent-soft:#1E2A4A;
    --pin:#F0A06A; --pin-soft:#3A2415;
    --hot:#FF8A6E; --hot-soft:#3A1E17;
    --warm:#E5AE55; --warm-soft:#3A2C14;
    --fresh:#63C79A; --fresh-soft:#12301F;
  }
}
:root[data-theme="dark"]{
  --paper:#111518; --surface:#1A1F23; --surface-2:#20262B;
  --ink:#E6EAE3; --ink-2:#AFB7AE; --ink-3:#7D857C;
  --line:#2B3238; --line-2:#3A4249;
  --accent:#8FAAFF; --accent-soft:#1E2A4A;
  --pin:#F0A06A; --pin-soft:#3A2415;
  --hot:#FF8A6E; --hot-soft:#3A1E17;
  --warm:#E5AE55; --warm-soft:#3A2C14;
  --fresh:#63C79A; --fresh-soft:#12301F;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px 72px}

header.mast{border-bottom:2px solid var(--ink);padding:34px 0 18px;margin-bottom:22px}
.kicker{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
h1{font-family:Archivo,"Helvetica Neue",sans-serif;font-weight:800;
  font-size:clamp(30px,5.5vw,46px);line-height:.98;letter-spacing:-.025em;
  margin:0 0 12px;text-wrap:balance}
.sub{color:var(--ink-2);max-width:62ch;margin:0}
.stamp{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-3)}
.stamp b{color:var(--ink-2);font-weight:500}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.stat{background:var(--surface);padding:14px 16px}
.stat .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;
  font-size:26px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px}
.stat.hot .n{color:var(--hot)} .stat.fresh .n{color:var(--fresh)}
.stat.acc .n{color:var(--accent)} .stat.pinned .n{color:var(--pin)}

.controls{position:sticky;top:0;z-index:20;background:var(--paper);
  padding:12px 0;border-bottom:1px solid var(--line)}
.ctl-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctl-row+.ctl-row{margin-top:8px}
#q{flex:1 1 220px;min-width:160px;padding:8px 11px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);border-radius:2px;font:inherit;font-size:14px}
#q::placeholder{color:var(--ink-3)}
.chip{font:inherit;font-size:12.5px;padding:6px 11px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);border-radius:2px;cursor:pointer;
  white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[hidden]{display:none!important}
.chip .c{font-family:"IBM Plex Mono",monospace;opacity:.6;margin-left:5px;font-size:11px}
.chip:focus-visible,#q:focus-visible,a:focus-visible,.pin:focus-visible,.seg
  button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.seg button{font:inherit;font-size:12.5px;padding:6px 13px;border:0;cursor:pointer;
  background:var(--surface);color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.statusline{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3)}
#save{transition:color .2s}
#save[data-s="saving"]{color:var(--warm)}
#save[data-s="saved"]{color:var(--fresh)}
#save[data-s="error"]{color:var(--hot)}

h2.day{font-family:Archivo,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline}
h2.day .n{font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:0}

/* ---- shared bits ---- */
.meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.tag{background:var(--surface-2);border:1px solid var(--line);
  padding:1px 6px;border-radius:2px;color:var(--ink-2)}
.tag.loc{background:var(--fresh-soft);border-color:transparent;color:var(--fresh)}
.tag.star{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}
.tag.newt{background:var(--fresh);border-color:transparent;color:var(--surface);
  font-weight:600;letter-spacing:.04em}
.tag.relist{background:var(--warm-soft);border-color:transparent;color:var(--warm)}
.tag.delta{background:var(--pin-soft);border-color:transparent;color:var(--pin);font-weight:600}
.tag.gone{background:transparent;border-style:dashed;border-color:var(--line-2);
  color:var(--ink-3);letter-spacing:.04em}
.price{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.bids{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.bids.zero{color:var(--fresh);font-weight:500}
.cd{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
  font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:2px;
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
[data-u="hot"] .cd{background:var(--hot-soft);color:var(--hot);font-weight:600}
[data-u="warm"] .cd{background:var(--warm-soft);color:var(--warm)}
[data-u="gone"] .cd{background:transparent;border:1px dashed var(--line-2);
  color:var(--ink-3);padding:1px 6px}
.pin{font:inherit;line-height:0;width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;cursor:pointer;border-radius:2px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);
  transition:background .12s,color .12s,border-color .12s}
.pin:hover{border-color:var(--pin);color:var(--pin)}
.pin[aria-pressed="true"]{background:var(--pin);border-color:var(--pin);color:#fff}
.pin svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.pin[aria-pressed="true"] svg{fill:currentColor}
.ttl{font-size:14.5px;font-weight:500;line-height:1.3;margin:0 0 5px;
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ttl:hover{text-decoration:underline}

/* ---- closed lots ---- */
/* Dimming keys off the countdown state, so a lot fades the moment its timer
   reaches zero, before the re-render that pulls it out of the default view. */
[data-u="gone"]{opacity:.5}
[data-u="gone"]:hover{opacity:.78}
[data-u="gone"] .thumb,[data-u="gone"] .shot{filter:grayscale(1)}
[data-u="gone"] .stripe{background:var(--line-2)!important}
[data-u="gone"] .price{font-weight:500}

/* ---- list view ---- */
.list{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.row{display:grid;grid-template-columns:4px 56px 1fr auto 30px;gap:0 13px;
  background:var(--surface);padding:11px 14px 11px 0;align-items:center}
.row:hover{background:var(--surface-2)}
.row.pinned{background:var(--pin-soft)}
.stripe{align-self:stretch;background:var(--line-2)}
[data-u="hot"] .stripe{background:var(--hot)}
[data-u="warm"] .stripe{background:var(--warm)}
[data-u="day"] .stripe{background:var(--accent)}
.thumb{width:56px;height:56px;object-fit:cover;background:var(--surface-2);
  border:1px solid var(--line);display:block}
.mid{min-width:0}
.right{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}

/* ---- gallery view ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;position:relative}
.card:hover{border-color:var(--line-2)}
.card.pinned{border-color:var(--pin);box-shadow:inset 0 0 0 1px var(--pin)}
.card .shot{display:block;aspect-ratio:1;width:100%;object-fit:cover;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.card .urg{position:absolute;top:0;left:0;right:0;height:3px;background:transparent}
.card[data-u="hot"] .urg{background:var(--hot)}
.card[data-u="warm"] .urg{background:var(--warm)}
.card[data-u="day"] .urg{background:var(--accent)}
.card .pin{position:absolute;top:8px;right:8px;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.card .body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .ttl{-webkit-line-clamp:3;margin:0}
.card .figs{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin-top:auto}
.card .meta{gap:4px}

.empty{padding:44px 0;color:var(--ink-3);text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:13px}

.quiet{margin-top:44px;border-top:2px solid var(--ink);padding-top:20px}
.quiet h3{font-family:Archivo,sans-serif;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 6px}
.quiet p{color:var(--ink-2);font-size:14px;margin:0 0 12px;max-width:64ch}
.qs{display:flex;flex-wrap:wrap;gap:6px}
.qtag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  border:1px dashed var(--line-2);padding:3px 8px;border-radius:2px}
footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:6px 20px}

@media (max-width:620px){
  .row{grid-template-columns:4px 46px 1fr 30px;gap:0 10px;padding-right:12px;
    align-items:start;row-gap:8px}
  .thumb{width:46px;height:46px}
  .right{grid-column:2 / -1;flex-direction:row;align-items:center;gap:10px;
    justify-content:flex-start}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- static-host additions ---- */
/* The board fetches data.json and /api/pins on load, so unlike the artifact
   build there is a moment with nothing to show. */
.boot{padding:64px 0;text-align:center;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;font-size:13px}
.boot.err{color:var(--hot)}
.banner{background:var(--warm-soft);color:var(--warm);border:1px solid transparent;
  border-radius:2px;padding:8px 12px;margin:12px 0;font-size:13px}
.banner[hidden]{display:none!important}
.thumb,.shot{background:var(--surface-2)}