/* The trainer's older rules are in site.css. */

.pat-main > .pat-actions { margin-top: 14px; }
.pat-actions[hidden] { display: none; }
.pat-main > .pat-actions .btn-ghost { border: 1px solid var(--c-border); background: var(--c-surface); }
.pat-main > .pat-actions .btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }

.pat-is-fine .pat-face-wrap { display: none; }

.pat-fine {
  margin: 0; padding: 13px; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.pat-fine figcaption { color: var(--c-text-soft); font-size: .85rem; line-height: 1.4; margin-bottom: 9px; }
.pat-fine-row { display: flex; align-items: center; gap: 12px; }
.pat-fine canvas {
  flex: 1 1 0; min-width: 0; max-width: 170px; height: auto; aspect-ratio: 1;
  border-radius: 10px; background: #237253;
}
.pat-nudge { display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); gap: 4px; flex: none; }
.pat-nudge-up { grid-area: 1 / 2; }
.pat-nudge-left { grid-area: 2 / 1; }
.pat-nudge-right { grid-area: 2 / 3; }
.pat-nudge-down { grid-area: 3 / 2; }
.pat-nudge-unit {
  grid-area: 2 / 2; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: var(--c-text-soft);
}
.pat-nudge-btn {
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-bg);
  color: var(--c-primary-dark); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.pat-nudge-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.pat-nudge-btn:active:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pat-nudge-btn:disabled { opacity: .4; cursor: default; }

.pat-quiz-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pat-quiz-choices[hidden] { display: none; }
.pat-quiz-choice {
  min-height: 52px; padding: 8px 4px; justify-content: center;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 1.2rem; font-weight: 800;
}
.pat-quiz-choice:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pat-quiz-choices.is-answered { pointer-events: none; }
.pat-quiz-choices.is-answered .pat-quiz-choice { opacity: .45; }
.pat-quiz-choices.is-answered .pat-quiz-choice.is-right {
  opacity: 1; border-color: var(--c-success); background: var(--c-success); color: #fff;
}
.pat-quiz-choices.is-answered .pat-quiz-choice.is-wrong {
  opacity: 1; border-color: var(--c-error); color: var(--c-error);
}

.pat-rate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 14px 0 4px; padding: 11px 14px; border: 1px dashed var(--c-border); border-radius: var(--radius);
}
.pat-rate[hidden], .pat-rate-btns[hidden], .pat-rate-q[hidden] { display: none; }
.pat-rate-q { font-weight: 700; }
.pat-rate-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pat-rate-btn { border: 1px solid var(--c-border); padding: 7px 14px; }
.pat-rate-thanks { color: var(--c-success); font-weight: 700; }

@media (max-width: 520px) {
  .pat-main > .pat-actions .btn { flex: 1 1 40%; text-align: center; justify-content: center; }
}

@media (max-width: 860px) {
  .pat-is-quiz .pat-practice, .pat-is-aiming .pat-practice, .pat-is-shown .pat-practice { padding: 13px 16px; }
  .pat-is-quiz .pat-aside { grid-template-columns: minmax(0, 170px); }
  .pat-is-shown .pat-aside { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); align-items: center; }
  .pat-is-quiz .pat-face-wrap, .pat-is-shown .pat-face-wrap { padding: 8px; }
  .pat-is-quiz .pat-face-wrap figcaption, .pat-is-shown .pat-face-wrap figcaption { display: none; }
  .pat-is-quiz .pat-readout, .pat-is-shown .pat-readout { display: none; }
  .pat-is-quiz .pat-face-label, .pat-is-shown .pat-face-label { display: none; }
  .pat-is-quiz .pat-detail { display: none; }
  .pat-is-aiming .pat-practice-help { display: none; }
  .pat-is-aiming.pat-has-guess .pat-practice-q, .pat-is-aiming.pat-has-guess .pat-practice-h { display: none; }
  .pat-is-answered .pat-practice-q, .pat-is-answered .pat-practice-h { display: none; }
  .pat-is-judged .pat-practice-h, .pat-is-judged .pat-practice-q, .pat-is-judged .pat-practice-help { display: none; }
}