/* NC Zoning Academy — base + shared primitives.
 *
 * Layout and component styles. Uses native CSS nesting (like the map).
 * Everything references the semantic custom properties in theme.css — no
 * hardcoded colour here, so a theme swap re-skins the whole app.
 *
 * View-specific styles (dashboard, module player, radio panel, certificate)
 * live in their own files under assets/css/ and are added as views are rebuilt.
 */

/* ---- reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; /* monolith base; the app shell scrolls internally */
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* post-login app shell: header + view; each view owns its scroll container */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

button,
a,
input,
label,
[role="button"] {
  touch-action: manipulation;
}

/* ---- links (invert on hover, like the shell) ---- */
a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);

  &:hover {
    color: var(--bg);
    background: var(--primary);
    border-bottom-color: var(--primary);
  }
}

/* touch devices must not keep the inverted state after a tap */
@media (hover: none) {
  a:hover {
    color: var(--primary);
    background: transparent;
    border-bottom-color: var(--line-strong);
  }
}

/* ---- form fields ---- */
input::placeholder {
  color: var(--placeholder);
}

/* ---- scrollbars ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 1px solid var(--line);

  &:hover {
    background: var(--scrollbar-thumb-hover);
  }
}

/* ---- global CRT overlays ---- */
#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background: repeating-linear-gradient(
    0deg,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9989;
  background: radial-gradient(ellipse at center, transparent 55%, var(--vignette) 100%);
}

/* ---- app-wide micro-animations ---- */
@keyframes cursorblink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  background: var(--primary);
  margin-left: 2px;
  vertical-align: -2px;
  animation: cursorblink 1s steps(1) infinite;
}

@keyframes ledblink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.ledblink {
  animation: ledblink 1.1s steps(2, jump-none) infinite;
}

@keyframes statusblink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.statusled {
  animation: statusblink 2s ease infinite;
}

/* radio pill EQ bars (duration/delay set inline per bar off the track bpm) */
@keyframes eqbar {
  0% { transform: scaleY(0.18); }
  100% { transform: scaleY(1); }
}

/* bouncing marquee for overflowing track names; --mqd set from measured overflow */
@keyframes mqbounce {
  0%, 14% { transform: translateX(0); }
  86%, 100% { transform: translateX(var(--mqd, 0)); }
}

/* ---- accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  #scanlines { display: none; }
  .ledblink,
  .cursor { animation: none !important; }
}

/* ---- responsive (values measured from the monolith's media blocks) ---- */
/* Tablet (≤1024px): drop the clearance cluster, tighten the dash padding */
@media (max-width: 1024px) {
  .hdr-clearance { display: none !important; }
  .dash-scroll { padding: 36px 24px 54px !important; }
}

/* Phone (≤640px): wrapping header, single-column grids, finger targets */
@media (max-width: 640px) {
  .app-header {
    height: auto !important;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 14px !important;
  }
  .sys-readout { display: none !important; }
  .hdr-sub { display: none !important; }
  .hdr-clearance { display: none !important; }
  .hdr-brand-title { font-size: 15px !important; }
  .hdr-brand { width: 100%; }
  .hdr-nav {
    order: 2;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hdr-nav button { min-height: 40px; white-space: nowrap; }
  .hdr-meta { order: 3; margin-left: auto; gap: 10px !important; }
  /* glossary moves into the header row; the fixed floater hides */
  .gloss-fab { display: none !important; }
  .gloss-hdr { display: inline-flex !important; padding: 7px 11px !important; min-height: 40px; }

  .dash-scroll { padding: 22px 15px 46px !important; }
  .dash-h1 { font-size: 25px !important; }
  .dash-lead { font-size: 14px !important; }
  .course-grid { grid-template-columns: 1fr !important; }

  button { min-height: 44px; }
  input:not([type="file"]) { min-height: 44px; }
}