/* ==========================================================================
   KODIAC COMMONS
   The whole design system for the forum app, in one file, no imports.

   WHY THIS FILE REDECLARES THE TOKENS
   The storefront's 280KB sheet lives in a single WordPress database record and
   is served only on kodiac.bio pages. This app is served straight off the
   Worker, at the root of kodiac-forum.kodiacbio.workers.dev and under
   /forum/ behind a proxy, so it never sees that sheet. Rather than import
   154KB to use 63 values, section 1 restates the canon tokens with their exact
   storefront values. If a token changes on the storefront it must change here
   too; there is no mechanism that will tell you.

   THE CONTRAST LAW, which every rule below obeys
     --kc-stone-soft measures 1.61:1 on bone. Border, rule, divider or bar only.
       It is NEVER the colour of a character, a glyph, a digit or a caret.
     --kc-gold measures 4.32:1 on bone. A 1px or 2px rule, a left bar, or an
       8% wash ground. NEVER text.
     Every gold TEXT case uses --kc-gold-strong at 6.06:1.
     --kc-warn-ink is the only non-neutral text colour and is reserved for
       held, removed, muted, banned and strike states.
     The smallest permitted text colour on bone or bone-shade is --kc-stone at
       5.18:1.

   A NOTE ON WHY THE SHORTHANDS ARE USED EVERYWHERE
   The CI guard for the contrast law greps for /color:\s*var\(--kc-(stone-soft|
   gold)\)/, which also matches border-color:, background-color: and
   outline-color:, because none of those are anchored. So this file never writes
   a longhand *-color property against those two tokens. It writes
   "border: 1px solid var(--kc-stone-soft)" and "background: var(--kc-gold)"
   instead. That is not a workaround, it is the safer form anyway: a full
   shorthand cannot leave a stale width or style behind on a state change.

   CANON, mechanically checkable
     no em dash, no gradient, no box-shadow other than none, no kodiac.org URL,
     no border-radius above 2px, light only, no dark block, no theme toggle.
   ========================================================================== */


/* ==========================================================================
   1  TOKENS
   Declared on bare :root. There is deliberately no dark block, no
   prefers-color-scheme block and no [data-theme] block. The site is light only
   and the forum matches it.
   ========================================================================== */

:root {
  color-scheme: light;

  /* canon colour */
  --kc-bone: #F5F1EA;
  --kc-bone-shade: #EDE8DE;
  --kc-ink: #1A1A1A;
  --kc-ink-true: #000000;
  --kc-stone: #6B645B;
  --kc-stone-soft: #C7BFB3;
  --kc-gold: #8a6d3b;
  --kc-gold-strong: #6f572f;
  --kc-gold-wash: rgba(138, 109, 59, .08);
  --kc-warn-ink: #6E2419;
  --kc-error: #5A2A22;

  /* inverted band, fixed values on purpose: these surfaces stay bone on ink */
  --kc-band-ground: #1A1A1A;
  --kc-band-ink: #F5F1EA;
  --kc-band-muted: #C7BFB3;
  --kc-band-hairline: color-mix(in srgb, #F5F1EA 16%, transparent);

  /* canon type */
  --kc-font-display: 'Fraunces', Georgia, serif;
  --kc-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --kc-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --kc-fs-h1: clamp(1.875rem, 3vw, 2.5rem);
  --kc-fs-h2: clamp(1.5rem, 2.4vw, 2rem);
  --kc-fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --kc-fs-body-lg: 1.125rem;
  --kc-fs-body: 1rem;
  --kc-fs-small: 0.875rem;
  --kc-fs-micro: 0.75rem;

  /* canon space, radius, motion, measure */
  --kc-s-1: 4px;
  --kc-s-2: 8px;
  --kc-s-3: 12px;
  --kc-s-4: 16px;
  --kc-s-5: 24px;
  --kc-s-6: 40px;
  --kc-s-7: 64px;
  --kc-s-8: 96px;
  --kc-r-flat: 0;
  --kc-r-soft: 2px;
  --kc-dur-fast: 200ms;
  --kc-dur-base: 400ms;
  --kc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kc-measure: 880px;
  --kc-measure-narrow: 720px;

  /* APP LAYER. The only new custom properties in the product. */
  --kcf-rail-w: 56px;
  --kcf-nav-w: 236px;
  --kcf-ctx-w: 320px;
  --kcf-head-h: 44px;
  --kcf-sub-h: 28px;
  --kcf-gutter: 56px;
  --kcf-line: 20px;
  --kcf-row-h: 24px;
  --kcf-tile: 40px;
  --kcf-fs-nano: 10px;
  --kcf-fs-micro2: 11px;
  --kcf-fs-dense: 13px;
  --kcf-chrome: var(--kc-bone-shade);
  --kcf-stream: var(--kc-bone);
  --kcf-hover: color-mix(in srgb, var(--kc-ink) 3%, transparent);
  --kcf-hover-deep: color-mix(in srgb, var(--kc-ink) 5%, transparent);
  --kcf-scrim: color-mix(in srgb, var(--kc-ink) 32%, transparent);
  --kcf-z-drawer: 30;
  --kcf-z-sheet: 25;
  --kcf-z-scrim: 20;
  --kcf-z-pop: 40;
  --kcf-z-modal: 50;
}


/* ==========================================================================
   2  RESET AND DOCUMENT BASE
   Mirrors the storefront base so a paragraph, a link and a heading behave the
   same here as they do on kodiac.bio. Note that the base kills link
   affordance, exactly as the storefront does, and every component that needs
   an underline restores it explicitly.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--kc-bone);
  color: var(--kc-ink);
  font-family: var(--kc-font-body);
  font-size: var(--kcf-fs-dense);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* This has to be an author rule, not a reliance on the UA sheet. A dozen
   elements in the shell ship with the hidden attribute AND carry a class that
   sets display (.kcf-sub is display:flex, .kcf-jump is display:flex, the
   moderator rail tile is display:grid), and any author display declaration
   beats the UA's [hidden] rule. Without this line the citation strip, the jump
   bar and the moderator tile would all be permanently visible. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
hr { border: 0; margin: 0; }
::selection { background: var(--kc-ink); color: var(--kc-bone); }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}
button[disabled] { cursor: default; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  padding: var(--kc-s-2) var(--kc-s-3);
  margin: 0;
}
textarea { resize: none; }

template { display: none; }


/* ==========================================================================
   3  ACCESSIBILITY PRIMITIVES
   ========================================================================== */

/* Visually hidden. Never display:none, because a screen reader must still
   reach it. clip-path over the legacy clip rect. */
.kcf-vh,
.kcf-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0;
  border: 0;
  margin: -1px;
}

.kcf-skip {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 60;
  transform: translateY(-200%);
  background: var(--kc-ink);
  color: var(--kc-bone);
  padding: 8px 12px;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--kc-r-soft);
  transition: transform var(--kc-dur-fast) var(--kc-ease);
}
.kcf-skip:focus { transform: translateY(0); }
.kcf-skip:nth-of-type(2):focus { transform: translateY(0) translateX(180px); }

/* One focus treatment for the whole app. Never removed, only recoloured on
   inverted grounds, and pulled inside on dense rows so the ring does not
   overlap the neighbouring row. */
.kcf :focus-visible,
.kcf-skip:focus-visible {
  outline: 2px solid var(--kc-ink);
  outline-offset: 2px;
}
.kcf-chan:focus-visible,
.kcf-entry:focus-visible,
.kcf-msg:focus-visible,
.kcf-cat__sum:focus-visible,
.kcf-also__row:focus-visible,
.kcf-switcher__row:focus-visible,
.kcf-rewrite__row:focus-visible,
.kcf-panel__item:focus-visible,
.kcf-pop__item:focus-visible,
.kcf-anchor__input:focus-visible,
.kcf-composer__field:focus-visible,
.kcf-composer__title:focus-visible,
.kcf-composer__body:focus-visible,
.kcf-switcher__input:focus-visible {
  outline: 2px solid var(--kc-ink);
  outline-offset: -2px;
}
.kcf-jump__go:focus-visible,
.kcf-jump__ack:focus-visible,
.kcf-toast__action:focus-visible {
  outline: 2px solid var(--kc-band-ink);
  outline-offset: -2px;
}
.kcf-rail__tile[aria-selected="true"]:focus-visible {
  outline: 2px solid var(--kc-ink);
  outline-offset: 3px;
}


/* ==========================================================================
   4  APP SHELL
   Four columns at 1280 and up. The grounds carry the whole tonal argument:
   rail, channels, context and the composer surround are bone-shade chrome, and
   the stream is the one lit bone field. Every separator is exactly one
   hairline. There are no shadows anywhere in this file.
   ========================================================================== */

.kcf {
  position: relative;
  display: grid;
  grid-template-columns: var(--kcf-rail-w) var(--kcf-nav-w) minmax(0, 1fr) var(--kcf-ctx-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--kcf-chrome);
  color: var(--kc-ink);
  font-family: var(--kc-font-body);
  font-size: var(--kcf-fs-dense);
  line-height: 1.5;
}

/* The wrapper folds to a real block below 900px and becomes the drawer.
   Above that it costs nothing at all. */
.kcf-aside { display: contents; }

.kcf__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--kcf-z-scrim);
  background: var(--kcf-scrim);
}

/* Scrollbars. Thin, quiet, and never coloured with a token that would read as
   text. The thumb is a hairline colour used as a bar, which the contrast law
   allows. */
.kcf-rail,
.kcf-nav__list,
.kcf-stream,
.kcf-ctx,
.kcf-panel__list,
.kcf-switcher__list,
.kcf-composer__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: thin;
}
.kcf-rail::-webkit-scrollbar { width: 0; height: 0; }
.kcf-nav__list::-webkit-scrollbar,
.kcf-stream::-webkit-scrollbar,
.kcf-ctx::-webkit-scrollbar,
.kcf-panel__list::-webkit-scrollbar,
.kcf-switcher__list::-webkit-scrollbar,
.kcf-composer__scroll::-webkit-scrollbar { width: 10px; }
.kcf-nav__list::-webkit-scrollbar-track,
.kcf-stream::-webkit-scrollbar-track,
.kcf-ctx::-webkit-scrollbar-track,
.kcf-panel__list::-webkit-scrollbar-track,
.kcf-switcher__list::-webkit-scrollbar-track,
.kcf-composer__scroll::-webkit-scrollbar-track { background: transparent; }
.kcf-nav__list::-webkit-scrollbar-thumb,
.kcf-ctx::-webkit-scrollbar-thumb,
.kcf-panel__list::-webkit-scrollbar-thumb,
.kcf-composer__scroll::-webkit-scrollbar-thumb {
  background: var(--kc-stone-soft);
  border: 3px solid var(--kcf-chrome);
  border-radius: var(--kc-r-soft);
}
.kcf-stream::-webkit-scrollbar-thumb,
.kcf-switcher__list::-webkit-scrollbar-thumb {
  background: var(--kc-stone-soft);
  border: 3px solid var(--kcf-stream);
  border-radius: var(--kc-r-soft);
}


/* ==========================================================================
   5  THE SYSTEMS RAIL
   ========================================================================== */

.kcf-rail {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kc-s-2);
  padding: var(--kc-s-2) 0 var(--kc-s-4);
  background: var(--kcf-chrome);
  border-right: 1px solid var(--kc-stone-soft);
}

.kcf-rail__brand {
  width: var(--kcf-tile);
  height: var(--kcf-tile);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--kc-ink);
  color: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-soft);
  transition: background-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-rail__brand:hover { background: var(--kc-gold-strong); border: 1px solid var(--kc-gold-strong); }
.kcf-rail__brandmark {
  font-family: var(--kc-font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.kcf-rail__rule {
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--kc-stone-soft);
  margin: var(--kc-s-1) 0;
}

.kcf-rail__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kc-s-2);
  width: 100%;
}

.kcf-rail__tile {
  position: relative;
  width: var(--kcf-tile);
  height: var(--kcf-tile);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  color: var(--kc-stone);
  transition: background-color var(--kc-dur-fast) var(--kc-ease),
              border-color var(--kc-dur-fast) var(--kc-ease),
              color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-rail__tile:hover { border: 1px solid var(--kc-ink); color: var(--kc-ink); }
.kcf-rail__tile[aria-selected="true"] {
  background: var(--kc-ink);
  border: 1px solid var(--kc-ink);
  color: var(--kc-bone);
}

.kcf-rail__glyph {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

/* The indicator bar. Unread is a 6px stub in ink, selected is a 20px gold
   run, and selected plus unread stays selected: the gold bar already says
   "you are here" louder than the stub says "there is new work". */
.kcf-rail__bar {
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 0;
  transform: translateY(-50%);
  background: var(--kc-ink);
  border-radius: var(--kc-r-soft);
  transition: height var(--kc-dur-fast) var(--kc-ease);
}
.kcf-rail__tile[data-unread="1"] .kcf-rail__bar { height: 6px; }
.kcf-rail__tile[aria-selected="true"] .kcf-rail__bar { height: 20px; background: var(--kc-gold); }

/* The tooltip is position:fixed on purpose. The rail is its own scroller, so
   an absolutely positioned tip would be clipped by that scrollport and never
   paint at all. A fixed box with top:auto takes its static position (where it
   would have sat in flow, that is, inside the tile) and escapes every ancestor
   overflow, which is exactly what a tooltip needs and what no amount of
   overflow tuning can otherwise give us without JavaScript. */
.kcf-rail__tip {
  position: fixed;
  left: calc(var(--kcf-rail-w) + 8px);
  margin-top: 9px;
  z-index: var(--kcf-z-pop);
  background: var(--kc-band-ground);
  color: var(--kc-band-ink);
  padding: 6px 10px;
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--kc-dur-fast) var(--kc-ease) 120ms;
}
.kcf-rail__tile:hover .kcf-rail__tip { opacity: 1; }
.kcf-rail__tile:focus-visible .kcf-rail__tip { opacity: 1; transition-delay: 0ms; }

.kcf-rail__tile--mod { margin-top: auto; }
.kcf-rail__count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  background: var(--kc-bone);
  border: 1px solid var(--kc-warn-ink);
  border-radius: var(--kc-r-soft);
  color: var(--kc-warn-ink);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* ==========================================================================
   6  THE CHANNEL COLUMN
   ========================================================================== */

.kcf-nav {
  grid-column: 2;
  display: grid;
  grid-template-rows: var(--kcf-head-h) auto minmax(0, 1fr) auto;
  min-height: 0;
  background: var(--kcf-chrome);
  border-right: 1px solid var(--kc-stone-soft);
}

.kcf-nav__head {
  height: var(--kcf-head-h);
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  padding: 0 var(--kc-s-2) 0 var(--kc-s-3);
  border-bottom: 1px solid var(--kc-stone-soft);
}
.kcf-nav__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--kc-font-display);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcf-nav__density {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  transition: color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-nav__density:hover { color: var(--kc-ink); border: 1px solid var(--kc-ink); }

.kcf-nav__jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-s-2);
  height: 26px;
  margin: var(--kc-s-2) var(--kc-s-2) var(--kc-s-1);
  padding: 0 var(--kc-s-2);
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: border-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-nav__jump:hover { border: 1px solid var(--kc-ink); color: var(--kc-ink); }
.kcf-nav__jumpkey { color: var(--kc-stone); opacity: .8; }

.kcf-nav__list { padding: var(--kc-s-1) 0 var(--kc-s-4); }

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

.kcf-cat { border: 0; }
.kcf-cat__sum {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--kc-s-2) 0 var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
  list-style: none;
  cursor: pointer;
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-cat__sum::-webkit-details-marker { display: none; }
.kcf-cat__sum:hover { color: var(--kc-ink); }
/* A 12px lane at the left holds the open and closed glyph. It is gold-strong
   because it is a character, and gold itself may never be a character. */
.kcf-cat__sum::before {
  content: "-";
  display: inline-block;
  width: 12px;
  flex: 0 0 auto;
  color: var(--kc-gold-strong);
  font-size: var(--kcf-fs-micro2);
  line-height: 1;
}
.kcf-cat:not([open]) > .kcf-cat__sum::before { content: "+"; }
.kcf-cat__body { padding-bottom: var(--kc-s-1); }

/* ---- channel row ------------------------------------------------------ */

.kcf-chan {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kc-s-2);
  height: var(--kcf-row-h);
  padding: 0 var(--kc-s-2) 0 10px;
  border-radius: 0;
  color: var(--kc-stone);
  font-size: var(--kcf-fs-dense);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-chan:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }
.kcf-chan__hash {
  font-family: var(--kc-font-mono);
  font-size: 12px;
  color: var(--kc-stone);
  text-align: center;
  line-height: 1;
}
.kcf-chan__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-chan__n {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  font-variant-numeric: tabular-nums;
  color: var(--kc-stone);
}

.kcf-chan[data-unread="1"] { color: var(--kc-ink); font-weight: 500; }
.kcf-chan[data-unread="1"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 2px;
  height: 12px;
  background: var(--kc-gold);
}

/* The active row lights to the stream ground. That single move is the whole
   tonal idea of the layout: the channel you are in is physically continuous
   with the field you are reading. */
.kcf-chan[aria-current="page"] {
  background: var(--kcf-stream);
  color: var(--kc-ink);
}
.kcf-chan[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  background: var(--kc-gold);
}

/* A rules channel is never unread and carries a bang, not a hash. */
.kcf-chan[data-kind="rules"]::before { content: none; }
.kcf-chan[data-kind="rules"] .kcf-chan__hash { color: var(--kc-gold-strong); }
.kcf-chan__read {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.12em;
  color: var(--kc-stone);
}

/* ---- identity panel --------------------------------------------------- */

.kcf-me {
  height: 48px;
  background: var(--kcf-chrome);
  border-top: 1px solid var(--kc-stone-soft);
}
.kcf-me__guest,
.kcf-me__signed { display: none; height: 48px; align-items: center; }

.kcf-me[data-auth="guest"] .kcf-me__guest {
  display: flex;
  justify-content: space-between;
  gap: var(--kc-s-2);
  padding: 0 var(--kc-s-2) 0 10px;
}
.kcf-me[data-auth="member"] .kcf-me__signed {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--kc-s-2);
  padding: 0 var(--kc-s-1) 0 10px;
}

.kcf-me__guestline {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-me__id { min-width: 0; display: block; }
.kcf-me__name {
  display: block;
  font-size: var(--kcf-fs-dense);
  font-weight: 500;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.kcf-me__standing {
  display: block;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcf-me__standing[data-standing="banned"],
.kcf-me__standing[data-standing="muted"],
.kcf-me__standing[data-standing="strike"] { color: var(--kc-warn-ink); }
.kcf-me__standing[data-standing="moderator"] { color: var(--kc-gold-strong); }
.kcf-me__acts { display: flex; gap: 2px; }
.kcf-me__acts .kcf-iconbtn { width: 28px; height: 28px; }


/* ==========================================================================
   7  STREAM HEADER AND THE CITATION STRIP
   ========================================================================== */

.kcf-main {
  grid-column: 3;
  display: grid;
  /* The column is declared, not left to default. An implicit auto column is
     sized to its widest item, so a long identifier or an unbroken URL in one
     post stretched the column past the viewport, and with the shell's
     overflow:hidden that clipped the text rather than scrolling it. The
     stream measured 760px inside a 375px phone before this line existed. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--kcf-head-h) auto minmax(0, 1fr) auto auto auto auto;
  min-width: 0;
  min-height: 0;
  background: var(--kcf-stream);
}

/* Every row is placed EXPLICITLY, and that is not decoration. Four of the
   seven rows are optional: the citation strip is display:none whenever there
   is no citation to name, the jump bar only exists once the reader has
   scrolled away from the bottom, and the two notice strips are created on
   demand by the runtime and inserted before the composer. A display:none
   child is not a grid item at all, and an auto placed child cannot know which
   slot it belongs in, so under auto placement the composer slid onto the
   minmax(0,1fr) row and grew to fill half the viewport while the stream
   collapsed. Explicit rows make an absent row simply size to zero. */
.kcf-head { grid-row: 1; }
.kcf-sub { grid-row: 2; }
.kcf-stream { grid-row: 3; }
.kcf-note--wire { grid-row: 4; }
.kcf-note--idle { grid-row: 5; }
.kcf-jump { grid-row: 6; }
.kcf-composer { grid-row: 7; }

/* Opaque, never translucent and never blurred. A blurred header on a bone
   ground turns the hairline to mud and the ledger digits to grey. */
.kcf-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  height: var(--kcf-head-h);
  padding: 0 var(--kc-s-4);
  background: var(--kcf-stream);
  border-bottom: 1px solid var(--kc-stone-soft);
}
.kcf-head__burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: calc(var(--kc-s-4) * -1 + 2px);
  place-items: center;
  flex: 0 0 auto;
}
.kcf-head__burgerglyph,
.kcf-head__burgerglyph::before,
.kcf-head__burgerglyph::after {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--kc-ink);
}
.kcf-head__burgerglyph { position: relative; }
.kcf-head__burgerglyph::before { content: ""; position: absolute; top: -5px; }
.kcf-head__burgerglyph::after { content: ""; position: absolute; top: 5px; }

.kcf-head__back {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
  border-radius: var(--kc-r-soft);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-head__back:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }

.kcf-head__hash {
  flex: 0 0 auto;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-gold-strong);
}
.kcf-head__name {
  flex: 0 0 auto;
  max-width: 40%;
  font-family: var(--kc-font-body);
  font-size: var(--kcf-fs-dense);
  font-weight: 600;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* In thread view the name becomes the thread title in the display face. */
.kcf-main[data-view="thread"] .kcf-head__name {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: var(--kc-fs-body-lg);
  letter-spacing: -0.01em;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.kcf-head__div { flex: 0 0 auto; width: 1px; height: 16px; background: var(--kc-stone-soft); }
.kcf-head__purpose {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--kcf-fs-dense);
  color: var(--kc-stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcf-head__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.kcf-head__acts .kcf-iconbtn { width: 28px; height: 28px; }
.kcf-head__sort {
  height: 28px;
  padding: 0 var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-radius: var(--kc-r-soft);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-head__sort:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }
.kcf-head__cite[aria-pressed="true"] { background: var(--kc-ink); color: var(--kc-bone); }

/* The citation strip. It reads as one continuous line and the whole bar is the
   control, because on a phone this is the only thing standing between a reader
   and forgetting which paper they are inside. */
.kcf-sub {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  width: 100%;
  height: var(--kcf-sub-h);
  padding: 0 var(--kc-s-4);
  background: var(--kc-bone-shade);
  border-bottom: 1px solid var(--kc-stone-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-sub:hover { color: var(--kc-ink); }
.kcf-sub__tick { flex: 0 0 auto; width: 22px; height: 1px; background: var(--kc-gold); }
.kcf-sub__text {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.kcf-sub__more { flex: 0 0 auto; }


/* ==========================================================================
   8  THE STREAM
   ========================================================================== */

.kcf-stream {
  position: relative;
  background: var(--kcf-stream);
  scroll-behavior: smooth;
}
.kcf-stream__inner { padding: var(--kc-s-3) 0 var(--kc-s-5); }
.kcf-stream__end { height: 1px; }

/* Roving focus ring for j and k reading. Offset is negative so it never
   overlaps the row above. */
.kcf-entry[data-cursor="1"],
.kcf-msg[data-cursor="1"] {
  outline: 2px solid var(--kc-ink);
  outline-offset: -2px;
}

/* ---- entry card, the channel view ------------------------------------ */

.kcf-entry {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--kc-s-3);
  min-height: 76px;
  padding: 10px var(--kc-s-4) 10px 14px;
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: background-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-entry:hover { background: var(--kcf-hover); }
.kcf-entry__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--kc-gold); }
.kcf-entry[data-unread="1"] .kcf-entry__bar { width: 2px; }

.kcf-entry__main { min-width: 0; }

/* The gold tick eyebrow. It is the one motif that ties this app to the
   storefront in a single glance, and it is a rule, not a character, so gold is
   allowed to carry it. */
.kcf-entry__id {
  display: inline-flex;
  align-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-stone);
  line-height: 1.4;
}
.kcf-entry__id::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: var(--kc-s-3);
  flex: 0 0 auto;
  background: var(--kc-gold);
}
.kcf-entry__new { color: var(--kc-gold-strong); margin-left: var(--kc-s-2); }
.kcf-entry__unresolved { color: var(--kc-warn-ink); }

.kcf-entry__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  margin: var(--kc-s-1) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcf-entry__title a {
  display: block;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-entry__title a:hover { border-bottom: 1px solid var(--kc-stone-soft); }

.kcf-entry__excerpt {
  font-size: var(--kcf-fs-dense);
  line-height: 1.5;
  color: var(--kc-stone);
  margin: var(--kc-s-1) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kcf-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-s-2);
  margin-top: 6px;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}
.kcf-entry__marks { display: inline-flex; gap: var(--kc-s-1); }

.kcf-chip {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 4px;
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  line-height: 1;
}
.kcf-chip--locked { border: 1px solid var(--kc-warn-ink); color: var(--kc-warn-ink); }

/* The viewer's own held thread renders in place, at full opacity, with their
   words intact. It is never hidden from its author and never blanked. */
.kcf-entry[data-status="held"] {
  background: var(--kc-bone-shade);
  border-left: 2px solid var(--kc-warn-ink);
  padding-left: 12px;
}
.kcf-entry[data-status="held"] .kcf-entry__bar { width: 0; }

/* ---- thread head ------------------------------------------------------ */

.kcf-thread { padding: var(--kc-s-3) var(--kc-s-4) var(--kc-s-4) var(--kcf-gutter); }
.kcf-thread__id {
  display: inline-flex;
  align-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-thread__id::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: var(--kc-s-3);
  flex: 0 0 auto;
  background: var(--kc-gold);
}
.kcf-thread__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kc-ink);
  max-width: 30ch;
  margin: var(--kc-s-2) 0 var(--kc-s-3);
  text-wrap: balance;
}
.kcf-thread__anchor {
  display: block;
  max-width: 68ch;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  line-height: 1.5;
  color: var(--kc-stone);
  border-left: 2px solid var(--kc-gold);
  padding: 2px 0 2px 10px;
  margin-bottom: var(--kc-s-4);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-thread__anchor:hover { color: var(--kc-ink); }

/* Lists are dense; the opening argument is prose. */
.kcf-thread__op {
  max-width: 68ch;
  font-size: var(--kc-fs-body);
  line-height: 1.7;
  color: var(--kc-ink);
}
.kcf-thread__op p { margin: 0 0 var(--kc-s-4); }
.kcf-thread__op p:last-child { margin-bottom: 0; }
.kcf-thread .kcf-marks { margin-top: var(--kc-s-4); }

/* ---- dividers --------------------------------------------------------- */

/* Sticky against the stream scrollport, which starts below the header because
   the header is its own grid row and not an overlay. top:0 is therefore the
   correct value here, not the header height. */
.kcf-div {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  height: var(--kcf-line);
  margin: var(--kc-s-3) 0 var(--kc-s-2) var(--kcf-gutter);
  padding-right: var(--kc-s-4);
  background: var(--kcf-stream);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-div::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--kc-stone-soft); }

.kcf-div--new { position: static; color: var(--kc-gold-strong); }
.kcf-div--new::after { background: var(--kc-gold); }

/* ---- message group ---------------------------------------------------- */

.kcf-msg {
  position: relative;
  display: grid;
  grid-template-columns: var(--kcf-gutter) minmax(0, 1fr);
  column-gap: var(--kc-s-3);
  padding: 2px var(--kc-s-4) 2px 0;
  transition: background-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg:hover,
.kcf-msg:focus-within { background: var(--kcf-hover); }
.kcf-msg[data-lead="1"] { padding-top: 6px; margin-top: var(--kc-s-2); }

.kcf-msg__gut { position: relative; display: grid; justify-items: end; align-content: start; }
.kcf-msg[data-lead="1"] .kcf-msg__gut { grid-template-rows: 18px var(--kcf-line); align-items: center; }

/* The monogram is hidden on continuation rows, and the selector carries the
   data attribute rather than being a bare .kcf-msg__mono rule. The element
   also carries .kcf-mono, which sets display:grid later in this file at the
   same specificity and would otherwise win, putting a 28px avatar on every
   single line and turning a 24px continuation row into 52px. */
.kcf-msg[data-lead="0"] .kcf-msg__mono { display: none; }
.kcf-msg[data-lead="1"] .kcf-msg__mono {
  grid-row: 1;
  align-self: center;
  transition: opacity var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg[data-lead="1"] .kcf-msg__time { grid-row: 2; }

/* The continuous time ledger. Every line carries its own timestamp, always
   visible, never hidden behind hover. That is the signature of the layout.
   On hover the digits go to ink and the date takes the monogram slot: the
   56px gutter cannot hold "18 AUG 14:22" on one line, so the date is
   swapped in above rather than allowed to reflow the whole column. */
.kcf-msg__time {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--kc-stone);
  line-height: var(--kcf-line);
  height: var(--kcf-line);
  white-space: nowrap;
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg:hover .kcf-msg__time,
.kcf-msg:focus-within .kcf-msg__time { color: var(--kc-ink); }

.kcf-msg__date {
  position: absolute;
  right: 0;
  top: 1px;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kc-stone);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg[data-lead="1"]:hover .kcf-msg__date,
.kcf-msg[data-lead="1"]:focus-within .kcf-msg__date { opacity: 1; }
.kcf-msg[data-lead="1"]:hover .kcf-msg__mono,
.kcf-msg[data-lead="1"]:focus-within .kcf-msg__mono { opacity: 0; }

.kcf-msg__col { min-width: 0; }
.kcf-msg__head {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  height: 18px;
  min-width: 0;
}
.kcf-msg[data-lead="0"] .kcf-msg__head { display: none; }
.kcf-msg__author {
  font-size: var(--kcf-fs-dense);
  font-weight: 600;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcf-msg__badges { display: inline-flex; gap: var(--kc-s-1); flex: 0 0 auto; }
.kcf-msg__edited {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}

/* Badges. The customer badge is deliberately neutral: no gold, no positive
   valence, and the word "verified" does not appear next to it. */
.kcf-badge {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 4px;
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--kc-stone-soft);
  color: var(--kc-stone);
}
.kcf-badge--mod { border: 1px solid var(--kc-ink); color: var(--kc-ink); }

.kcf-msg__body {
  max-width: 78ch;
  font-size: var(--kcf-fs-dense);
  line-height: var(--kcf-line);
  color: var(--kc-ink);
  overflow-wrap: anywhere;
}
.kcf-msg__body p { margin: 0; }
.kcf-msg__body p + p { margin-top: var(--kc-s-2); }
/* The base reset kills link affordance, so restore it here explicitly. */
.kcf-msg__body a,
.kcf-link {
  color: var(--kc-ink);
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg__body a:hover,
.kcf-link:hover { border-bottom: 1px solid var(--kc-ink); }

.kcf-msg__body code,
.kcf-code {
  font-family: var(--kc-font-mono);
  font-size: 12px;
  background: var(--kc-bone-shade);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  padding: 0 3px;
}
.kcf-msg__body blockquote {
  margin: var(--kc-s-2) 0;
  padding-left: 10px;
  border-left: 2px solid var(--kc-stone-soft);
  color: var(--kc-stone);
}

/* Depth never exceeds one. If the API ever returns two, the client clamps it. */
.kcf-msg[data-depth="1"] {
  margin-left: 32px;
  border-left: 2px solid var(--kc-stone-soft);
  grid-template-columns: 40px minmax(0, 1fr);
}

.kcf-msg__cite {
  display: inline-flex;
  align-items: center;
  margin-top: var(--kc-s-1);
  padding: 2px 6px;
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: border-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg__cite:hover { border: 1px solid var(--kc-ink); color: var(--kc-ink); }

.kcf-msg[data-status="pending"] { opacity: .55; }
.kcf-msg[data-status="pending"] .kcf-msg__time { font-size: var(--kcf-fs-nano); letter-spacing: 0.14em; }

.kcf-end {
  margin: var(--kc-s-4) var(--kc-s-4) var(--kc-s-2) var(--kcf-gutter);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}

/* ---- hover action bar, words not icons -------------------------------- */

/* Words rather than an icon sprite is the correct call for a base path
   agnostic app with no build step: there is no asset pipeline to break, and
   the labels are readable by everything. */
.kcf-msg__acts {
  position: absolute;
  top: -12px;
  right: var(--kc-s-4);
  display: none;
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-soft);
  background: var(--kc-bone);
  box-shadow: none;
  overflow: hidden;
  z-index: 3;
}
.kcf-msg:hover .kcf-msg__acts,
.kcf-msg:focus-within .kcf-msg__acts { display: flex; }

.kcf-msg__act {
  height: 26px;
  padding: 0 var(--kc-s-2);
  border: 0;
  border-left: 1px solid var(--kc-stone-soft);
  background: transparent;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-msg__act:first-child { border-left: 0; }
.kcf-msg__act:hover { background: var(--kc-bone-shade); color: var(--kc-ink); }

/* The mobile equivalent. Hidden on pointer devices because hover exists there. */
.kcf-msg__more {
  position: absolute;
  top: 4px;
  right: var(--kc-s-2);
  display: none;
  width: 24px;
  height: 24px;
  place-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
  border-radius: var(--kc-r-soft);
}

/* ---- marks, the frozen reaction vocabulary ---------------------------- */

.kcf-marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-s-1); min-height: 0; }
.kcf-msg .kcf-marks:not(:empty) { min-height: 22px; margin-top: 2px; }

.kcf-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  background: var(--kc-bone);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: border-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease),
              background-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-mark:hover { border: 1px solid var(--kc-ink); color: var(--kc-ink); }
.kcf-mark__n { font-variant-numeric: tabular-nums; }
.kcf-mark[aria-pressed="true"] {
  border: 1px solid var(--kc-gold);
  background: var(--kc-gold-wash);
  color: var(--kc-ink);
}
.kcf-mark[aria-pressed="true"] .kcf-mark__n { color: var(--kc-gold-strong); }
.kcf-mark--add { width: 20px; padding: 0; justify-content: center; }


/* ==========================================================================
   9  JUMP BAR
   ========================================================================== */

.kcf-jump {
  display: flex;
  align-items: center;
  height: var(--kcf-row-h);
  background: var(--kc-band-ground);
  color: var(--kc-band-ink);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kcf-jump__go {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  height: 100%;
  padding: 0 var(--kc-s-3);
  color: inherit;
}
.kcf-jump__dot { opacity: .6; }
.kcf-jump__ack {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 var(--kc-s-3);
  color: var(--kc-band-muted);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-jump__ack:hover { color: var(--kc-band-ink); }


/* ==========================================================================
   10  COMPOSER, SHARED CHROME
   ========================================================================== */

.kcf-composer {
  background: var(--kcf-chrome);
  border-top: 1px solid var(--kc-stone-soft);
  padding: var(--kc-s-2) var(--kc-s-4) calc(var(--kc-s-2) + env(safe-area-inset-bottom, 0px));
}

.kcf-gate,
.kcf-composer__reply,
.kcf-composer__entry { display: none; }

.kcf-composer[data-gate="guest"] .kcf-gate--guest,
.kcf-composer[data-gate="muted"] .kcf-gate--muted,
.kcf-composer[data-gate="banned"] .kcf-gate--banned,
.kcf-composer[data-gate="readonly"] .kcf-gate--readonly,
.kcf-composer[data-gate="locked"] .kcf-gate--locked { display: block; }

.kcf-composer[data-gate="ok"][data-mode="reply"] .kcf-composer__reply { display: grid; }
/* flex, not block: the entry pane is a column with its own internal scroller.
   Its display MUST be set here and never on the .kcf-composer__entry class
   itself, because a later single-class rule would outrank the display:none
   above and leave the entry composer permanently open. That is exactly what
   happened the first time this was built. */
.kcf-composer[data-gate="ok"][data-mode="entry"] .kcf-composer__entry { display: flex; }

/* Gate strips. All five share one geometry so the composer never jumps height
   between states by more than a line. */
.kcf-gate {
  min-height: 48px;
  padding: var(--kc-s-2) var(--kc-s-3);
  background: var(--kc-bone-shade);
  border: 1px solid var(--kc-stone-soft);
  border-left: 2px solid var(--kc-warn-ink);
  border-radius: 0;
}
.kcf-gate--guest,
.kcf-gate--readonly { border-left: 2px solid var(--kc-stone-soft); }

.kcf-gate__line {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--kc-stone);
}
.kcf-gate__line--warn { color: var(--kc-warn-ink); }
.kcf-gate__note {
  margin-top: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-gate__note a { border-bottom: 1px solid var(--kc-stone-soft); }
.kcf-gate__rules {
  margin-top: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-gate__rules:hover { color: var(--kc-gold-strong); }

/* ---- the inline sign in ---------------------------------------------- */

/* There is no password field in this product and there never will be. */
.kcf-signin__idle,
.kcf-signin__form,
.kcf-signin__sent { display: none; align-items: center; gap: var(--kc-s-3); min-height: 32px; }
.kcf-signin[data-phase="idle"] .kcf-signin__idle,
.kcf-signin[data-phase="form"] .kcf-signin__form,
.kcf-signin[data-phase="sent"] .kcf-signin__sent { display: flex; }

.kcf-signin__idle { justify-content: space-between; flex-wrap: wrap; }
.kcf-signin__label {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
  flex: 0 0 auto;
}
.kcf-signin__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-size: var(--kcf-fs-dense);
  padding: 0 var(--kc-s-3);
}
.kcf-signin__input:focus { outline: none; border: 1px solid var(--kc-ink); }
.kcf-signin__sentline {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-gold-strong);
}
.kcf-signin__reset {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
}
.kcf-signin__reset:hover { color: var(--kc-ink); }

/* ---- transient strips -------------------------------------------------- */

.kcf-strip {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  height: 24px;
  margin-bottom: var(--kc-s-2);
  padding: 0 var(--kc-s-3);
  background: var(--kc-bone-shade);
  border: 1px solid var(--kc-stone-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-strip--lost { border-left: 2px solid var(--kc-warn-ink); }
.kcf-strip__btn { color: inherit; font: inherit; letter-spacing: inherit; }
.kcf-strip__btn--inline { margin-left: auto; color: var(--kc-ink); border-bottom: 1px solid var(--kc-stone-soft); }


/* ==========================================================================
   11  REPLY COMPOSER
   ========================================================================== */

/* The collapsed reply composer is 52px, and it only reaches that number if the
   OPEN AN ENTRY control sits beside the field rather than under it: 18px of
   anchor strip plus a 34px field row. Areas rather than source order, so the
   reply target chip can appear and disappear without moving the field. */
.kcf-composer__reply {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "strip  strip"
    "target target"
    "box    open";
  column-gap: var(--kc-s-2);
  align-items: end;
  min-height: 52px;
}
.kcf-composer__anchorstrip { grid-area: strip; }
.kcf-composer__target { grid-area: target; }
.kcf-composer__box { grid-area: box; }
.kcf-composer__open { grid-area: open; }

/* The anchor strip does more compliance work than any warning, because you
   cannot forget which paper you are inside while it is sitting above the
   caret. It is always present in a thread. */
.kcf-composer__anchorstrip {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  height: 18px;
  margin-bottom: var(--kc-s-1);
}
.kcf-composer__tick { flex: 0 0 auto; width: 22px; height: 1px; background: var(--kc-gold); }
.kcf-composer__anchortext {
  min-width: 0;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kcf-composer__target {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  height: 22px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--kc-s-1);
  padding: 0 var(--kc-s-1) 0 var(--kc-s-2);
  background: var(--kc-bone-shade);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-composer__targetx { width: 20px; height: 20px; display: grid; place-items: center; color: var(--kc-stone); }
.kcf-composer__targetx:hover { color: var(--kc-ink); }

.kcf-composer__box {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: end;
  gap: var(--kc-s-2);
  padding: 6px var(--kc-s-2);
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  box-shadow: none;
  transition: border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-composer__box:focus-within { border: 1px solid var(--kc-ink); }

.kcf-composer__field {
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-body);
  line-height: 1.5;
  min-height: 22px;
  max-height: 40vh;
  overflow-y: auto;
}
.kcf-composer__field::placeholder { color: var(--kc-stone); }

.kcf-composer__count {
  align-self: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  font-variant-numeric: tabular-nums;
  color: var(--kc-stone);
}
.kcf-composer__count[data-over="1"] { color: var(--kc-warn-ink); }

.kcf-composer__open { height: 34px; }


/* ==========================================================================
   12  ENTRY COMPOSER, THE HIGHEST RISK SURFACE
   Focus lands on the anchor field. Not the title, not the body. That ordering
   is the compliance argument turned into an interaction: you physically cannot
   begin by typing what happened to you.
   ========================================================================== */

.kcf-composer__entry { max-height: 340px; flex-direction: column; }
.kcf-composer__scroll { flex: 1 1 auto; padding-right: 2px; }
.kcf-composer__head { display: none; }

.kcf-composer__row { margin-bottom: var(--kc-s-2); }
.kcf-composer__row--tabs {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  height: 26px;
  margin-bottom: var(--kc-s-1);
}
.kcf-composer__label {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
  flex: 0 0 auto;
}
.kcf-composer__tabs { display: flex; align-items: center; gap: var(--kc-s-1); flex-wrap: wrap; }

.kcf-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 6px 4px;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-stone);
  white-space: nowrap;
  transition: color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-tab:hover { color: var(--kc-ink); }
.kcf-tab[aria-selected="true"] { color: var(--kc-ink); border-bottom: 2px solid var(--kc-gold); }

/* The anchor field. The gold left bar is the only permanent gold in the
   composer and it marks the one field the entry cannot exist without. */
.kcf-anchor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kc-s-3);
  min-height: 40px;
  padding: var(--kc-s-2) var(--kc-s-3);
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-left: 2px solid var(--kc-gold);
  border-radius: var(--kc-r-soft);
  transition: border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-anchor:focus-within { border: 1px solid var(--kc-ink); border-left: 2px solid var(--kc-gold); }
.kcf-anchor__input {
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
}
.kcf-anchor__input::placeholder { color: var(--kc-stone); }
.kcf-anchor__state {
  flex: 0 0 auto;
  max-width: 22ch;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--kc-stone);
}
.kcf-composer__entry[data-anchor="invalid"] .kcf-anchor__state { color: var(--kc-warn-ink); }
.kcf-composer__entry[data-anchor="resolved"] .kcf-anchor__state { color: var(--kc-gold-strong); text-transform: none; letter-spacing: 0.02em; }

/* A lookup failure is never an error. A well formed identifier whose lookup
   failed still opens the entry, because Crossref having a bad afternoon must
   not close the forum. */
.kcf-composer__lookupnote {
  margin-top: var(--kc-s-2);
  max-width: 60ch;
  font-size: var(--kcf-fs-dense);
  line-height: 1.5;
  color: var(--kc-stone);
}

.kcf-composer__title {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  height: 32px;
  font-family: var(--kc-font-body);
  font-size: 15px;
  color: var(--kc-ink);
}
.kcf-composer__body {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  min-height: 60px;
  max-height: 200px;
  font-family: var(--kc-font-body);
  font-size: var(--kc-fs-body);
  line-height: 1.55;
  color: var(--kc-ink);
  overflow-y: auto;
}
.kcf-composer__title::placeholder,
.kcf-composer__body::placeholder { color: var(--kc-stone); }

/* The gate. Title and body are disabled until the identifier passes CLIENT
   SIDE SHAPE validation, not until the lookup succeeds. */
.kcf-composer__title[disabled],
.kcf-composer__body[disabled] { opacity: .5; }

.kcf-composer__hint {
  max-width: 60ch;
  margin-bottom: var(--kc-s-2);
  font-size: var(--kcf-fs-dense);
  line-height: 1.5;
  color: var(--kc-stone);
}
.kcf-composer__entry[data-anchor="resolved"] .kcf-composer__hint,
.kcf-composer__entry[data-anchor="unresolved"] .kcf-composer__hint { display: none; }

/* ---- the scope rule --------------------------------------------------- */

/* At rest this is a hairline with invisible children, so nothing on screen
   moves when it fires. It is a rule, not a banner. Detection is purely client
   side, debounced, never sent anywhere and never logged, and the words
   violation, prohibited, banned, warning, sorry and the second person "you"
   never appear in it. */
.kcf-scope {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kc-s-3);
  height: 18px;
  border-top: 1px solid var(--kc-stone-soft);
  transition: border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-scope > * { visibility: hidden; }
.kcf-scope[data-fired="1"] { border-top: 1px solid var(--kc-gold); }
.kcf-scope[data-fired="1"] > * { visibility: visible; }

.kcf-scope__line,
.kcf-scope__rewrite,
.kcf-scope__dismiss {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-gold-strong);
}
.kcf-scope__dismiss { color: var(--kc-stone); }
.kcf-scope__rewrite { border-bottom: 1px solid var(--kc-gold); }
.kcf-scope__rewrite:hover,
.kcf-scope__dismiss:hover { color: var(--kc-ink); }

/* The rewrite picker. The linter line states the problem; this solves it. The
   user keeps their topic and is handed a better sentence. */
.kcf-rewrite {
  margin: var(--kc-s-2) 0;
  background: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-soft);
  overflow: hidden;
}
.kcf-rewrite__row {
  display: block;
  width: 100%;
  height: 28px;
  padding: 0 var(--kc-s-3);
  border-top: 1px solid var(--kc-stone-soft);
  font-family: var(--kc-font-mono);
  font-size: 12px;
  line-height: 28px;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-rewrite__row:first-child { border-top: 0; }
.kcf-rewrite__row:hover,
.kcf-rewrite__row[aria-selected="true"] { background: var(--kc-ink); color: var(--kc-bone); }

.kcf-composer__actions {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  min-height: 30px;
  margin-top: var(--kc-s-2);
  flex-wrap: wrap;
}
.kcf-composer__spacer { flex: 1 1 auto; }
.kcf-composer__scopehint {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}

/* Stated as a fact about the instrument, not as a rule aimed at the reader. */
.kcf-composer__fact {
  margin-top: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}


/* ==========================================================================
   13  HELD STATE AND THE GENERIC NOTE
   Held content renders IN PLACE, visible only to its author, with their words
   intact at full opacity. The classifier never destroys text and never shows a
   score, a threshold or the phrase that matched. Showing the phrase teaches
   evasion, and evasion is the actual legal risk.
   ========================================================================== */

.kcf-held,
.kcf-note {
  background: var(--kc-bone-shade);
  border: 1px solid var(--kc-stone-soft);
  border-left: 2px solid var(--kc-warn-ink);
  border-radius: 0;
  padding: var(--kc-s-3) var(--kc-s-4);
  max-width: 72ch;
}
.kcf-held__eyebrow {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-warn-ink);
  margin-bottom: var(--kc-s-2);
}
.kcf-held__body,
.kcf-note__body {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  line-height: 1.6;
  color: var(--kc-ink);
}
.kcf-note__body { color: var(--kc-stone); }
.kcf-held__acts { display: flex; gap: var(--kc-s-2); margin-top: var(--kc-s-3); }
.kcf-held__acts .kcf-btn { height: 26px; }

.kcf-msg--held { padding-left: var(--kc-s-4); }
.kcf-msg[data-status="held"] .kcf-msg__body { padding-bottom: var(--kc-s-2); }


/* ==========================================================================
   14  CONTEXT COLUMN
   It is never empty and never blank. With no single citation it carries the
   channel purpose and the long form of why a citation is required at all.
   ========================================================================== */

.kcf-ctx {
  grid-column: 4;
  background: var(--kcf-chrome);
  border-left: 1px solid var(--kc-stone-soft);
  padding: var(--kc-s-5) var(--kc-s-4);
}

.kcf-ctx__citation,
.kcf-ctx__channel,
.kcf-ctx__member { display: none; }
.kcf-ctx[data-mode="citation"] .kcf-ctx__citation,
.kcf-ctx[data-mode="channel"] .kcf-ctx__channel,
.kcf-ctx[data-mode="member"] .kcf-ctx__member { display: block; }

.kcf-rule { border-top: 1px solid var(--kc-stone-soft); margin: var(--kc-s-5) 0; height: 0; }

.kcf-ctx__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-stone);
  margin-bottom: var(--kc-s-3);
}
.kcf-ctx__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: var(--kc-s-3);
  flex: 0 0 auto;
  background: var(--kc-gold);
}
.kcf-ctx__eyebrow--plain { letter-spacing: 0.18em; }
.kcf-ctx__eyebrow--plain::before { content: none; }

.kcf-ctx__kind {
  display: inline-block;
  padding: 2px 6px;
  margin-bottom: var(--kc-s-3);
  border: 1px solid var(--kc-gold);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kc-gold-strong);
}

.kcf-ctx__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcf-ctx__title[data-expanded="1"] { -webkit-line-clamp: none; display: block; }
.kcf-ctx__moretitle,
.kcf-ctx__moreauthors {
  margin-top: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
}
.kcf-ctx__moretitle:hover,
.kcf-ctx__moreauthors:hover { color: var(--kc-ink); }

.kcf-ctx__authors {
  margin-top: var(--kc-s-3);
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-stone);
}
.kcf-ctx__source {
  margin-top: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
}
.kcf-ctx__ident {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  margin-top: var(--kc-s-3);
}
.kcf-ctx__identval {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--kc-font-mono);
  font-size: 12px;
  color: var(--kc-ink);
  user-select: all;
  overflow-wrap: anywhere;
}
.kcf-ctx__copy {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: border-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-ctx__copy:hover { border: 1px solid var(--kc-ink); color: var(--kc-ink); }

.kcf-ctx__outwrap { margin-top: var(--kc-s-4); }
.kcf-ctx__out {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-ctx__out:hover { color: var(--kc-ink); }
.kcf-arrow { display: inline-block; transition: transform var(--kc-dur-fast) var(--kc-ease); }
.kcf-ctx__out:hover .kcf-arrow { transform: translateX(4px); }

/* ALSO CITED IN is the conflicting literature feature, and it is the reason
   this column exists at all. */
.kcf-also { display: grid; }
.kcf-also__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kc-s-2);
  min-height: var(--kcf-row-h);
  padding: 2px 0;
  border-top: 1px solid var(--kc-stone-soft);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-stone);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-also__row:first-child { border-top: 0; }
.kcf-also__row:hover { color: var(--kc-ink); }
.kcf-also__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-also__n {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  font-variant-numeric: tabular-nums;
  color: var(--kc-stone);
}

/* The canon spec table: keys mono and quiet at 34%, values in the body face,
   headers never bold, one hairline between rows. */
.kcf-spec { display: grid; }
.kcf-spec__row {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  gap: var(--kc-s-3);
  padding: var(--kc-s-2) 0;
  border-bottom: 1px solid var(--kc-stone-soft);
}
.kcf-spec__row:last-child { border-bottom: 0; }
.kcf-spec__key {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kc-stone);
  line-height: 1.6;
}
.kcf-spec__val { font-size: var(--kcf-fs-dense); color: var(--kc-ink); line-height: 1.6; }

.kcf-ctx__purpose { font-size: var(--kcf-fs-dense); line-height: 1.6; color: var(--kc-ink); }
.kcf-ctx__headline {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  margin-bottom: var(--kc-s-3);
}

/* The ledger list: no marker, a hairline between items, and the same 22px gold
   tick the storefront uses on duty lists. */
.kcf-list { border-top: 1px solid var(--kc-stone-soft); }
.kcf-list li {
  position: relative;
  padding: var(--kc-s-2) 0 var(--kc-s-2) var(--kc-s-6);
  border-bottom: 1px solid var(--kc-stone-soft);
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-stone);
}
.kcf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 22px;
  height: 1px;
  background: var(--kc-gold);
}
.kcf-ctx__ruleslink { margin-top: var(--kc-s-3); }
.kcf-ctx__rules {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-ctx__rules:hover { color: var(--kc-gold-strong); }

.kcf-ctx__long p {
  font-size: var(--kcf-fs-dense);
  line-height: 1.7;
  color: var(--kc-stone);
  margin-bottom: var(--kc-s-3);
  max-width: 60ch;
}
.kcf-ctx__long p:last-child { margin-bottom: 0; }

.kcf-ctx__mono { margin-bottom: var(--kc-s-3); }
.kcf-ctx__membername {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
}
.kcf-ctx__memberhandle {
  margin-top: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
}

/* The one time profile card carries exactly two fields. Every other profile
   field is a free text box somebody would have to police, and a signature line
   is the classic route for a standing testimonial. */
.kcf-field { display: block; margin-bottom: var(--kc-s-3); }
.kcf-field > span {
  display: block;
  margin-bottom: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-field__input {
  width: 100%;
  height: 32px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-size: var(--kcf-fs-dense);
  padding: 0 var(--kc-s-3);
}
.kcf-field__input:focus { outline: none; border: 1px solid var(--kc-ink); }
.kcf-field__err {
  margin: calc(var(--kc-s-3) * -1) 0 var(--kc-s-3);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-warn-ink);
}
.kcf-ctx__handlenote {
  margin-bottom: var(--kc-s-3);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}

/* The bottom sheet parts are inert above 720px. */
.kcf-ctx__grab,
.kcf-ctx__collapsed { display: none; }


/* ==========================================================================
   15  FIND A PAPER
   The prose redirect lands here. If the anchor field takes more than thirty
   characters with no digit in them, the app does not reject it, it moves the
   text in here and looks for the paper. Nobody was told no.
   ========================================================================== */

.kcf-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--kcf-z-sheet);
  width: var(--kcf-ctx-w);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: var(--kcf-chrome);
  border-left: 1px solid var(--kc-ink);
  padding: var(--kc-s-4);
}
.kcf-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-s-2); }
.kcf-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-panel__copy {
  margin: var(--kc-s-3) 0;
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-ink);
  max-width: 46ch;
}
.kcf-panel__search { margin: var(--kc-s-3) 0; }
.kcf-panel__input {
  width: 100%;
  height: 34px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-dense);
  padding: 0 var(--kc-s-3);
}
.kcf-panel__input:focus { outline: none; border: 1px solid var(--kc-ink); }
.kcf-panel__list { border-top: 1px solid var(--kc-stone-soft); }
.kcf-panel__item {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--kc-s-2) 0;
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: background-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-panel__item:hover { background: var(--kcf-hover-deep); }
.kcf-panel__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcf-panel__meta {
  margin-top: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}
.kcf-panel__has { color: var(--kc-gold-strong); }
.kcf-panel__empty {
  margin-top: var(--kc-s-3);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}


/* ==========================================================================
   16  POPOVER, MODAL, TOAST
   ========================================================================== */

.kcf-pop {
  position: fixed;
  z-index: var(--kcf-z-pop);
  min-width: 220px;
  max-width: 320px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-soft);
  box-shadow: none;
  overflow: hidden;
}
.kcf-pop__list { display: grid; }
.kcf-pop__item {
  display: grid;
  min-height: 26px;
  align-content: center;
  padding: var(--kc-s-1) var(--kc-s-3);
  border-top: 1px solid var(--kc-stone-soft);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-pop__item:first-child { border-top: 0; }
.kcf-pop__item:hover,
.kcf-pop__item[data-cursor="1"] { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-pop__hint {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}
.kcf-pop__item:hover .kcf-pop__hint,
.kcf-pop__item[data-cursor="1"] .kcf-pop__hint { color: var(--kc-band-muted); }

.kcf-modal { position: fixed; inset: 0; z-index: var(--kcf-z-modal); }
.kcf-modal__scrim { position: absolute; inset: 0; background: var(--kcf-scrim); }
.kcf-modal__box {
  position: relative;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  margin: 15vh auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-soft);
  box-shadow: none;
}

.kcf-switcher,
.kcf-report,
.kcf-keys { display: none; flex-direction: column; min-height: 0; }
.kcf-modal[data-kind="switcher"] .kcf-switcher,
.kcf-modal[data-kind="report"] .kcf-report,
.kcf-modal[data-kind="keys"] .kcf-keys { display: flex; }

.kcf-switcher__input {
  height: 40px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kc-stone-soft);
  border-radius: 0;
  padding: 0 var(--kc-s-4);
  font-family: var(--kc-font-mono);
  font-size: 14px;
  color: var(--kc-ink);
}
.kcf-switcher__input:focus { outline: none; border-bottom: 1px solid var(--kc-ink); }
.kcf-switcher__list { min-height: 0; }
.kcf-switcher__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: var(--kc-s-2);
  height: 28px;
  padding: 0 var(--kc-s-4);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
}
.kcf-switcher__type {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-switcher__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-switcher__row[aria-selected="true"] { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-switcher__row[aria-selected="true"] .kcf-switcher__type { color: var(--kc-band-muted); }
/* Matches are washed, never bolded, because weight already means unread. */
.kcf-switcher__hit { background: var(--kc-gold-wash); }
.kcf-switcher__row[aria-selected="true"] .kcf-switcher__hit { background: transparent; text-decoration: underline; }
.kcf-switcher__empty {
  padding: var(--kc-s-4);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}

.kcf-report,
.kcf-keys { padding: var(--kc-s-4); overflow-y: auto; }
.kcf-report__title,
.kcf-keys__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: var(--kc-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  margin-bottom: var(--kc-s-4);
}
.kcf-report__opts { display: grid; border-top: 1px solid var(--kc-stone-soft); }
.kcf-report__opt {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  min-height: 26px;
  padding: var(--kc-s-1) 0;
  border-bottom: 1px solid var(--kc-stone-soft);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
  cursor: pointer;
}
.kcf-report__opt input { width: 13px; height: 13px; accent-color: var(--kc-ink); padding: 0; border-radius: 0; }
.kcf-report__note {
  width: 100%;
  height: 34px;
  margin-top: var(--kc-s-4);
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-size: var(--kcf-fs-dense);
  padding: 0 var(--kc-s-3);
}
.kcf-report__note:focus { outline: none; border: 1px solid var(--kc-ink); }
.kcf-report__actions { display: flex; justify-content: flex-end; gap: var(--kc-s-2); margin-top: var(--kc-s-4); }

.kcf-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: var(--kcf-z-pop);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  max-width: calc(100vw - 32px);
  padding: var(--kc-s-2) var(--kc-s-3);
  background: var(--kc-band-ground);
  color: var(--kc-band-ink);
  border: 1px solid var(--kc-band-hairline);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kcf-toast__action { color: var(--kc-band-muted); border-bottom: 1px solid var(--kc-band-hairline); }
.kcf-toast__action:hover { color: var(--kc-band-ink); }


/* ==========================================================================
   17  MONOGRAM, BUTTONS, EMPTY STATES, SKELETONS
   ========================================================================== */

/* Monogram tiles, never an image element. The two tone ground is derived
   deterministically from avatar_seed, which app.js writes as data-tone. */
.kcf-mono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--kc-ink);
  line-height: 1;
  user-select: none;
}
.kcf-mono[data-tone="1"] { background: var(--kc-bone-shade); }
.kcf-mono--lg { width: 40px; height: 40px; font-size: 13px; }
.kcf-mono--md { width: 32px; height: 32px; font-size: 11px; }
.kcf-mono--sm { width: 28px; height: 28px; font-size: 11px; }
.kcf-mono--xs { width: 22px; height: 22px; font-size: 10px; }
.kcf-entry__mono { width: 32px; height: 32px; font-size: 11px; }
.kcf-msg__mono { width: 28px; height: 28px; font-size: 11px; }
.kcf-me__mono { width: 28px; height: 28px; font-size: 11px; }

.kcf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-s-2);
  height: 28px;
  padding: 0 var(--kc-s-3);
  font-family: var(--kc-font-body);
  font-size: var(--kcf-fs-dense);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--kc-r-flat);
  background: transparent;
  color: inherit;
  transition: background-color var(--kc-dur-fast) var(--kc-ease),
              color var(--kc-dur-fast) var(--kc-ease),
              border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-btn--solid { background: var(--kc-ink); color: var(--kc-bone); border: 1px solid var(--kc-ink); }
.kcf-btn--solid:hover { background: var(--kc-gold-strong); border: 1px solid var(--kc-gold-strong); color: var(--kc-bone); }
.kcf-btn--ghost { border: 1px solid var(--kc-ink); color: var(--kc-ink); }
.kcf-btn--ghost:hover { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-btn--mono {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kcf-btn[disabled],
.kcf-btn[aria-disabled="true"] { opacity: .5; }

.kcf-iconbtn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-iconbtn:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }

/* A quiet channel must look composed, not broken. */
.kcf-empty { padding: var(--kc-s-7) var(--kc-s-5); max-width: 560px; }
.kcf-empty__glyph {
  font-family: var(--kc-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kc-gold-strong);
  margin-bottom: var(--kc-s-5);
}
.kcf-empty__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kc-ink);
  text-wrap: balance;
}
.kcf-empty__sub {
  margin-top: var(--kc-s-4);
  max-width: 46ch;
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-stone);
}
.kcf-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-s-3);
  margin-top: var(--kc-s-6);
  padding: var(--kc-s-3) var(--kc-s-5);
  background: var(--kc-ink);
  color: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-flat);
  font-family: var(--kc-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-empty__cta:hover { background: transparent; color: var(--kc-ink); }
.kcf-ctx .kcf-empty { text-align: center; padding: var(--kc-s-6) 0; margin: 0 auto; }

/* Skeletons pulse in opacity. No shimmer sweep, because a sweep is a gradient
   and gradients are forbidden. */
@keyframes kcf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.kcf-skel {
  background: var(--kc-bone-shade);
  border-radius: var(--kc-r-soft);
  animation: kcf-pulse 1400ms var(--kc-ease) infinite;
}
.kcf-skel--tile { width: var(--kcf-tile); height: var(--kcf-tile); flex: 0 0 auto; }
.kcf-skel--chan { height: 12px; margin: 6px 10px; }
.kcf-skel--bar { height: 10px; margin: var(--kc-s-3) 0; }
.kcf-skel--entry,
.kcf-skel--msg {
  display: grid;
  align-content: center;
  gap: 8px;
  background: transparent;
  animation: none;
  border-bottom: 1px solid var(--kc-stone-soft);
  padding: 10px var(--kc-s-4) 10px 14px;
}
.kcf-skel--entry { min-height: 76px; }
.kcf-skel--msg { min-height: 44px; border-bottom: 0; padding-left: var(--kcf-gutter); }
.kcf-skel__bar {
  display: block;
  height: 10px;
  background: var(--kc-bone-shade);
  border-radius: var(--kc-r-soft);
  animation: kcf-pulse 1400ms var(--kc-ease) infinite;
}
.kcf-skel__bar[data-w="40"] { width: 40%; }
.kcf-skel__bar[data-w="60"] { width: 60%; }
.kcf-skel__bar[data-w="90"] { width: 90%; }


/* ==========================================================================
   18  MODERATION QUEUE
   A queue, not a console. Deliberately minimal in version one.
   ========================================================================== */

.kcf-mod { padding: var(--kc-s-3) var(--kc-s-4); border-bottom: 1px solid var(--kc-stone-soft); }
.kcf-mod__body {
  max-width: 78ch;
  margin: var(--kc-s-3) 0;
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kcf-mod__chips { display: flex; flex-wrap: wrap; gap: var(--kc-s-1); margin-bottom: var(--kc-s-2); }
.kcf-mod__chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.1em;
  color: var(--kc-stone);
}
.kcf-mod__chip--score { border: 1px solid var(--kc-warn-ink); color: var(--kc-warn-ink); }
.kcf-mod__acts { display: flex; flex-wrap: wrap; gap: var(--kc-s-2); }
.kcf-mod__note {
  margin-top: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-stone);
}


/* ==========================================================================
   19  DENSITY
   The open setting buys air without changing a single geometry constant, so
   the numbers in the layout budget still hold.
   ========================================================================== */

.kcf[data-density="open"] { --kcf-line: 22px; --kcf-row-h: 28px; }
.kcf[data-density="open"] .kcf-msg { padding-top: 4px; padding-bottom: 4px; }
.kcf[data-density="open"] .kcf-msg[data-lead="1"] { margin-top: var(--kc-s-3); }
.kcf[data-density="open"] .kcf-entry { min-height: 88px; padding-top: var(--kc-s-3); padding-bottom: var(--kc-s-3); }


/* ==========================================================================
   19b  LEAF ELEMENTS
   Small members of blocks already styled above. They live together at the end
   so the block sections stay readable, and every one of them is here because
   it needs a real declaration, not because a class deserves a rule.
   ========================================================================== */

/* FIND A PAPER is the fourth tab and is not a citation kind, so it is fenced
   off from the three that are. */
.kcf-tab--find {
  margin-left: var(--kc-s-2);
  padding-left: var(--kc-s-3);
  border-left: 1px solid var(--kc-stone-soft);
}

.kcf-strip--paused { padding: 0; }
.kcf-strip--paused .kcf-strip__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 var(--kc-s-3);
  line-height: 22px;
  letter-spacing: inherit;
}
.kcf-strip__text { flex: 1 1 auto; min-width: 0; }

.kcf-nav__jumplabel { flex: 0 0 auto; }
.kcf-jump__label { flex: 0 0 auto; }
.kcf-jump__n { font-variant-numeric: tabular-nums; }

.kcf-entry__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcf-entry__dot { opacity: .6; }
.kcf-entry__when { font-variant-numeric: tabular-nums; }

.kcf-composer__targettext { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kcf-ctx__also,
.kcf-ctx__entry { display: block; }
.kcf-ctx__collapsedlabel,
.kcf-ctx__caret { flex: 0 0 auto; }

.kcf-toast__msg { min-width: 0; }

/* Wide content inside a post scrolls inside its own container. The main column
   is about 620px at the 1280 design target, so a table that does not do this
   pushes a horizontal scrollbar onto the whole document. */
.kcf-msg__body table,
.kcf-thread__op table { width: 100%; border-collapse: collapse; min-width: 480px; }
.kcf-table-block { overflow-x: auto; max-width: 100%; }


/* ==========================================================================
   19c  THE RENDERED DOM
   Everything above styles the static shell in index.html, which is what a
   visitor with scripting off sees. app.js does not reuse that markup: on its
   first render it clears the containers marked [js] in the specification and
   rebuilds them with createElement, which is exactly what section 11 of the
   specification asks for. Its element names differ from the shell's in places,
   and it drives state through one uniform data-tone attribute rather than a
   per component one.

   So this section styles the DOM that actually ships. It is not dead weight
   and it is not a duplicate: the shell above is the no-script fallback, and
   this is the running application. Where the two agree on a class name the
   rule above already covers it and nothing is repeated here.
   ========================================================================== */

/* ---- the uniform tone attribute --------------------------------------- */
/* app.js marks every stateful string with data-tone rather than a bespoke
   class. warn is the held, removed, muted, banned and strike colour; gold is
   the only promoted state and uses gold-strong because gold may never be a
   character. */
.kcf [data-tone="warn"] { color: var(--kc-warn-ink); }
.kcf [data-tone="gold"] { color: var(--kc-gold-strong); }
.kcf [data-tone="stone"] { color: var(--kc-stone); }

/* ---- monogram, driven by data-size and a two tone ground --------------- */
.kcf-mono[data-tone="shade"] { background: var(--kc-bone-shade); }
.kcf-mono[data-tone="bone"] { background: var(--kc-bone); }
.kcf-mono[data-size="22"] { width: 22px; height: 22px; font-size: 10px; }
.kcf-mono[data-size="28"] { width: 28px; height: 28px; font-size: 11px; }
.kcf-mono[data-size="32"] { width: 32px; height: 32px; font-size: 11px; }
.kcf-mono[data-size="40"] { width: 40px; height: 40px; font-size: 13px; }

/* ---- composer: the five gate bars ------------------------------------- */
/* app.js carries the posting state on the composer's own data-mode rather
   than a separate attribute, and renders one bar per state. */
.kcf-composer__bar {
  min-height: 48px;
  padding: var(--kc-s-2) var(--kc-s-3);
  background: var(--kc-bone-shade);
  border: 1px solid var(--kc-stone-soft);
  border-left: 2px solid var(--kc-warn-ink);
}
.kcf-composer__bar--signin,
.kcf-composer__bar--readonly,
.kcf-composer__bar--channel { border-left: 2px solid var(--kc-stone-soft); }

/* The channel view composer is an invitation, not an enforcement notice, so
   its line is a sentence in the body face rather than a mono label. */
.kcf-composer__bar--channel {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  flex-wrap: wrap;
}
.kcf-composer__bar--channel .kcf-composer__barline {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--kc-font-body);
  font-size: var(--kcf-fs-dense);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
.kcf-composer__barline {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--kc-stone);
}
.kcf-composer__bar--banned .kcf-composer__barline:first-child,
.kcf-composer__bar--muted .kcf-composer__barline:first-child { color: var(--kc-warn-ink); }
.kcf-composer__barlink {
  display: inline-block;
  margin-top: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-composer__barlink:hover { color: var(--kc-ink); }

.kcf-composer__signin { display: flex; align-items: center; gap: var(--kc-s-2); margin-top: var(--kc-s-2); }
.kcf-composer__email {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-size: var(--kcf-fs-dense);
  padding: 0 var(--kc-s-3);
}
.kcf-composer__email:focus { outline: none; border: 1px solid var(--kc-ink); }
/* The send control doubles as the sign in submit, where it carries a word
   rather than a glyph and cannot stay a 26px square. */
.kcf-composer__signin .kcf-composer__send {
  width: auto;
  padding: 0 var(--kc-s-3);
  height: 30px;
  background: var(--kc-ink);
  color: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kcf-composer__signin .kcf-composer__send:hover { background: var(--kc-gold-strong); border: 1px solid var(--kc-gold-strong); color: var(--kc-bone); }

/* ---- composer: reply mode --------------------------------------------- */
/* The anchor strip. Always present inside a thread, and it does more
   compliance work than any warning because the identifier sits above the
   caret the whole time you are typing. */
.kcf-composer__anchor {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  min-height: 18px;
  margin-bottom: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-composer__anchor > span:not(.kcf-composer__tick) {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The runtime creates both of these with a single class and no shared button
   class, so each needs its own box. Without this the send control collapses to
   the width of the ">" glyph and there is nothing to aim at. */
.kcf-composer__plus,
.kcf-composer__send {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-composer__plus:hover,
.kcf-composer__send:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }

/* Reply mode lays out as a grid so OPEN AN ENTRY sits beside the field rather
   than wrapping onto its own line, which is what keeps the collapsed composer
   near the height the layout budget assumes. */
.kcf-composer[data-mode="reply"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--kc-s-2);
}
.kcf-composer[data-mode="reply"] > .kcf-composer__anchor,
.kcf-composer[data-mode="reply"] > .kcf-composer__target,
.kcf-composer[data-mode="reply"] > .kcf-held,
.kcf-composer[data-mode="reply"] > .kcf-note { grid-column: 1 / -1; }
.kcf-composer[data-mode="reply"] > .kcf-composer__box { grid-column: 1; }
.kcf-composer[data-mode="reply"] > .kcf-composer__open { grid-column: 2; align-self: end; }
.kcf-composer__x {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
}
.kcf-composer__x:hover { color: var(--kc-ink); }
.kcf-composer__target > span:first-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- composer: entry mode --------------------------------------------- */
/* Every field is a direct child of the form, so the scroll cap lives on the
   form itself rather than on an inner wrapper. */
.kcf-composer[data-mode="entry"] {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The runtime builds the tab row as a plain .kcf-composer__row with no
   modifier, so the layout has to key off what the row contains rather than off
   a class the runtime never writes. */
.kcf-composer__row:has(> .kcf-composer__tabs) {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  min-height: 26px;
  flex-wrap: wrap;
}
.kcf-anchor > input {
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
}
.kcf-anchor > input::placeholder { color: var(--kc-stone); }
.kcf-composer__title,
.kcf-composer__body { margin-top: var(--kc-s-2); }
.kcf-scope__btn {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-gold-strong);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-scope__btn:last-child { color: var(--kc-stone); }
.kcf-scope__btn:hover { color: var(--kc-ink); }
/* The scope hint takes the slack so the two actions sit hard right. */
.kcf-composer__actions .kcf-composer__scopehint { flex: 1 1 auto; min-width: 0; }
.kcf-composer__discard,
.kcf-composer__submit {
  height: 28px;
  padding: 0 var(--kc-s-3);
  flex: 0 0 auto;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--kc-r-flat);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-composer__discard { border: 1px solid var(--kc-ink); color: var(--kc-ink); }
.kcf-composer__discard:hover { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-composer__submit { background: var(--kc-ink); color: var(--kc-bone); border: 1px solid var(--kc-ink); }
.kcf-composer__submit:hover { background: var(--kc-gold-strong); border: 1px solid var(--kc-gold-strong); }
.kcf-composer__note {
  margin-top: var(--kc-s-2);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}

/* ---- the two strips above the composer -------------------------------- */
/* These are direct children of .kcf-main, so section 7 gives each an explicit
   grid row. Without that they would auto place after the composer. */
.kcf-note--wire,
.kcf-note--idle {
  display: flex;
  align-items: center;
  gap: var(--kc-s-3);
  min-height: var(--kcf-row-h);
  max-width: none;
  padding: 0 var(--kc-s-4);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-note--idle { border-left: 1px solid var(--kc-stone-soft); }
.kcf-note__btn {
  margin-left: auto;
  font: inherit;
  letter-spacing: inherit;
  color: var(--kc-ink);
  border-bottom: 1px solid var(--kc-stone-soft);
}

/* ---- header ------------------------------------------------------------ */
.kcf-head__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: var(--kc-fs-body-lg);
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcf-head__rule { flex: 0 0 auto; width: 1px; height: 16px; background: var(--kc-stone-soft); }
.kcf-head__btn {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0 var(--kc-s-2);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-head__btn:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }
.kcf-head__btn[aria-pressed="true"] { background: var(--kc-ink); color: var(--kc-bone); }

/* ---- identity panel ---------------------------------------------------- */
.kcf-me {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--kc-s-2);
  padding: 0 var(--kc-s-1) 0 10px;
}
.kcf-me[data-anon] {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0 var(--kc-s-2) 0 10px;
}
.kcf-me__col { min-width: 0; }
.kcf-me__name {
  font-size: var(--kcf-fs-dense);
  font-weight: 500;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.kcf-me__btn {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--kc-s-2);
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-me__btn:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }

/* ---- entry card and divider leaves ------------------------------------ */
.kcf-entry__chip {
  display: inline-flex;
  align-items: center;
  height: 14px;
  margin-right: var(--kc-s-2);
  padding: 0 4px;
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  letter-spacing: 0.14em;
}
.kcf-entry__chip[data-tone="warn"] { border: 1px solid var(--kc-warn-ink); }
.kcf-entry__ref,
.kcf-entry__cite,
.kcf-entry__year { white-space: nowrap; }
.kcf-entry__n { font-variant-numeric: tabular-nums; }
.kcf-entry__new { color: var(--kc-gold-strong); margin-left: var(--kc-s-2); }
.kcf-div__label { flex: 0 0 auto; }
.kcf-msg__who {
  font-size: var(--kcf-fs-dense);
  font-weight: 600;
  color: var(--kc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcf-mark__label { white-space: nowrap; }
.kcf-jump__mark {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 var(--kc-s-3);
  color: var(--kc-band-muted);
  font: inherit;
  letter-spacing: inherit;
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-jump__mark:hover { color: var(--kc-band-ink); }

/* ---- held strip -------------------------------------------------------- */
.kcf-held__text {
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-ink);
  margin-bottom: var(--kc-s-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kcf-held__act {
  height: 26px;
  margin-right: var(--kc-s-2);
  padding: 0 var(--kc-s-3);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-flat);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-ink);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-held__act:hover { background: var(--kc-ink); color: var(--kc-bone); }

/* ---- context column leaves --------------------------------------------- */
.kcf-ctx__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kc-s-2);
  width: 100%;
  min-height: var(--kcf-row-h);
  padding: var(--kc-s-1) 0;
  border-top: 1px solid var(--kc-stone-soft);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-stone);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-ctx__row:hover { color: var(--kc-ink); }
.kcf-ctx__rowtitle { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-ctx__rown {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  font-variant-numeric: tabular-nums;
  color: var(--kc-stone);
}
.kcf-ctx__id {
  display: flex;
  align-items: center;
  gap: var(--kc-s-2);
  margin-top: var(--kc-s-3);
  font-family: var(--kc-font-mono);
  font-size: 12px;
  color: var(--kc-ink);
  user-select: all;
  overflow-wrap: anywhere;
}
.kcf-ctx__more {
  margin-top: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-ctx__more:hover { color: var(--kc-ink); }
.kcf-ctx__arrow { display: inline-block; margin-left: var(--kc-s-2); transition: transform var(--kc-dur-fast) var(--kc-ease); }
.kcf-ctx__out:hover .kcf-ctx__arrow,
a:hover > .kcf-ctx__arrow { transform: translateX(4px); }

/* ---- the rules document ------------------------------------------------ */
.kcf-rules { display: block; max-width: 68ch; padding: var(--kc-s-5) var(--kc-s-4) var(--kc-s-5) var(--kcf-gutter); }
.kcf-rules__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-stone);
  margin-bottom: var(--kc-s-4);
}
.kcf-rules__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: var(--kc-s-3);
  flex: 0 0 auto;
  background: var(--kc-gold);
}
.kcf-rules__p,
.kcf-rules__body {
  font-size: var(--kc-fs-body);
  line-height: 1.7;
  color: var(--kc-ink);
  margin-bottom: var(--kc-s-4);
  max-width: 68ch;
}
.kcf-rules__body p { margin: 0 0 var(--kc-s-3); }
.kcf-rules__body p:last-child { margin-bottom: 0; }
.kcf-rules__h {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: var(--kc-fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kc-ink);
  max-width: 32ch;
  margin: var(--kc-s-7) 0 var(--kc-s-3);
}
.kcf-rules__h3 {
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: var(--kc-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
  max-width: 46ch;
  margin: var(--kc-s-6) 0 var(--kc-s-3);
}
.kcf-rules__rev {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
  margin-bottom: var(--kc-s-4);
}

/* ---- the one time profile card ----------------------------------------- */
.kcf-profile { display: block; margin-top: var(--kc-s-4); }
.kcf-profile__field { display: block; margin-bottom: var(--kc-s-3); }
.kcf-profile__field > span {
  display: block;
  margin-bottom: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-profile__input {
  width: 100%;
  height: 32px;
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-size: var(--kcf-fs-dense);
  padding: 0 var(--kc-s-3);
}
.kcf-profile__input:focus { outline: none; border: 1px solid var(--kc-ink); }
.kcf-profile__err:not(:empty) {
  margin-top: var(--kc-s-1);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-warn-ink);
}
.kcf-profile__note {
  margin-bottom: var(--kc-s-3);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}
.kcf-profile__save {
  height: 28px;
  padding: 0 var(--kc-s-3);
  background: var(--kc-ink);
  color: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-flat);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-profile__save:hover { background: var(--kc-gold-strong); border: 1px solid var(--kc-gold-strong); }

/* ---- popover: menus and the report form -------------------------------- */
.kcf-pop__head {
  padding: var(--kc-s-2) var(--kc-s-3);
  border-bottom: 1px solid var(--kc-stone-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-pop__group { display: grid; }
.kcf-pop__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kc-s-3);
  width: 100%;
  min-height: 26px;
  padding: var(--kc-s-1) var(--kc-s-3);
  border-top: 1px solid var(--kc-stone-soft);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-pop__row:first-child { border-top: 0; }
.kcf-pop__row:hover { background: var(--kcf-hover-deep); }
/* A chosen radio row reads as chosen without colour doing the work alone. */
.kcf-pop__row[aria-checked="true"] { background: var(--kc-gold-wash); }
.kcf-pop__row[aria-checked="true"]::after { content: "*"; font-family: var(--kc-font-mono); color: var(--kc-gold-strong); }
.kcf-pop__row--go {
  justify-content: center;
  grid-template-columns: auto;
  background: var(--kc-ink);
  color: var(--kc-bone);
  border-top: 1px solid var(--kc-ink);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 30px;
}
.kcf-pop__row--go:hover { background: var(--kc-gold-strong); }
.kcf-pop__label {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.06em;
  color: var(--kc-stone);
}
.kcf-pop__row:hover .kcf-pop__label { color: var(--kc-stone); }
.kcf-pop__note {
  display: block;
  width: calc(100% - var(--kc-s-5));
  min-height: 48px;
  margin: var(--kc-s-2) var(--kc-s-3);
  padding: var(--kc-s-2);
  background: var(--kc-bone);
  border: 1px solid var(--kc-stone-soft);
  border-radius: var(--kc-r-soft);
  font-size: var(--kcf-fs-dense);
  resize: none;
}
.kcf-pop__note:focus { outline: none; border: 1px solid var(--kc-ink); }

/* ---- modal: the host is the scrim, the panel is the box ---------------- */
.kcf-modal { background: var(--kcf-scrim); }
.kcf-modal__panel {
  position: relative;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  margin: 15vh auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  background: var(--kc-bone);
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-soft);
  box-shadow: none;
}
.kcf-modal__input {
  height: 40px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kc-stone-soft);
  border-radius: 0;
  padding: 0 var(--kc-s-4);
  font-family: var(--kc-font-mono);
  font-size: 14px;
  color: var(--kc-ink);
}
.kcf-modal__input:focus { outline: none; border-bottom: 1px solid var(--kc-ink); }
.kcf-modal__list { min-height: 0; overflow-y: auto; }
.kcf-modal__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: var(--kc-s-2);
  width: 100%;
  min-height: 28px;
  padding: 0 var(--kc-s-4);
  font-size: var(--kcf-fs-dense);
  color: var(--kc-ink);
}
.kcf-modal__row[aria-selected="true"] { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-modal__type {
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-stone);
}
.kcf-modal__row[aria-selected="true"] .kcf-modal__type { color: var(--kc-band-muted); }
.kcf-modal__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcf-modal__title {
  padding: var(--kc-s-4) var(--kc-s-4) 0;
  font-family: var(--kc-font-display);
  font-weight: 400;
  font-size: var(--kc-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
}
.kcf-modal__sub {
  padding: var(--kc-s-3) var(--kc-s-4) 0;
  font-size: var(--kcf-fs-dense);
  line-height: 1.6;
  color: var(--kc-stone);
  max-width: 52ch;
}
/* .kcf-modal__row is also the confirm button row, where it has no type lane. */
.kcf-modal__row:has(> .kcf-modal__btn) {
  grid-template-columns: none;
  display: flex;
  justify-content: flex-end;
  gap: var(--kc-s-2);
  padding: var(--kc-s-4);
}
.kcf-modal__btn {
  height: 28px;
  padding: 0 var(--kc-s-3);
  flex: 0 0 auto;
  border: 1px solid var(--kc-ink);
  border-radius: var(--kc-r-flat);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kc-ink);
  transition: background-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-modal__btn:hover { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-modal__btn--go { background: var(--kc-ink); color: var(--kc-bone); }
.kcf-modal__btn--go:hover { background: var(--kc-gold-strong); border: 1px solid var(--kc-gold-strong); }

/* ---- lookup panel rows -------------------------------------------------- */
.kcf-panel__row {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--kc-s-2) 0;
  border-bottom: 1px solid var(--kc-stone-soft);
  transition: background-color var(--kc-dur-fast) var(--kc-ease);
}
.kcf-panel__row:hover { background: var(--kcf-hover-deep); }
.kcf-panel__close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--kc-r-soft);
  font-family: var(--kc-font-mono);
  font-size: var(--kcf-fs-micro2);
  color: var(--kc-stone);
}
.kcf-panel__close:hover { background: var(--kcf-hover-deep); color: var(--kc-ink); }

/* ---- toast leaves ------------------------------------------------------- */
.kcf-toast__text { min-width: 0; }
.kcf-toast__act {
  flex: 0 0 auto;
  color: var(--kc-band-muted);
  font: inherit;
  letter-spacing: inherit;
  border-bottom: 1px solid var(--kc-band-hairline);
}
.kcf-toast__act:hover { color: var(--kc-band-ink); }

/* ---- skeletons the runtime builds --------------------------------------- */
.kcf-skel-entry,
.kcf-skel-msg {
  display: grid;
  align-content: center;
  gap: var(--kc-s-2);
  padding: 10px var(--kc-s-4) 10px 14px;
}
.kcf-skel-entry { min-height: 76px; border-bottom: 1px solid var(--kc-stone-soft); }
.kcf-skel-msg { min-height: 44px; padding-left: var(--kcf-gutter); }
/* The runtime sizes a bar by percentage through data-w, so the widths are
   enumerated rather than derived. attr() cannot feed a width. */
.kcf-skel[data-w="30"] { width: 30%; }
.kcf-skel[data-w="40"] { width: 40%; }
.kcf-skel[data-w="60"] { width: 60%; }
.kcf-skel[data-w="70"] { width: 70%; }
.kcf-skel[data-w="80"] { width: 80%; }
.kcf-skel[data-w="90"] { width: 90%; }
.kcf-skel[data-w="95"] { width: 95%; }
.kcf-skel[data-w] { height: 10px; }
.kcf-nav__list > .kcf-skel { margin: 6px 10px; }
.kcf-ctx > .kcf-skel { margin: var(--kc-s-3) 0; }


/* ==========================================================================
   20  RESPONSIVE
   ========================================================================== */

/* ---- 1600 and up ------------------------------------------------------ */
@media (min-width: 1600px) {
  :root { --kcf-nav-w: 248px; --kcf-ctx-w: 360px; }
}

/* ---- 1280 to 1599, the design target ---------------------------------- */
/* Four columns at declared widths. The main column is about 620px at 1280,
   which is why the body cap is 78ch and why any table inside a post has to
   scroll inside its own container rather than push the document sideways. */
@media (min-width: 1280px) {
  .kcf[data-ctx="open"] .kcf-sub { display: none; }
}

/* ---- 1024 to 1279: the context column leaves the grid ------------------ */
/* It OVERLAYS the stream rather than reflowing it, so toggling it never causes
   a scroll jump in a thread somebody is reading. */
@media (max-width: 1279px) {
  .kcf { grid-template-columns: var(--kcf-rail-w) var(--kcf-nav-w) minmax(0, 1fr); }
  .kcf-ctx {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--kcf-z-sheet);
    width: var(--kcf-ctx-w);
    max-width: calc(100vw - 48px);
    border-left: 1px solid var(--kc-ink);
    transform: translateX(100%);
    transition: transform var(--kc-dur-fast) var(--kc-ease);
  }
  .kcf[data-ctx="open"] .kcf-ctx { transform: translateX(0); }
}

/* ---- 900 to 1023 ------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --kcf-nav-w: 208px; }
}

/* ---- below 900: single column and the drawer --------------------------- */
@media (max-width: 899px) {
  .kcf { grid-template-columns: minmax(0, 1fr); }
  .kcf-main { grid-column: 1; }

  /* The drawer is the two real columns side by side, 56 plus 236, not a
     redrawn mobile menu. At 375px that resolves to 292px and leaves an 83px
     peek of the stream behind the scrim. */
  .kcf-aside {
    display: grid;
    grid-template-columns: var(--kcf-rail-w) minmax(0, 1fr);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--kcf-z-drawer);
    width: 292px;
    max-width: calc(100vw - 48px);
    background: var(--kcf-chrome);
    border-right: 1px solid var(--kc-ink);
    transform: translateX(-100%);
    transition: transform var(--kc-dur-fast) var(--kc-ease);
  }
  .kcf[data-drawer="open"] .kcf-aside { transform: translateX(0); }
  .kcf-rail { grid-column: 1; }
  .kcf-nav { grid-column: 2; }

  /* Touch has no hover, so the rail tooltip has nothing to attach to. */
  .kcf-rail__tip { display: none; }

  .kcf-head__burger { display: grid; }
  .kcf-head__purpose { display: none; }
  .kcf-head__div { display: none; }

  .kcf-chan { height: 36px; }
  .kcf-chan[data-unread="1"]::before { top: 12px; }

  .kcf-panel { width: 100%; left: 0; border-left: 0; }
}

/* ---- below 720: phone --------------------------------------------------- */
@media (max-width: 719px) {
  :root { --kcf-gutter: 44px; --kcf-head-h: 48px; }

  .kcf-mono--md, .kcf-entry__mono { width: 28px; height: 28px; }
  .kcf-mono--sm, .kcf-msg__mono { width: 24px; height: 24px; font-size: 10px; }
  .kcf-entry { grid-template-columns: 28px minmax(0, 1fr); }

  /* Hover does not exist here, so every row carries a persistent trailing
     control and the action bar becomes a bottom sheet. */
  .kcf-msg__acts { display: none !important; }
  .kcf-msg__more { display: grid; }
  .kcf-msg[data-lead="0"] .kcf-msg__more { display: none; }

  .kcf-pop {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100%;
    max-width: none;
    border: 0;
    border-top: 1px solid var(--kc-ink);
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .kcf-pop__item { min-height: 44px; padding: var(--kc-s-2) var(--kc-s-4); }

  /* The citation is never fully hidden on the smallest screen. Collapsed it is
     a 36px bar pinned directly above the composer, which is the whole point of
     the product surviving contact with a phone. */
  .kcf-ctx {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 36px;
    padding: 0;
    border-left: 0;
    border-top: 1px solid var(--kc-stone-soft);
    transform: translateX(0);
    transition: height var(--kc-dur-fast) var(--kc-ease);
    overflow: hidden;
  }
  .kcf[data-ctx="open"] .kcf-ctx {
    height: 62dvh;
    border-top: 1px solid var(--kc-ink);
    overflow-y: auto;
    padding: 0 var(--kc-s-4) var(--kc-s-5);
  }
  .kcf-ctx__collapsed {
    display: flex;
    align-items: center;
    gap: var(--kc-s-2);
    width: 100%;
    height: 36px;
    padding: 0 var(--kc-s-4);
    background: var(--kc-bone-shade);
    font-family: var(--kc-font-mono);
    font-size: var(--kcf-fs-nano);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kc-stone);
  }
  .kcf[data-ctx="open"] .kcf-ctx__collapsed { display: none; }
  .kcf-ctx__collapsedid {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  .kcf-ctx__grab {
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    height: 32px;
    background: var(--kcf-chrome);
    z-index: 1;
  }
  .kcf[data-ctx="closed"] .kcf-ctx__grab { display: none; }
  .kcf-ctx__grabbar { width: 32px; height: 2px; background: var(--kc-stone-soft); border-radius: var(--kc-r-soft); }
  .kcf[data-ctx="closed"] .kcf-ctx__citation,
  .kcf[data-ctx="closed"] .kcf-ctx__channel,
  .kcf[data-ctx="closed"] .kcf-ctx__member,
  .kcf[data-ctx="closed"] .kcf-ctx__profile { display: none; }

  /* The collapsed strip, for the panel the runtime actually builds. app.js
     empties .kcf-ctx and appends the citation parts as direct children, so
     there is no .kcf-ctx__collapsed element to fall back on. Rather than lose
     the anchor on the one screen size that needs it most, the closed sheet
     becomes a single row that keeps the eyebrow and the identifier and drops
     everything else. This is the whole point of the phone layout: the paper is
     never off screen. */
  .kcf[data-ctx="closed"] .kcf-ctx {
    display: flex;
    align-items: center;
    gap: var(--kc-s-2);
    padding: 0 var(--kc-s-4);
  }
  .kcf[data-ctx="closed"] .kcf-ctx > * { display: none; }
  .kcf[data-ctx="closed"] .kcf-ctx > .kcf-ctx__eyebrow {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
  }
  .kcf[data-ctx="closed"] .kcf-ctx > .kcf-ctx__id {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kcf[data-ctx="closed"] .kcf-ctx > .kcf-ctx__id .kcf-ctx__copy { display: none; }
  /* The static fallback bar, when scripting never ran. */
  .kcf[data-ctx="closed"] .kcf-ctx > .kcf-ctx__collapsed { display: flex; }

  /* Room for the collapsed sheet, which sits directly above the composer. */
  .kcf-main { padding-bottom: 36px; }

  /* A four field gated instrument cannot live in 200px of phone. The runtime
     only ever sets data-mode to entry when the entry composer is genuinely
     open, so the mode alone is the correct trigger. */
  .kcf-composer[data-mode="entry"] {
    position: fixed;
    inset: 0;
    z-index: var(--kcf-z-modal);
    height: 100dvh;
    max-height: none;
    padding: var(--kc-s-4) var(--kc-s-4) calc(var(--kc-s-6) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--kcf-chrome);
  }
  .kcf-composer[data-mode="entry"] .kcf-composer__entry { max-height: none; height: 100%; }
  .kcf-composer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 var(--kc-s-3) 0 var(--kc-s-4);
    border-bottom: 1px solid var(--kc-stone-soft);
  }
  .kcf-composer__headtitle {
    font-family: var(--kc-font-mono);
    font-size: var(--kcf-fs-micro2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kc-stone);
  }
  .kcf-composer__scroll { padding: var(--kc-s-4) var(--kc-s-4) calc(var(--kc-s-6) + env(safe-area-inset-bottom, 0px)); }
  .kcf-composer__body { max-height: none; min-height: 140px; }

  /* Every button, link and row reaches the 44px touch floor. */
  .kcf-btn,
  .kcf-empty__cta,
  .kcf-gate__rules,
  .kcf-ctx__rules,
  .kcf-signin__reset { min-height: 44px; }
  .kcf-iconbtn,
  .kcf-head__acts .kcf-iconbtn,
  .kcf-me__acts .kcf-iconbtn,
  .kcf-head__sort,
  .kcf-head__back { width: 44px; height: 44px; }
  .kcf-composer__send,
  .kcf-composer__add { width: 44px; height: 44px; }
  .kcf-composer__box { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .kcf-composer__open { height: 44px; }
  .kcf-nav__density,
  .kcf-nav__jump { min-height: 44px; }
  .kcf-panel__item { min-height: 64px; }
  .kcf-report__opt { min-height: 44px; }
  .kcf-switcher__row { height: 44px; }
  .kcf-toast { bottom: 96px; }
  .kcf-modal__box { margin-top: 8vh; max-height: 80vh; }
}

/* ---- below 380 ---------------------------------------------------------- */
/* Matches the storefront's own sub-380 rule and changes nothing else. */
@media (max-width: 379px) {
  .kcf-head,
  .kcf-sub,
  .kcf-composer,
  .kcf-thread,
  .kcf-ctx__collapsed { padding-left: var(--kc-s-3); padding-right: var(--kc-s-3); }
  .kcf-entry { padding-left: 10px; padding-right: var(--kc-s-3); }
  .kcf-msg { padding-right: var(--kc-s-3); }
}


/* ==========================================================================
   21  REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kcf *,
  .kcf *::before,
  .kcf *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kcf-stream { scroll-behavior: auto; }
  .kcf-skel,
  .kcf-skel__bar { animation: none; opacity: 1; }
}


/* ==========================================================================
   22  THE iOS ZOOM GUARD
   THIS BLOCK MUST STAY LAST. Any rule that writes the font shorthand resets
   font-size, and a media query adds no specificity, so a control declared
   after this point would reintroduce the bug where focusing an input zooms
   the whole page on iOS Safari.

   Only controls go to 16px. Message body text stays at 13px, deliberately: a
   16px body at this density costs four lines a screen, and the zoom bug only
   bites focused inputs.
   ========================================================================== */

@media (max-width: 719px) {
  .kcf input,
  .kcf select,
  .kcf textarea { font-size: 16px; }
}