/* One stylesheet, no framework. Dense on purpose: twelve projects and their
   four columns have to fit on one screen, because seeing all of it at once is
   the whole point. */

:root {
  --bg: #0f1115;
  --panel: #14161a;
  --panel-2: #191c22;
  --line: #262b34;
  --ink: #dfe4ee;
  --muted: #7b8496;
  --faint: #4e5665;
  --now: #7dd3a0;
  --next: #7aa2f7;
  --vision: #b7a2f7;
  --danger: #f77a8a;
  --radius: 5px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --panel: #ffffff;
    --panel-2: #f1f3f7;
    --line: #dde1e8;
    --ink: #1b1f27;
    --muted: #666e7d;
    --faint: #98a0ad;
    --now: #157f4e;
    --next: #2b5fd0;
    --vision: #6b45c9;
    --danger: #b8253a;
  }
}

* { box-sizing: border-box; }

/* `hidden` has to WIN. Every panel below sets `display` in a class rule, and a
   class rule beats the user-agent's `[hidden] { display: none }`. */
[hidden] { display: none !important; }

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

h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: .02em; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
h3 { margin: 0; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 8px;
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button.ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: 1px 5px;
}
button.ghost:hover { color: var(--ink); border-color: var(--line); }
button.active { border-color: var(--next); color: var(--next); }

input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 6px;
  width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--next); }
textarea { resize: vertical; }

.muted { color: var(--muted); font-size: 12px; }
.spacer { flex: 1; }
.error { color: var(--danger); font-size: 12px; margin: 0; }
.blank { color: var(--faint); font-style: italic; }

/* ── sign in ─────────────────────────────────────────────────────────── */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card {
  width: 290px;
  display: grid;
  gap: 7px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.card h1 { margin-bottom: 6px; }
.card label { font-size: 12px; color: var(--muted); }
.card button { margin-top: 6px; padding: 6px; }

/* ── header ──────────────────────────────────────────────────────────── */
.bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.bar #filter { width: 170px; }

.create {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr auto auto;
  gap: 6px;
  padding: 7px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

/* ── the grid ────────────────────────────────────────────────────────── */
.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 33px;
  background: var(--bg);
  z-index: 2;
}
.grid th.col-project { width: 21%; }
.grid td {
  vertical-align: top;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  width: 26.3%;
}
.grid tr:hover td { background: var(--panel); }
.grid tr.dragging td { opacity: .4; }
.grid tr.drop-above td { box-shadow: inset 0 2px 0 var(--next); }
.grid tr.drop-below td { box-shadow: inset 0 -2px 0 var(--next); }

/* The three thinking columns keep a hairline in their own colour, so the eye
   knows which question it is reading without going back to the header. */
td.field-now    { border-left: 2px solid var(--now); }
td.field-next   { border-left: 2px solid var(--next); }
td.field-vision { border-left: 2px solid var(--vision); }

.cell {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  min-height: 20px;
  border-radius: 3px;
}
.cell:hover { background: var(--panel-2); }
.cell.blank::after { content: "—"; color: var(--line); font-style: normal; }

.name-row { display: flex; align-items: baseline; gap: 5px; }
.grip {
  cursor: grab;
  color: var(--faint);
  font-size: 12px;
  user-select: none;
  line-height: 1;
}
.grip:active { cursor: grabbing; }
.name {
  font-weight: 600;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.name:hover { color: var(--next); text-decoration: underline; }

.row-meta {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 1px;
  padding-left: 16px;
  flex-wrap: wrap;
}
.row-meta button { font-size: 12px; }

/* The row's own buttons stay out of the way until the row is under the mouse:
   four grey chips on every row is what made this look busy. */
.row-meta .ghost { opacity: 0; transition: opacity .08s; }
tr:hover .row-meta .ghost, .row-meta .ghost:focus { opacity: 1; }

/* ── the cell editor ─────────────────────────────────────────────────── */
.editor { display: grid; gap: 4px; }
.editor-actions { display: flex; gap: 5px; align-items: center; }
.editor-actions .muted { margin-left: auto; }

/* ── one project, unfolded ───────────────────────────────────────────── */
.project-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.lanes {
  display: grid;
  grid-template-columns: 21% repeat(3, 1fr);
  align-items: start;
}

.lane {
  padding: 8px 12px 24px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.lane:last-child { border-right: none; }

.lane-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.lane-now    .lane-label { color: var(--now); }
.lane-next   .lane-label { color: var(--next); }
.lane-vision .lane-label { color: var(--vision); }

.lane-current { margin-top: 6px; }
.lane-value {
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lane-since {
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--faint);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* ── the project column's one region (A+D) ───────────────────────────── */
.region { margin-top: 16px; }

.tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}
.tab {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: none;
  color: var(--faint);
}
.tab:hover { color: var(--ink); border-color: transparent; }
.tab.on {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
  margin-bottom: -1px;
  padding-bottom: 5px;
}
.tab .n { color: var(--faint); font-size: 10px; margin-left: 4px; }
.tabs .plus {
  margin-left: auto;
  font-size: 14px;
  line-height: 1;
  padding: 2px 8px;
  margin-bottom: 2px;
}

/* The form exists only while it is wanted -- see the comment in app.js. */
.adder { display: flex; gap: 6px; margin-top: 9px; align-items: flex-start; }
.adder .url { flex: 1.4; }
.adder .name { flex: 1; }
.adder .note-input { flex: 1; }
.adder .go {
  border-color: var(--line);
  color: var(--ink);
  white-space: nowrap;
  padding: 4px 10px;
}
.hint { font-size: 10px; color: var(--faint); margin-top: 5px; }

/* Rows, not boxes. Scrolls on its own so a long history never pushes the other
   three lanes off the screen. */
.rows {
  margin-top: 4px;
  max-height: 52vh;
  overflow-y: auto;
}
.row { padding: 7px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }
.row .when { font-size: 11px; color: var(--faint); }
.row .when .by { color: var(--next); }
.row .text { margin-top: 1px; white-space: pre-wrap; overflow-wrap: anywhere; }

.link {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.link:last-child { border-bottom: none; }
.link a {
  color: var(--next);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link a:hover { text-decoration: underline; }
.link .host { font-size: 11px; color: var(--faint); }
.link .x { margin-left: auto; opacity: 0; padding: 0 5px; }
.link:hover .x, .link .x:focus { opacity: 1; }

.empty-line { color: var(--faint); font-size: 12px; padding: 10px 0; }

.lane-history { display: grid; gap: 10px; }

/* History is deliberately quieter than the present: it is context, and the
   current value is the thing you came to read. */
.past { color: var(--muted); }
.past-head {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  color: var(--faint);
}
.past-head .tag { text-transform: uppercase; letter-spacing: .07em; }
.past-head .by { color: var(--next); }
.past-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 1px;
}

.empty { color: var(--muted); padding: 20px 10px; }

.toast {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  margin: 0;
  padding: 7px 12px;
  background: var(--panel-2);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--ink);
  max-width: 80vw;
}

/* Narrow screens: the four columns stack. Shrinking four columns of prose to
   90px each reads as nothing at all, so it stops being a grid instead. */
@media (max-width: 820px) {
  .grid, .grid tbody, .grid tr, .grid td { display: block; width: auto; }
  .grid thead { display: none; }
  .grid tr { border-bottom: 1px solid var(--line); padding: 4px 0; }
  .grid td { border-bottom: none; padding: 3px 10px; }
  td.field-now::before, td.field-next::before, td.field-vision::before {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  td.field-now::before { content: "now"; }
  td.field-next::before { content: "next"; }
  td.field-vision::before { content: "vision"; }
  .row-meta .ghost { opacity: 1; }
  .create { grid-template-columns: 1fr; }
  .bar { flex-wrap: wrap; }
  .lanes { grid-template-columns: 1fr; }
  .lane { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
}