/* =============================================================================
   kr-console.css — Krimsky console pieces the Cover Test console does not
   have. The shell, steps, coaching, buttons, prism card and caption reuse
   css/cover-test/* so the two tests read as one family. Pupilla tokens only.
   Markup: js/krimsky/ui/kr-console-template.js
   ============================================================================= */

.krc .ctc-icon { color: var(--accent); }

/* ── Technique cards ─────────────────────────────────────────────────────── */
.kr-tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container ctc (max-width: 520px) { .kr-tech { grid-template-columns: minmax(0, 1fr); } }
.kr-tech-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.kr-tech-card:hover { border-color: var(--accent); }
.kr-tech-card[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent) inset; }
.kr-tech-name { font-size: 14px; font-weight: 700; }
.kr-tech-where { font-size: 12px; color: var(--accent-strong); }
.kr-tech-what { font-size: 12px; line-height: 1.45; color: var(--text-soft); }
.kr-naming, .kr-hint { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
.krc[data-explain="off"] .kr-naming { display: none !important; }

/* ── What you see now ────────────────────────────────────────────────────── */
.kr-see { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.kr-see-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kr-state { padding: 2px 10px; border-radius: 999px; background: var(--surface-sunken); font-size: 11px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.kr-state[data-state="centred"]  { background: var(--accent-tint); color: var(--accent-strong); }
.kr-state[data-state="under"],
.kr-state[data-state="off"]      { background: var(--note-tint); color: var(--note-strong); }
.kr-state[data-state="reversed"],
.kr-state[data-state="hidden"]   { background: var(--warn-tint); color: var(--warn-strong); }

.kr-gauge svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.kr-g-iris { fill: #5d7682; stroke: #3d515a; stroke-width: 1.5; }
.kr-g-pupil { fill: #101518; }
.kr-g-centre { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.kr-g-reflex { fill: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)); }
.kr-g-target { fill: none; stroke: #f0b64a; stroke-width: 1.8; stroke-dasharray: 3 2.5; }
.kr-g-label { font: 600 11px/1 "IBM Plex Sans", system-ui, sans-serif; fill: var(--text-soft); }
.kr-see-text { margin: 0; font-size: 12.5px; line-height: 1.45; }

.kr-trials { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kr-trial { padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--surface-sunken); font-family: var(--ct-mono); font-size: 11px; color: var(--text-soft); }
.kr-trial[data-state="centred"]  { border-color: var(--accent); color: var(--accent-strong); }
.kr-trial[data-state="reversed"] { border-color: var(--warn); color: var(--warn-strong); }
.kr-trial[data-state="endpoint"] { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ── Instrument & reliability drawer ─────────────────────────────────────── */
.kr-drawer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@container ctc (max-width: 640px) { .kr-drawer-grid { grid-template-columns: minmax(0, 1fr); } }
.kr-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
.kr-note:empty { display: none; }
.kr-check { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.45; color: var(--text); cursor: pointer; }
.kr-check input { margin-top: 2px; accent-color: var(--accent); }
.kr-conf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kr-conf-badge { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.kr-conf-badge[data-level="good"]       { background: var(--accent-tint); color: var(--accent-strong); }
.kr-conf-badge[data-level="reduced"]    { background: var(--note-tint); color: var(--note-strong); }
.kr-conf-badge[data-level="low"],
.kr-conf-badge[data-level="misleading"] { background: var(--warn-tint); color: var(--warn-strong); }
.kr-flags { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.kr-flag { padding: 6px 9px; border-left: 3px solid currentColor; border-radius: 8px; background: var(--surface-sunken); font-size: 11.5px; line-height: 1.45; }
.kr-flag[data-severity="info"]   { color: var(--note-strong); }
.kr-flag[data-severity="warn"]   { color: var(--warn-strong); }
.kr-flag[data-severity="danger"] { color: #a1301f; }

/* ── Field annotations (ui/kr-guide-layer.js) ────────────────────────────── */
.kr-guide-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 101; overflow: visible; pointer-events: none; }
.kr-ring { fill: none; stroke: #3a6ea8; stroke-width: 2.5; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); animation: kr-ring 1.4s ease-in-out infinite; }
.kr-goal { fill: none; stroke: #f0b64a; stroke-width: 2; stroke-dasharray: 4 3; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }
.kr-arrow { stroke: #d9722e; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)); }
#kr-arrowhead path { fill: #d9722e; }
.kr-pill rect { fill: rgba(20, 24, 26, 0.84); stroke: #3a6ea8; stroke-width: 1.5; }
.kr-pill text { fill: #fff; font: 700 11.5px/1 "IBM Plex Sans", system-ui, sans-serif; }
@keyframes kr-ring { 50% { stroke-opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .kr-ring { animation: none; }
  .kr-tech-card { transition: none; }
}