/* ================================================================
   PURPLE UX POLISH — U-MILBASE.uxpolish  (2026-05-17)
   Separate stylesheet; linked as last <link> in each page = merge-proof.
   Purple lane only — no logic or data changes.
   ================================================================ */

/* ── skip to main content (keyboard / screen-reader a11y) ─────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #58a6ff;
  color: #0d1117;
  text-decoration: none;
  font: 600 .9rem system-ui, sans-serif;
  padding: 10px 18px;
  border-radius: 0 0 6px 0;
  z-index: 9999;
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  clip: auto;
  outline: none;
}

/* ── focus rings (WCAG 2.4.7 — every focusable element) ───────── */
/* Global rule; !important overrides any outline:none in base styles */
*:focus-visible {
  outline: 2px solid #58a6ff !important;
  outline-offset: 2px !important;
}

/* ── minimum touch target sizes (WCAG 2.5.5 — 44×44 dp) ──────── */
.tab-btn   { min-height: 36px; min-width: 64px; }
.ctrl-btn  { min-height: 30px; }
.sort-btn  { min-height: 28px; }
.branch-btn{ min-height: 26px; }

/* ── reset button: bigger (UI TWEAK QUEUE — "larger padding/font, clearly tappable") */
#reset-btn {
  padding: 8px 16px !important;
  font-size: 12px !important;
  min-height: 44px !important;
  min-width: 72px !important;
  letter-spacing: .02em;
}

/* ── empty state improvement — directional arrow hint ─────────── */
#detail.empty {
  flex-direction: column;
  gap: 8px;
}
#detail.empty::before {
  content: '←';
  font-size: 1.6rem;
  color: #30363d;
  display: block;
}

/* ── loading state — list placeholder text ────────────────────── */
#list-items:empty::before {
  content: 'Loading installations…';
  display: block;
  padding: 24px 14px;
  color: #484f58;
  font-size: .82rem;
}

/* ── map iframe: clean sizing, no default border ──────────────── */
#map-panel iframe {
  border: none;
  outline: none;
}

/* ── responsive: stack two panes on narrow screens ────────────── */
@media (max-width: 900px) {
  body {
    overflow: auto !important;
    height: auto !important;
  }
  #app {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  #left {
    border-right: none !important;
    border-bottom: 1px solid #21262d;
  }
  #map-panel {
    min-height: 50vh;
    border-top: 1px solid #21262d;
  }
}
@media (max-width: 600px) {
  #left {
    grid-template-columns: 1fr !important;
  }
  #list {
    border-right: none !important;
    border-bottom: 1px solid #21262d;
    max-height: 280px;
  }
  header {
    flex-wrap: wrap;
    gap: 8px;
  }
  #tab-bar {
    margin-left: 0 !important;
    width: 100%;
  }
  .tab-btn {
    flex: 1;
    text-align: center;
  }
  /* Smaller font sizes are hard to read on mobile */
  .base-name  { font-size: .88rem; }
  .base-meta  { font-size: .78rem; }
  #base-info  { font-size: .82rem; }
}

/* ── college-view shell: hide dev-facing ticket text; show clean empty state ─ */
#college-view span { display: none !important; }
#college-view::after {
  content: 'US College Explorer — data pipeline building';
  color: #6e7681; font-size: .88rem; text-align: center; max-width: 280px; line-height: 1.5;
}

/* ── contrast fixes: bump #30363d / #484f58 → #6e7681 (≥4.5:1 on #0d1117) */
#global-scale-note, .null-val, .sort-pill, .rank-badge,
#footer, #attrib, #attrib a { color: #6e7681 !important; }
#detail.empty::before { color: #484f58 !important; }
#list-items:empty::before { color: #6e7681 !important; }

/* ── about.html + methodology.html: bump --text3 (#484f58) selectors → #6e7681 */
.section-meta, .src-badge, .hdr-badge,
.label-provisional, .card .tag { color: #6e7681 !important; }
/* methodology.html table headers + pending badge use --text3 */
.src-table th, .cov-table th, .badge-pending { color: #6e7681 !important; }
/* ── index.html axis form labels + branch bar label use #484f58 */
#ab-axis-form label, #branch-bar span, .pg-group-label { color: #6e7681 !important; }

/* ── 5-project top nav: touch targets + current-page indicator ─── */
#proj-nav a {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center !important;
}
#proj-nav a[aria-current="page"] {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* ── U-MILBASE.cachebust: build stamp in header/attrib ─────────── */
#purple-build {
  font-size: 9px;
  color: #484f58;
  margin-left: auto;
  white-space: nowrap;
  cursor: help;
  user-select: none;
}