/* ═══════════════════════════════════════════════════════════════════════════
   THE APP HEADER — one definition, used by every page that isn't the landing.

   Before this file, three headers existed: the dashboard's (#nav, logo images,
   sliding theme toggle), the coaching console's (.topbar, the word "BoardAlgo"
   set in Playfair, an icon toggle) and the evaluator's (a Tailwind h-16 bar).
   Same product, three front doors. This is the dashboard's, extracted verbatim
   so it stays the reference rather than becoming a fourth dialect.

   IT MUST WORK UNDER TWO TOKEN SETS. The dashboard views name their surfaces
   --bg1/--bg3/--bg4 and their nav fill --nb; views/partials/coaching-ui.ejs
   names the same things --s1/--s3/--s4 and --nav. Rather than force either to
   rename (which would touch thousands of lines of working markup), every
   surface below is written as var(--dash, var(--coaching, literal)) — the
   dash token if the page defines one, the coaching token otherwise, and a
   hard-coded value if the stylesheet is ever loaded somewhere with neither.

   POSITIONING is sticky, not fixed. Visually identical at the top of a
   document, but sticky keeps the bar in flow, so a page adopting this header
   needs no compensating padding-top and can never hide its own first heading
   underneath it. Pages that genuinely need the content to scroll beneath the
   bar add .nav-fixed and supply their own offset.
   ═══════════════════════════════════════════════════════════════════════════ */

#nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 80px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--nb, var(--nav, rgba(8, 8, 26, .92)));
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--br, rgba(124, 58, 237, .14));
}
#nav.nav-fixed { position: fixed; left: 0; right: 0; }

/* ── Logo ─────────────────────────────────────────────────────────────────
   Two files, one shown per theme. The art is 1.45:1 inside a square box, so
   the 100px box renders ~69px of ink — which is why it sits comfortably in an
   80px bar despite the numbers looking like they shouldn't. */
.nlogo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.nlogo-img { width: 100px; height: 100px; object-fit: contain; display: block; }
[data-theme] .logo-dk { display: block; }
[data-theme] .logo-lg { display: none; }
[data-theme="light"] .logo-dk { display: none; }
[data-theme="light"] .logo-lg { display: block; }

/* An optional word after the logo naming the surface you're on — "Review",
   "Report", "Admin". Set in mono at eyebrow size so it reads as a label on the
   product rather than as part of the wordmark. */
.nlogo-tag {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t3, #7b72b0);
  border: 1px solid var(--br-md, rgba(124, 58, 237, .26));
  background: var(--pg, rgba(124, 58, 237, .12));
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Right cluster ────────────────────────────────────────────────────────── */
.nav-mid { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nr { display: flex; align-items: center; gap: 12px; min-width: 0; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--br-md, rgba(124, 58, 237, .26));
  background: var(--bg1, var(--s1, #0d0d22));
  color: var(--t2, #a89fd6);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.nav-link:hover { border-color: var(--pd, var(--br-hi, rgba(124, 58, 237, .45))); color: var(--pb, #9061f9); }
.nav-link i, .nav-link svg { width: 14px; height: 14px; flex-shrink: 0; }

.nicon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--br-md, rgba(124, 58, 237, .26));
  background: var(--bg1, var(--s1, #0d0d22));
  color: var(--t2, #a89fd6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.nicon-btn:hover { border-color: var(--pd, var(--br-hi, rgba(124, 58, 237, .45))); color: var(--pb, #9061f9); transform: translateY(-1px); }
.nicon-btn i, .nicon-btn svg { width: 16px; height: 16px; }

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, .3);
  background: rgba(248, 113, 113, .06);
  color: var(--red, #f87171);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s;
}
.logout-btn:hover { background: rgba(248, 113, 113, .14); color: var(--red, #f87171); }
.logout-btn i, .logout-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Identity chip ────────────────────────────────────────────────────────── */
.uchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 1px solid var(--br, rgba(124, 58, 237, .14));
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  transition: opacity .2s;
}
.uchip:hover { opacity: .8; }
.uchip-txt { text-align: right; min-width: 0; }
.uchip-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1, #ede9ff);
  line-height: 1.2;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uchip-plan {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pb, #9061f9);
  margin-top: 2px;
}
.avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p, #7c3aed), var(--sec, #3b82f6));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--serif, 'Playfair Display', Georgia, serif);
  font-weight: 700;
  font-size: 16px;
  border: 2px solid var(--pd, var(--br-hi, rgba(124, 58, 237, .45)));
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
.t3d-toggle {
  width: 60px;
  height: 30px;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.t3d-track {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--bg3, var(--s3, #1a1a3e)), var(--bg4, var(--s4, #22224e)));
  border: 1px solid var(--br-md, rgba(124, 58, 237, .26));
  transition: background .3s, border-color .3s;
}
.t3d-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c4b5fd, #ede9ff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s;
}
.t3d-knob svg { width: 11px; height: 11px; stroke: var(--p, #7c3aed); fill: none; stroke-width: 2; }
[data-theme="light"] .t3d-track { background: linear-gradient(135deg, var(--p, #6d28d9), var(--sec, #2563eb)); border-color: transparent; }
[data-theme="light"] .t3d-knob { transform: translateX(30px); background: linear-gradient(145deg, #fef3c7, #fffbeb); }
[data-theme="light"] .t3d-knob svg { stroke: #f59e0b; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────────
   The bar loses height, then padding, then words — in that order. Buttons keep
   their icons and their 38px hit area all the way down, because a header whose
   controls shrink below the thumb target is the specific way mobile headers
   fail. Nothing is hidden that isn't reachable another way on the page. */
@media (max-width: 1100px) {
  #nav { padding: 0 32px; }
}
@media (max-width: 960px) {
  #nav { height: 66px; padding: 0 18px; }
  .nlogo-img { width: 52px; height: 52px; }
  .nav-link { padding: 8px 13px; }
}
@media (max-width: 600px) {
  #nav { height: 58px; padding: 0 12px; gap: 8px; }
  .nlogo-img { width: 44px; height: 44px; }
  .nlogo { gap: 7px; }
  .nlogo-tag { font-size: 8.5px; padding: 2px 7px; letter-spacing: .12em; }
  .nr { gap: 7px; }

  /* Words go, icons stay. Deliberately not written with :has() — an invalid
     selector would drop the whole rule on an older browser and leave the
     labels in place, which is the one failure mode this block exists to
     prevent. Every action in partials/app-header.ejs carries an icon, so
     hiding the label unconditionally is safe; that is why the partial
     documents the <i> + <span> pairing as required rather than optional. */
  .nav-link span, .logout-btn span, .uchip-txt { display: none; }
  .nav-link, .logout-btn { padding: 0; width: 36px; height: 36px; justify-content: center; }
  .nicon-btn { width: 36px; height: 36px; }
  .uchip { padding-left: 8px; }
  .avatar { width: 34px; height: 34px; font-size: 14px; }

  .t3d-toggle { width: 42px; height: 22px; }
  .t3d-knob { width: 16px; height: 16px; top: 2px; left: 2px; }
  .t3d-knob svg { width: 9px; height: 9px; }
  [data-theme="light"] .t3d-knob { transform: translateX(20px); }
}

/* Very narrow phones: the toggle is the first thing that can go, because the
   theme is remembered and every page carries the same control. */
@media (max-width: 360px) {
  #nav { padding: 0 10px; gap: 6px; }
  .nlogo-img { width: 38px; height: 38px; }
  .nlogo-tag { display: none; }
}

@media print {
  #nav { display: none !important; }
}