/**
 * Elder Mode — large UI with WCAG AAA compliance.
 * bd-6xk: 18px min font, 56px buttons, WCAG AAA contrast.
 *
 * Activated by adding .elder-mode class to document.documentElement.
 * Persists via localStorage key 'mycra-elder-mode'.
 */

.elder-mode {
  /* Typography: 18px minimum everywhere */
  --elder-font-min: 18px;
  --elder-font-body: 20px;
  --elder-font-heading: 28px;
  --elder-font-heading-lg: 36px;
  --elder-line-height: 1.7;

  /* WCAG AAA contrast colors (7:1 ratio for normal text, 4.5:1 for large text) */
  --fg: #0F172A;           /* near-black: 15.4:1 on white */
  --fg2: #1E293B;          /* dark slate: 12.6:1 on white */
  --fg3: #334155;          /* darker muted: 8.2:1 on white */
  --accent: #1D4ED8;       /* darker blue: 6.5:1 on white — large text AAA */
  --accent-hover: #1E40AF; /* even darker blue: 7.8:1 */
  --success: #15803D;      /* darker green: 5.3:1 — large text AAA */
  --warning: #B45309;      /* darker amber: 5.1:1 — large text AAA */
  --danger: #B91C1C;       /* darker red: 6.2:1 */
  --border: #94A3B8;       /* more visible borders */
  --bg: #F8FAFC;           /* slightly brighter background */

  /* Touch targets: 56px minimum */
  --elder-touch-min: 56px;

  font-size: var(--elder-font-body) !important;
  line-height: var(--elder-line-height) !important;
}

/* ── Body text ── */
.elder-mode body,
.elder-mode p,
.elder-mode span,
.elder-mode label,
.elder-mode div {
  font-size: max(var(--elder-font-min), inherit);
  line-height: var(--elder-line-height);
}

/* ── Headings ── */
.elder-mode h1 {
  font-size: var(--elder-font-heading-lg) !important;
  line-height: 1.3;
}
.elder-mode h2 {
  font-size: var(--elder-font-heading) !important;
  line-height: 1.4;
}
.elder-mode h3 {
  font-size: 24px !important;
  line-height: 1.4;
}

/* ── Buttons: 56px minimum touch target ── */
.elder-mode button,
.elder-mode .big-btn,
.elder-mode .ctrl,
.elder-mode [role="button"] {
  min-height: var(--elder-touch-min) !important;
  min-width: var(--elder-touch-min) !important;
  font-size: var(--elder-font-min) !important;
  padding: 14px 24px !important;
}

.elder-mode .big-btn {
  font-size: 20px !important;
  padding: 18px 32px !important;
}

.elder-mode .ctrl {
  width: var(--elder-touch-min) !important;
  height: var(--elder-touch-min) !important;
}

.elder-mode .ctrl svg {
  width: 28px !important;
  height: 28px !important;
}

.elder-mode .ctrl-label {
  font-size: 14px !important;
}

/* ── Inputs ── */
.elder-mode input,
.elder-mode select,
.elder-mode textarea {
  min-height: var(--elder-touch-min) !important;
  font-size: var(--elder-font-min) !important;
  padding: 14px 18px !important;
  border: 2px solid var(--border) !important;
}

.elder-mode input:focus,
.elder-mode select:focus,
.elder-mode textarea:focus {
  border-color: var(--accent) !important;
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px;
}

/* ── Links ── */
.elder-mode a {
  font-size: max(var(--elder-font-min), inherit);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Video labels ── */
.elder-mode .video-label {
  font-size: var(--elder-font-min) !important;
  padding: 8px 16px !important;
}

/* ── Chat ── */
.elder-mode .chat-msg {
  font-size: var(--elder-font-min) !important;
  padding: 12px 16px !important;
}
.elder-mode .chat-input {
  font-size: var(--elder-font-min) !important;
}
.elder-mode .chat-send {
  min-height: var(--elder-touch-min) !important;
  min-width: var(--elder-touch-min) !important;
  font-size: var(--elder-font-min) !important;
}

/* ── Room header ── */
.elder-mode .room-name {
  font-size: 20px !important;
}
.elder-mode .room-status {
  font-size: var(--elder-font-min) !important;
}

/* ── Clippy ── */
.elder-mode .clippy {
  font-size: var(--elder-font-min) !important;
  padding: 20px 24px !important;
}

/* ── Wizard ── */
.elder-mode .wizard-step {
  font-size: var(--elder-font-min) !important;
}
.elder-mode .help-box {
  font-size: var(--elder-font-min) !important;
  padding: 16px 20px !important;
}

/* ── Privacy notice ── */
.elder-mode .lobby-privacy {
  font-size: 16px !important;
}

/* ── Settings toggle for elder mode ── */
.elder-toggle-wrap {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 200;
}
.elder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 14px;
  color: var(--fg2);
  cursor: pointer;
  box-shadow: var(--shadow);
  min-height: 44px;
  min-width: 44px;
}
.elder-toggle:hover {
  background: var(--accent-light);
}
.elder-mode .elder-toggle {
  min-height: var(--elder-touch-min);
  font-size: var(--elder-font-min) !important;
  padding: 12px 18px;
}