/* ==========================================================================
   concept-kit.css — styles for the shared pedagogy widgets in
   shared/js/concept_kit.js (pills, commit card, control lock, takeaway,
   raw-data drawer) plus the chart and card furniture a concept tool needs.

   Scoping: everything is prefixed `ck-` and the custom properties live on
   `.ck-scope`, never on :root. Names like --ink and --rule are generic enough
   that a future main.css addition would clash, and a :root block here would
   win page-wide. A concept tool puts `class="ck-scope"` on its root element.

   Semantic colour rule, inherited from Understanding Regression and still
   load-bearing:
     --ck-shift = quantities that MOVE when you change the parameterisation
     --ck-hold  = quantities that DON'T
     --ck-alt   = a third series, usually the baseline or null model
   The three must stay distinguishable. Hue alone does not carry that for
   colour-blind readers, so card top-borders and font weight repeat the
   distinction — keep both if you restyle.
   ========================================================================== */

.ck-scope {
  /* house tokens (shared/css/main.css :root) with literal fallbacks, so the
     kit still renders correctly if main.css is not on the page */
  --ck-panel: var(--app-card-bg, #ffffff);
  --ck-ink: var(--app-text, #1f2a37);
  --ck-ink-soft: #3a4756;
  --ck-muted: var(--app-muted, #5f6b7a);
  --ck-rule: var(--app-border, #d6dfea);
  --ck-rule-row: #eef2f8;
  --ck-rule-grid: #e9eff6;
  --ck-surface-sunk: #f8fafc;

  --ck-shift: var(--chart-secondary, #8b5cf6);
  --ck-shift-wash: #f3eefe;
  --ck-hold: var(--app-accent, #2a7de1);
  --ck-hold-wash: #e7f0fc;
  --ck-alt: var(--chart-warning, #f59e0b);
  --ck-alt-wash: #fdf2de;

  --ck-good: var(--app-success, #2f9d58);
  --ck-bad: var(--app-danger, #d64747);

  --ck-display: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ck-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ck-data: ui-monospace, Menlo, Consolas, 'Courier New', monospace;

  color: var(--ck-ink);
  font-family: var(--ck-body);
  font-size: 16px;
  line-height: 1.55;
}

.ck-scope * { box-sizing: border-box; }

/* ---------- prose furniture ---------- */
.ck-eyebrow {
  font-family: var(--ck-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ck-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.ck-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--ck-rule); }

.ck-title {
  font-family: var(--ck-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  max-width: 24ch;
}
.ck-title .ck-a { color: var(--ck-hold); }
.ck-title .ck-b { color: var(--ck-shift); }

.ck-deck { font-size: 17px; max-width: 62ch; color: var(--ck-ink-soft); margin: 0 0 12px; }

.ck-brief {
  font-family: var(--ck-data);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ck-muted);
  border-left: 2px solid var(--ck-rule);
  padding: 10px 0 10px 14px;
  max-width: 70ch;
  margin: 0 0 28px;
}
.ck-brief b { color: var(--ck-ink); font-weight: 700; }

.ck-hint { font-size: 14px; color: var(--ck-muted); margin: 10px 0 26px; max-width: 72ch; }
.ck-hint b { color: var(--ck-ink); font-weight: 600; }

.ck-footer {
  font-family: var(--ck-data);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ck-muted);
  border-top: 1px solid var(--ck-rule);
  padding-top: 14px;
  margin-top: 30px;
  max-width: 82ch;
}
.ck-footer b { color: var(--ck-ink); font-weight: 700; }

/* ---------- controls ---------- */
.ck-controls {
  background: var(--ck-panel);
  border: 1px solid var(--ck-rule);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.ck-controls.ck-bare { margin: 0 0 8px; border: none; padding: 0; background: transparent; }
.ck-ctrl { min-width: 0; }
.ck-ctrl-label {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-muted);
  margin-bottom: 9px;
}

.ck-pills { display: flex; flex-wrap: wrap; gap: 6px; }
button.ck-pill {
  font-family: var(--ck-data);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 13px;
  border: 1px solid var(--ck-rule);
  background: transparent;
  color: var(--ck-ink);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
button.ck-pill:hover { border-color: var(--ck-ink); }
button.ck-pill[aria-pressed="true"] {
  background: var(--ck-ink);
  color: #fff;
  border-color: var(--ck-ink);
}
button.ck-pill:focus-visible { outline: 2px solid var(--ck-shift); outline-offset: 2px; }

.ck-slider { display: flex; flex-direction: column; gap: 6px; min-width: 230px; }
.ck-slider input[type=range] { width: 100%; accent-color: var(--ck-shift); cursor: pointer; }
.ck-readout {
  font-family: var(--ck-data);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ck-shift);
  font-variant-numeric: tabular-nums;
}

button.ck-act {
  font-family: var(--ck-data);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 15px;
  border: 1px solid var(--ck-ink);
  background: var(--ck-ink);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .16s ease;
}
button.ck-act:hover { opacity: .88; }
button.ck-act:disabled { opacity: .45; cursor: default; }
button.ck-act.ck-ghost { background: transparent; color: var(--ck-ink); }
button.ck-act:focus-visible { outline: 2px solid var(--ck-shift); outline-offset: 2px; }

/* ---------- the control lock ----------
   Results deliberately stay visible and fully readable; only the controls go
   dead. A student cannot usefully predict what a change does without first
   seeing the thing that is about to change. */
.ck-locked .ck-controls {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(1);
}
.ck-lock-note {
  font-family: var(--ck-data);
  font-size: 12px;
  color: var(--ck-muted);
  background: var(--ck-alt-wash);
  border-left: 3px solid var(--ck-alt);
  padding: 10px 14px;
  margin: 8px 0 18px;
  border-radius: 0 6px 6px 0;
}
button.ck-gate-skip {
  font-family: var(--ck-data);
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--ck-rule);
  background: var(--ck-panel);
  color: var(--ck-ink);
  border-radius: 5px;
  cursor: pointer;
}
button.ck-gate-skip:focus-visible { outline: 2px solid var(--ck-shift); outline-offset: 2px; }

/* ---------- figures ---------- */
.ck-figure {
  background: var(--ck-panel);
  border: 1px solid var(--ck-rule);
  border-radius: 8px;
  padding: 22px 8px 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.ck-figcap {
  font-family: var(--ck-data);
  font-size: 11px;
  color: var(--ck-muted);
  padding: 0 20px 16px;
  letter-spacing: .02em;
  line-height: 1.7;
}
.ck-scope svg { display: block; width: 100%; height: auto; font-family: var(--ck-data); }
.ck-scope .ck-axis { stroke: var(--ck-rule); stroke-width: 1; fill: none; }
.ck-scope .ck-grid { stroke: var(--ck-rule-grid); stroke-width: 1; }
/* Chart text is sized for a projector at the back of a lecture room, not for a
   desk. Keep these well above the surrounding UI sizes. */
.ck-scope .ck-tick { font-size: 14px; fill: var(--ck-muted); }
.ck-scope .ck-axlabel {
  font-size: 14px;
  fill: var(--ck-muted);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ck-scope .ck-legend { font-size: 13px; }

/* ---------- cards ---------- */
.ck-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.ck-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.ck-card {
  background: var(--ck-panel);
  border: 1px solid var(--ck-rule);
  border-radius: 8px;
  padding: 20px;
}
.ck-card.ck-shift { border-top: 3px solid var(--ck-shift); }
.ck-card.ck-hold { border-top: 3px solid var(--ck-hold); }
.ck-card.ck-alt { border-top: 3px solid var(--ck-alt); }
.ck-card h3 {
  font-family: var(--ck-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 3px;
}
.ck-card.ck-shift h3 { color: var(--ck-shift); }
.ck-card.ck-hold h3 { color: var(--ck-hold); }
.ck-card.ck-alt h3 { color: var(--ck-alt); }
.ck-card .ck-sub { font-size: 13.5px; color: var(--ck-muted); margin: 0 0 16px; }

/* ---------- tables ---------- */
.ck-scope table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ck-data);
  font-size: 12.5px;
}
.ck-scope th {
  text-align: right;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ck-muted);
  padding: 0 0 7px;
  border-bottom: 1px solid var(--ck-rule);
}
.ck-scope th:first-child, .ck-scope td:first-child { text-align: left; }
.ck-scope td {
  padding: 7px 0;
  border-bottom: 1px solid var(--ck-rule-row);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ck-scope tr:last-child td { border-bottom: none; }
.ck-term { color: var(--ck-ink); font-weight: 500; }
.ck-num.ck-shift-num { color: var(--ck-shift); font-weight: 700; }
.ck-num.ck-hold-num { color: var(--ck-hold); font-weight: 700; }
.ck-num.ck-alt-num { color: var(--ck-alt); font-weight: 700; }

.ck-eq {
  font-family: var(--ck-data);
  font-size: 12.5px;
  line-height: 2.1;
  background: var(--ck-surface-sunk);
  border-left: 2px solid var(--ck-rule);
  padding: 12px 14px 12px 30px;
  margin-top: 16px;
  white-space: normal;
  overflow: visible;
  text-indent: -16px;
}
.ck-eq .ck-r { color: var(--ck-shift); font-weight: 700; }
.ck-eq .ck-g { color: var(--ck-hold); font-weight: 700; }
.ck-eq .ck-o { color: var(--ck-alt); font-weight: 700; }
.ck-eq .ck-dim { color: var(--ck-muted); }

/* ---------- commit card ---------- */
.ck-commit {
  margin-top: 10px;
  background: var(--ck-panel);
  border: 1px solid var(--ck-rule);
  border-radius: 8px;
  padding: 22px 24px;
}
.ck-commit h3 {
  font-family: var(--ck-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 3px;
}
.ck-commit .ck-sub { font-size: 13.5px; color: var(--ck-muted); margin: 0 0 16px; }
.ck-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-bottom: 16px; }
label.ck-chk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-family: var(--ck-data);
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--ck-rule);
  border-radius: 6px;
  transition: border-color .15s;
}
label.ck-chk:hover { border-color: var(--ck-muted); }
label.ck-chk input { margin: 2px 0 0; accent-color: var(--ck-ink); flex: none; }
label.ck-chk .ck-mark { margin-left: auto; font-weight: 700; font-size: 10px; letter-spacing: .06em; }
label.ck-chk.ck-right { border-color: var(--ck-good); }
label.ck-chk.ck-right .ck-mark { color: var(--ck-good); }
label.ck-chk.ck-wrong { border-color: var(--ck-bad); }
label.ck-chk.ck-wrong .ck-mark { color: var(--ck-bad); }

.ck-commit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ck-verdict { font-family: var(--ck-data); font-size: 12.5px; color: var(--ck-muted); }

/* ---------- takeaway ---------- */
.ck-takeaway {
  background: var(--ck-hold-wash);
  border-left: 3px solid var(--ck-hold);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 30px 0 0;
  max-width: 78ch;
}
.ck-takeaway .ck-lab {
  font-family: var(--ck-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ck-hold);
  margin: 0 0 6px;
}
.ck-takeaway p:last-child { margin: 0; font-size: 15px; color: var(--ck-ink-soft); }

/* ---------- raw data drawer ---------- */
.ck-rawdata {
  margin-top: 18px;
  border: 1px solid var(--ck-rule);
  border-radius: 8px;
  background: var(--ck-panel);
}
.ck-rawdata > summary {
  font-family: var(--ck-data);
  font-size: 12px;
  color: var(--ck-muted);
  padding: 12px 16px;
  cursor: pointer;
}
.ck-rawdata > summary:focus-visible { outline: 2px solid var(--ck-shift); outline-offset: -2px; }
.ck-rawdata-body { padding: 0 16px 16px; max-height: 380px; overflow: auto; }
.ck-rawdata .ck-cap { font-size: 12.5px; color: var(--ck-muted); margin: 0 0 12px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .ck-cols, .ck-cols3, .ck-checks { grid-template-columns: 1fr; }
  .ck-controls { gap: 18px; padding: 14px 16px; }
}

/* ---------- print ---------- */
@media print {
  .ck-controls, .ck-commit-actions, .ck-lock-note { display: none; }
  .ck-rawdata-body { max-height: none; overflow: visible; }
}