/*
  One page, read once a morning, on one machine.

  Everything here is local: system fonts, no webfont, no image, no external
  request of any kind — the server sends `default-src 'self'` and the page has
  nothing to fetch anyway. The colours come from `color-scheme`, so the board
  follows whatever Windows is set to rather than insisting on its own.

  The layout has one job: let Jeff read the Inbox top to bottom and stop when he
  runs out of morning. So the cards are a single column at a comfortable reading
  width, the tier is the loudest thing on a card, and the buttons sit at the
  bottom where the reading ends.
*/

:root {
  color-scheme: light dark;

  --ink: #14181d;
  --ink-soft: #57606a;
  --page: #f6f7f9;
  --card: #ffffff;
  --line: #d8dce1;
  --accent: #1f4e79;
  --good: #1a7f4b;
  --good-bg: #e7f5ed;
  --bad: #a4232a;
  --bad-bg: #fdecec;
  --chip: #eef1f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e9ee;
    --ink-soft: #9aa4b2;
    --page: #14181d;
    --card: #1c2229;
    --line: #2e3742;
    --accent: #8ab4e8;
    --good: #5dd39e;
    --good-bg: #17291f;
    --bad: #ff8b8b;
    --bad-bg: #2d1a1c;
    --chip: #262e37;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1rem 1rem 4rem;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.board,
.notice {
  max-width: 54rem;
  margin: 0 auto;
}

/* --- the notice line ----------------------------------------------------- */

.notice {
  min-height: 1.5rem;
  margin: 0 auto 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.notice:empty {
  min-height: 0;
}

/* --- tabs ------------------------------------------------------------------
   Two buttons, one active. The header sits below them so it reads as
   belonging to the page rather than to whichever tab happens to be open. */

.tabs {
  max-width: 54rem;
  margin: 0 auto 1rem;
  display: flex;
  gap: 0.5rem;
}

.tab {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0.375rem 0.125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.tab:hover {
  border-color: var(--line);
  color: var(--ink);
}

.tab-active {
  border-color: var(--accent);
  color: var(--ink);
}

.header-slot {
  max-width: 54rem;
  margin: 0 auto;
}

/* --- header -------------------------------------------------------------- */

.header {
  border: 1px solid var(--line);
  border-left-width: 6px;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  background: var(--card);
}

.header-green {
  border-left-color: var(--good);
  background: var(--good-bg);
}

.header-red {
  border-left-color: var(--bad);
  background: var(--bad-bg);
}

.header-top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.header h1 {
  margin: 0;
  font-size: 1.25rem;
}

.header-state {
  font-weight: 600;
}

.header-green .header-state {
  color: var(--good);
}

.header-red .header-state {
  color: var(--bad);
}

.header .refresh {
  margin-left: auto;
}

.last-run {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.reasons {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.reason {
  color: var(--bad);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8125rem;
}

/* --- lists --------------------------------------------------------------- */

.list {
  margin-bottom: 2rem;
}

.list-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.list-title {
  margin: 0;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}

.empty {
  color: var(--ink-soft);
  font-style: italic;
}

/* --- cards --------------------------------------------------------------- */

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 0.875rem;
  background: var(--card);
}

.card-head {
  margin-bottom: 0.5rem;
}

.card-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.card-company {
  margin: 0.125rem 0 0;
  color: var(--ink-soft);
}

.badges {
  margin: 0.375rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.badge {
  border: 1px solid var(--bad);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  color: var(--bad);
  font-size: 0.75rem;
}

.badge-sample {
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}

.tier {
  margin: 0 0 0.375rem;
  font-size: 1rem;
}

.tier .field-value {
  font-weight: 700;
}

.tier-Strong .field-value {
  color: var(--good);
}

.tier-No .field-value,
.tier-unjudged .field-value,
.tier-none .field-value {
  color: var(--ink-soft);
}

.field {
  margin: 0 0 0.25rem;
}

.field-label {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dates,
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.chip {
  display: inline-block;
  border-radius: 4px;
  background: var(--chip);
  padding: 0.0625rem 0.375rem;
  margin-right: 0.25rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.card-link {
  color: var(--accent);
  word-break: break-all;
}

.link-location {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.notes {
  display: block;
  width: 100%;
  margin: 0.625rem 0 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--page);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

/* --- buttons ------------------------------------------------------------- */

.moves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

button {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3125rem 0.875rem;
  background: var(--page);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.move-shortlist,
.move-applied,
.move-interview,
.move-offer {
  border-color: var(--good);
  color: var(--good);
  font-weight: 600;
}

.move-archived {
  color: var(--ink-soft);
}

/* --- Checks ---------------------------------------------------------------
   One weekly sitting: titled blocks of up to ten items, then a handful of
   small report tables. Nothing here is a card he moves through a pipeline, so
   it reads plainer than the board on purpose. */

.checks-list {
  margin-bottom: 2rem;
}

.checks-list-title {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.25rem;
}

.checks-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checks-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--card);
}

.checks-item-head {
  margin: 0 0 0.25rem;
}

.checks-item-title {
  font-weight: 600;
}

.checks-item-company {
  color: var(--ink-soft);
}

.checks-item-link {
  display: block;
  margin: 0 0 0.375rem;
  color: var(--accent);
  font-size: 0.875rem;
  word-break: break-all;
}

.checks-item-why {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.thumbs {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

.thumb-active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.checks-note {
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-style: italic;
}

.checks-reports {
  margin-top: 1rem;
}

.checks-table {
  margin-bottom: 1.5rem;
}

.checks-table h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.checks-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.checks-table th,
.checks-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.25rem 0.5rem;
  text-align: left;
}

.checks-table th {
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.6875rem;
}

.checks-expired {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------------
   The labelling page (labels.html). One posting at a time, read top to
   bottom, three answers at the end where the reading stops. */

.labels {
  max-width: 48rem;
  margin: 0 auto;
}

.label-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.label-progress progress {
  flex: 1;
  height: 0.5rem;
}

.label-stratum {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.label-extract {
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  background: var(--card);
  max-height: 60vh;
  overflow: auto;
}

.label-system {
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
  margin: 1rem 0;
}

.label-note {
  width: 100%;
  min-height: 3rem;
  margin: 0.5rem 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.label-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.label-want {
  border-color: var(--good);
  color: var(--good);
}

.label-no {
  border-color: var(--bad);
  color: var(--bad);
}

.label-current {
  color: var(--accent);
}

.label-done {
  text-align: center;
  padding: 3rem 1rem;
}

.label-buttons-top { margin: 0.5rem 0 0.75rem; }
.label-guess { margin: 0 0 0.75rem; }
.label-guess-want { background: #dcefdc; }
.label-guess-no { background: #f3dcdc; }
.label-guess-unsure { background: #f0e8c8; }

.label-mode { display: flex; gap: 0.5rem; margin: 0 0 0.75rem; }
.label-group { margin: 1.25rem 0; }
.label-group-title { margin: 0 0 0.4rem; font-size: 1rem; }
.label-table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.label-table td { padding: 0.4rem 0.5rem; border-top: 1px solid #ddd; vertical-align: top; font-size: 0.9rem; }
.label-row-open td { background: #fff8e1; }
.label-row-buttons { white-space: nowrap; }
.label-small { padding: 0.15rem 0.5rem; font-size: 0.8rem; margin-right: 0.25rem; }
.label-save { font-weight: 600; }
.label-help { color: #555; }

.label-button.label-current { background: var(--accent); border-color: var(--accent); color: #0b0d10; font-weight: 700; }
.label-want.label-current { background: var(--good); border-color: var(--good); color: #0b0d10; }
.label-no.label-current { background: var(--bad); border-color: var(--bad); color: #0b0d10; }
.label-unsure.label-current { background: #e0c04a; border-color: #e0c04a; color: #0b0d10; }

.label-hidden { display: none; }
.label-row-note { width: 13rem; font-size: 0.85rem; padding: 0.2rem 0.4rem; }

/* --- the board as a table --------------------------------------------- */

.filters { margin: 0.6rem 0 0.9rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line, #2a3038); border-radius: 8px; }
.filters-top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.filter-search { flex: 1 1 18rem; min-width: 12rem; padding: 0.35rem 0.6rem; font: inherit; font-size: 0.9rem;
  color: inherit; background: transparent; border: 1px solid var(--line, #2a3038); border-radius: 6px; }
.filter-count { font-size: 0.85rem; opacity: 0.75; white-space: nowrap; }
.filter-clear { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.6rem; cursor: pointer;
  color: inherit; background: transparent; border: 1px solid var(--line, #2a3038); border-radius: 6px; }
.filter-group { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin: 0.3rem 0; }
.filter-label { width: 5.5rem; flex: 0 0 5.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.filter-pill { font: inherit; font-size: 0.85rem; padding: 0.2rem 0.6rem; cursor: pointer; white-space: nowrap;
  color: inherit; background: transparent; border: 1px solid var(--line, #2a3038); border-radius: 999px; }
.filter-pill:hover { border-color: var(--accent, #8ab4e8); }
.filter-on { background: var(--accent, #8ab4e8); border-color: var(--accent, #8ab4e8); color: #0b0d10; font-weight: 600; }

.board-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: auto; }
.board-th { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 2px solid var(--line, #2a3038);
  white-space: nowrap; vertical-align: bottom; cursor: grab; }
.th-sort { font: inherit; font-weight: 600; font-size: 0.85rem; padding: 0.1rem 0.2rem; cursor: pointer;
  color: inherit; background: transparent; border: 0; }
.th-sort:hover { text-decoration: underline; }
.th-sorted { color: var(--accent, #8ab4e8); }
.th-move { display: inline-flex; gap: 0.1rem; margin-left: 0.25rem; opacity: 0; transition: opacity 0.1s; }
.board-th:hover .th-move { opacity: 0.8; }
.th-move button { font: inherit; font-size: 0.7rem; line-height: 1; padding: 0.1rem 0.2rem; cursor: pointer;
  color: inherit; background: transparent; border: 1px solid var(--line, #2a3038); border-radius: 4px; }

.board-row { cursor: pointer; }
.board-row td { padding: 0.35rem 0.5rem; border-top: 1px solid var(--line, #2a3038); vertical-align: top; }
.board-row:hover td { background: rgba(138, 180, 232, 0.08); }
.board-row-open td { background: rgba(138, 180, 232, 0.14); font-weight: 600; }
.board-row-empty td { padding: 1rem 0.5rem; opacity: 0.7; }
.col-title { max-width: 26rem; }
.col-company { max-width: 14rem; }
.col-flags { max-width: 14rem; font-size: 0.8rem; opacity: 0.85; }
.col-pay, .col-age, .col-tier, .col-stage { white-space: nowrap; }
.row-tier-Strong .col-tier { color: var(--good, #5dd39e); font-weight: 600; }
.row-tier-No .col-tier { opacity: 0.6; }
.board-detail-cell { padding: 0 0.5rem 0.75rem; border-top: 0; }
.board-detail-cell .card { border: 0; padding: 0.5rem 0 0; }

/* The board fills the window, edge to edge, at every size.

   The gutter is 24px, dropping to 16px on a narrow window: measured on
   2026-09-19 against full-width list interfaces (GitHub's issue list uses
   exactly that). The job boards that look roomier — RemoteOK, Ashby — get it
   from a centered reading column, which is the thing this board does not do.

   The 54rem reading column above suits stacked cards; the table overflowed it
   and read as a page pinned to one side. Here the body gives up its side
   padding and a var(--gutter) gutter on the outer edges does the job instead, so the
   text has room to breathe without a reading column down the middle. Columns share
   the width proportionally and wrap rather than forcing a sideways scroll;
   only a genuinely narrow window (a phone) makes the table scroll. */

html {
  --gutter: 1.5rem;
}

@media (max-width: 45rem) {
  html {
    --gutter: 1rem;
  }
}

body {
  padding-left: 0;
  padding-right: 0;
}

.board,
.notice,
.tabs,
.header-slot,
.list {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.notice,
.tabs,
.header-slot,
.list-head,
.list-note,
.empty {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

.filters {
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

.list {
  overflow-x: auto;
}

.board-table {
  width: 100%;
  min-width: 0;
  /* fixed: the shares below decide the widths, so the table fits any window
     instead of being pushed wide by one long title. */
  table-layout: fixed;
}

.board-td,
.board-th {
  overflow-wrap: anywhere;
}

/* Widths as shares of the window, so the table grows with it instead of
   leaving the right-hand side empty. Only the short columns refuse to wrap. */
.col-tier { width: 6%; }
.col-title { width: 24%; max-width: none; }
.col-company { width: 13%; max-width: none; }
.col-pay { width: 24%; white-space: normal; }
.col-rung { width: 8%; }
.col-employment { width: 6%; }
.col-age { width: 6%; }
.col-flags { width: 9%; max-width: none; }
.col-stage { width: 4%; }

.board-th:first-child,
.board-row td:first-child,
.board-detail-cell {
  padding-left: var(--gutter);
}

.board-th:last-child,
.board-row td:last-child {
  padding-right: var(--gutter);
}