/* Раскладка Mini App поверх шасси Basecoat и мостика paper-mono. Композиция своя: шасси её не даёт. */
html, body { min-height: 100%; }
.wrap {
  max-width: 34rem; margin: 0 auto;
  padding-block: var(--step-lg) calc(var(--step-xl) + env(safe-area-inset-bottom));
  padding-inline: var(--step-md);
  display: flex; flex-direction: column; gap: var(--step-md);
}
section[id^="screen-"]:not([hidden]) { display: flex; flex-direction: column; gap: var(--step-md); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--step-sm); }
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stat {
  display: flex; flex-direction: column; gap: var(--step-xs);
  padding: var(--step-md); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.big { font-size: 2.5rem; line-height: 1; font-weight: 500; letter-spacing: -0.04em; }
.muted { color: var(--muted-foreground); margin: 0; }
.center { text-align: center; }
.w-full { width: 100%; }

.glados {
  margin: 0; padding: var(--step-md);
  border-left: 3px solid var(--primary); background: var(--muted);
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5;
}
.glados::before { content: "GLaDOS"; display: block; margin-bottom: var(--step-xs);
  font-size: 0.75rem; letter-spacing: 0.09em; color: var(--muted-foreground); }

.topline { display: flex; align-items: center; justify-content: space-between; gap: var(--step-sm); }
.qa h2 { margin: 0; font-size: 1.35rem; line-height: 1.3; white-space: pre-line; }
.qa h2.quote { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 1.2rem; letter-spacing: 0; }
.qa img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--step-sm) 0; }
.qa hr { border: 0; border-top: 1px solid var(--border); margin: var(--step-md) 0; }
.prose p { margin: 0 0 var(--step-sm); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 var(--step-sm); padding-left: 1.2em; list-style: disc; } /* базовый слой шасси снимает маркеры */
.detail { margin-top: var(--step-md); border-top: 1px solid var(--border); padding-top: var(--step-sm); }
.detail .prose { color: var(--muted-foreground); font-size: 0.93rem; }

.actions { position: sticky; bottom: 0; padding-block: var(--step-sm); background: var(--background); }
.grades:not([hidden]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--step-sm); }
.grades button { padding-inline: var(--step-xs); }
.grade-again { color: var(--destructive); border-color: var(--destructive); }