/* Signal Dark — GARAGE screen styles (P4, epic #1525)
 *
 * Ported VERBATIM from tests/parity/mockups/pwa-redesign.html section 06.
 *
 * CSS classes lifted:
 *   .mast / .bell / .newb      — masthead + alert bell + "NEW" badge
 *   .pastrow                   — saved-search alert row (shared with filters)
 *   .grow / .cbx               — saved-car row with select checkbox
 *   .cmpbar                    — compare CTA strip at bottom
 *
 * Shared atoms (.frame, .sb, .cut, .mono, .btn, .sect, .shd, .fnav, design
 * tokens) live in signal-dark.css and are NOT redefined here.
 */

/* ── Masthead ─────────────────────────────────────────────────────────────
 * .mast is already declared in the pwa-redesign mockup as shared chrome.
 * We define it here so the garage harness is self-contained when paired with
 * signal-dark.css only (no global app.css). */
.mast {
  padding: 12px 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mast .t {
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.mast .t i { color: var(--accT); font-style: normal; }
.mast .x {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--mut2);
}

/* ── Alert bell icon (beside the section header, not in mockup nav) ─────── */
.bell {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  outline: 1px solid var(--line2);
  color: var(--accT);
  flex-shrink: 0;
  cursor: pointer;
}
.bell.off { color: var(--mut2); }

/* "NEW" count badge on saved-search rows */
.newb {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  background: var(--accFill);
  color: var(--acc-ink);
  padding: 2px 7px;
  letter-spacing: .06em;
  flex-shrink: 0;
}

/* ── Saved-search / past-search rows ─────────────────────────────────────
 * Reused in GARAGE (alerts) and FILTERS (past searches). */
.pastrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.pastrow:last-child { border-bottom: none; }
.pastrow:hover { background: var(--card2); }
.pastrow .pi { color: var(--mut2); flex-shrink: 0; }
.pastrow .pt { flex: 1; min-width: 0; }
.pastrow .pt .a {
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pastrow .pt .b {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  margin-top: 2px;
  letter-spacing: .06em;
}
.pastrow .pc {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accT);
  flex-shrink: 0;
}

/* ── Saved-car rows (.grow) ─────────────────────────────────────────────── */
.grow {
  display: flex;
  gap: 12px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  transition: background .12s;
}
.grow:last-child { border-bottom: none; }
.grow:hover { background: var(--card2); }

/* Select checkbox */
.grow .cbx {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc-ink);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.grow .cbx.on {
  background: var(--accFill);
  border-color: var(--accFill);
}
.grow .cbx iconify-icon { pointer-events: none; }
/* Keyboard focus visibility for role=button / role=checkbox elements */
.pastrow:focus-visible,
.grow:focus-visible,
.grow .cbx:focus-visible {
  outline: 2px solid var(--accT);
  outline-offset: -2px;
}

/* Thumbnail */
.grow .ph {
  width: 92px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  background-color: var(--card2);
}

/* Text block */
.grow .gm { flex: 1; min-width: 0; }
.grow h4 { font-weight: 800; font-size: 13px; line-height: 1.05; }
.grow .gs {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  color: var(--mut2);
  margin-top: 3px;
  letter-spacing: .04em;
}
.grow .gp {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.grow .gp s {
  color: var(--mut2);
  font-weight: 600;
  font-size: 10px;
  margin-right: 6px;
  text-decoration-color: var(--mut2);
}
.grow .gp .d {
  color: var(--good);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  margin-left: 6px;
}
.grow .gp .d.neutral { color: var(--mut2); }
.grow .gp .d.up { color: var(--high); }

/* Delisted indicator */
.grow.delisted .gp { color: var(--mut2); }
.grow.delisted .ph { filter: grayscale(1); opacity: .6; }
.grow .del-stamp {
  font-family: "JetBrains Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--high);
  margin-top: 4px;
}

/* ── Compare CTA strip ──────────────────────────────────────────────────── */
.cmpbar {
  display: flex;
  gap: 10px;
  padding: 13px 18px;
  margin-top: auto;
  background: linear-gradient(180deg, transparent, var(--bg) 35%);
  flex-shrink: 0;
}
.cmpbar .btn.p { flex: 1; }

/* ── Empty garage state ─────────────────────────────────────────────────── */
.garage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 18px;
  text-align: center;
}
.garage-empty .ge-icon { color: var(--mut2); }
.garage-empty .ge-h {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.garage-empty .ge-s {
  font-size: 11px;
  color: var(--mut);
  line-height: 1.5;
}