/* ================================================
   BAMPAA — Timed Practice Styles
   assets/timed_practice.css
   ================================================ */

/* ── SHELL ── */
.tp-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── SETUP CARD ── */
.tp-setup-card {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.tp-setup-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.tp-setup-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}

/* Dropdown theme (reuse cleanroom vars) */
.tp-dropdown .Select-control {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 12px !important;
  min-height: 38px !important;
  height: 38px !important;
}
.tp-dropdown .Select-placeholder,
.tp-dropdown .Select-value-label {
  color: rgba(226, 232, 240, 0.92) !important;
  line-height: 38px !important;
  font-size: 13px !important;
}
.tp-dropdown .Select-menu-outer {
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 12px !important;
  z-index: 9999 !important;
}
.tp-dropdown .Select-option { color: rgba(226,232,240,0.95) !important; font-size: 13px !important; }
.tp-dropdown .Select-option.is-focused { background: rgba(106,165,156,0.22) !important; }
.tp-dropdown .Select-option.is-selected { background: rgba(106,165,156,0.45) !important; }

/* ── BUTTONS ── */
.tp-btn-start {
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #6AA59C, #4B7F76);
  color: #fff;
  font-family: var(--sans, 'Sora', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(106,165,156,0.4);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.tp-btn-start:hover {
  box-shadow: 0 0 30px rgba(106,165,156,0.6);
  transform: translateY(-1px);
}

.tp-btn-end {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-family: var(--sans, 'Sora', sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.tp-btn-end:hover { background: rgba(239, 68, 68, 0.14); }

/* ── TIMER BAR ── */
.tp-timer-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 18px;
  padding: 16px 28px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.tp-timer-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tp-timer-center { text-align: center; }

.tp-timer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.tp-timer-display {
  font-family: 'Space Mono', monospace;
  font-size: 2.4rem;
  font-weight: 700;
  color: #6AA59C;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: color 0.4s;
}
.tp-timer-display.tp-warning { color: #f59e0b !important; }
.tp-timer-display.tp-danger {
  color: #ef4444 !important;
  animation: tp-pulse-red 1s infinite;
}
@keyframes tp-pulse-red { 0%,100%{opacity:1;} 50%{opacity:0.55;} }

.tp-timer-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.7);
  margin-top: 4px;
}

.tp-stat-block { text-align: center; }

.tp-stat-val {
  font-family: 'Space Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: #e6e9ee;
  line-height: 1;
}
.tp-stat-green  { color: #10b981 !important; }
.tp-stat-orange { color: #E8935A !important; }
.tp-stat-brand  { color: #6AA59C !important; }
.tp-stat-muted  { color: rgba(148,163,184,0.8) !important; }

.tp-stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.7);
  margin-top: 3px;
}

/* ── MAIN GRID ── */
.tp-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ── QUESTION CARD ── */
.tp-question-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tp-q-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tp-q-chip {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6AA59C;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 6px;
  padding: 2px 8px;
}

.tp-q-diff {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E8935A;
  background: rgba(232,147,90,0.1);
  border: 1px solid rgba(232,147,90,0.2);
  border-radius: 6px;
  padding: 2px 8px;
}

.tp-q-num {
  font-size: 0.7rem;
  color: rgba(148,163,184,0.8);
  margin-left: auto;
  font-family: 'Space Mono', monospace;
}

.tp-q-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 10px;
  color: #e6e9ee;
}

.tp-q-body {
  font-size: 0.82rem;
  color: #7a8fa8;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Schema section */
.tp-schema-section { margin-top: 14px; border-top: 1px solid rgba(148,163,184,0.1); padding-top: 14px; }

.tp-schema-tabs .tab {
  font-size: 0.75rem !important;
  padding: 8px 14px !important;
}

.tp-schema-content { margin-top: 12px; font-size: 0.8rem; }

/* ── EDITOR CARD ── */
.tp-editor-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tp-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tp-editor-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #e6e9ee;
}

.tp-editor-hint {
  font-size: 0.72rem;
  color: rgba(148,163,184,0.8);
  margin-top: 3px;
}

.tp-shortcut {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tp-kbd {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  color: rgba(148,163,184,0.8);
}

/* Editor textarea */
.tp-editor-textarea {
  width: 100% !important;
  min-height: 260px !important;
  height: 260px !important;
  background: #080e1a !important;
  color: #c3d9f0 !important;
  border: 1px solid rgba(148,163,184,0.2) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
  outline: none !important;
  transition: border-color 0.18s !important;
}
.tp-editor-textarea:focus {
  border-color: rgba(106,165,156,0.5) !important;
  box-shadow: 0 0 0 3px rgba(106,165,156,0.08) !important;
}
.tp-editor-textarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Feedback */
.tp-feedback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 12px;
}
.tp-feedback-idle {
  background: rgba(106,165,156,0.04);
  border: 1px solid rgba(148,163,184,0.15);
  color: rgba(148,163,184,0.8);
}
.tp-feedback-success {
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.3);
  color: #6ee7b7;
}
.tp-feedback-error {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
}
.tp-feedback-skip {
  background: rgba(148,163,184,0.06);
  border: 1px solid rgba(148,163,184,0.15);
  color: rgba(148,163,184,0.8);
}

.tp-feedback-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* Action row */
.tp-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 10px;
}

.tp-btn-skip {
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.2);
  background: transparent;
  color: rgba(148,163,184,0.8);
  font-family: var(--sans, 'Sora', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.tp-btn-skip:hover { border-color: rgba(148,163,184,0.5); color: #e6e9ee; }
.tp-btn-skip:disabled { opacity: 0.4; cursor: not-allowed; }

.tp-btn-submit {
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #6AA59C, #4B7F76);
  color: #fff;
  font-family: var(--sans, 'Sora', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(106,165,156,0.35);
  transition: all 0.18s;
}
.tp-btn-submit:hover { box-shadow: 0 0 28px rgba(106,165,156,0.55); transform: translateY(-1px); }
.tp-btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── END SCREEN ── */
.tp-end-screen {
  text-align: center;
  padding: 52px 24px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.tp-end-title {
  font-size: 1rem;
  color: rgba(148,163,184,0.8);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
}

.tp-end-score {
  font-family: 'Space Mono', monospace;
  font-size: 4.5rem;
  font-weight: 700;
  color: #6AA59C;
  line-height: 1;
  text-shadow: 0 0 40px rgba(106,165,156,0.5);
}

.tp-end-label {
  font-size: 0.8rem;
  color: rgba(148,163,184,0.7);
  margin-top: 6px;
  margin-bottom: 28px;
}

.tp-end-stats {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tp-end-stat { text-align: center; }
.tp-end-stat-val { font-family: 'Space Mono', monospace; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.tp-end-stat-label { font-size: 0.62rem; color: rgba(148,163,184,0.7); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* ================================================
   MOBILE ≤768px
   ================================================ */
@media (max-width: 768px) {

  .tp-shell { padding: 12px 12px 40px; gap: 12px; }

  .tp-setup-card { flex-direction: column; gap: 12px; }
  .tp-setup-block { min-width: 0; width: 100%; }
  .tp-btn-start, .tp-btn-end { width: 100%; text-align: center; }

  .tp-timer-bar {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    text-align: center;
  }
  .tp-timer-left { justify-content: center; }
  .tp-timer-right { justify-content: center; }
  .tp-timer-display { font-size: 3rem; }

  .tp-main-grid { grid-template-columns: 1fr; gap: 12px; }

  .tp-action-row { flex-direction: column; }
  .tp-btn-submit, .tp-btn-skip { width: 100%; text-align: center; }

  .tp-editor-textarea { min-height: 48vh !important; height: 48vh !important; }

  .tp-end-stats { gap: 20px; }
  .tp-end-score { font-size: 3.5rem; }
}

/* ── Answer prefix bar (Spreadsheets formula = / DAX table chip) ── */
.tp-answer-prefix {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tp-hint-label {
  color: #8B9BAA;
  font-size: 12px;
}

.tp-hint-code {
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.25);
  border-radius: 4px;
  padding: 1px 6px;
  color: #6AA59C;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}

.tp-table-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(106,165,156,0.12);
  border: 1px solid rgba(106,165,156,0.3);
  border-radius: 6px;
  color: #6AA59C;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}