/* Page styles for /lab/pha-loang-h2so4. Builds on styles.css tokens. */
:root {
  --lab-danger: #b3261e;
  --lab-danger-soft: #fdecea;
  --lab-safe: #2f7d50;
  --lab-warm: #b26a00;
}

section[id] { scroll-margin-top: 88px; }
.section-head .section-label, .cta-card .section-label { justify-self: start; }
.header-links { display: flex; align-items: center; gap: 16px; }
.header-links a { color: var(--color-text-muted); font-weight: 600; font-size: 0.92rem; }

.page-hero { padding: 56px 0 28px; }
.page-hero h1 {
  max-width: 24ch;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0 0 1.1rem;
}
.page-hero .hero-lead { max-width: 70ch; color: var(--color-text-secondary); font-size: 1.08rem; }
.disclaimer {
  max-width: 70ch;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--color-warm);
  background: var(--color-warm-soft);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.section-tight { padding: 56px 0; }
.muted { color: var(--color-text-muted); }
.card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--color-shadow-soft);
  padding: 1.4rem 1.6rem;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Simulator layout ---- */
.lab-section { padding: 8px 0 40px; }
.lab-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  grid-template-areas: "stage panel" "chart panel";
  gap: 16px;
  align-items: start;
}
.lab-stage {
  grid-area: stage;
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #eef4ef;
  border: 1px solid var(--color-border-strong);
}
.lab-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: grab;
}
.lab-canvas:active { cursor: grabbing; }
.lab-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
.lab-temp {
  display: grid;
  padding: 0.5rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--lab-safe);
  box-shadow: var(--color-shadow-soft);
}
.lab-temp-label { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lab-temp-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--lab-safe); }
.lab-temp[data-level="warm"] { border-color: var(--lab-warm); }
.lab-temp[data-level="warm"] .lab-temp-value { color: var(--lab-warm); }
.lab-temp[data-level="hot"], .lab-temp[data-level="boil"] { border-color: var(--lab-danger); }
.lab-temp[data-level="hot"] .lab-temp-value, .lab-temp[data-level="boil"] .lab-temp-value { color: var(--lab-danger); }
.lab-temp[data-level="boil"] { background: var(--lab-danger-soft); }
.lab-ppe-chips {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 70%;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.lab-ppe-chips li {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.92);
}
.lab-ppe-chips .is-worn { color: var(--lab-safe); }
.lab-ppe-chips .is-missing { color: var(--lab-danger); }
.lab-loading, .lab-fallback {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 460px);
  margin: 0;
  z-index: 1;
  text-align: center;
  color: var(--color-text-muted);
}
.lab-fallback {
  padding: 1.2rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}
.lab-drag-hint {
  position: absolute;
  bottom: 10px;
  right: 12px;
  max-width: 30%;
  margin: 0;
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.lab-panel { grid-area: panel; }
.lab-panel, .lab-chart { margin: 0; }
.lab-panel {
  border: 1px solid var(--color-border);
  background: var(--color-surface-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--color-shadow-soft);
  padding: 1.2rem 1.3rem;
}
.lab-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.lab-steps li {
  counter-increment: step;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.lab-steps li::before { content: counter(step) ". "; }
.lab-steps .is-done { background: var(--color-brand-soft); color: var(--color-brand-deep); }
.lab-steps .is-current { background: var(--color-brand-deep); color: #fff; }
.lab-step-title { font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.lab-step-body p { color: var(--color-text-secondary); }
.lab-step-body .btn { width: 100%; margin-top: 0.4rem; }
.lab-danger { color: var(--lab-danger); }
.lab-warning {
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--lab-danger-soft);
  color: var(--lab-danger);
  font-weight: 600;
}
.lab-warning p { color: var(--lab-danger); margin-bottom: 0.4rem; }
.ppe-grid, .order-grid { display: grid; gap: 8px; margin-bottom: 0.6rem; }
.ppe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppe-btn {
  min-height: 64px;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface-strong);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}
.ppe-btn[aria-pressed="true"] { border-style: solid; border-color: var(--lab-safe); background: #e6f4ea; color: var(--lab-safe); }
.ppe-btn[aria-pressed="true"]::before { content: "✓ "; }
.lab-field { display: block; margin: 0.6rem 0 0.3rem; font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); }
.lab-step-body select {
  width: 100%;
  min-height: 46px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-strong);
  margin-bottom: 0.8rem;
}
.lab-step-body input[type="range"] { width: 100%; min-height: 36px; accent-color: var(--color-brand-deep); }
.lab-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0; font-weight: 600; }
.lab-check input { width: 22px; height: 22px; accent-color: var(--color-brand-deep); }
.lab-actions { display: grid; gap: 4px; }
.lab-step-body .aid-list { padding-left: 1.1rem; }
.lab-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); }
.lab-toolbar .btn { flex: 1 1 140px; min-height: 44px; padding: 0.5rem 0.9rem; }

/* Without WebGL the stage holds text only, so let it flow instead of overlaying a canvas. */
.lab-stage.is-fallback { aspect-ratio: auto; height: auto; max-height: none; display: grid; gap: 10px; padding: 12px; }
.lab-stage.is-fallback .lab-hud,
.lab-stage.is-fallback .lab-fallback,
.lab-stage.is-fallback .lab-ppe-chips { position: static; transform: none; width: auto; max-width: none; }
.lab-stage.is-fallback .lab-hud { justify-content: flex-start; }
body.projector-mode .lab-stage.is-fallback { height: auto; aspect-ratio: auto; }

/* ---- Chart ---- */
.lab-chart { grid-area: chart; padding: 0.9rem 1rem; }
.lab-chart svg { width: 100%; height: auto; max-height: 340px; display: block; }
.lab-chart figcaption { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.4rem; }
.chart-grid { stroke: rgba(19, 39, 29, 0.08); }
.chart-axis { stroke: rgba(19, 39, 29, 0.35); }
.chart-tick, .chart-legend, .chart-note { font-size: 10px; fill: var(--color-text-muted); font-family: var(--font-body); }
.chart-legend { fill: var(--color-text); font-weight: 600; }
.chart-note { fill: var(--lab-danger); font-weight: 700; }
.chart-boil { stroke: var(--lab-danger); stroke-dasharray: 5 4; stroke-width: 1.2; }
.chart-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.chart-right { stroke: var(--lab-safe); }
.chart-line.chart-wrong { stroke: var(--lab-danger); }
.chart-ghost { opacity: 0.3; stroke-dasharray: 4 4; stroke-width: 2; }
.chart-key.chart-right, .chart-marker.chart-right { fill: var(--lab-safe); }
.chart-key.chart-wrong, .chart-marker.chart-wrong { fill: var(--lab-danger); }
.chart-marker { stroke: #fff; stroke-width: 2; }

/* ---- Content sections ---- */
.section-title { max-width: 26ch; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.reason-list, .aid-list, .source-list { display: grid; gap: 0.7rem; max-width: 78ch; }
.reason-list li, .aid-list li, .source-list li { color: var(--color-text-secondary); }
.source-list a, .muted a, #chuong-trinh a { color: var(--color-brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.rule-box {
  max-width: 78ch;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand-deep);
  font-size: 1.05rem;
}
.data-table { margin-top: 1.2rem; border-collapse: collapse; min-width: min(100%, 460px); background: var(--color-surface-strong); }
.data-table caption { text-align: left; font-weight: 700; padding-bottom: 0.4rem; }
.data-table th, .data-table td { border: 1px solid var(--color-border-strong); padding: 0.4rem 0.7rem; text-align: right; font-family: var(--font-mono); }
.data-table th { font-family: var(--font-body); text-align: left; }
.cta-card h2 { margin-top: 0.9rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.cta-card .btn { margin-top: 0.4rem; }

/* ---- Quiz ---- */
.quiz { display: grid; gap: 14px; max-width: 760px; }
.quiz-q { margin: 0; }
.quiz-q legend { float: left; width: 100%; padding: 0; margin-bottom: 0.7rem; font-weight: 700; font-size: 1.05rem; }
.quiz-q legend + label { clear: both; }
.quiz-q label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.8rem;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-strong);
  cursor: pointer;
}
.quiz-q input { margin-top: 0.3rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-brand-deep); }
.quiz-q label.is-answer { border: 2px solid var(--lab-safe); background: #e6f4ea; }
.quiz-q label.is-picked-wrong { border: 2px solid var(--lab-danger); background: var(--lab-danger-soft); }
.quiz-explain { margin: 0.6rem 0 0; color: var(--color-text-secondary); }
.quiz-q[data-state="correct"] .quiz-explain { color: var(--lab-safe); }
.quiz-q[data-state="wrong"] .quiz-explain { color: var(--lab-danger); }
.quiz-summary p { font-weight: 700; font-size: 1.1rem; }

/* ---- Projector mode: large text and controls ---- */
body.projector-mode { font-size: 120%; }
body.projector-mode .site-header { display: none; }
body.projector-mode .lab-shell { width: calc(100% - 32px); max-width: none; grid-template-columns: minmax(0, 1.8fr) minmax(380px, 1fr); }
body.projector-mode #mo-phong { scroll-margin-top: 0; }
body.projector-mode .lab-stage { aspect-ratio: auto; height: calc(100vh - 24px); }
body.projector-mode .lab-temp-label { font-size: 0.95rem; }
body.projector-mode .lab-temp-value { font-size: 3.2rem; }
body.projector-mode .lab-step-title { font-size: 1.9rem; }
body.projector-mode .lab-step-body p, body.projector-mode .lab-step-body li { font-size: 1.2rem; }
body.projector-mode .btn { min-height: 60px; font-size: 1.15rem; }
body.projector-mode .ppe-btn { min-height: 84px; font-size: 1.15rem; }
body.projector-mode .lab-steps li { font-size: 1rem; }
body.projector-mode .chart-tick, body.projector-mode .chart-legend, body.projector-mode .chart-note { font-size: 12px; }

@media (max-width: 900px) {
  .lab-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "panel" "chart"; }
  .lab-stage { aspect-ratio: 4 / 3; max-height: 64vh; }
  body.projector-mode .lab-shell { grid-template-columns: minmax(0, 1fr); }
  body.projector-mode .lab-stage { aspect-ratio: 1 / 1; height: auto; max-height: 70vh; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .header-links a:not(:last-child) { display: none; }
  .page-hero { padding-top: 32px; }
  .lab-temp { padding: 0.3rem 0.6rem; }
  .lab-temp-label { font-size: 0.62rem; }
  .lab-temp-value { font-size: 1.35rem; }
  .lab-ppe-chips li { font-size: 0.68rem; padding: 0.12rem 0.45rem; }
  .lab-drag-hint { font-size: 0.7rem; }
  .ppe-btn { min-height: 56px; font-size: 0.9rem; }
  .section-tight { padding: 40px 0; }
}