/* nav.css
   The menu bar: prompt and logo on the left (opens the chat), nine section links, the theme toggle key
   on the right, and the reading-progress line along its bottom edge.
   Rules are ordered from the general bar to its responsive fitting, which comes last so it wins.
   Behaviour: assets/js/reading.js (progress), assets/js/chat.js (prompt), assets/theme.js (toggle).
*/

/* Nav */
nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
/* the page covers are a <nav> too: keep the menu's blur, background and border off them */
/* Reading progress: a thin line along the menu's bottom edge. It fills as you scroll past the hero,
   ticks mark where each section starts, and the menu link for the section you're in lights up.
   It only moves when you scroll, and only by scaling, so it costs nothing at rest. */
.read-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.read-bar .rb-fill { position: absolute; inset: 0; background: var(--green); box-shadow: 0 0 8px rgba(var(--acc-rgb), 0.7);
  transform-origin: left; transform: scaleX(var(--read, 0)); }
.read-bar .rb-ticks i { position: absolute; top: -2px; width: 1px; height: 6px; background: var(--green-dim); opacity: 0.7; }
.read-bar .rb-ticks i.done { background: var(--green); opacity: 1; }
.nav-links a.here { color: var(--green); text-shadow: 0 0 8px rgba(var(--acc-rgb), 0.6); }
.deep-close { position: relative; }
@media (max-width: 640px) { .read-bar .rb-ticks { display: none; } }
nav.edge-tabs { position: fixed; backdrop-filter: none; background: none; border: 0; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
.nav-mark { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; line-height: 0; z-index: 1; }
@media (max-width: 1100px) { .nav-mark { position: static; transform: none; flex: none; margin-right: 14px; } }
.nav-mark svg { height: 22px; width: auto; fill: var(--green); filter: drop-shadow(0 0 6px rgba(var(--acc-rgb),.35)); transition: transform .2s ease; }
.nav-mark:hover svg { transform: scale(1.06); }
.nav-logo {
  font-family: var(--mono);
  font-weight: 500; color: var(--text); text-decoration: none; font-size: 0.95rem;
}
.nav-logo span { color: var(--green); }
.nav-logo .cursor {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--green); vertical-align: text-bottom; margin-left: 3px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: 16px; }
.nav-links a {
  font-family: var(--mono);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.8rem; transition: color 0.2s, text-shadow 0.2s;
}
.nav-links a::before { content: '/'; color: var(--green-dim); margin-right: 2px; }
.nav-links a:hover { color: var(--green); text-shadow: 0 0 8px rgba(var(--acc-rgb),0.6); }

/* the prompt on the left: one line, and the whole bar left of the links opens the terminal (assets/js/chat.js) */
.nav-left { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; flex: 1; align-self: stretch;
  margin: -14px 24px -14px 0; padding: 14px 0; cursor: pointer; }
.nav-logo { white-space: nowrap; flex: none; }   /* keep the prompt and its cursor on one line */
@media (max-width: 640px) { .nav-logo { font-size: 0.85rem; } .nav-left { margin-right: 8px; } .theme-toggle { margin-left: 8px; } }

/* ==== Phones and small tablets: only /contact stays ==== */

/* nine links will not fit on a phone or small tablet; keep the one that matters */
@media (max-width: 860px) {
  .nav-links { display: flex; gap: 0; }
  .nav-links a:not([href="#contact"]) { display: none; }
}

/* ==== Theme toggle ==== */

/* theme toggle in the menu bar */
.theme-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; margin-left: 18px; border-radius: 8px;
  border: 1px solid var(--border-bright); color: var(--green); font-family: var(--mono); font-size: 0.78rem; line-height: 1; flex: none; white-space: nowrap; }
/* laptops: terminal symbols with the word (* light, < dark); narrower screens: the drawn sun or moon alone */
.theme-toggle .tt-sym { font-weight: 700; }
.theme-toggle .tt-ico { display: none; }
.theme-toggle .tt-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* pinned to the far right of the bar, mirroring the logo on the far left */
.theme-toggle { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); margin-left: 0; z-index: 1; }
/* the toggle is a solid green key so it gets noticed: black on neon in dark mode, white on deep green in light mode */
.theme-toggle { background: #00ff41; color: #010203; border-color: #00ff41; font-weight: 700; box-shadow: 0 0 14px rgba(0, 255, 65, 0.35); }
.theme-toggle:hover { box-shadow: 0 0 22px rgba(0, 255, 65, 0.6); border-color: #00ff41; }
html[data-theme="light"] .theme-toggle { background: #00b32e; color: #ffffff; border-color: #007f2c; box-shadow: 0 0 12px rgba(0, 200, 75, 0.35); }
html[data-theme="light"] .theme-toggle:hover { border-color: #007f2c; box-shadow: 0 0 18px rgba(0, 200, 75, 0.55); }
@media (max-width: 1120px) {
  .theme-toggle { position: static; transform: none; margin-left: 12px; padding: 0 9px; }
  .theme-toggle .tt-word { display: none; }   /* narrower windows: the icon alone, the label stays in its tooltip */
  .theme-toggle .tt-sym { display: none; }
  .theme-toggle .tt-ico { display: block; }
}


/* ==== Fitting nine links into the 960px column ==== */

/* nine links have to fit the 960px column next to the prompt, so the spacing and type tighten as the window narrows */
@media (min-width: 861px) and (max-width: 1160px) { .nav-links { gap: 11px; } }
@media (min-width: 861px) and (max-width: 1120px) { .nav-links { gap: 8px; } .nav-links a { font-size: 0.78rem; } }
@media (min-width: 861px) and (max-width: 980px) { .nav-links { gap: 6px; } .nav-links a { font-size: 0.76rem; } .nav-links a::before { margin-right: 0; } .nav-mark { margin-right: 10px; } }
@media (min-width: 861px) and (max-width: 920px) { .nav-links a { font-size: 0.72rem; } }
.theme-toggle:hover { border-color: var(--green); }
.theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }