/* Sprint 9 + 11H — shared UX/accessibility and layout-containment layer */
:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { line-height: 1.55; -webkit-text-size-adjust: 100%; }
main { outline: none; }
a { color: #1f4f8a; }

/* Shared control contract: Armenian labels must stay inside their visual bounds. */
a.ghost,
.button-link {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

button,
input,
select,
textarea,
a.ghost,
.button-link {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
}

button {
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Prevent flex/grid children from forcing cards, headers, or action rows wider than their container. */
.card,
.question-card,
.mastery-card,
.mode-card,
.notice,
.topbar,
.content-topbar,
.admin-topbar,
.section-heading,
.dashboard-heading,
.recommendation-card,
.skill-map-heading,
.question-heading,
.mastery-head,
.row {
  min-width: 0;
  max-width: 100%;
}

.card > *,
.question-card > *,
.mastery-card > *,
.mode-card > *,
.notice > *,
.topbar > *,
.content-topbar > *,
.admin-topbar > *,
.section-heading > *,
.dashboard-heading > *,
.recommendation-card > *,
.skill-map-heading > *,
.question-heading > *,
.mastery-head > *,
.row > * {
  min-width: 0;
  max-width: 100%;
}

.row,
.topbar,
.content-topbar,
.admin-topbar,
.section-heading,
.dashboard-heading,
.question-heading,
.mastery-head {
  flex-wrap: wrap;
}

button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0b63ce;
  outline-offset: 3px;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #a62f37 !important; box-shadow: 0 0 0 2px rgba(166,47,55,.14); }
.field-error { margin: 6px 0 0; color: #8f2731; font-size: .84rem; font-weight: 600; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-140%); background: #10253f; color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.ux-status { position: fixed; right: 14px; bottom: 14px; z-index: 1000; max-width: min(440px, calc(100vw - 28px)); background: #10253f; color: #fff; padding: 12px 14px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.ux-status.error { background: #7d2530; }
[aria-busy="true"] { cursor: progress; }
[role="progressbar"] { position: relative; }
.message, .feedback, #dashboardLoading, #stateText, #consoleMessage, #classMessage { overflow-wrap: anywhere; }
.option { min-height: 48px; cursor: pointer; }
.option:has(input:focus-visible) { outline: 3px solid #0b63ce; outline-offset: 2px; }
.option input { min-height: 20px; min-width: 20px; accent-color: #1f4f8a; }
.question-card, .card { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.table-wrap, .matrix-wrap, .scale-wrap { -webkit-overflow-scrolling: touch; }
.quality-table tr[data-id][tabindex="0"]:focus-visible { outline: 3px solid #0b63ce; outline-offset: -3px; }
.student-drawer-panel[role="dialog"] { outline: none; }

@media (max-width: 1024px) {
  .shell, .content-shell { width: 100%; max-width: none; padding-left: 16px; padding-right: 16px; }
  .quality-layout { grid-template-columns: 1fr !important; }
  .detail-panel { position: static !important; max-height: none !important; }
  .teacher-layout { grid-template-columns: 1fr !important; }
  .teacher-sidebar { position: static !important; }
}

@media (max-width: 760px) {
  .shell { padding: 18px 12px 40px; }
  .content-shell { padding: 12px; }
  h1 { font-size: clamp(1.85rem, 10vw, 2.5rem); }
  .auth-card, .question-card, .mastery-card, .mode-card, .skill-map-card, .recommendation-card { padding: 16px; }
  .topbar, .content-topbar { gap: 12px; }
  .row > button, .row > a, .workflow-actions > button { width: 100%; }
  .question-actions { flex-wrap: wrap; }
  .question-actions > button { flex: 1 1 auto; }
  .scale-svg { min-width: 360px; }
  .conversion { flex-wrap: wrap; font-size: 1.05rem; }
  .student-drawer-panel { width: 100vw !important; padding: 18px !important; }
  .quality-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 480px) {
  .shell { padding-left: 10px; padding-right: 10px; }
  .card { border-radius: 12px; }
  .notice { font-size: .92rem; }
  button, input, select, textarea, a.ghost, .button-link { width: 100%; }
  .topbar .row { width: 100%; }
  .quantity-row { grid-template-columns: 1fr !important; }
  .cylinders { grid-template-columns: 1fr; }
  .quality-stats { grid-template-columns: 1fr !important; }
  .metadata-grid { grid-template-columns: 1fr !important; }
  .metadata-grid .wide { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .band-dot, .progress-bar, .session-progress-bar, .mini-progress-bar { forced-color-adjust: none; }
  button, .option, .card { border: 1px solid CanvasText; }
}