/* True North Star shared visual foundation — additive to the existing page styles. */
:root {
  --tns-navy: #08233f;
  --tns-ink: #102b46;
  --tns-muted: #687b8e;
  --tns-line: #dfe7ee;
  --tns-bg: #f4f7fa;
  --tns-surface: #ffffff;
  --tns-gold: #c99a36;
  --tns-teal: #147a73;
  --tns-blue: #17679a;
  --tns-sky: #eaf5fb;
  --tns-success: #087443;
  --tns-warning: #9a6700;
  --tns-danger: #b42318;
  --tns-radius-sm: 8px;
  --tns-radius-md: 12px;
  --tns-radius-lg: 16px;
  --tns-shadow-sm: 0 2px 8px rgba(8,35,63,.06);
  --tns-shadow-md: 0 12px 32px rgba(8,35,63,.10);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(201,154,54,.55);
  outline-offset: 2px;
}
.btn, button { min-height: 40px; }
.btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--tns-shadow-sm); }
.btn:active { transform: translateY(0); }
.panel, .metric, .item, .course-card, .assignment, .resource, .module, .session, .project-card {
  box-shadow: var(--tns-shadow-sm);
}
.panel h2, .panel h3, .view-head h2 { letter-spacing: -.015em; }
.sub { line-height: 1.65; }
.empty { background: rgba(255,255,255,.72); line-height: 1.6; }
.status, .chip { white-space: nowrap; }
.table-wrap { border-radius: var(--tns-radius-md); }
th { white-space: nowrap; }
input, select, textarea { transition: border-color .16s ease, box-shadow .16s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--tns-blue); box-shadow: 0 0 0 3px rgba(23,103,154,.12); outline: 0; }
.mobile-menu-toggle { display: none; border: 1px solid var(--tns-line); background: var(--tns-surface); color: var(--tns-navy); border-radius: 10px; padding: 8px 11px; margin-right: 12px; font-weight: 800; cursor: pointer; }
.mobile-menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 3px 0; }
.side-dim { display:none; }
@media (max-width: 600px) {
  .mobile-menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; }
  .top { gap: 8px; }
  .top > div:first-child { min-width: 0; }
  .top h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side.mobile-open { display: block !important; position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(280px, 82vw); overflow-y: auto; box-shadow: var(--tns-shadow-md); }
  .side-dim.active { display: block; position: fixed; z-index: 20; inset: 0; background: rgba(8,35,63,.35); }
  .nav button { min-height: 44px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel, .metric, .item { border-radius: var(--tns-radius-md); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}