/* The board's own rules, on top of the shared kit (kit.css, vendored from ~/Projects/board-kit by its bin/sync-kit;
   design spec 2026-10-30, ruling BK5). Tokens, fonts, the top bar, pills, cards, the Needs you strip, forms and the
   timeline all come from the kit; this file holds only what the board alone has: the checked line, owner initials, the
   stage track (R304), the dark "your move" panel, and the dead-routes and setup pages. Nothing the pages need in
   order to work: every fact a page shows is in its text, and the owner initials drawn here are hidden from screen
   readers (content: "x" / ""), since the text already says them. */

main { padding-bottom: 8px; }
h2 { margin: 26px 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
h2 .k-meta { font-weight: 500; margin-left: 8px; }
.k-top .who { font-size: 12.5px; }

/* KTD9's line, as the status line under the headline. */
.checked { color: var(--ink-2); margin: 0 0 16px; max-width: 52ch; }
.checked:not(.warn)::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 8px; transform: translateY(-1px); }
.checked.warn strong { color: var(--urgent); font-weight: 650; }

/* Banners keep the kit's shape; the board's own class names stay for the tests and the job. */
.saved, .error, .locked { margin-top: 12px; }

/* --- the board --------------------------------------------------------------------------------------------------- */

.k-needs .k-ntxt .k-id { margin-right: 4px; }
nav.stages { margin-top: 14px; }
main section[id] > h2 { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 650; margin: 22px 0 2px; letter-spacing: -0.005em; }
main section[id] > .k-empty { padding: 14px 0 6px; border-top: 1px solid var(--rule); }
main section[id] > .k-empty strong { font-size: 15px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin: 0; }

/* the owner's initial before the meta line, hidden from screen readers; the text already names the owner */
li.tile .meta::before {
  content: "" / ""; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; font-size: 10px; font-weight: 800;
}
li.tile[data-owner="claude"] .meta::before { content: "C" / ""; background: var(--accent-soft); color: var(--accent); }
li.tile[data-owner="iris"] .meta::before { content: "I" / ""; background: var(--violet-soft); color: var(--violet); }
li.tile[data-owner="dimitri"] .meta::before { content: "D" / ""; background: var(--ink); color: var(--bg); }

/* done and proven: quiet rows */
#done li.tile { color: var(--ink-2); }
#done li.tile .k-ttl { font-weight: 500; }

/* --- forms and the new-card box ----------------------------------------------------------------------------------- */

.card { margin: 16px 0; padding: 18px 16px; background: var(--raise); border: 1px solid var(--rule); border-radius: 18px; }
section.new { margin-top: 30px; }
section.new h2 { margin-top: 0; }
section.new > .k-meta { margin: 0 0 12px; }
label.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; }
label.check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
input[readonly] { color: var(--ink-3); }
.card form { margin: 0; }
/* every form's button is the kit's dark action; the plain markup stays as the tests and the job know it */
form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px;
  border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 650; font-size: 14px; white-space: nowrap;
}
form.create button[type="submit"], form[action="/sign-in"] button[type="submit"], form[action="/setup"] button[type="submit"] { width: 100%; }
form.note button[type="submit"] { background: var(--raise); color: var(--ink); border: 1px solid var(--rule); }
.k-top .k-sites a[href="/dead-routes"] { color: var(--ink-3); }

/* --- a card ------------------------------------------------------------------------------------------------------- */

.summary { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 6px; }
.summary .k-tags { display: flex; gap: 6px; margin: 0; }
ol.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
ol.track li { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; line-height: 1.25; color: var(--ink-3); }
ol.track li::before { content: ""; height: 5px; border-radius: 3px; background: var(--soft); }
ol.track li.past::before { background: var(--ink); }
ol.track li[aria-current="step"] { color: var(--urgent); font-weight: 700; }
ol.track li[aria-current="step"]::before { background: var(--count); }

.summary dl.k-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; font-size: 14px; }
.summary dl.k-rail > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary dl.k-rail > div:nth-child(2), .summary dl.k-rail > div:nth-child(3), .summary dl.k-rail > div:nth-child(n+7) { grid-column: span 2; }
.summary dl.k-rail dt { font-size: 12.5px; font-weight: 600; }
.summary dl.k-rail > div:nth-child(2) dd { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }

ul.notes li .by { display: block; }
ul.notes li .by time { display: inline; }
ul.history li time { display: inline; }

/* the moves: the one dark panel on the page, the main action in the kit's dark (design spec, part 3) */
section.moves {
  margin: 24px 0; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px;
  background: var(--ink); color: var(--bg); border-radius: 20px;
}
section.moves h2 { margin: 0; color: var(--bg); font-size: 18px; }
section.moves form.move button[type="submit"] { background: var(--count); color: var(--count-ink); }
section.moves form.move + form.move { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--bg) 30%, transparent); }
section.moves form.move + form.move button[type="submit"] { background: transparent; color: var(--bg); border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); }

form.note { margin: 18px 0; padding: 18px 16px; background: var(--raise); border: 1px solid var(--rule); border-radius: 18px; }
p.back { margin: 22px 0 0; }

/* --- everything else (dead routes, setup, the foot) ----------------------------------------------------------------- */

main ul:not([class]) { padding-left: 1.2rem; }
main ul:not([class]) li { margin: 6px 0; overflow-wrap: anywhere; }
code.password { font: 600 1.2rem/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; }
.foot { margin-top: 28px; font-size: 12.5px; color: var(--ink-3); max-width: 70ch; }
.foot p { margin: 4px 0; }
.foot a { font-weight: 600; }

/* form labels: the kit's field shape, on the board's plain <label> markup the tests and the job know */
form label:not(.check) { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
form label:not(.check) input:not([type="checkbox"]), form label textarea, form label select {
  display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--raise); color: var(--ink); font: inherit; font-size: 16px;
}
form label textarea { min-height: 5rem; padding: 10px 12px; resize: vertical; }
section.moves label:not(.check) { color: color-mix(in srgb, var(--bg) 78%, transparent); }
section.moves label textarea, section.moves label input:not([type="checkbox"]) { background: color-mix(in srgb, var(--bg) 12%, transparent); color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }