/* NusaIQ Malaysia compositions — pages combine components through these patterns. */

.ep-page {
  min-height: 100vh;
  color: var(--ep-color-text);
  background:
    linear-gradient(rgba(29, 95, 191, 0.045) 1px, transparent 1px),
    var(--ep-color-canvas);
  background-size: 100% 2rem;
}

.ep-page__main {
  width: min(calc(100% - 2 * var(--ep-space-4)), var(--ep-width-app));
  margin-inline: auto;
  padding-block: var(--ep-space-6) var(--ep-space-12);
}

.ep-reading { max-width: var(--ep-width-reading); }

.ep-decision-panel {
  display: grid;
  gap: var(--ep-space-4);
  padding: var(--ep-space-6);
  border: 1px solid var(--ep-line);
  border-inline-start: 6px solid var(--ep-color-action);
  border-radius: var(--ep-radius-3);
  background: var(--ep-color-surface);
}

.ep-decision-panel__actions { display: flex; flex-wrap: wrap; gap: var(--ep-space-2); }

.ep-question {
  display: grid;
  gap: var(--ep-space-4);
  max-width: var(--ep-width-reading);
  padding: var(--ep-space-6);
  border: 2px solid var(--ep-line);
  border-radius: var(--ep-radius-3);
  background: var(--ep-color-surface);
}

.ep-question__prompt { margin: 0; font: 800 var(--ep-text-xl)/var(--ep-leading-tight) var(--ep-font-display); }
.ep-question__instruction { margin: 0; font-size: var(--ep-text-learner); }
.ep-question__responses { display: grid; gap: var(--ep-space-3); }
.ep-question__feedback { min-height: 1.6em; font-weight: 800; }
.ep-question[data-ep-state="correct"] { border-color: var(--ep-forest); }
.ep-question[data-ep-state="incorrect"] { border-color: var(--ep-coral); }
.ep-question[data-ep-state="loading"] { color: var(--ep-muted); background: var(--ep-surface-muted); }

.ep-state {
  display: grid;
  gap: var(--ep-space-3);
  justify-items: start;
  padding: var(--ep-space-6);
  border: 2px dashed var(--ep-line-strong);
  border-radius: var(--ep-radius-3);
  background: var(--ep-color-surface);
}

.ep-state[data-ep-state="success"] { border-style: solid; border-color: var(--ep-forest); background: var(--ep-mint); }
.ep-state[data-ep-state="recoverable_error"] { border-style: solid; border-color: var(--ep-coral); }
.ep-state[data-ep-state="blocked_error"] { border-style: solid; border-color: var(--ep-coral); background: #FFF1F0; }
.ep-state[data-ep-state="offline_ready"] { border-style: solid; border-color: var(--ep-sky); background: #EEF5FF; }

.ep-adult-layout { display: grid; gap: var(--ep-space-6); }
.ep-adult-layout__summary { min-width: 0; }
.ep-adult-layout__task { min-width: 0; }

.ep-game-status {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ep-space-3);
  padding: var(--ep-space-3) var(--ep-space-4);
  border-top: 2px solid var(--ep-line);
  background: var(--ep-color-surface);
}

[data-ep-mode="focus"] .ep-page { background-image: none; }
[data-ep-mode="focus"] [data-ep-decoration] { display: none !important; }

@media (min-width: 48rem) {
  .ep-adult-layout { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); align-items: start; }
  .ep-adult-layout__summary { position: sticky; top: var(--ep-space-4); }
}

@media (max-height: 30rem) and (orientation: landscape) {
  .ep-page__main { padding-block: var(--ep-space-3); }
  .ep-game-status { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ep-decoration] { animation: none !important; }
}