/* Klientio component kit. Every value comes from tokens.css — never a raw hex.
   See design/DESIGN-SYSTEM.md for the states each component must have. */

/* ---- layout ---------------------------------------------------------- */
.k-shell   { display: flex; min-height: 100vh; }
.k-rail    { width: var(--k-rail); flex-shrink: 0; background: var(--k-surface);
             border-right: var(--k-border); padding: var(--k-space-4) var(--k-space-3);
             display: flex; flex-direction: column; gap: var(--k-space-4); }
.k-main    { flex-grow: 1; padding: var(--k-space-6); min-width: 0; }
.k-head    { display: flex; align-items: flex-start; gap: var(--k-space-4);
             margin-bottom: var(--k-space-4); flex-wrap: wrap; }
.k-head h1 { font: var(--k-text-title); letter-spacing: var(--k-tracking-title); margin: 0 0 var(--k-space-1); }
.k-sub     { color: var(--k-ink-2); font: var(--k-text-body); margin: 0; }
.k-spacer  { flex-grow: 1; }

.k-nav a   { display: flex; align-items: center; gap: var(--k-space-2);
             height: var(--k-control); padding: 0 var(--k-space-2);
             border-radius: var(--k-radius-control); color: var(--k-ink-2);
             text-decoration: none; font-size: 13px; }
.k-nav a:hover   { background: var(--k-surface-2); color: var(--k-ink); }
.k-nav a[aria-current] { background: var(--k-surface-2); color: var(--k-ink); font-weight: 600; }
.k-nav .k-count  { margin-left: auto; font: var(--k-text-evidence); color: var(--k-ink-3); }

/* ---- buttons --------------------------------------------------------- */
.k-btn { display: inline-flex; align-items: center; justify-content: center;
         gap: var(--k-space-2); height: var(--k-control); padding: 0 var(--k-space-3);
         border: 1px solid var(--k-rule-strong); border-radius: var(--k-radius-control);
         background: var(--k-surface); color: var(--k-ink); font: var(--k-text-strong);
         cursor: pointer; text-decoration: none; }
.k-btn:hover           { background: var(--k-surface-2); }
.k-btn:focus-visible   { box-shadow: var(--k-focus-ring); outline: none; }
.k-btn--primary        { background: var(--k-action); border-color: var(--k-action);
                         color: var(--k-on-accent); height: var(--k-control-primary); }
.k-btn--primary:hover  { background: var(--k-action-hover); }
.k-btn--primary:focus-visible { box-shadow: var(--k-focus-ring-filled); }
.k-btn--danger         { color: var(--k-danger-text); border-color: var(--k-rule); }
.k-btn[disabled]       { background: var(--k-surface-2); color: var(--k-ink-4);
                         border-color: var(--k-rule); cursor: not-allowed; }
.k-actions { display: flex; gap: var(--k-space-2); align-items: center; flex-wrap: wrap; }

/* ---- forms ----------------------------------------------------------- */
.k-field { display: flex; flex-direction: column; gap: var(--k-space-1); margin-bottom: var(--k-space-3); }
.k-field > label { font: var(--k-text-label); letter-spacing: var(--k-tracking-label);
                   text-transform: uppercase; color: var(--k-ink-3); }
.k-field input, .k-field select, .k-field textarea, .k-input {
  height: var(--k-control); padding: 0 var(--k-space-2); font: var(--k-text-body);
  color: var(--k-ink); background: var(--k-surface);
  border: 1px solid var(--k-rule-strong); border-radius: var(--k-radius-control); }
.k-field textarea { height: auto; padding: var(--k-space-2); min-height: 5rem; }
.k-field input:focus, .k-field select:focus, .k-field textarea:focus {
  outline: none; border-color: var(--k-action); box-shadow: var(--k-focus-ring); }
.k-hint { font: var(--k-text-small); color: var(--k-ink-3); }

/* ---- tables ---------------------------------------------------------- */
.k-table-wrap { overflow-x: auto; border: var(--k-border);
                border-radius: var(--k-radius-card); background: var(--k-surface); }
.k-table { border-collapse: collapse; width: 100%; font: var(--k-text-body); }
.k-table th { text-align: left; font: var(--k-text-label);
              letter-spacing: var(--k-tracking-label); text-transform: uppercase;
              color: var(--k-ink-3); background: var(--k-surface-2);
              padding: 0 var(--k-space-3); height: var(--k-row-header);
              border-bottom: 1px solid var(--k-rule-strong); white-space: nowrap; }
.k-table td { padding: 0 var(--k-space-3); height: var(--k-row-grid);
              border-bottom: var(--k-border); vertical-align: middle; }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr:hover { background: var(--k-paper); }
.k-table .k-num { font: var(--k-text-figure); font-variant-numeric: tabular-nums;
                  text-align: right; white-space: nowrap; }
.k-table a { color: var(--k-ink); font-weight: 600; text-decoration: none; }
.k-table a:hover { color: var(--k-action); }

/* ---- small parts ----------------------------------------------------- */
.k-chip { display: inline-flex; align-items: center; font: var(--k-text-small);
          padding: 2px var(--k-space-2); border-radius: var(--k-radius-chip);
          background: var(--k-surface-2); color: var(--k-ink-2); }
.k-chip--signal { background: var(--k-signal-bg); color: var(--k-signal-deep); }
.k-chip--good   { background: var(--k-good-bg);   color: var(--k-good); }
.k-chip--quiet  { background: var(--k-surface-2); color: var(--k-ink-3); }

.k-panel { border: var(--k-border); border-radius: var(--k-radius-card);
           background: var(--k-surface); padding: var(--k-space-4);
           margin-bottom: var(--k-space-4); }
.k-empty { border: 1px dashed var(--k-rule-strong); border-radius: var(--k-radius-card);
           padding: var(--k-space-8); text-align: center; color: var(--k-ink-2); }
.k-empty strong { display: block; color: var(--k-ink); font: var(--k-text-strong);
                  margin-bottom: var(--k-space-1); }

.k-flash { padding: var(--k-space-3); border-radius: var(--k-radius-control);
           margin-bottom: var(--k-space-4); font: var(--k-text-body); }
.k-flash--good { background: var(--k-good-bg); color: var(--k-ink); }
.k-flash--bad  { background: var(--k-danger-bg); color: var(--k-danger-text); }
.k-flash--undo { background: var(--k-surface-2); color: var(--k-ink);
                 display: flex; align-items: center; gap: var(--k-space-3); }

.k-provenance { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
                background: var(--k-rule-strong); margin-right: var(--k-space-1); }
.k-provenance--source { background: var(--k-signal); }

.k-stats { display: flex; gap: var(--k-space-6); flex-wrap: wrap; margin-bottom: var(--k-space-4); }
.k-stat  { display: flex; flex-direction: column; gap: 2px; }
.k-stat b { font: var(--k-text-figure); font-size: 20px; }
.k-stat span { font: var(--k-text-small); color: var(--k-ink-3); }

/* ---- inline editing -------------------------------------------------- */
.k-cell            { cursor: text; }
.k-cell input      { width: 100%; }
.k-cell--failed    { background: var(--k-danger-bg); }
.k-cell--locked    { cursor: default; color: var(--k-ink-2); }
.k-snippet         { font: var(--k-text-small); color: var(--k-ink-2);
                     padding: 0 var(--k-space-3) var(--k-space-2); }
.k-snippet mark    { background: var(--k-signal-bg); color: var(--k-signal-deep); }
.k-bulk            { position: sticky; top: 0; z-index: 2; }

/* ---- timeline -------------------------------------------------------- */
.k-timeline      { display: flex; flex-direction: column; gap: var(--k-space-4); }
.k-entry         { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--k-space-3); }
.k-entry__dot    { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
                   background: var(--k-rule-strong); }
.k-entry__dot--note   { background: var(--k-action); }
.k-entry__dot--signal { background: var(--k-signal); }
.k-entry__head   { display: flex; align-items: baseline; gap: var(--k-space-2); flex-wrap: wrap;
                   margin-bottom: var(--k-space-1); }
.k-entry__who    { font: var(--k-text-strong); }
.k-entry__when   { font: var(--k-text-evidence); color: var(--k-ink-4); }
.k-entry__body   { font: var(--k-text-body); color: var(--k-ink); margin: 0; }
.k-entry__body a { color: var(--k-action); }
.k-entry__files  { display: flex; gap: var(--k-space-2); flex-wrap: wrap; margin-top: var(--k-space-2); }
.k-tabs          { display: flex; gap: var(--k-space-1); margin-bottom: var(--k-space-3); }
.k-tabs a        { font: var(--k-text-small); color: var(--k-ink-3); text-decoration: none;
                   padding: 2px var(--k-space-2); border-radius: var(--k-radius-chip); }
.k-tabs a[aria-current] { background: var(--k-surface-2); color: var(--k-ink); font-weight: 600; }

/* ---- tasks ----------------------------------------------------------- */
.k-task          { display: flex; align-items: center; gap: var(--k-space-3);
                   min-height: var(--k-row-task); padding: 0 var(--k-space-4);
                   border-bottom: var(--k-border); }
.k-task:last-child { border-bottom: 0; }
.k-task__check   { background: none; border: 0; padding: 0; cursor: pointer; display: flex; }
.k-check         { width: 16px; height: 16px; border-radius: var(--k-radius-control);
                   border: 1.5px solid var(--k-rule-strong); display: inline-block; }
.k-check--done   { background: var(--k-good); border-color: var(--k-good); }
.k-task__body    { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-task__title   { font: var(--k-text-strong); }
.k-task__title--done { text-decoration: line-through; color: var(--k-ink-2); }
.k-task__meta    { font: var(--k-text-small); color: var(--k-ink-3); }
.k-task__meta a  { color: var(--k-ink-2); }
.k-task__when    { font: var(--k-text-evidence); color: var(--k-ink-3); }
.k-composer      { display: flex; gap: var(--k-space-2); align-items: center; flex-wrap: wrap; }
.k-composer input[type=text] { flex-grow: 1; min-width: 12rem; }

/* ---- going quiet ----------------------------------------------------- */
.k-quiet__reason { font: var(--k-text-evidence); color: var(--k-ink-2); display: block; }
.k-quiet__bar    { width: 190px; height: 3px; border-radius: 2px; background: var(--k-rule);
                   overflow: hidden; margin-top: 5px; }
.k-quiet__fill   { height: 3px; background: var(--k-signal); }
.k-quiet__group  { display: flex; align-items: center; gap: var(--k-space-2);
                   padding: var(--k-space-2) var(--k-space-4); background: var(--k-paper);
                   border-bottom: var(--k-border); }
.k-threshold     { display: flex; align-items: center; gap: var(--k-space-2); }
.k-threshold input { width: 4.5rem; }

/* ======================================================================
   Added with the design-system pass. Every state below is drawn on the
   Components artboard — build against that, not against memory.
   ====================================================================== */

/* ---- brand mark ------------------------------------------------------
   Bar = 1 unit, gaps 1 · 1.4 · 2, then a 4-unit break before the signal
   bar. Scale the whole thing by overriding --k-mark-bar on .k-mark.      */
.k-mark        { display: inline-flex; align-items: flex-end;
                 height: var(--k-mark-height); color: var(--k-ink); }
.k-mark i      { display: block; width: var(--k-mark-bar); height: 100%;
                 background: currentColor; }
.k-mark i + i             { margin-left: var(--k-mark-gap); }
.k-mark i:nth-child(3)    { margin-left: calc(var(--k-mark-gap) * 1.4); }
.k-mark i:nth-child(4)    { margin-left: calc(var(--k-mark-gap) * 2); }
.k-mark i:last-child      { margin-left: var(--k-mark-gap-wide);
                            background: var(--k-signal); }
.k-wordmark    { font-weight: 700; letter-spacing: var(--k-wordmark-tracking);
                 color: var(--k-ink); text-decoration: none; }
.k-lockup      { display: inline-flex; align-items: center; gap: var(--k-space-3); }
/* Under 32px the fifth bar stops resolving — drop it. */
.k-mark--small i:nth-child(4) { display: none; }

/* ---- button states the base kit was missing -------------------------- */
.k-btn--primary:active   { background: var(--k-action-press); }
.k-btn[aria-busy="true"] { pointer-events: none; }
.k-btn__spinner  { width: 10px; height: 10px; border-radius: 50%;
                   border: 2px solid rgba(255, 255, 255, 0.4);
                   border-top-color: var(--k-on-accent);
                   animation: k-spin 700ms linear infinite; }
.k-btn--done     { background: var(--k-good); border-color: var(--k-good);
                   color: var(--k-on-accent); }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ---- segment chips ---------------------------------------------------- */
.k-segment       { display: inline-flex; align-items: center; gap: var(--k-space-2);
                   padding: 3px 9px; border: var(--k-border);
                   border-radius: var(--k-radius-chip); background: var(--k-surface);
                   font: var(--k-text-small); color: var(--k-ink); }
.k-segment__count { font: var(--k-text-evidence); color: var(--k-ink-3);
                    font-variant-numeric: tabular-nums; }
.k-segment[aria-current] { background: var(--k-action-bg); color: var(--k-action);
                           border-color: var(--k-action-border); }
.k-segment--stale, .k-segment--refreshing { color: var(--k-ink-3); }

/* ---- connection status ------------------------------------------------ */
.k-conn        { display: flex; align-items: center; gap: var(--k-space-2);
                 font: var(--k-text-body); }
.k-conn__dot   { width: 7px; height: 7px; border-radius: 50%;
                 background: var(--k-rule-strong); flex-shrink: 0; }
.k-conn__dot--syncing { background: var(--k-action); }
.k-conn__dot--healthy { background: var(--k-good); }
.k-conn__dot--stale   { background: var(--k-signal); }
.k-conn__dot--failed  { background: var(--k-danger); }
.k-conn__state { margin-left: auto; font: var(--k-text-evidence); color: var(--k-ink-2); }
.k-conn__state--stale  { color: var(--k-signal-deep); }
.k-conn__state--failed { color: var(--k-danger-text); }

/* ---- toast ------------------------------------------------------------
   The only component in the system that casts a shadow.                   */
.k-toast        { display: flex; align-items: center; gap: var(--k-space-3);
                  padding: var(--k-space-3) 14px; border-radius: var(--k-radius-inner);
                  background: var(--k-surface-2); color: var(--k-ink);
                  font: var(--k-text-body); box-shadow: var(--k-shadow-toast);
                  animation: k-toast-in var(--k-motion-toast); }
.k-toast--good  { background: var(--k-good-bg); }
.k-toast--error { background: var(--k-danger-bg); color: var(--k-danger-text); }
.k-toast__timer { margin-left: auto; font: var(--k-text-evidence); color: var(--k-ink-3);
                  font-variant-numeric: tabular-nums; }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(4px); } }

/* ---- search results --------------------------------------------------- */
.k-result       { padding: 10px 14px; border-bottom: var(--k-border); }
.k-result:last-child { border-bottom: 0; }
.k-result__name { font: var(--k-text-strong); }
.k-result__snip { font: var(--k-text-small); color: var(--k-ink-2); }
.k-result__snip mark { background: var(--k-signal-bg); color: var(--k-signal-deep); }

/* ---- import column mapping -------------------------------------------- */
.k-map        { display: grid; grid-template-columns: 1fr 1fr 1.4fr 7rem;
                gap: var(--k-space-3); align-items: center;
                padding: 0 14px; height: var(--k-row-grid);
                border-bottom: var(--k-border); font: var(--k-text-body); }
.k-map__from  { font: var(--k-text-figure); font-size: 12px; }
.k-map__count { font: var(--k-text-figure); font-size: 12px; text-align: right;
                font-variant-numeric: tabular-nums; }
.k-map--skipped { color: var(--k-ink-3); }

/* ---- motion ------------------------------------------------------------
   Nothing animates a number changing: a figure that slides is a figure
   being sold.                                                             */
.k-btn, .k-nav a, .k-table tbody tr, .k-segment {
  transition: background-color var(--k-motion-hover), color var(--k-motion-hover);
}

/* ---- responsive --------------------------------------------------------
   Below 56rem the grid sheds columns; below 40rem the rail becomes a
   bottom bar and every hit target grows to 44px. Evidence is never
   clipped — the reasoning line wraps to its own row instead.              */
@media (max-width: 56rem) {
  .k-table th.k-optional, .k-table td.k-optional { display: none; }
}

@media (max-width: 40rem) {
  .k-shell { flex-direction: column; }
  .k-main  { padding: var(--k-space-4); padding-bottom: 76px; }

  .k-rail {
    width: auto; order: 2; position: fixed; inset: auto 0 0 0; z-index: 3;
    flex-direction: row; gap: 0; padding: 0;
    border-right: 0; border-top: var(--k-border);
  }
  .k-rail > :not(.k-nav) { display: none; }
  .k-nav      { flex: 1; flex-direction: row !important; }
  .k-nav a    { flex: 1; height: var(--k-control-touch); justify-content: center;
                border-radius: 0; font-size: 12px; }
  .k-nav .k-count { margin-left: var(--k-space-1); }

  .k-btn, .k-btn--primary, .k-field input, .k-field select, .k-input {
    height: var(--k-control-touch);
  }
  .k-task, .k-task__check { min-height: var(--k-control-touch); }

  .k-quiet__row   { grid-template-columns: 1fr auto; }
  .k-quiet__reason { grid-column: 1 / -1; }
  .k-quiet__bar   { width: 100%; }
  .k-stats        { gap: var(--k-space-4); }
}