/* Command Comparer. Table first: a slim header, one toolbar row, then the table.
   One green accent, mono for commands. Change the colors in the :root blocks below.
   Light is the default; dark follows the system, and the toggle overrides both. */

:root {
  color-scheme: light dark;

  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #efefed;
  --code-bg: #f1f1ef;
  --text: #16161a;
  --muted: #52525b;
  --faint: #63636b;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.22);

  --accent: #22c55e;
  --accent-ink: #04120a;
  --accent-text: #15803d;
  --accent-tint: rgba(34, 197, 94, 0.1);
  --accent-line: rgba(21, 128, 61, 0.5);
  --link: #15803d;

  --warn-text: #92400e;
  --warn-bg: rgba(245, 158, 11, 0.16);

  --font-body: "Satoshi", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-pill: 999px;
  --r-card: 16px;
  --r-code: 8px;
  --maxw: 110rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0e;
  --surface: #121218;
  --surface-2: #181821;
  --code-bg: #0d0d13;
  --text: #ececf1;
  --muted: rgba(236, 236, 241, 0.7);
  --faint: rgba(236, 236, 241, 0.52);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.22);
  --accent-text: #6ee7a0;
  --accent-tint: rgba(34, 197, 94, 0.12);
  --accent-line: rgba(110, 231, 160, 0.5);
  --link: #6ee7a0;
  --warn-text: #fbbf24;
  --warn-bg: rgba(245, 158, 11, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0a0e;
    --surface: #121218;
    --surface-2: #181821;
    --code-bg: #0d0d13;
    --text: #ececf1;
    --muted: rgba(236, 236, 241, 0.7);
    --faint: rgba(236, 236, 241, 0.52);
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.22);
    --accent-text: #6ee7a0;
    --accent-tint: rgba(34, 197, 94, 0.12);
    --accent-line: rgba(110, 231, 160, 0.5);
    --link: #6ee7a0;
    --warn-text: #fbbf24;
    --warn-bg: rgba(245, 158, 11, 0.16);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

code { font-family: var(--font-mono); }

/* Header: one slim line, not sticky, so the table gets the screen. */

.site-header { border-bottom: 1px solid var(--line); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 20px; height: 20px; }

.nav { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--text); }

.theme-toggle {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.7rem;
  white-space: nowrap;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent-line); }

/* Tabs: real links, one per comparison. They scroll sideways when they do not fit. */

.tabs {
  display: flex;
  gap: 2px;
  margin: 0.6rem 0 0;
  padding-bottom: 0.1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  padding: 0.18rem 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 700;
}

/* Title line: one short sentence, then the table. */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 0.9rem 0 0.6rem;
}
.top h1 { font-size: 1.25rem; letter-spacing: -0.02em; }
.top p { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* Toolbar: one row. */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 0.75rem;
}
.toolbar .count { margin: 0 0 0 auto; color: var(--faint); font-size: 0.8125rem; white-space: nowrap; }

input[type="search"] {
  flex: 0 1 18rem;
  min-width: 11rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
}
input[type="search"]::placeholder { color: var(--faint); opacity: 1; }
input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.chip:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
/* A tool chip is a switch: x removes the column, + brings it back. */
.chip-tool[aria-pressed="true"]:not(.chip-primary)::after { content: " \00d7"; font-weight: 700; opacity: 0.7; }
.chip-tool[aria-pressed="false"] { color: var(--muted); border-style: dashed; }
.chip-tool[aria-pressed="false"]::before { content: "+ "; font-weight: 700; }
.chip:disabled { cursor: default; transform: none; }
.chip-notes[aria-pressed="false"] { border-style: dashed; }

/* Add tool menu: a chip that opens a list of the tools that are not shown. */
.toolbar { position: relative; }
.add-menu { position: relative; }
.add-menu > summary { list-style: none; }
.add-menu > summary::-webkit-details-marker { display: none; }
.chip-add { display: inline-block; border-style: dashed; cursor: pointer; }
.add-menu[open] > .chip-add { background: var(--surface-2); border-color: var(--accent-line); }
.add-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(36rem, calc(100vw - 2rem));
  max-height: min(60vh, 28rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.15rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
/* With scripting on, compare.js places the list against the window (fixed), so it can never
   run off the screen. Without it the list hangs under the chip. */
.js .add-list { position: fixed; top: 0; left: 0; }
.add-hint, .add-filter { grid-column: 1 / -1; }
.add-hint { margin: 0 0 0.25rem; padding: 0.15rem 0.4rem; color: var(--faint); font-size: 0.8125rem; }
.add-filter {
  margin-bottom: 0.25rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.8rem;
}
.add-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.add-item[hidden] { display: none; }
.add-item:hover, .add-item:focus-visible { background: var(--surface-2); }
.add-item small { color: var(--faint); font-size: 0.72rem; font-weight: 400; }

.preset {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}

/* The Pick tools page: one table per tab that covers the picks. */
.tab-pick { border-style: dashed; border-color: var(--line-strong); }
.tab-pick[aria-current="page"] { border-style: solid; border-color: var(--accent); }
.pick-section { margin-top: 1.1rem; }
.pick-heading { margin: 0 0 0.4rem; font-size: 1rem; letter-spacing: -0.01em; }
.pick-heading a { color: var(--text); text-decoration: none; }
.pick-heading a:hover { text-decoration: underline; }

/* Table */

.table-wrap { position: relative; }

.compare {
  width: 100%;
  /* Each tool column keeps at least 9rem so commands stay readable. */
  min-width: calc(12.5rem + var(--cols, 5) * 9rem);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.compare th, .compare td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.compare thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-2);
  border-top: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  box-shadow: 0 1px 0 var(--line-strong);
}
.compare thead th:first-child { border-top-left-radius: calc(var(--r-card) - 1px); }
.compare thead th:last-child { border-top-right-radius: calc(var(--r-card) - 1px); }
.compare thead a { color: var(--text); text-decoration: none; }
.compare thead a:hover { text-decoration: underline; }
.th-tag { display: block; margin-top: -1px; font-size: 0.75rem; font-weight: 500; color: var(--faint); }

.compare .col-task { width: 9rem; }
/* The primary tool is the point of the page, so its column gets more room than the others. */
.compare th.col-primary { width: 12.5rem; }
.compare .cell-task { font-weight: 700; font-size: 0.875rem; background: var(--surface); }

.compare tbody tr:hover > td:not(.col-primary), .compare tbody tr:hover > .cell-task { background: var(--surface-2); }

/* The primary column is the point of the page, so it gets the accent. */
.compare th.col-primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.compare th.col-primary a { color: var(--accent-ink); }
.compare th.col-primary .th-tag { color: var(--accent-ink); opacity: 0.75; }
.compare td.col-primary {
  background: var(--accent-tint);
  border-left: 2px solid var(--accent-line);
  border-right: 2px solid var(--accent-line);
}
.compare th.col-primary { border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.compare tbody tr:last-child td.col-primary { border-bottom: 2px solid var(--accent-line); }

/* A cell is plain text: the command, and nothing else until you point at it.
   Click a command to copy it. Source and note icons appear on hover or keyboard focus. */
.cell { position: relative; display: flex; flex-direction: column; gap: 0.2rem; min-height: 1.2rem; }
.cell p { margin: 0; }

.cmd { position: relative; }
.cmd code {
  display: block;
  margin: 0 -0.2rem;
  padding: 0 0.2rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 4px;
  cursor: copy;
}
.cmd code:hover { background: var(--surface-2); }
.cmd.copied code { background: var(--accent-tint); }
.cmd.copied::after {
  content: "Copied";
  position: absolute;
  top: -0.1rem;
  right: 0;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-pill);
}

/* A word is kept whole unless it is wider than the column, then it breaks anywhere. */
.tok { display: inline-block; max-width: 100%; vertical-align: top; word-break: break-all; }

.cell-empty { font-weight: 500; color: var(--faint); font-size: 0.8125rem; }

/* Amber text: the closest command, but it does a different job. The sr-only text says so too. */
.cell-partial .cmd code { color: var(--warn-text); }
.cell-todo .cell-empty { color: var(--warn-text); }

/* Notes are short explanations. With scripting on they start closed, so the table can be
   scanned. The Notes chip opens all of them, and each cell's i icon opens one. */
.cell-note { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.note-btn { display: none; }
.js .compare .cell-note { display: none; }
.js .compare.show-notes .cell-note,
.js .compare .cell.open .cell-note { display: block; }

/* The icon pill floats over the cell's top-right corner, only while you point at the cell
   or tab into it. Phones have no hover, so there it stays visible, a little quieter. */
.cell-links {
  position: absolute;
  top: -0.15rem;
  right: -0.2rem;
  z-index: 2;
  display: flex;
  gap: 0.1rem;
  padding: 0.1rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.compare td:hover .cell-links,
.cell:focus-within .cell-links,
.cell.open .cell-links { opacity: 1; }
@media (hover: none) {
  .cell-links { opacity: 0.75; }
}
.cell-src, .js .note-btn {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--link);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.js .note-btn { font-style: italic; font-family: Georgia, serif; }
.cell-src:hover, .js .note-btn:hover { background: var(--surface); }
.js .note-btn[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent); }

.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }

/* Legend */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-hint { margin-left: auto; color: var(--faint); }
.swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; border: 1px solid var(--line-strong); }
.swatch-match { background: var(--accent); border-color: var(--accent); }
.swatch-partial { background: var(--warn-bg); border-color: var(--warn-text); }
.swatch-none { background: transparent; }

/* Prose sections, below the table */

.prose { max-width: 56rem; margin-top: clamp(3rem, 8vw, 5rem); }
.prose.about { margin-top: 1.5rem; }
.prose h1 { font-size: 1.5rem; margin-bottom: 0.9rem; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.9rem; }
.prose p, .prose li { color: var(--muted); }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--text); }
.prose code {
  font-size: 0.875em;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}

/* Footer */

.site-footer {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer p { margin: 0 0 0.4rem; max-width: 52rem; }

/* Desktop: the page fills the browser window and the table scrolls inside it, in both
   directions. The header row and the Task column are frozen, so you always see which tool
   and which task a cell belongs to. Phones keep normal page scrolling (cards, below). */
@media (min-width: 821px) {
  body.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.app > .site-header { flex: none; }
  body.app > main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  body.app .tabs, body.app .top, body.app .toolbar, body.app .legend { flex: none; }
  /* All 13 tabs stay visible: on a narrower window they wrap to a second row. */
  .tabs { flex-wrap: wrap; overflow: visible; row-gap: 3px; }
  body.app .compare-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.app .compare-section > .table-wrap,
  body.app #pick-out {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  body.app .compare-section > .table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
  }
  body.app .compare-section > .table-wrap > .compare { border: 0; border-radius: 0; }
  body.app .legend { margin: 0.4rem 0 0; }
  body.app .site-footer { flex: none; margin: 0; padding: 0.3rem 0 0.5rem; border-top: 0; font-size: 0.75rem; }
  body.app .site-footer p { margin: 0; max-width: none; }

  .compare .cell-task { position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--line); }
  .compare thead th.col-task { position: sticky; left: 0; top: 0; z-index: 6; }
}

/* Phones and small tablets: one card per task, the primary tool first. */
@media (max-width: 820px) {
  .wrap { padding: 0 0.9rem; }

  .toolbar { gap: 0.5rem; }
  input[type="search"] { flex: 1 1 100%; }
  /* Chip rows scroll sideways instead of stacking into a tall block. */
  .chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .toolbar .count { order: 9; margin: 0; }
  .legend-hint { margin-left: 0; }

  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare { background: transparent; border: 0; min-width: 0; }
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .compare tr {
    margin-bottom: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  .compare th, .compare td { border-top: 0; }
  .compare td { border-top: 1px solid var(--line); padding: 0.55rem 0.9rem; }
  .compare .cell-task { padding: 0.65rem 0.9rem; font-size: 1rem; background: var(--surface-2); }
  .compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--faint);
  }
  .compare td.col-primary {
    border-left: 3px solid var(--accent);
    border-right: 0;
  }
  .compare td.col-primary::before { color: var(--accent-text); font-weight: 700; }
  .compare tbody tr:last-child td.col-primary { border-bottom: 0; }
  .compare tbody tr:hover > td:not(.col-primary), .compare tbody tr:hover > .cell-task { background: transparent; }
  .compare tbody tr:hover > .cell-task { background: var(--surface-2); }
}

@media (max-width: 640px) {
  .nav-extra { display: none; }
  .top h1 { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .toolbar, .cell-links, .theme-toggle { display: none !important; }
  .js .compare .cell-note { display: block; }
}