/* atlas.css — HUD primitives (corner brackets, label kickers, archive panels)
 * Use sparingly. These are not for every page — only for class shells, mistake
 * panels, and any future Atlas-styled views.
 */

/* ── HUD label kicker (small uppercase metadata strip, math/serif feel) ──
 * Uses --font-math (Latin Modern Math → STIX → Cambria → Georgia) for an
 * academic/equation visual register. Math fonts don't always carry styled
 * uppercase Latin glyphs; the fallbacks (Cambria, Georgia) supply those.
 */
.hud-label {
  font-family: var(--font-math);
  font-size: var(--hud-fs);
  letter-spacing: var(--hud-tracking);
  color: var(--hud-color);
  text-transform: uppercase;
  user-select: none;
  font-weight: 500;
}

.hud-label .sep {
  margin: 0 8px;
  color: var(--text-4);
}

.hud-label.accent { color: var(--accent-weak); }

/* ── Corner brackets (technical-instrument frame) ─────────────────── */
.atlas-frame {
  position: relative;
}

.atlas-frame::before,
.atlas-frame::after,
.atlas-frame > .corner-bl,
.atlas-frame > .corner-br {
  content: "";
  position: absolute;
  width: var(--bracket-size);
  height: var(--bracket-size);
  pointer-events: none;
}

.atlas-frame::before {
  top: var(--bracket-inset);
  left: var(--bracket-inset);
  border-top: var(--bracket-thickness) solid var(--bracket-color);
  border-left: var(--bracket-thickness) solid var(--bracket-color);
}

.atlas-frame::after {
  top: var(--bracket-inset);
  right: var(--bracket-inset);
  border-top: var(--bracket-thickness) solid var(--bracket-color);
  border-right: var(--bracket-thickness) solid var(--bracket-color);
}

.atlas-frame > .corner-bl {
  bottom: var(--bracket-inset);
  left: var(--bracket-inset);
  border-bottom: var(--bracket-thickness) solid var(--bracket-color);
  border-left: var(--bracket-thickness) solid var(--bracket-color);
}

.atlas-frame > .corner-br {
  bottom: var(--bracket-inset);
  right: var(--bracket-inset);
  border-bottom: var(--bracket-thickness) solid var(--bracket-color);
  border-right: var(--bracket-thickness) solid var(--bracket-color);
}

/* ── Archive panel (floating index / mistake list) ────────────────── */
.archive-panel {
  background: var(--panel-archive-bg);
  border: 1px solid var(--panel-archive-border);
  padding: var(--panel-archive-padding);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.archive-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.archive-row:last-child { border-bottom: 0; }
.archive-row .marker { color: var(--text-3); }
.archive-row .label  { color: var(--text-2); }
.archive-row .count  { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── Optional blueprint grid background (apply to body or section) ── */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}