/**
 * Minimal exam-oriented design system (Phase 5 §§44, 75–76).
 *
 * Priorities: readability, focus, clarity, low distraction, stable layout.
 * No gradients, no gaming aesthetics, no per-keystroke animation. Honors
 * `prefers-reduced-motion`. Timer/status colors are never the sole carrier
 * of meaning (text labels accompany them, §42).
 */

.a2z-screen {
  --a2z-bg: #f7f7f5;
  --a2z-panel: #ffffff;
  --a2z-ink: #1a1a1a;
  --a2z-muted: #5c5c5c;
  --a2z-line: #d9d9d9;
  --a2z-accent: #1d4ed8;
  --a2z-accent-ink: #ffffff;
  --a2z-good: #166534;
  --a2z-bad: #b91c1c;
  --a2z-warn: #92400e;
  --a2z-focus: #1d4ed8;
  --a2z-radius: 6px;
  --a2z-space: 12px;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  background: var(--a2z-bg);
  color: var(--a2z-ink);
  font-family: "Noto Sans", "Nirmala UI", "Mangal", "Noto Sans Devanagari", system-ui, sans-serif;
  line-height: 1.6;
}

.a2z-title {
  font-size: 1.5rem;
  margin: 0 0 var(--a2z-space);
}

.a2z-screen h2 {
  font-size: 1.15rem;
  margin: 0 0 var(--a2z-space);
}

.a2z-header {
  display: flex;
  gap: var(--a2z-space);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--a2z-space);
  background: var(--a2z-panel);
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  min-height: 3.2em;
}

.a2z-header-exam {
  font-weight: 700;
}

.a2z-header-lang,
.a2z-header-state {
  color: var(--a2z-muted);
  font-size: 0.9rem;
}

.a2z-timer-slot {
  margin: var(--a2z-space) 0;
}

.a2z-timer {
  display: inline-block;
  min-width: 4.5em;
  text-align: center;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding: 4px 16px;
  background: var(--a2z-panel);
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
}

.a2z-timer.is-warning {
  border-color: var(--a2z-warn);
  color: var(--a2z-warn);
}

.a2z-timer.is-critical {
  border-color: var(--a2z-bad);
  color: var(--a2z-bad);
}

.a2z-timer.is-error {
  border-color: var(--a2z-bad);
  background: #fef2f2;
  color: var(--a2z-bad);
}

.a2z-setup,
.a2z-instructions,
.a2z-result,
.a2z-error {
  background: var(--a2z-panel);
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  padding: calc(var(--a2z-space) * 1.5);
  margin: var(--a2z-space) 0;
}

.a2z-setup label {
  display: block;
  margin-bottom: var(--a2z-space);
  font-weight: 600;
}

.a2z-select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  font-size: 1rem;
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  background: #fff;
  color: var(--a2z-ink);
}

.a2z-requirements dl,
.a2z-result-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: var(--a2z-space) 0;
}

.a2z-requirements dt,
.a2z-result-list dt {
  color: var(--a2z-muted);
}

.a2z-requirements dd,
.a2z-result-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.a2z-validation {
  color: var(--a2z-bad);
  font-weight: 600;
}

.a2z-instructions {
  margin: 0 0 var(--a2z-space);
  padding-left: 1.4em;
}

.a2z-passage {
  background: var(--a2z-panel);
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  padding: calc(var(--a2z-space) * 1.5);
  margin: var(--a2z-space) 0;
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--a2z-ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  user-select: text;
}

.a2z-passage:lang(hi) {
  line-height: 2.1;
}

.a2z-input-label {
  display: block;
  font-weight: 600;
}

.a2z-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--a2z-ink);
  border: 2px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  caret-color: var(--a2z-accent);
  resize: vertical;
}

.a2z-input:disabled {
  background: #f0f0f0;
  color: var(--a2z-muted);
}

.a2z-status {
  min-height: 1.6em;
  margin: var(--a2z-space) 0;
  color: var(--a2z-muted);
  font-size: 0.92rem;
}

.a2z-controls {
  display: flex;
  gap: var(--a2z-space);
  flex-wrap: wrap;
  margin: var(--a2z-space) 0;
}

.a2z-button {
  padding: 10px 18px;
  font-size: 1rem;
  border: 1px solid var(--a2z-accent);
  border-radius: var(--a2z-radius);
  background: #fff;
  color: var(--a2z-accent);
  cursor: pointer;
}

.a2z-button-primary {
  background: var(--a2z-accent);
  color: var(--a2z-accent-ink);
}

.a2z-button:disabled {
  border-color: var(--a2z-line);
  color: var(--a2z-muted);
  cursor: not-allowed;
}

.a2z-verdict {
  font-size: 1.4rem;
  font-weight: 700;
}

.a2z-verdict.is-pass {
  color: var(--a2z-good);
}

.a2z-verdict.is-fail {
  color: var(--a2z-bad);
}

.a2z-rival-note,
.a2z-result-meta {
  color: var(--a2z-muted);
  font-size: 0.9rem;
}

.a2z-result-list .is-pass {
  color: var(--a2z-good);
  font-weight: 700;
}

.a2z-result-list .is-fail {
  color: var(--a2z-bad);
  font-weight: 700;
}

.a2z-error-text {
  color: var(--a2z-bad);
  font-weight: 600;
}

.a2z-footer {
  margin-top: calc(var(--a2z-space) * 2);
  color: var(--a2z-muted);
  font-size: 0.85rem;
}

.a2z-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.a2z-button:focus-visible,
.a2z-select:focus-visible,
.a2z-input:focus-visible {
  outline: 3px solid var(--a2z-focus);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .a2z-screen {
    padding: 16px 8px 32px;
  }

  .a2z-timer {
    font-size: 1.5rem;
  }

  .a2z-passage {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a2z-screen * {
    transition: none;
    animation: none;
  }
}

/**
 * Result page extension (append-only).
 *
 * Panels render stored values verbatim; token states pair every background
 * tint with a text marker plus an underline/border treatment, so meaning
 * never travels by color alone. Numbers use tabular figures.
 */

.a2z-result-page {
  display: grid;
  gap: calc(var(--a2z-space) * 1.5);
}

.a2z-result-header h2 {
  margin: 0 0 4px;
}

.a2z-qual,
.a2z-errors {
  background: var(--a2z-panel);
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  padding: calc(var(--a2z-space) * 1.5);
}

.a2z-qual-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.a2z-qual-banner.is-pass {
  color: var(--a2z-good);
}

.a2z-qual-banner.is-fail {
  color: var(--a2z-bad);
}

.a2z-qual-reason {
  margin: 0 0 var(--a2z-space);
  color: var(--a2z-muted);
  font-size: 0.92rem;
}

.a2z-qual-table,
.a2z-error-table,
.a2z-history-table,
.a2z-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--a2z-space) 0;
  font-size: 0.95rem;
}

.a2z-qual-table th,
.a2z-error-table th,
.a2z-history-table th,
.a2z-compare-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid var(--a2z-line);
  color: var(--a2z-muted);
  font-weight: 600;
}

.a2z-qual-table td,
.a2z-error-table td,
.a2z-history-table td,
.a2z-compare-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--a2z-line);
  font-variant-numeric: tabular-nums;
}

.a2z-metrics-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  background: var(--a2z-panel);
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  padding: calc(var(--a2z-space) * 1.5);
  margin: var(--a2z-space) 0;
}

.a2z-metrics-grid dt {
  color: var(--a2z-muted);
}

.a2z-metrics-grid dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.a2z-error-totals {
  font-weight: 600;
}

.a2z-compare-scroll {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--a2z-line);
  border-radius: var(--a2z-radius);
  background: var(--a2z-panel);
  padding: var(--a2z-space);
}

.a2z-compare-table td {
  vertical-align: top;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.a2z-token {
  padding: 0 2px;
  border-radius: 3px;
}

.a2z-token.is-correct {
  text-decoration: underline;
  text-decoration-style: solid;
}

.a2z-token.is-changed {
  border-bottom: 2px solid var(--a2z-bad);
  font-weight: 700;
}

.a2z-token.is-missing {
  text-decoration: underline;
  text-decoration-style: dashed;
}

.a2z-token.is-extra {
  border-top: 2px dotted var(--a2z-warn);
}

.a2z-token.is-moved {
  text-decoration: underline;
  text-decoration-style: wavy;
}

.a2z-token.is-spacing {
  outline: 1px dashed var(--a2z-muted);
}

.a2z-token.is-punct {
  border-bottom: 1px dotted var(--a2z-muted);
}

.a2z-token.is-para {
  display: inline-block;
  border: 1px dotted var(--a2z-muted);
  min-width: 2em;
}

.a2z-compare-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 0;
  margin: var(--a2z-space) 0;
  font-size: 0.9rem;
  color: var(--a2z-muted);
}

.a2z-compare-errors li {
  margin-bottom: 6px;
}

.a2z-compare-errors .a2z-button {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.85rem;
}

.a2z-compare-raw pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: #f0f0f0;
  padding: var(--a2z-space);
  border-radius: var(--a2z-radius);
}

.a2z-history-filters {
  display: flex;
  gap: var(--a2z-space);
  flex-wrap: wrap;
  align-items: flex-end;
  margin: var(--a2z-space) 0;
}

.a2z-filter {
  display: grid;
  gap: 4px;
  font-weight: 600;
  font-size: 0.9rem;
}

.a2z-persistence-note {
  color: var(--a2z-muted);
  font-size: 0.85rem;
  margin: 0;
}

.a2z-result-actions {
  margin-top: var(--a2z-space);
}

.a2z-compare-scroll:focus-visible,
.a2z-compare-raw summary:focus-visible,
.a2z-history-table .a2z-button:focus-visible {
  outline: 3px solid var(--a2z-focus);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .a2z-metrics-grid {
    grid-template-columns: 1fr;
  }

  .a2z-metrics-grid dt {
    margin-top: 8px;
  }

  .a2z-qual-table,
  .a2z-error-table,
  .a2z-history-table,
  .a2z-compare-table {
    font-size: 0.85rem;
  }

  .a2z-history-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a2z-compare-scroll {
    scroll-behavior: auto;
  }
}

@media print {
  .a2z-result-actions,
  .a2z-history-filters,
  .a2z-compare-raw {
    display: none;
  }

  .a2z-compare-scroll {
    max-height: none;
    overflow: visible;
  }
}