/* compare3 — a sheet, not a dashboard.
 *
 * Every other app in this portfolio is a centred column of cards on an
 * off-white (or, once, near-black) page. This one is a table with visible grid
 * lines on plain white, because the whole point of a comparison is reading
 * ACROSS a row and a card deck makes you read down. The winning cell in each
 * row gets the pale yellow a spreadsheet would give it.
 *
 * script-src 'none', style-src 'self': no client JavaScript, no inline style
 * attribute anywhere.
 */

:root {
  --page: #ffffff;
  --ink: #11161c;
  --soft: #566372;
  --faint: #8b98a6;
  --grid: #d8dee5;
  --rule: #11161c;

  --win: #fdf6c3;
  --win-edge: #e6d97a;
  --dead: #f4f6f8;
  --flag: #6b3fd4;
  --link: #2f4fd8;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 25px; font-weight: 620; line-height: 1.25; margin: 0 0 14px; letter-spacing: -0.015em; }
h2 { font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
     color: var(--faint); margin: 28px 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--link); }

main { max-width: 900px; margin: 0 auto; padding: 22px 20px 60px; }

/* ---------------------------------------------------------------- chrome */

.bar { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-bottom: 2px solid var(--rule); }
.mark { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.03em; }
.mark b { color: var(--flag); }
.spacer { flex: 1; }
.who { font-family: var(--mono); font-size: 12px; color: var(--soft); text-decoration: none; }
.who:hover { color: var(--ink); }

.note { margin: 0; padding: 9px 20px; font-size: 13px; border-bottom: 1px solid var(--grid); background: #f2f5f9; color: var(--soft); }
.note.ok { background: #eefaf1; color: #17683f; }
.note.no { background: #fdeeec; color: #a3321c; }

/* ----------------------------------------------------------------- table */

.scroll { overflow-x: auto; margin: 0 0 14px; }

.sheet { border-collapse: collapse; width: 100%; font-size: 14px; }
.sheet th, .sheet td { border: 1px solid var(--grid); padding: 8px 10px; text-align: left; vertical-align: top; }
.sheet thead th { background: #f7f9fb; border-bottom: 2px solid var(--rule); vertical-align: bottom; }
.sheet thead th img { display: block; width: 100%; max-width: 120px; height: auto; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 6px; }
.sheet thead th .noimg { display: block; width: 100%; max-width: 120px; aspect-ratio: 1/1; background: var(--dead); margin-bottom: 6px; }
.sheet thead th a { display: block; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.35; }
.sheet thead th a:hover { text-decoration: underline; }
.sheet thead th .shop { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 3px; }
.sheet tbody th { width: 7.5rem; font-weight: 600; font-size: 12px; color: var(--soft); background: #fafbfc; white-space: nowrap; }
.corner { font-family: var(--mono); font-size: 12px; color: var(--faint); font-weight: 500; }

.sheet td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* The one thing this app draws attention to. */
.sheet td.win { background: var(--win); box-shadow: inset 0 0 0 1px var(--win-edge); font-weight: 650; }
.sheet td.dead { background: var(--dead); color: var(--faint); }
.sheet td.act { padding: 5px 10px; }

.demo { margin: 18px 0; max-width: 620px; }

/* ---------------------------------------------------------------- boards */

.boards { list-style: none; margin: 22px 0 0; padding: 0; }
.bd { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--grid); }
.bd a { font-size: 16px; text-decoration: none; color: var(--ink); }
.bd a:hover { text-decoration: underline; }
.bd .meta { grid-column: 1; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.bd .lead { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 13px; color: var(--soft); max-width: 20rem; text-align: right; }
.bd .flag { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--flag); }

.contender { border: 1px solid var(--flag); border-left-width: 4px; padding: 12px 14px; margin: 18px 0; }
.contender .cap { color: var(--flag); }

/* ----------------------------------------------------------------- forms */

.new, .add { border: 1px solid var(--grid); padding: 14px; margin: 0 0 18px; }
.add { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.cap { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
       text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
label { display: block; font-size: 12px; color: var(--soft); margin-bottom: 9px; }
input[type="text"] { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font: inherit;
                     font-size: 14px; color: var(--ink); background: var(--page);
                     border: 1px solid var(--grid); border-radius: 0; }
input:focus-visible { outline: none; border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

.go { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; cursor: pointer;
      color: var(--page); background: var(--ink); border: 0; border-radius: 0; text-decoration: none; display: inline-block; }
.go:hover { background: #2a3542; }
.link { font: inherit; font-family: var(--mono); font-size: 11px; background: none; border: 0; padding: 0;
        color: var(--link); cursor: pointer; text-decoration: underline; }
.link.quiet { color: var(--faint); }
.inline { display: inline; margin: 0; }

.rules { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--soft); margin-bottom: 20px; }
.pill { font: inherit; font-family: var(--mono); font-size: 11px; padding: 3px 9px; cursor: pointer;
        background: var(--page); color: var(--soft); border: 1px solid var(--grid); border-radius: 0; }
.pill.on { background: var(--ink); color: var(--page); border-color: var(--ink); }

.lede { font-size: 16px; color: var(--soft); max-width: 54ch; }
.aside { font-size: 12px; color: var(--faint); max-width: 62ch; }
.crumb { font-family: var(--mono); font-size: 11px; }
.enter { margin: 22px 0 8px; }
.blank { padding: 18px; border: 1px dashed var(--grid); color: var(--soft); }

/* ------------------------------------------------------------- documents */

.doc h1 { margin-bottom: 16px; }
.doc h2 { font-size: 15px; font-weight: 620; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 26px 0 8px; }
.doc p, .doc li { color: var(--soft); }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); }
.doc code { font-family: var(--mono); font-size: 0.88em; background: #f2f5f9; padding: 1px 4px; }
.doc .when { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: -8px; }

/* ---------------------------------------------------------------- footer */

.end { border-top: 2px solid var(--rule); padding: 16px 20px; max-width: 900px; margin: 0 auto; }
.end a { font-family: var(--mono); font-size: 11px; color: var(--faint); text-decoration: none; margin-right: 16px; }
.end a:hover { color: var(--ink); }
.end p { margin: 9px 0 0; font-size: 11px; color: var(--faint); max-width: 66ch; }

@media (max-width: 620px) {
  .bd { grid-template-columns: 1fr; }
  .bd .lead { grid-row: auto; grid-column: 1; text-align: left; }
  .add { grid-template-columns: 1fr; }
}