/* Kingy Coding Model Index
   ---------------------------------------------------------------------------
   Design tokens are lifted verbatim from the Open-Weight Licence Index's `.kli`
   block (post 927797) and match the Promise Ledger's `.kprl`, so the three read
   as one family. Everything is scoped to `.kcmi` or `body.kingy-kcmi-surface`;
   nothing leaks. */

/* ── 760px un-cap ──────────────────────────────────────────────────────────
   Load-bearing. See kingy_kcmi_body_class() for why this lives here and not in
   kingy-content-width-fix.css: that file's §1 keys off an INLINE <style> as a
   direct child of .entry-content, and this plugin enqueues an external sheet, so
   §1 never fires. Same 1180px value as the 554-page precedent. */
body.kingy-kcmi-surface .wrap.content-area > .entry-content{
  max-width:min(1180px,100%);width:100%;
}

.kcmi{
  --ink:#0b1532;
  --muted:#566078;
  --line:#dbe2ee;
  --paper:#f6f8fc;
  --blue:#2359f5;
  --teal:#00a8a8;
  --amber:#9a4b00;
  --amber-pale:#fff7e8;
  --pick:#0a7d63;
  --pick-pale:#e6f7f2;

  color:var(--ink);
  line-height:1.68;
}
.kcmi *{box-sizing:border-box}

.kcmi h2{margin:46px 0 12px;line-height:1.18;letter-spacing:-.02em}
.kcmi h2:first-of-type{margin-top:24px}

.kcmi-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Cross-link, notices, prose ───────────────────────────────────────────── */
.kcmi-xlink{
  margin:0 0 8px;padding:14px 18px;
  border:1px solid var(--line);border-left:5px solid var(--blue);
  border-radius:0 12px 12px 0;background:#f2f5ff;font-size:15px;
}
.kcmi-notice{
  margin:22px 0;padding:18px 22px;
  border:1px solid #f0c98e;border-left:5px solid var(--amber);
  border-radius:0 12px 12px 0;background:var(--amber-pale);font-size:15px;
}
.kcmi-notice code{font-size:13px;background:#fff;padding:1px 5px;border-radius:4px}
.kcmi-loading{margin:22px 0;color:var(--muted);font-size:15px}
.kcmi-lede{margin:0 0 14px;color:var(--muted);font-size:15.5px;max-width:72ch}
.kcmi-cap{margin:10px 0 26px;font-size:13.5px;color:var(--muted);max-width:72ch}
.kcmi-updated{margin:16px 0 0;font-size:13px;color:var(--muted)}

/* ── The answer panel ─────────────────────────────────────────────────────
   The one piece of this page that is not a table. A ranking makes the reader do
   the work; the brief asks for a recommendation, so the pick gets stated
   outright and the table becomes the evidence for it. */
.kcmi-answer{
  margin:18px 0 0;padding:26px 30px;
  border:1px solid var(--line);border-left:6px solid var(--pick);
  border-radius:0 16px 16px 0;background:var(--pick-pale);
}
.kcmi-answer-eyebrow{
  margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#075947;
}
.kcmi-answer-model{
  margin:0;font-size:clamp(26px,3.4vw,38px);font-weight:800;
  line-height:1.14;letter-spacing:-.02em;
}
.kcmi-answer-vendor{
  display:block;margin-top:4px;
  font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;
}
.kcmi-answer-verdict{margin:14px 0 0;font-size:17px;line-height:1.6;max-width:66ch}
/* Each dt/dd pair is wrapped in a <div> (valid inside <dl>) so the pair is one
   layout item. Without the wrapper, dt and dd are siblings and the panel lays
   out as label | value | label | value across the row instead of stacking. */
.kcmi-answer-facts{
  display:flex;flex-wrap:wrap;gap:18px 40px;
  margin:20px 0 0;padding:18px 0 0;border-top:1px solid #c8e6dc;
}
.kcmi-fact{flex:0 1 auto;min-width:120px}
.kcmi-answer-facts dt{
  margin:0 0 3px;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.kcmi-answer-facts dd{
  margin:0;font-size:18px;font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1.3;
}

/* ── The constraint profile ───────────────────────────────────────────────
   Rendered as its own block, not a footnote. A recommendation without its
   conditions stated is the thing this page exists not to be. */
.kcmi-profile{
  margin:20px 0 0;padding:18px 22px;
  border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:0 12px 12px 0;background:#eefafa;font-size:15px;
}
.kcmi-profile strong{display:block;margin-bottom:6px}
.kcmi-profile p{margin:0}
.kcmi-profile-note{margin-top:8px!important;font-size:13.5px;color:var(--muted)}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.kcmi-controls{
  display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);
}
.kcmi-field{margin:0;display:flex;flex-direction:column;gap:5px;min-width:0}
.kcmi-field--search{flex:1 1 240px}
.kcmi-field--reset{margin-left:auto}
.kcmi-field label{
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.kcmi-field input,
.kcmi-field select{
  font:inherit;font-size:15px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
  max-width:100%;
}
.kcmi-field input:focus-visible,
.kcmi-field select:focus-visible,
.kcmi-reset:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.kcmi-reset{
  appearance:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;
  padding:10px 16px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);
}
.kcmi-reset:hover{background:var(--paper)}
.kcmi-count{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.kcmi-tw{overflow-x:auto;margin:10px 0 26px;border:1px solid var(--line);border-radius:14px}
.kcmi-table{width:100%;min-width:880px;border-collapse:collapse;background:#fff;font-size:14px}
.kcmi-table th,
.kcmi-table td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.kcmi-table th{
  background:#eef2fa;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:800;white-space:nowrap;
}
.kcmi-table tbody tr:last-child td{border-bottom:0}
.kcmi-table tbody tr:hover{background:#fafcff}

/* Sortable headers. The whole cell is the target; aria-sort carries the state
   for assistive tech and drives the arrow. */
.kcmi-th{padding:0}
.kcmi-th button{
  appearance:none;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:6px;
  padding:13px 14px;border:0;background:none;
  font:inherit;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:800;color:var(--ink);text-align:left;
}
.kcmi-th button:hover{color:var(--blue)}
.kcmi-th button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.kcmi-th button::after{content:"\2195";opacity:.28;font-size:13px}
.kcmi-th[aria-sort="ascending"] button::after{content:"\2191";opacity:1;color:var(--blue)}
.kcmi-th[aria-sort="descending"] button::after{content:"\2193";opacity:1;color:var(--blue)}

.kcmi-model{white-space:nowrap}
.kcmi-model strong{font-weight:800}
.kcmi-vendor{white-space:nowrap;color:var(--muted)}
.kcmi-verdict{min-width:280px}
.kcmi-num,.kcmi-num-col{font-variant-numeric:tabular-nums;white-space:nowrap}
.kcmi-blank{color:#9aa4ba}
.kcmi-empty{padding:26px 16px;color:var(--muted);text-align:center}

.kcmi-tag{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--pick-pale);border:1px solid var(--pick);color:#075947;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:middle;
}

/* The pick, marked on the row as well as in the panel, so it stays findable
   after the reader sorts by something else. */
.kcmi-table--answer td:first-child{border-left:5px solid transparent}
.kcmi-table--answer tr.is-pick td:first-child{border-left-color:var(--pick)}
.kcmi-table--answer tr.is-pick{background:#f4fbf8}

/* Score: number plus a bar, because the gap between rank 1 and rank 2 is the
   thing a ranking usually hides. */
.kcmi-score{min-width:104px}
.kcmi-score-n{display:block;font-weight:800;font-variant-numeric:tabular-nums}
.kcmi-bar{
  display:block;height:6px;margin-top:5px;width:100%;max-width:84px;
  border-radius:999px;background:var(--paper);border:1px solid var(--line);
  overflow:hidden;
}
.kcmi-bar span{display:block;height:100%;background:var(--blue)}
tr.is-pick .kcmi-bar span{background:var(--pick)}

.kcmi-src{
  display:inline-block;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  font-size:12px;font-weight:700;text-decoration:none;color:var(--blue);
  white-space:nowrap;
}
.kcmi-src:hover{background:#f2f5ff;border-color:var(--blue)}
.kcmi-src:focus-visible{outline:3px solid var(--blue);outline-offset:1px}

/* ── Legend ───────────────────────────────────────────────────────────────── */
.kcmi-legend{margin:12px 0 6px;padding:0;list-style:none;max-width:72ch}
.kcmi-legend li{margin:0 0 10px;padding:0}
.kcmi-legend li::before{content:none}

/* ── Mobile ───────────────────────────────────────────────────────────────
   Below 820px every table becomes stacked cards. Written with !important and
   scoped to .kcmi so it beats any generic table rule arriving from the theme or
   from KALI's launch-intelligence.css (343KB, and only serving since the 0700
   permissions fix on 2026-08-05 — assume it can grow rules).
   The licence index solved its mobile problem the other way, by forcing
   display:table and scrolling sideways; cards are chosen here for the same
   reason the promise ledger chose them — these tables are wide, and the model
   name plus score is what you scan for. */
@media (max-width:820px){
  .kcmi-tw{border:0;border-radius:0;overflow:visible!important}
  .kcmi-table{min-width:0!important;width:100%!important;display:block!important;font-size:15px}
  .kcmi-table thead{
    position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .kcmi-table tbody{display:block!important}
  .kcmi-table tbody tr{
    display:block!important;margin:0 0 14px;padding:4px 0 6px;
    border:1px solid var(--line);border-left-width:5px;border-left-color:var(--line);
    border-radius:12px;background:#fff;
  }
  .kcmi-table--answer tr.is-pick{border-left-color:var(--pick)!important}
  .kcmi-table tbody td{
    display:block!important;width:auto!important;
    border:0!important;border-bottom:1px solid var(--paper)!important;
    padding:9px 16px!important;white-space:normal!important;
  }
  .kcmi-table tbody tr td:last-child{border-bottom:0!important}
  .kcmi-table--answer td:first-child{border-left:0!important}

  /* The header text moves into each cell. data-label is written by the JS from
     the same column definitions the <thead> uses, so the two cannot drift. */
  .kcmi-table tbody td::before{
    content:attr(data-label);display:block;
    font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);margin-bottom:3px;
  }
  .kcmi-table tbody td[data-label=""]::before{display:none}
  .kcmi-empty{border:1px solid var(--line);border-radius:12px}
  .kcmi-verdict{min-width:0}
  .kcmi-bar{max-width:none}

  .kcmi-answer{padding:22px 20px}
  .kcmi-controls{border-radius:12px}
  .kcmi-field--reset{margin-left:0;width:100%}
  .kcmi-reset{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .kcmi *{transition:none!important;animation:none!important}
}