:root{
  --bg: #EEEEE6;
  --surface: #FFFFFF;
  --surface-alt: #F6F6EF;
  --line: #DBDCCC;
  --ink: #1E241F;
  --ink-muted: #5A6259;
  --accent: #35507A;
  --accent-soft: #E3EAF3;
  --good: #2E7A54;
  --good-soft: #E1F0E7;
  --caution: #93690F;
  --caution-soft: #F5EAD3;
  --urgent: #A83A22;
  --urgent-soft: #F6E1DA;
  --shadow: 0 1px 2px rgba(30,36,31,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #13160F;
    --surface: #1B1F17;
    --surface-alt: #20241B;
    --line: #333B2E;
    --ink: #EAECE3;
    --ink-muted: #9CA695;
    --accent: #8AAAD4;
    --accent-soft: #223046;
    --good: #74C79A;
    --good-soft: #15281E;
    --caution: #D9AE55;
    --caution-soft: #2E2611;
    --urgent: #E48A6C;
    --urgent-soft: #33201A;
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --bg: #13160F;
  --surface: #1B1F17;
  --surface-alt: #20241B;
  --line: #333B2E;
  --ink: #EAECE3;
  --ink-muted: #9CA695;
  --accent: #8AAAD4;
  --accent-soft: #223046;
  --good: #74C79A;
  --good-soft: #15281E;
  --caution: #D9AE55;
  --caution-soft: #2E2611;
  --urgent: #E48A6C;
  --urgent-soft: #33201A;
  --shadow: 0 1px 2px rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Public Sans", -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:28px 20px 64px;
  padding-top:max(28px, env(safe-area-inset-top));
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}

header.top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 28px;
  padding-bottom:20px;
  border-bottom:2px solid var(--ink);
  margin-bottom:20px;
}
.titleblock h1{
  font-family:"Barlow Condensed", sans-serif;
  font-weight:700;
  font-size:44px;
  line-height:0.95;
  letter-spacing:0.01em;
  margin:0 0 4px;
  text-wrap:balance;
}
.titleblock .sub{
  color:var(--ink-muted);
  font-size:14px;
}
.titleblock .sub b{ color:var(--ink); font-weight:600; }

.rules{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.rule-chip{
  font-family:"IBM Plex Mono", monospace;
  font-size:12px;
  letter-spacing:0.02em;
  padding:5px 10px;
  border-radius:5px;
  background:var(--surface-alt);
  border:1px solid var(--line);
  color:var(--ink-muted);
  white-space:nowrap;
}
.rule-chip b{ color:var(--ink); font-weight:600; }
.rule-chip.alert{
  background:var(--urgent-soft);
  border-color:var(--urgent);
  color:var(--urgent);
}
.rule-chip.alert b{ color:var(--urgent); }

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:22px;
}
.stat{
  background:var(--surface);
  padding:14px 16px;
}
.stat .n{
  font-family:"Barlow Condensed", sans-serif;
  font-weight:700;
  font-size:30px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat.urgent .n{ color:var(--urgent); }
.stat.good .n{ color:var(--good); }
.stat .lbl{
  margin-top:4px;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--ink-muted);
}

.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:14px;
}
.search{
  flex:1 1 220px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 12px;
}
.search input{
  border:none;
  outline:none;
  background:transparent;
  color:var(--ink);
  font-family:"Public Sans", sans-serif;
  font-size:16px;
  width:100%;
}
.search svg{ flex:none; color:var(--ink-muted); }
.toggle{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:var(--ink-muted);
  cursor:pointer;
  user-select:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 12px;
}
.toggle input{ accent-color:var(--accent); width:14px; height:14px; }
.toggle.active{ color:var(--ink); border-color:var(--accent); }

.refresh{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:"Public Sans", sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:8px 12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.refresh:active{ background:var(--surface-alt); }
.refresh[data-busy="1"]{ color:var(--accent); border-color:var(--accent); }
.refresh[data-busy="1"] svg{ animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
thead th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--ink-muted);
  font-weight:600;
  padding:10px 14px;
  background:var(--surface-alt);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
th.num, td.num{ text-align:right; }
tbody tr{
  border-bottom:1px solid var(--line);
}
tbody tr:last-child{ border-bottom:none; }
tbody tr.row{ position:relative; }
tbody tr.row td:first-child{
  box-shadow: inset 3px 0 0 var(--stripe, transparent);
}
td{
  padding:12px 14px;
  font-size:14px;
  vertical-align:middle;
}
td.lot .num-id{
  font-family:"IBM Plex Mono", monospace;
  font-size:11.5px;
  color:var(--ink-muted);
  display:block;
}
td.lot .title{
  font-weight:500;
  text-wrap:balance;
}
td.cat{ color:var(--ink-muted); font-size:13px; }
td.price{
  font-family:"IBM Plex Mono", monospace;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.pill{
  display:inline-block;
  font-family:"IBM Plex Mono", monospace;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.02em;
  padding:3px 8px;
  border-radius:20px;
  white-space:nowrap;
}
.pill.good{ background:var(--good-soft); color:var(--good); }
.pill.caution{ background:var(--caution-soft); color:var(--caution); }
td.closes{
  font-family:"IBM Plex Mono", monospace;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
td.closes.urgent{ color:var(--urgent); }
td.closes.caution{ color:var(--caution); }
td.closes.good{ color:var(--ink); }
td.link a{
  display:inline-block;
  font-size:12.5px;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  border:1px solid var(--accent);
  border-radius:6px;
  padding:5px 10px;
  white-space:nowrap;
}
td.link a:hover{ background:var(--accent-soft); }

.empty{
  padding:56px 20px;
  text-align:center;
  color:var(--ink-muted);
}
.empty .glyph{
  font-family:"Barlow Condensed", sans-serif;
  font-size:15px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:6px;
}
.empty p{ margin:6px auto 0; max-width:440px; font-size:13.5px; line-height:1.5; }

.staleflag{
  margin:0 0 14px;
  padding:10px 14px;
  border-radius:7px;
  background:var(--caution-soft);
  border:1px solid var(--caution);
  color:var(--caution);
  font-size:13px;
  line-height:1.5;
}
.staleflag b{ font-weight:700; }
.staleflag.broken{
  background:var(--urgent-soft);
  border-color:var(--urgent);
  color:var(--urgent);
}

.scanhealth{
  font-family:"IBM Plex Mono", monospace;
  font-size:11.5px;
  letter-spacing:0.02em;
  color:var(--ink-muted);
  margin:-4px 0 12px 2px;
}
.scanhealth:empty{ display:none; }
.scanhealth.bad{ color:var(--urgent); font-weight:600; }

footer{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-muted);
  line-height:1.6;
}
footer b{ color:var(--ink); }

@media (max-width:720px){
  .wrap{ padding-top:max(20px, env(safe-area-inset-top)); }
  .titleblock h1{ font-size:36px; }
  .stats{ grid-template-columns:repeat(2,1fr); }

  /* The table becomes a stack of cards. Each card reads top-down:
     lot → category → the three facts on one line → action. */
  table, thead, tbody, tr{ display:block; }
  thead{ display:none; }
  tbody tr.row{
    /* 20px left, not 14px: the stripe is an inset shadow and would otherwise
       sit on top of the lot number. */
    padding:13px 14px 14px 20px;
    box-shadow: inset 3px 0 0 var(--stripe, transparent);
  }
  /* These per-cell rules are all scoped under `tbody tr.row` so they outrank
     the generic cell rule below them — otherwise the block/inline layout of
     each card silently loses to it. */
  tbody tr.row td{
    display:inline-block;
    padding:0;
    box-shadow:none;
    vertical-align:baseline;
  }
  /* The desktop layout paints the urgency stripe on the first cell; the card
     paints it on the row instead. Without this the first cell draws a second
     stripe on top of the lot number. Needs :first-child to outrank that rule. */
  tbody tr.row td:first-child{ box-shadow:none; }
  tbody tr.row td.lot{ display:block; margin-bottom:2px; }
  tbody tr.row td.lot .title{ font-size:15px; line-height:1.3; display:block; }
  tbody tr.row td.cat{ display:block; margin-bottom:9px; font-size:12.5px; }

  /* Price, bid pill and time left share one line, left-aligned — the right
     alignment that works in a table just strands them mid-card here. */
  tbody tr.row td.price,
  tbody tr.row td.num,
  tbody tr.row td.closes{ text-align:left; margin-right:11px; }
  tbody tr.row td.closes{ font-size:13.5px; margin-right:0; }

  tbody tr.row td.link{ display:block; margin-top:12px; }
  tbody tr.row td.link a{ padding:9px 15px; }
}