/* Trixie Board - dark theme, mobile-first.
   Facet colours are the dataviz-validated dark-surface categorical steps;
   every chip also carries the facet name in text, so colour is never the
   only identity signal. */

:root {
  color-scheme: dark;
  --surface: #1a1a19;
  --panel: #232322;
  --card: #2c2c2a;
  --line: #3a3a37;
  --text: #f2f1ec;
  --text-2: #c3c2b7;
  --text-3: #8a8879;

  --jkfm: #3987e5;
  --watergate: #199e70;
  --trading: #9085e9;
  --money: #008300;
  --family: #d55181;
  --dev: #d95926;
  --personal: #8a8879;

  --amber: #c98500;
  --red: #e66767;
  --green: #34a853;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--surface);
  color: var(--text);
  font: 15px/1.45 -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  min-height: 100vh;
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 0;
}

.masthead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

h1 { font-size: 1.25rem; letter-spacing: 0.2px; }

.updated { color: var(--text-3); font-size: 0.8rem; }

/* Facet filter tabs */
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, transparent);
}
.tab .n { color: var(--text-3); font-size: 0.75rem; }
.tab.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.tab.active .n { color: var(--surface); }

/* Board: columns swipe horizontally on phone, fit side by side on desktop */
.board {
  display: flex;
  gap: 12px;
  padding: 14px 16px 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  align-items: flex-start;
}

.col {
  flex: 1 0 268px;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

.col h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-2);
  padding: 2px 4px 8px;
  display: flex;
  justify-content: space-between;
}
.col h2 .count {
  background: var(--card);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--text-3);
}

.cards { display: flex; flex-direction: column; gap: 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--facet, var(--line));
  border-radius: 9px;
  padding: 9px 10px;
}
.card .title { font-weight: 600; font-size: 0.92rem; }
.card .detail {
  color: var(--text-2);
  font-size: 0.82rem;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.72rem;
}

.chip {
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.chip.facet { border-color: var(--facet); color: var(--facet); }
.chip.age-warm { border-color: var(--amber); color: var(--amber); }
.chip.age-hot { border-color: var(--red); color: var(--red); }
.chip.done { border-color: var(--green); color: var(--green); }

.col.done-col .card { opacity: 0.75; }
.col.done-col .card .title { text-decoration: line-through; text-decoration-thickness: 1px; }

.empty { color: var(--text-3); font-size: 0.8rem; padding: 8px 4px; }

@media (min-width: 1160px) {
  .board { overflow-x: visible; }
  .col { max-width: none; }
}