/* CHRVVIM CAMPUS — responsive and accessibility polish layer.
   Deliberately additive: the main visual system and existing app behavior stay intact. */
:root {
  --cc-focus: #1676a8;
  --cc-focus-dark: #7bd7ff;
  --cc-radius-card: 1.15rem;
  --cc-motion-fast: 150ms;
}

html { scroll-padding-block-start: 6rem; }
body { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }

/* Strong, consistent keyboard focus without suppressing browser focus visibility. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 3px;
}
:root[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--cc-focus-dark);
}

/* Keep horizontally scrollable navigation usable on touch and keyboard. */
.layout .tabs {
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
}
.layout .tabs > .tab { scroll-snap-align: start; min-height: 44px; }

/* Clear, predictable interactions for the quick-access cards. */
.quick-card { min-width: 0; min-height: 88px; overflow-wrap: anywhere; }
.quick-card:active, .hero-action:active { transform: translateY(0); }
.quick-icon { user-select: none; }
.quick-copy small { line-height: 1.55; }
.quick-foot a, footer a, .footer-links a { text-underline-offset: .2em; }

/* Avoid accidental clipping and improve compact layouts. */
@media (max-width: 520px) {
  .home-quick { border-radius: 18px; }
  .quick-card { gap: 10px; }
  .quick-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .layout .tabs { margin-inline: -2px; }
}
@media (max-width: 360px) {
  .quick-card { padding: 10px; }
  .quick-copy b { font-size: .92rem; }
  .quick-copy small { font-size: .74rem; }
  .hero-action { overflow-wrap: anywhere; }
}

/* Never force motion on visitors who request reduced animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .ticker-scrolling .ticker-text { animation: none !important; transform: none !important; }
}
