/* FILE: ticketbook/ui/kb.css
 *
 * The knowledge base: the page of the book the bot reads from. Evidence and
 * instrument on one sheet — the changes strip and the section body are what
 * somebody reads to decide whether last night's edit held; the editor and the
 * put-back buttons are the instruments, and they do not print.
 *
 * Only the shell's tokens (CONTRACT.md §7), Linear-inspired as of the
 * 2026-09-30 redesign: `--radius`/`--radius-sm` on the editor's own fields and
 * the tab count, never on a row of the list, the changes strip or the diff. A
 * removal is still marked `−` and confirmed in rubric, an addition still `+`
 * and confirmed in live.
 */

.kb {
  min-height: 100%;
  display: grid;
  align-content: start;
  background: var(--ink-1);
}

/* Head --------------------------------------------------------------------- */

.kb__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: var(--w-band) solid var(--rule-3);
}

.kb__where {
  min-width: 0;
}

.kb__back {
  display: inline-block;
  margin-bottom: var(--s-2);
  font-size: var(--t-small);
  color: var(--bone-3);
}

.kb__title {
  margin: 0;
  color: var(--bone-1);
  font-size: var(--t-head);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* The state of the page, stated once in the figure face because every part of
   it is a measurement. Not a hero metric and not a tile. */
.kb__count {
  margin: var(--s-1) 0 0;
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.kb__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Sections ----------------------------------------------------------------- */

.kb__section {
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-2);
}

.kb__sectionline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.kb__h {
  margin: 0;
  color: var(--bone-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kb__figure {
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* An empty strip is a written note against the fold, the same idiom as the
   empty register. It states a fact about the week, not an apology. */
.kb__empty {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-4);
  border-left: var(--w-band) solid var(--rule-3);
  color: var(--bone-2);
  max-width: 58ch;
  line-height: 1.6;
}

/* The server's own sentence, beside a rubric rule, exactly as the gate says it. */
.kb__msg {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-2);
  color: var(--rubric-ink);
  line-height: 1.55;
  max-width: none;
}

.kb__msg::before {
  content: "";
  display: inline-block;
  width: var(--w-rule);
  height: 1em;
  margin-right: var(--s-3);
  vertical-align: -0.15em;
  background: var(--rubric);
}

.kb__form .kb__msg {
  padding: 0;
  border-bottom: 0;
}

/* A retired section says so on a standing line above its facts. Neutral: being
   retired is a state, not a correction. */
.kb__standing {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-2);
  color: var(--bone-2);
  font-size: var(--t-small);
  line-height: 1.55;
}

.kb__facts {
  margin: 0;
  padding: 0 var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-2);
}

/* A legend, not a badge: micro, uppercase, tertiary, no ground. The word
   "agent" after a name is what keeps the nightly job from reading as a
   colleague, the same way the register refuses it a column. */
.kb__legend {
  color: var(--bone-3);
  font-family: var(--font-text);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kb__legend--agent {
  margin-left: var(--s-2);
}

[data-kind="agent"] {
  font-style: italic;
}

/* The changes strip ---------------------------------------------------------- */

.kb__changes {
  list-style: none;
  margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
  padding: 0;
  border-top: var(--w-rule) solid var(--rule-2);
}

.change {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-bottom: var(--w-rule) solid var(--rule-1);
}

.change__meta {
  display: grid;
  /* A fixed author column so the section titles align down the strip whether
     the writer was a colleague or a job with the word "agent" after it. */
  grid-template-columns: 16ch 18ch minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3);
  min-height: var(--m-row);
  /* The same measure as the diff under it, so the count sits on the diff's
     right edge rather than at the far side of the leaf. */
  max-width: 96ch;
}

.change__when,
.change__stats {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.change__who,
.ksec__who,
.ver__who,
.kb__author {
  color: var(--bone-2);
  font-size: var(--t-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.change__section {
  color: var(--bone-1);
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.change__section:hover {
  text-decoration: underline;
}

.change__reason {
  margin: 0;
  color: var(--bone-2);
  max-width: 68ch;
  line-height: 1.55;
}

.change__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

.change__note {
  color: var(--bone-3);
  font-size: var(--t-small);
}

/* The diff --------------------------------------------------------------------
 *
 * Ruled rows, a gutter for the mark, the text beside it. The mark is the
 * state: `−` for a line the change struck, `+` for a line it wrote, `⋯` for
 * lines it left alone and this drawing skipped. Colour confirms and never
 * carries — take it away and the gutter still says everything.
 */

.diff {
  border-top: var(--w-rule) solid var(--rule-2);
  border-bottom: var(--w-rule) solid var(--rule-2);
  max-width: 96ch;
  font-size: var(--t-base);
  line-height: 1.55;
}

.diff:empty {
  display: none;
}

.diff__row {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  align-items: baseline;
  border-bottom: var(--w-rule) solid var(--rule-1);
}

.diff__row:last-child {
  border-bottom: 0;
}

.diff__gutter {
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  text-align: center;
  user-select: none;
}

.diff__text {
  padding: var(--s-1) var(--s-2) var(--s-1) 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--bone-2);
}

.diff__row[data-kind="add"] .diff__text {
  color: var(--bone-1);
}

.diff__row[data-kind="add"] .diff__gutter {
  color: var(--live-ink);
}

/* A removal is a correction to a committed line — the one meaning rubric is
   licensed for. The line itself stays legible: it is what the desk may be
   about to put back. */
.diff__row[data-kind="del"] .diff__gutter {
  color: var(--rubric-ink);
}

.diff__row[data-kind="del"] .diff__text {
  color: var(--bone-2);
}

.diff__row[data-kind="skip"] .diff__text {
  color: var(--bone-3);
  font-size: var(--t-small);
  font-style: italic;
}

/* Words that moved inside a rewritten line: struck and underlined, which are
   marks; the tint only agrees with the gutter. */
.diff__text del {
  color: var(--rubric-ink);
  text-decoration: line-through;
  text-decoration-thickness: var(--w-rule);
}

.diff__text ins {
  color: var(--bone-1);
  text-decoration: underline;
  text-decoration-color: var(--live-ink);
  text-decoration-thickness: var(--w-band);
  text-underline-offset: 3px;
}

/* The section list ----------------------------------------------------------- */

/* The columns' widths are custom properties with their defaults here, and a
   viewer's own widths (columns.js, remembered per browser) set inline on this
   element over them — so removing the inline value IS the reset, and this rule
   stays the one place the defaults are designed. They are rem, not ch: `ch` in
   a custom property resolves in the font of the element that USES it, and the
   head (micro caps) and the rows (figures) are set in different fonts — which
   is how the head's SLUG once sat two characters left of the slugs under it.

   Each fixed column is clamped against the list's own width (`cqi`), so a
   remembered width that suited a wide window cannot squeeze the title to
   nothing in a narrow one: however wide the others are set, they hold at most
   68% of the list between them, and the title takes what is left. */
.kb__table {
  --kbc-pos: 3.5rem;
  --kbc-slug: 17.5rem;
  --kbc-when: 13rem;
  --kbc-words: 4.5rem;
  --kbc-template:
    clamp(36px, var(--kbc-pos), 8cqi)
    minmax(0, 1fr)
    clamp(80px, var(--kbc-slug), 30cqi)
    clamp(96px, var(--kbc-when), 22cqi)
    clamp(40px, var(--kbc-words), 8cqi);
  margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
  /* The list sizes itself to its own width, not the window's: the same page
     is narrower beside an open region than without one. */
  container: kbtable / inline-size;
}

.kb__cols,
.ksec__row {
  display: grid;
  grid-template-columns: var(--kbc-template);
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
}

/* Column heads under a band: unlike from what they head. */
.kb__cols {
  height: var(--m-row);
  border-bottom: var(--w-band) solid var(--rule-3);
  color: var(--bone-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A head keeps its label inside its column, and lets its resize handle out
   into the gap beside it. */
.kb__col {
  position: relative;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.kb__col > span[aria-hidden] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb__col--words {
  justify-content: flex-end;
}

/* The handle IS the gap between two heads: the whole --s-3 of it is the
   target, and a hairline down its middle is what it draws. Quiet until the
   head row is pointed at, live while it is held or focused. */
.colsize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--s-3);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  z-index: 1;
}

.colsize--end {
  right: calc(-1 * var(--s-3));
}

.colsize--start {
  left: calc(-1 * var(--s-3));
}

.colsize::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(50% - var(--w-rule) / 2);
  width: var(--w-rule);
  background: transparent;
}

.kb__cols:hover .colsize::after {
  background: var(--rule-3);
}

.colsize:hover::after,
.colsize:focus-visible::after,
.colsize[data-dragging="true"]::after {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--w-band) / 2);
  width: var(--w-band);
  background: var(--live-ink);
}

.colsize:focus-visible {
  outline: none;
}

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

.ksec__row {
  min-height: var(--m-row);
  border-bottom: var(--w-rule) solid var(--rule-1);
  color: var(--bone-1);
  text-decoration: none;
}

.ksec__row:hover {
  background: var(--ink-3);
  text-decoration: none;
}

/* NO CELL DRAWS OUTSIDE ITS COLUMN. Every cell is clipped to its track and
   ends in an ellipsis; its `title` carries the whole value, and the text is
   still in the page to select and copy. The title is the exception below. */
.ksec__row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksec__pos,
.ksec__slug,
.ksec__words,
.ksec__clock {
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--bone-3);
}

.ksec__words {
  text-align: right;
}

/* The title may take a second line rather than lose its end: it is the column
   a person reads a section by, and two sections that differ only after the
   cut ("Access to shared mailboxes" / "Access to shared drives") would read
   alike truncated. Two lines and no more, so a runaway title cannot turn a
   ruled row into a paragraph. */
.ksec__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  padding-block: 3px;
}

.ksec__clock {
  margin-right: var(--s-2);
}

.ksec__who {
  font-size: var(--t-small);
}

/* Columns give up their place as the list narrows, in order of how rarely the
   index is read for them: Last written first (the strip above says what
   changed), then the slug. Pos, the title and the word count always stay. */
@container kbtable (max-width: 800px) {
  .kb__cols,
  .ksec__row {
    grid-template-columns:
      clamp(36px, var(--kbc-pos), 10cqi)
      minmax(0, 1fr)
      clamp(80px, var(--kbc-slug), 40cqi)
      clamp(40px, var(--kbc-words), 12cqi);
  }

  .kb__col--when,
  .ksec__when {
    display: none;
  }
}

@container kbtable (max-width: 520px) {
  .kb__cols,
  .ksec__row {
    grid-template-columns:
      clamp(36px, var(--kbc-pos), 14cqi)
      minmax(0, 1fr)
      clamp(40px, var(--kbc-words), 16cqi);
  }

  .kb__col--slug,
  .ksec__slug {
    display: none;
  }
}

/* Retired sections stay on the page, struck at hairline thickness the way the
   rail strikes an archived queue: nothing set aside disappears. A band above
   them, because a retired section is unlike a live one. */
.kb__retired {
  border-top: var(--w-band) solid var(--rule-3);
}

.kb__sectionline--inner {
  padding: var(--s-3) var(--s-5) var(--s-2);
}

.ksec[data-retired="true"] .ksec__title {
  color: var(--bone-3);
  text-decoration: line-through;
  text-decoration-thickness: var(--w-rule);
}

/* The editor ------------------------------------------------------------------- */

.kb__form {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
  max-width: 96ch;
}

.kb__label {
  display: block;
  margin-top: var(--s-2);
  color: var(--bone-1);
  font-size: var(--t-small);
  font-weight: 600;
}

/* You write on a ruled line, not in a box. The title and reason are prose, so
   they take the text face; only the position is a figure. */
.kb__input,
.kb__textarea {
  width: 100%;
  color: var(--bone-1);
  caret-color: var(--live-ink);
  background: var(--ink-2);
  border: var(--w-rule) solid var(--rule-2);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: var(--t-base);
  line-height: 1.55;
}

/* The one placeholder here is an example of a shape — `category/topic`, the
   gate's `tkb_…` again — never an instruction about what to write. */
.kb__input::placeholder {
  color: var(--bone-3);
}

.kb__input:focus,
.kb__textarea:focus {
  border-color: var(--live);
  background: var(--ink-1);
}

.kb__input:disabled,
.kb__textarea:disabled {
  color: var(--bone-3);
}

.kb__input--figure {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  width: 8ch;
}

.kb__textarea {
  resize: vertical;
  min-height: calc(var(--m-row) * 8);
  max-width: 96ch;
}

/* A section's own page is its form, and the body is the thing on it: as tall
   as 24 lines, but never taller than the window leaves room for — the top
   rule, the foot rule, the labels above it and the Save rule below it take
   about 16rem between them. Below that the box keeps six rows and the page
   scrolls, which is the honest answer on a window that small. `rows` in the
   template is only the fallback for an engine without min()/dvh. */
.kb__textarea--section {
  min-height: calc(var(--m-row) * 6);
  height: min(
    calc(24 * 1.55em + 2 * var(--s-2)),
    max(calc(var(--m-row) * 6), calc(100dvh - 16rem))
  );
}

/* Save, Discard and "Unsaved changes" stay in view while the form is: stuck
   to the foot of the register, which is the scroll container. The foot and
   not the head, because a plate belongs directly under the thing it commits —
   in the head it would sit beside Retire, a ghost that does the opposite, and
   across the page from the text it saves. Drawn as a rule the width of the
   form on the register's own ground, the same way the shell's foot rule is,
   so it reads as part of the leaf rather than a toolbar floating over it. */
.kb__buttons--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: var(--s-2);
  padding: var(--s-2) 0;
  background: var(--ink-1);
  border-top: var(--w-rule) solid var(--rule-2);
}

/* A caret scrolled into view must land above that rule, not behind it. */
.register:has(> .kb--section) {
  scroll-padding-bottom: calc(var(--m-row) * 2 + var(--s-2) * 2);
}

.kb__form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: end;
}

.kb__form-grow {
  flex: 1 1 32ch;
  min-width: 0;
}

/* What is already in the tree, under the address field on a new section. A
   written line at the label's own scale, not a set of chips: it states a fact
   about the book, and the browser's own <datalist> does the completing. */
.kb__hint {
  margin: var(--s-1) 0 0;
  color: var(--bone-3);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 68ch;
}

/* The desk moved under the editor: said once, on a standing line, in secondary
   ink. It is a fact about the desk, not a fault in what was typed. */
.kb__moved {
  margin: 0 0 var(--s-2);
  padding-left: var(--s-3);
  border-left: var(--w-band) solid var(--rule-3);
  color: var(--bone-2);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 68ch;
}

.kb__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* The one plate on this page is Save (a new section's is "Write the first
   version"); the top rule's plate belongs to the shell. Everything else here
   is a ghost. */
.kb__buttons .tbtn--primary {
  padding: var(--s-2) var(--s-4);
  font-weight: 600;
}

/* Unsaved: a written line beside Save, in secondary ink with a live rule in
   front — a state of the page, not a fault. The word carries it; the rule
   only confirms. */
.kb__dirty {
  align-self: center;
  padding-left: var(--s-2);
  border-left: var(--w-band) solid var(--live);
  color: var(--bone-2);
  font-size: var(--t-small);
}

.kb[data-pending]:not([data-pending=""]) .tbtn,
.kb[data-pending]:not([data-pending=""]) .kb__textarea,
.kb[data-pending]:not([data-pending=""]) .kb__input {
  cursor: progress;
}

/* History ---------------------------------------------------------------------- */

.kb__versions {
  list-style: none;
  margin: var(--s-4) calc(-1 * var(--s-5)) 0;
  padding: 0;
  border-top: var(--w-rule) solid var(--rule-2);
}

.ver__row {
  width: 100%;
  display: grid;
  grid-template-columns: 5ch 16ch minmax(10ch, 14ch) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3);
  min-height: var(--m-row);
  padding: var(--s-1) var(--s-5);
  border: 0;
  border-bottom: var(--w-rule) solid var(--rule-1);
  background: transparent;
  color: var(--bone-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ver__row:hover {
  background: var(--ink-3);
}

/* The chosen version takes the selected queue's wash: live and self. */
.ver__row[aria-pressed="true"] {
  background: var(--live-wash);
}

.ver__id,
.ver__when {
  color: var(--bone-3);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ver__row[aria-pressed="true"] .ver__id,
.ver__row[aria-pressed="true"] .ver__when {
  color: var(--live-ink);
}

.ver[data-current="true"] .ver__id {
  color: var(--bone-1);
}

.ver__reason {
  color: var(--bone-2);
  font-size: var(--t-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ver__note:empty {
  display: none;
}

.kb__compare {
  margin: 0 calc(-1 * var(--s-5));
  padding: var(--s-3) var(--s-5) 0;
  border-top: var(--w-band) solid var(--rule-3);
}

.kb__compare .diff {
  margin-top: var(--s-3);
}

/* Narrow -------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .change__meta {
    grid-template-columns: 16ch minmax(0, 1fr) auto;
  }

  .change__section {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ver__row {
    grid-template-columns: 5ch 16ch minmax(0, 1fr);
  }

  .ver__reason,
  .ver__note {
    grid-column: 1 / -1;
  }
}

/* Print ---------------------------------------------------------------------- */

/* The strip and the body are evidence; the new-section form and every button
   are not. On a section's page the form IS the body, so it prints, bare. */
@media print {
  .kb__tools,
  .kb__editor:not(.kb__editor--section),
  .kb__buttons,
  .change__actions,
  .kb__compare .tbtn {
    display: none;
  }

  .kb__head,
  .kb__section,
  .kb__facts,
  .kb__msg,
  .kb__standing {
    padding-left: 0;
    padding-right: 0;
  }

  .kb__changes,
  .kb__table,
  .kb__versions,
  .kb__compare {
    margin-left: 0;
    margin-right: 0;
  }
}

/* The two tabs ------------------------------------------------------------- */

/* Links, not buttons — both tabs are addresses. They sit between the page's
 * title and its section headings in the hierarchy, and they are set to read
 * that way: larger than a section heading (which is deliberately quiet, tracked
 * micro caps), smaller than the title.
 *
 * The current one is marked three ways and no one of them is colour: it is the
 * only one in full bone, the only one carrying a band beneath it, and the band
 * is the register's `--w-band` against the strip's hairline. --live tints that
 * band and nothing else, which is exactly what §7 licenses it for — the current
 * selection. Remove all colour and the tab is still obviously the one you are
 * on.
 */

.kb__tabs {
  display: flex;
  gap: var(--s-5);
  padding: 0 var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-2);
}

.kb__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  margin-bottom: calc(-1 * var(--w-rule));
  border-bottom: var(--w-band) solid transparent;
  color: var(--bone-3);
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.kb__tab:hover {
  color: var(--bone-1);
  border-bottom-color: var(--rule-3);
}

.kb__tab--on,
.kb__tab--on:hover {
  color: var(--bone-1);
  border-bottom-color: var(--live);
}

/* What is waiting, as a figure — tabular like every other count on the desk,
 * and drawn as a filled chip so the number is the thing the eye lands on when
 * the page opens. Never drawn at zero: an empty queue is silence.
 *
 * FULL STRENGTH ON EITHER TAB, which is the opposite of the obvious thing. The
 * first version dimmed it on the tab you were not on, so the count was quietest
 * exactly when it was doing its only job: telling somebody reading the sections
 * that there is work on the other tab. Once you are on Questions the list
 * itself says how many; from Sections, this chip is the only thing that does. */
.kb__tabcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 0 var(--s-1);
  border-radius: var(--radius-sm);
  background: var(--bone-1);
  color: var(--ink-1);
  font-family: var(--font-figure);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.6;
}

/* Questions ---------------------------------------------------------------- */

.kbq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.kbq {
  padding: var(--s-3) 0;
  border-top: var(--w-rule) solid var(--rule-1);
}

/* A settled question is a record rather than a task: it stays legible and
 * stops asking for the eye. */
.kbq--answered,
.kbq--dismissed {
  color: var(--bone-3);
}

.kbq__body {
  margin: 0 0 var(--s-2);
  font-size: var(--t-sub);
  color: var(--bone-1);
}

.kbq--dismissed .kbq__body {
  color: var(--bone-3);
}

.kbq__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro);
  color: var(--bone-3);
}

.kbq__when {
  font-family: var(--font-figure);
}

.kbq__ref {
  font-family: var(--font-figure);
  color: var(--bone-2);
}

.kbq__sep {
  color: var(--rule-3);
}

.kbq__note {
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro);
  color: var(--bone-3);
}

/* What IT said, quoted back. Marked as a quotation by a rule on the reading
 * edge rather than by quote marks, which an answer may contain itself. */
.kbq__answer {
  margin: 0 0 var(--s-2);
  padding-inline-start: var(--s-3);
  border-inline-start: var(--w-band) solid var(--rule-2);
  color: var(--bone-2);
  font-size: var(--t-small);
  white-space: pre-wrap;
}

.kbq__controls {
  display: grid;
  gap: var(--s-1);
  max-width: 68ch;
}

.kbq__box {
  min-height: calc(var(--m-row) * 3);
}

.kbq__carry {
  display: grid;
  gap: var(--s-1);
}

/* Notes -------------------------------------------------------------------- */

/* The standalone form: kind, words, Add — one row on a laptop, stacked on a
 * phone. No lede above it; the kind's tooltip says what each is for. */
.kbn__add {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-1);
}

.kbn__add .kb__msg {
  grid-column: 1 / -1;
  margin: 0;
}

.kbn__box {
  min-height: calc(var(--m-row) * 2);
}

/* Status is a drawn mark and a word, never colour alone (the direction
 * contract). Open is the only state that asks for the eye. */
.kbn__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--bone-1);
}

.kbn__mark {
  display: inline-flex;
}

.kbn__mark .mark {
  color: currentColor;
}

.kbn__status--incorporated,
.kbn__status--done,
.kbn__status--dismissed {
  font-weight: 400;
  color: var(--bone-3);
}

.kbn--incorporated .kbq__body,
.kbn--done .kbq__body,
.kbn--dismissed .kbq__body {
  color: var(--bone-3);
}

.kbn__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  max-width: 68ch;
}

.kbn__reason {
  flex: 1 1 16ch;
  min-width: 0;
}

@media (max-width: 640px) {
  .kbn__add {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* An answer carried in from the Questions tab, waiting on Save. */
.kb__carried {
  margin: 0;
  padding: var(--s-2) var(--s-5);
  border-bottom: var(--w-rule) solid var(--rule-1);
  color: var(--bone-2);
  font-size: var(--t-small);
}

/* The instruments do not print — CONTRACT.md §7. */
@media print {
  .kb__tabs,
  .kbq__controls,
  .kbn__controls,
  .kbn__add,
  .kb__carried {
    display: none;
  }
}