/* neuropsych-test-theme.css — Visual overrides for jsPsych tests
   CSS-ONLY. Never touch test JS.
   Load AFTER jspsych.css and neuropsych-theme.css */

/* Light background — reset body padding from neuropsych-theme.css */
html, body,
.jspsych-display-element,
.jspsych-content-wrapper {
  background: #f8f9fb !important;
  color: #111827 !important;
}
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.jspsych-content {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #111827;
}

/* jsPsych buttons → teal */
.jspsych-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  margin: 8px !important;
  border-radius: 10px !important;
  border: none !important;
  background: #0e7490 !important;
  color: #fff !important;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: none !important;
}
.jspsych-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14,116,144,.2) !important;
}
.jspsych-btn:active {
  transform: scale(.98);
}

/* Typography */
h1, h2, h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: #111827 !important;
}
h1 { font-size: 1.5rem !important; }
h2 { font-size: 1.2rem !important; margin-bottom: 8px; }
h3 { font-size: 1rem !important; }

p, li {
  color: #4b5563;
  line-height: 1.6;
}
b, strong {
  color: #0e7490;
}

/* Instructions */
.instructions, .jspsych-content p {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  font-size: .9rem;
  line-height: 1.65;
}

/* Stimulus text — mono, large */
.fixation {
  font-size: 48px !important;
  color: #0e7490 !important;
}

/* Results tables */
table, .result-table, .results table {
  border-collapse: collapse;
  font-size: 15px;
  border-radius: 12px;
  overflow: hidden;
}
td, th, .result-table td, .result-table th, .results td, .results th {
  border: 1px solid rgba(0,0,0,.07) !important;
  padding: 10px 16px !important;
  text-align: center;
}
th, .result-table th, .results th {
  background: #f1f3f7 !important;
  color: #4b5563 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Feedback text */
.feedback.correct, .correct-feedback { color: #059669 !important; }
.feedback.incorrect, .incorrect-feedback { color: #dc2626 !important; }

/* Digit/number displays — larger, mono */
.number, .digit-display, .stimulus-number {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Digit pad buttons (for tests with keypads) */
.digit-pad button, .response-buttons button, .choice-buttons button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 12px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  transition: all .1s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  -webkit-tap-highlight-color: transparent;
}
.digit-pad button:hover, .response-buttons button:hover, .choice-buttons button:hover {
  background: #f1f3f7;
  border-color: rgba(0,0,0,.12);
}
.digit-pad button:active, .response-buttons button:active, .choice-buttons button:active {
  background: #0e7490;
  color: #fff;
  border-color: #0e7490;
  transform: scale(.96);
}

/* Submit buttons inside tests */
.submit-btn, .control-row .submit-btn {
  background: #0e7490 !important;
  color: #fff !important;
  border-color: #0e7490 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* Response display */
.response-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 8px;
}

/* Color overrides — remove dark-mode defaults that some tests have */
.condition-label { color: #4b5563 !important; }