/* ============================================================
   Medcue — shared app top navigation, VITALS skin.
   Rendered by /js/topnav.js into <div id="topnav">.

   Self-contained: every token is defined locally on #topnav so the
   bar reads as the dark clinical monitor on EVERY app page, whether
   the page has moved to the Vitals tokens or still loads an older
   shell stylesheet. Mint carries navigation and upgrade actions;
   the sunrise spectrum is reserved for the learner's daily progress.
   One rule weight: 1px hairline.
   ============================================================ */

#topnav {
  --tn-ink: #0B1620;
  --tn-panel: #12222E;
  --tn-panel-2: #183041;
  --tn-line: #22394A;
  --tn-line-2: #2E4E63;
  --tn-fg: #E9F1F5;
  --tn-fg-2: #A7BCC8;
  --tn-mint: #5EEAD4;
  --tn-mint-ink: #072019;
  --tn-amber: #F4B740;
  --tn-display: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --tn-body: 'Hanken Grotesk', 'Hanken Grotesk Fallback', -apple-system, 'Segoe UI', Arial, sans-serif;
  --tn-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* focus — the bar carries its own visible ring on every shell */
#topnav a:focus-visible,
#topnav button:focus-visible {
  outline: 2px solid var(--tn-mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- the bar ---- */
#topnav .topbar.tnav {
  position: relative;
  top: auto;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 60px;
  background: rgba(11, 22, 32, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tn-line);
  box-shadow: none;
  padding: 8px 24px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-left: calc(24px + env(safe-area-inset-left, 0px));
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
}

/* ---- brand / wordmark — Space Grotesk 700, fg ---- */
.tnav-brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 2px 0;
  border-radius: 6px;
  white-space: nowrap;
  flex: none;
}
.tnav-brand:hover {
  background: transparent;
}
.tnav-brand:hover .tnav-word {
  color: var(--tn-mint);
}
/* Reading M: the open reading form and its reference tab. */
.tnav-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
}
.tnav-mark img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}
.tnav-mark__dark { display: none !important; }
html[data-theme='dark'] .tnav-mark__light { display: none !important; }
html[data-theme='dark'] .tnav-mark__dark { display: block !important; }
.tnav-word {
  font-family: var(--tn-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tn-fg);
  line-height: 1;
  transition: color 150ms ease;
}
/* ---- primary nav links ---- */
.tnav-links {
  order: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tnav-links::-webkit-scrollbar {
  display: none;
}
.tnav-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tn-fg-2);
  font-family: var(--tn-body);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 6px;
  min-height: 44px;
  transition: color 150ms ease, background-color 150ms ease;
}
.tnav-link:hover {
  color: var(--tn-fg);
  background: var(--tn-panel-2);
}
/* the active section — one of the two mint moments in the bar */
.tnav-link[aria-current='page'] {
  color: var(--tn-mint);
  font-weight: 600;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  text-decoration-color: var(--tn-mint);
}
.tnav-link[aria-current='page']:hover {
  background: transparent;
}

/* ---- right cluster: chips, upgrade, account ---- */
.tnav-right {
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}

/* telemetry chips — mono metadata, hairline-bordered */
.tnav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--tn-line-2);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--tn-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-fg-2);
  white-space: nowrap;
  min-height: 32px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
a.tnav-chip {
  min-height: 44px;
}
a.tnav-chip:hover {
  background: var(--tn-panel-2);
  border-color: var(--tn-line-2);
  color: var(--tn-fg);
}
.tnav-star {
  color: var(--tn-mint);
  font-size: 12px;
  line-height: 1;
}
.tnav-saved b {
  font-weight: 600;
  color: var(--tn-fg);
}

/* days-left chip states — amber text when it matters */
.tnav-days::before {
  content: none;
}
.tnav-days.is-trial {
  color: var(--tn-fg-2);
  border-color: var(--tn-line-2);
  background: transparent;
}
.tnav-days.is-warn {
  color: var(--tn-amber);
  border-color: var(--tn-amber);
  background: transparent;
}

/* upgrade CTA — the bar's single filled action */
.tnav-up {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: var(--tn-mint);
  color: var(--tn-mint-ink);
  font-family: var(--tn-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  border: 1px solid var(--tn-mint);
  border-radius: 8px;
  padding: 8px 16px;
  min-height: 40px;
  white-space: nowrap;
  box-shadow: 0 6px 18px -10px rgba(94, 234, 212, 0.65);
  transition: transform 150ms ease, box-shadow 200ms ease, filter 150ms ease;
}
.tnav-up:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(94, 234, 212, 0.8);
  color: var(--tn-mint-ink);
  filter: none;
}
.tnav-up:active {
  transform: translateY(0);
  filter: none;
}

/* ---- account menu ---- */
.tnav-usermenu {
  position: relative;
  flex: none;
}
.tnav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--tn-line-2);
  background: var(--tn-panel);
  color: var(--tn-fg);
  font-family: var(--tn-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.tnav-avatar:hover {
  border-color: var(--tn-mint);
  color: var(--tn-mint);
  background: var(--tn-panel-2);
}
.tnav-avatar[aria-expanded='true'] {
  background: var(--tn-mint);
  border-color: var(--tn-mint);
  color: var(--tn-mint-ink);
}

.tnav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 224px;
  max-width: 78vw;
  background: var(--tn-panel);
  border: 1px solid var(--tn-line-2);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 44px -18px rgba(0, 0, 0, 0.75);
  padding: 4px;
  z-index: 70;
}
.tnav-menu[hidden] {
  display: none;
}
.tnav-menu-id {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--tn-line);
  margin-bottom: 4px;
}
.tnav-menu-id b {
  display: block;
  font-family: var(--tn-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tn-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tnav-menu-id span {
  display: block;
  font-family: var(--tn-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--tn-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
}
.tnav-daily-progress {
  min-width: 0;
  margin: 0 0 4px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--tn-line);
  color: var(--tn-fg-2);
}
.tnav-daily-progress[hidden] {
  display: none;
}
.tnav-daily-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-family: var(--tn-body);
  font-size: 11px;
  line-height: 1.25;
}
.tnav-daily-progress__head span {
  color: var(--tn-fg-2);
  font-weight: 600;
}
.tnav-daily-progress__head strong {
  min-width: 0;
  color: var(--tn-fg);
  font-family: var(--tn-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.tnav-daily-progress__bar {
  min-width: 0;
  margin-top: 8px;
}
.tnav-daily-progress__svg {
  display: block;
  width: 100%;
  height: 10px;
  overflow: visible;
}
.tnav-daily-progress__track {
  fill: var(--tn-line);
}
.tnav-daily-progress__fill {
  transition: width 220ms ease;
}
.tnav-daily-progress__sun {
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 201, 51, 0.42));
  transition: x1 220ms ease, x2 220ms ease, opacity 120ms ease;
}
.tnav-daily-progress__complete {
  display: block;
  margin-top: 7px;
  color: #FFD66A;
  font-family: var(--tn-body);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.tnav-daily-progress__loading {
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--tn-line);
}
@media (prefers-reduced-motion: reduce) {
  .tnav-daily-progress__fill,
  .tnav-daily-progress__sun {
    transition: none;
  }
}
.tnav-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--tn-fg);
  font-family: var(--tn-body);
  font-size: 15px;
  font-weight: 500;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.tnav-menu-item:hover {
  background: var(--tn-panel-2);
  color: var(--tn-fg);
}
.tnav-logout {
  color: var(--tn-fg-2);
}
.tnav-logout:hover {
  background: var(--tn-panel-2);
  color: var(--tn-fg);
}

/* ---- contextual resource index ---- */
.tnav-app-shell {
  --tn-resource-bg: var(--cue-paper, #f4f6ff);
  --tn-resource-surface: var(--cue-white, #fff);
  --tn-resource-ink: var(--cue-ink, #111a2e);
  --tn-resource-muted: var(--cue-ink-soft, #4d5870);
  --tn-resource-line: var(--cue-line, #b7c4f0);
  --tn-resource-blue: var(--cue-blue, #173cff);
  --tn-resource-citron: var(--cue-citron, #d9ff57);
  display: grid;
  grid-template-columns: minmax(204px, 236px) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.tnav-app-main {
  min-width: 0;
  width: 100%;
}
.tnav-resources {
  position: sticky;
  top: 66px;
  z-index: 20;
  align-self: start;
  height: calc(100vh - 66px);
  overflow-y: auto;
  padding: 30px 18px 48px;
  background: var(--tn-resource-surface);
  border-right: 2px solid var(--tn-resource-ink);
  color: var(--tn-resource-ink);
  font-family: var(--cue-body, var(--tn-body));
}
.tnav-resource-toggle {
  display: none;
}
.tnav-resource-panel[hidden] {
  display: none;
}
.tnav-resource-group + .tnav-resource-group {
  margin-top: 28px;
}
.tnav-resource-heading {
  margin: 0 0 8px;
  color: var(--tn-resource-blue);
  font-family: var(--cue-display, var(--tn-display));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tnav-resource-links {
  display: grid;
  gap: 3px;
}
.tnav-resource-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tn-resource-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.tnav-resource-link:hover {
  color: var(--tn-resource-ink);
  background: var(--tn-resource-bg);
  border-color: var(--tn-resource-line);
}
.tnav-resource-link[aria-current='page'] {
  color: var(--tn-resource-ink);
  background: var(--tn-resource-citron);
  border-color: var(--tn-resource-ink);
  box-shadow: 3px 3px 0 var(--tn-resource-ink);
}
.tnav-resources a:focus-visible,
.tnav-resources button:focus-visible {
  outline: 3px solid var(--tn-resource-blue);
  outline-offset: 3px;
}

/* ---- responsive: links drop to a scrollable second row ---- */
@media (max-width: 760px) {
  #topnav .topbar.tnav {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .tnav-right {
    order: 2;
  }
  .tnav-links {
    order: 4;
    flex-basis: 100%;
    margin-top: 2px;
  }
  .tnav-link[aria-current='page'] {
    text-underline-offset: 5px;
  }
  .tnav-app-shell {
    display: block;
  }
  .tnav-resources {
    position: relative;
    top: auto;
    z-index: 35;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 12px 16px;
    background: var(--tn-resource-bg);
    border-right: 0;
    border-bottom: 2px solid var(--tn-resource-ink);
  }
  .tnav-resource-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 2px solid var(--tn-resource-ink);
    border-radius: 8px;
    background: var(--tn-resource-surface);
    color: var(--tn-resource-ink);
    font-family: var(--cue-display, var(--tn-display));
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .tnav-resource-current {
    min-width: 0;
    overflow: hidden;
    color: var(--tn-resource-blue);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tnav-resource-current::before {
    content: '· ';
    color: var(--tn-resource-muted);
  }
  .tnav-resource-chevron {
    margin-left: auto;
    font-size: 19px;
    line-height: 1;
    transition: transform 150ms ease;
  }
  .tnav-resource-toggle[aria-expanded='true'] .tnav-resource-chevron {
    transform: rotate(180deg);
  }
  .tnav-resource-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 12px;
    padding: 16px 12px 12px;
    border: 1px solid var(--tn-resource-line);
    border-radius: 8px;
    background: var(--tn-resource-surface);
  }
  .tnav-resource-group + .tnav-resource-group {
    margin-top: 0;
  }
}
@media (max-width: 480px) {
  .tnav-saved {
    display: none;
  }
  .tnav-right {
    gap: 6px;
  }
  .tnav-up {
    font-size: 12.5px;
    padding: 6px 12px;
  }
  .tnav-resource-panel {
    grid-template-columns: 1fr;
  }
}

/* the dark monitor chrome renders identically on every shell — no theme fork */

@media (prefers-reduced-motion: reduce) {
  #topnav .tnav-brand,
  #topnav .tnav-link,
  #topnav .tnav-chip,
  #topnav .tnav-up,
  #topnav .tnav-avatar,
  #topnav .tnav-menu-item,
  .tnav-resource-link,
  .tnav-resource-chevron {
    transition: none;
  }
  #topnav .tnav-up:hover {
    transform: none;
  }
}