/* =============================================================================
   ct-controls.css — Cover Test mode buttons and distance/target toggles.
   Single responsibility: interactive controls styling only.
   Source: Cover-Test Clinical Reference §2.6, §2.1, §2.2
   ============================================================================= */

/* ── Mode buttons grid (5 modes from §2.6) ────────────────────────────────── */
.ct-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

/* Krimsky (5th mode) spans both columns — it is a special-case test */
.ct-mode-btn:last-child {
  grid-column: 1 / -1;
}

/* Individual mode button */
.ct-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1.5px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary, rgba(255,255,255,0.60));
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  text-align: left;
  line-height: 1.25;
  font-size: 11px;
  font-weight: 600;
}

.ct-mode-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* Active state */
.ct-mode-btn[aria-pressed="true"] {
  background: rgba(99,179,237,0.14);
  border-color: var(--accent, #63b3ed);
  color: var(--accent, #63b3ed);
}

/* Abbr badge inside each mode button */
.ct-mode-abbr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}

.ct-mode-btn[aria-pressed="true"] .ct-mode-abbr {
  background: rgba(99,179,237,0.22);
}

/* Mode hint text (shown below mode buttons) */
.ct-mode-hint {
  font-size: 9.5px;
  color: var(--text-muted, rgba(255,255,255,0.38));
  line-height: 1.45;
  min-height: 26px;
  padding: 0 2px;
}

/* ── Toggle pair (distance & fixation target) ─────────────────────────────── */
.ct-toggle-pair {
  display: flex;
  border-radius: 7px;
  overflow: hidden;
  border: 1.5px solid var(--border, rgba(255,255,255,0.10));
}

.ct-toggle-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted, rgba(255,255,255,0.42));
  transition: background 0.14s, color 0.14s;
  text-align: center;
  line-height: 1.3;
}

.ct-toggle-btn + .ct-toggle-btn {
  border-left: 1px solid var(--border, rgba(255,255,255,0.10));
}

.ct-toggle-btn[aria-pressed="true"] {
  background: rgba(99,179,237,0.18);
  color: var(--accent, #63b3ed);
  font-weight: 700;
}

.ct-toggle-btn:hover:not([aria-pressed="true"]) {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
}

/* Warning badge shown when non-accommodative target is selected (§2.2) */
.ct-target-warn {
  font-size: 9px;
  color: #f6ad55;
  line-height: 1.4;
  min-height: 13px;
  padding: 0 2px;
  display: none;
}

.ct-target-warn.ct-visible {
  display: block;
}