/* ============================================================
   krimsky/panel-controls.css
   Segmented controls, checkbox, reliability flags and notes for the
   Krimsky panel. Companion to krimsky/panel.css.
   Markup: js/krimsky/ui/panel-template.js
   ============================================================ */

/* ----------------------------------------------------------------
   Segmented controls — technique (Ref §1), axis (Ref §4),
   fixation distance (Ref §2), prism material (Ref §3)
   ---------------------------------------------------------------- */
.kr-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .07);
}

.kr-seg-btn {
  flex: 1 1 0;
  padding: 5px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--k-text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--k-dur-fast) ease,
    color      var(--k-dur-fast) ease;
}
.kr-seg-btn:hover { color: var(--k-text-primary); background: rgba(255, 255, 255, .05); }
.kr-seg-btn[data-on="true"] {
  background: var(--k-accent);
  color: #04202e;
  font-weight: 700;
}
.kr-seg-btn:focus-visible { outline: 2px solid var(--k-accent-hover); outline-offset: 1px; }

/* ----------------------------------------------------------------
   Endpoint-definition checkbox — Ref §2
   Unchecking it models the simplified geometric-pupil-centre endpoint,
   which is what turns a pure angle-kappa case into a false positive.
   ---------------------------------------------------------------- */
.kr-options { gap: 8px; }

.kr-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--k-text-secondary);
  cursor: pointer;
}
.kr-check input { margin: 1px 0 0; accent-color: var(--k-accent); cursor: pointer; flex: none; }
.kr-check em { color: var(--k-accent); font-style: normal; }
.kr-check:hover { color: var(--k-text-primary); }

/* ----------------------------------------------------------------
   Confidence grade — Ref §7, §8
   ---------------------------------------------------------------- */
.kr-confidence {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: right;
}
.kr-confidence[data-level="good"]       { background: var(--k-neutral-bg);        color: var(--k-neutral-text); }
.kr-confidence[data-level="reduced"]    { background: rgba(255, 193, 7, .16);     color: #ffd54f; }
.kr-confidence[data-level="low"]        { background: rgba(255, 112, 67, .18);    color: #ffab91; }
.kr-confidence[data-level="misleading"] { background: rgba(244, 67, 54, .22);     color: #ef9a9a; }

/* ----------------------------------------------------------------
   Reliability flags
   ---------------------------------------------------------------- */
.kr-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.kr-flags[data-visible="false"] { display: none; }

.kr-flag {
  font-size: 10px;
  line-height: 1.45;
  padding: 5px 8px 5px 9px;
  border-radius: 6px;
  border-left: 2px solid currentColor;
  background: rgba(255, 255, 255, .04);
}
.kr-flag[data-severity="info"]   { color: #90caf9; }
.kr-flag[data-severity="warn"]   { color: #ffcc80; }
.kr-flag[data-severity="danger"] { color: #ef9a9a; background: rgba(244, 67, 54, .1); }

/* ----------------------------------------------------------------
   Notes — hardware advice (Ref §3), APCT projection (Ref §2),
   examiner band and indication (Ref §6, §7)
   ---------------------------------------------------------------- */
.kr-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--k-text-secondary);
}
.kr-note[data-visible="false"] { display: none; }

.kr-hardware {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  padding: 5px 8px;
  border-radius: 6px;
}
.kr-hardware[data-visible="false"]    { display: none; }
.kr-hardware[data-severity="warn"]    { color: #ffcc80; background: rgba(255, 193, 7, .1); }
.kr-hardware[data-severity="danger"]  { color: #ef9a9a; background: rgba(244, 67, 54, .12); }

.kr-band       { font-style: italic; opacity: .85; }
.kr-indication { color: #b0bec5; }

/* ----------------------------------------------------------------
   Reset
   ---------------------------------------------------------------- */
.kr-reset {
  width: 100%;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--k-glass-border);
  background: rgba(255, 255, 255, .04);
  color: var(--k-text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--k-dur-fast) ease, color var(--k-dur-fast) ease;
}
.kr-reset:hover { background: var(--k-accent-subtle); color: var(--k-text-primary); }

/* Respect reduced-motion for every transition in the panel. */
@media (prefers-reduced-motion: reduce) {
  .krimsky-panel, .kr-seg-btn, .kr-adj, .kr-reset, .kr-pd, .kr-endpoint { transition: none !important; }
}

/* ----------------------------------------------------------------
   Hardware section — calibrated holding position (Instr §6.2)
   ---------------------------------------------------------------- */
.kr-value[data-mismatch="true"] { color: #ef9a9a; }

.kr-delivered { color: #b0bec5; }
.kr-delivered[data-visible="false"] { display: none; }