/**
 * Compare and saved.
 *
 * Reads only from tokens.css. Everything shared with other pages — the card,
 * the grid, the buttons, the empty state, the tray — lives in card.css or
 * shell.css; this sheet is only the two things that exist nowhere else: the
 * comparison table and the head those two pages share.
 */

.v2-collect { padding-block-start: var(--s-8); }
.v2-collect-head { display: grid; gap: var(--s-2); margin-block-end: var(--s-6); }
.v2-collect-head h1 { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.1; }
.v2-collect-note { font-size: var(--t-xs); color: var(--ink-dim); max-width: 60ch; }

.v2-collect-bar {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-block-end: var(--s-4);
  padding-block-end: var(--s-3); border-block-end: 1px solid var(--rule);
}
.v2-collect-n { font-size: var(--t-base); color: var(--ink-body); }
.v2-collect-n b { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); }
.v2-collect-gone { font-size: var(--t-sm); color: var(--ink-dim); }
.v2-collect-bar .v2-btn { margin-inline-start: auto; }

/* The toggle needs no script: :has() on the wrapper hides the rows that agree.
   A browser without it leaves the checkbox inert rather than broken. */
.v2-cmp-only { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-body); cursor: pointer; }
.v2-cmp-only input { accent-color: var(--accent); }

/**
 * Four columns on a phone scroll inside this box and nowhere else. A table
 * that widens the document is a page that scrolls sideways on every screen.
 */
.v2-cmp-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-card); }
/**
 * Scoped to the results block, because that is the element that contains both
 * the checkbox and the table — the checkbox lives in the bar above, so hanging
 * :has() off the table's own wrapper matched nothing and the control silently
 * did nothing at all.
 */
.v2-collect-results:has(input[data-v2-diff-only]:checked) tr[data-differs="false"] { display: none; }

.v2-cmp { border-collapse: collapse; width: 100%; min-width: 520px; }
.v2-cmp th, .v2-cmp td { padding: var(--s-3); text-align: start; vertical-align: top; }
.v2-cmp tbody th {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);
  width: 1%; white-space: nowrap;
}
.v2-cmp tbody tr { border-block-start: 1px solid var(--rule-faint); }
.v2-cmp td { font-size: var(--t-base); color: var(--ink); font-variant-numeric: tabular-nums; }

/**
 * A row where the values are not all the same.
 *
 * Marked, never ranked. Which of four prices is the good one depends on a
 * budget this page knows nothing about, so the difference is what is shown and
 * the judgement is left to the reader.
 */
.v2-cmp tr[data-differs="true"] { background: var(--surface-warm); }
.v2-cmp tr[data-differs="true"] th { color: var(--ink); }
.v2-cmp tr[data-differs="false"] td { color: var(--ink-dim); }

.v2-cmp-corner { width: 1%; }
.v2-cmp-col { min-width: 148px; }
.v2-cmp-thumb {
  display: grid; place-items: center;
  aspect-ratio: 3 / 4; width: 100%; max-width: 132px;
  background: var(--surface-deep); border-radius: var(--radius);
  overflow: hidden; margin-block-end: var(--s-2);
}
/* Contained, never cropped: the caption burned into the top of a reel is part
   of the listing and a cropped room is a picture of a wall. */
.v2-cmp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.v2-cmp-thumb span { font-size: var(--t-xs); color: var(--ink-faint); text-align: center; padding: var(--s-2); }
.v2-cmp-title { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); line-height: 1.35; }
.v2-cmp-title:hover { color: var(--accent); text-decoration: none; }
.v2-cmp-code { display: block; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); margin-block-start: 2px; }
.v2-cmp-drop { display: inline-block; margin-block-start: var(--s-2); font-size: var(--t-xs); color: var(--ink-dim); }
.v2-cmp-drop:hover { color: var(--accent); }

.v2-cmp-ask { margin-block-start: var(--s-4); }