/* Match the CVLE211 laboratory while retaining the supplied solver layout. */
:root {
  --primary: #087f8c;
  --primary-dark: #102a43;
  --primary-light: #dff3f2;
}
.lab-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 10px max(16px, calc((100% - 868px) / 2));
  background: #102a43;
  font-size: .82rem;
}
.lab-navigation a { color: #d7f5f3; text-underline-offset: 3px; }
.lab-skip { position: fixed; top: -80px; left: 12px; z-index: 1100; padding: 10px 14px; background: white; color: #102a43; }
.lab-skip:focus { top: 12px; }
:is(a, button, input, select, [role="button"]):focus-visible { outline: 3px solid #d97706; outline-offset: 3px; }
.header-brand > div { min-width: 0; }
.hero-title { font-size: clamp(1.6rem, 5vw, 2.5rem); line-height: 1.2; }
.hero-subtitle { color: #526776; margin-top: 12px; }
.main-container, .card, .topic-item-info { min-width: 0; }
@media (max-width: 480px) {
  .header-title { font-size: 1.05rem; }
  .header-logo { width: 30px; height: 30px; }
  .app-bar-content, .header-brand { gap: 8px; }
  .main-container { padding: 10px; }
  .card { padding: 14px; }
  .resolve-inputs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}