/* Concept "grid": the site menu as a regular menu bar (menu.js), and the sign-in window (sign-in.js). */

.si-menu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  background: rgba(7, 10, 18, 0.94); border-bottom: 1px solid var(--frame-line, rgba(255, 255, 255, 0.15));
  transform: translateY(0); transition: transform 0.4s var(--ease-out), background 0.3s ease;
}
/* at the top the open bar is part of the page: it scrolls away with the content, never over it */
.si-menu.is-top { position: absolute; background: transparent; border-bottom-color: transparent; }
.si-menu.is-hidden { transform: translateY(-110%); }
.si-menu.is-instant { transition: none !important; }
.si-menu-row-main { display: flex; align-items: center; gap: 40px; min-height: 72px; padding: 0 var(--text-side, 64px); }
.si-menu.is-top .si-menu-row-main { min-height: 96px; }
.si-menu-brand { font-family: var(--font-head); font-weight: 500; font-size: 20px; letter-spacing: -0.04em; color: var(--text-main); white-space: nowrap; }
.si-menu-brand:hover { color: var(--text-main); }

/* the pages: plain links side by side */
.si-menu-links { display: flex; align-items: center; gap: 30px; }
.si-menu-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0;
  background: none; border: 0; font-family: var(--font-body); font-size: 15.5px; color: var(--text-run); cursor: pointer; white-space: nowrap;
}
.si-menu-link:hover { color: var(--text-main); }
.si-menu-link.is-current { color: var(--text-main); }
.si-menu-link.is-current::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); }
.si-menu-lock { flex: none; opacity: 0.8; }

.si-menu-chapter { margin-left: auto; background: none; border: 0; padding: 0; color: var(--text-detail); font-size: 13.5px; white-space: pre; cursor: default; }

/* About and Contact: at the right of the bar (computer); at the bottom of the list, below a line (phones) */
.si-menu-end { display: flex; align-items: center; gap: 30px; margin-left: 40px; }
.si-menu-chapter + .si-menu-end { margin-left: 32px; }
.si-menu-row-main > .si-menu-links + .si-menu-end { margin-left: auto; }
.si-menu.is-top .si-menu-chapter + .si-menu-end { margin-left: auto; }

/* narrower computer screens: the bar keeps every item on one line by closing up the gaps and, where it is tightest,
   leaving out the chapter name (the chapter dots on the right still show it) */
@media (min-width: 721px) and (max-width: 1400px) {
  .si-menu-row-main { gap: 24px; }
  .si-menu-links, .si-menu-end { gap: 18px; }
  .si-menu-row-main > .si-menu-end, .si-menu-chapter + .si-menu-end { margin-left: 20px; }
  .si-menu-row-main > .si-menu-links + .si-menu-end, .si-menu.is-top .si-menu-chapter + .si-menu-end { margin-left: auto; }
  .si-menu-link { font-size: 14.5px; gap: 5px; }
}
@media (min-width: 721px) and (max-width: 1240px) {
  .si-menu-chapter { display: none; }
  .si-menu-chapter + .si-menu-end { margin-left: auto; }
  .si-menu-row-main { gap: 18px; }
  .si-menu:not(.is-phone) .si-menu-row-main { padding: 0 32px; }
  .si-menu-links, .si-menu-end { gap: 14px; }
  .si-menu-link { font-size: 14px; }
  .si-menu-brand { font-size: 18px; }
}

/* how far the reader is: a thin line along the bottom of the fixed bar */
.si-menu-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.si-menu.is-top .si-menu-progress { opacity: 0; }
.si-menu-progress-fill { height: 100%; width: 0; background: var(--accent); }

/* phones: brand and menu button; the pages drop down under the bar */
.si-menu.is-phone .si-menu-row-main { justify-content: space-between; min-height: 56px; gap: 12px; }
.si-menu.is-phone.is-top .si-menu-row-main { min-height: 72px; }
.si-menu.is-phone .si-menu-brand { font-size: 18px; }
.si-menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
.si-menu-toggle span { display: block; height: 1.5px; background: var(--text-main); transition: transform 0.25s ease, opacity 0.2s ease; }
.si-menu.is-open .si-menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.si-menu.is-open .si-menu-toggle span:nth-child(2) { opacity: 0; }
.si-menu.is-open .si-menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.si-menu.is-phone .si-menu-links { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--text-side, 20px) 12px; background: rgba(7, 10, 18, 0.97); }
.si-menu.is-phone.is-open { background: rgba(7, 10, 18, 0.97); }
.si-menu.is-phone.is-open .si-menu-links { display: flex; }
.si-menu.is-phone .si-menu-end { flex-direction: column; align-items: stretch; gap: 0; margin: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.si-menu.is-phone .si-menu-link { justify-content: space-between; min-height: 52px; border-top: 1px solid var(--frame-line, rgba(255, 255, 255, 0.15)); font-size: 17px; }
.si-menu.is-phone .si-menu-link.is-current::after { left: auto; right: 0; top: 50%; bottom: auto; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; }
.si-menu.is-phone .si-menu-chapter { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; font-size: 14px; color: var(--text-main); cursor: pointer; }
/* phones (Thomas, 13 November 2026): the strip is one slim row, the chapter name in the brand's place, with a sign that it opens the list of chapters */
.si-menu.is-phone:not(.is-top) .si-menu-row-main { min-height: var(--phone-strip, 48px); }
.si-menu.is-phone:not(.is-top):not(.is-open) .si-menu-brand { display: none; }
.si-menu.is-phone .si-menu-chapter::before { content: '▾'; margin-right: 8px; color: var(--accent); }
.si-menu.is-phone.is-top .si-menu-chapter, .si-menu.is-phone.is-open .si-menu-chapter { display: none; }
/* phones (Thomas, 13 November 2026): the chapters as dots along the strip's bottom edge, in place of the thin line
   (menu.js, chapterSteps); the same marks as the computer's chapter dots (shared/chapters/chapters.css) */
.si-menu-steps { padding: 0 calc(var(--text-side, 20px) + 6px); }
.si-menu.is-top .si-menu-steps, .si-menu.is-open .si-menu-steps { display: none; }
.si-menu-steps-track { position: relative; height: var(--phone-steps, 24px); }
.si-menu-steps-rail { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.22); }
.si-menu-steps-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }
/* each dot takes taps over its share of the line and a little above it */
.si-menu-step { position: absolute; top: -8px; bottom: 0; width: 36px; margin-left: -18px; padding: 8px 0 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.si-menu-step-mark {
  width: 7px; height: 7px; border-radius: 50%; background: #070a12; border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.si-menu-step.is-past .si-menu-step-mark { background: var(--accent); border-color: var(--accent); }
.si-menu-step.is-current .si-menu-step-mark { width: 12px; height: 12px; background: var(--accent); border-color: var(--text-main); }

/* the sign-in window */
.si-signin { width: min(420px, calc(100vw - 32px)); padding: 0; color: var(--text-main); }
.si-signin::backdrop { background: rgba(3, 5, 10, 0.72); }
.si-signin-form { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 28px; }
.si-signin-head { display: flex; align-items: center; justify-content: space-between; }
.si-signin-head h2 { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 28px; letter-spacing: -0.04em; }
.si-signin-close { width: 40px; height: 40px; margin-right: -10px; background: none; border: 0; color: var(--text-run); font-size: 26px; cursor: pointer; }
.si-signin-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-run); }
.si-signin-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-detail); }
.si-signin-field input {
  min-height: 46px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text-main);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--frame-line, rgba(255, 255, 255, 0.2));
}
.si-signin-field input:focus { outline: none; border-color: var(--accent); }
.si-signin-send {
  min-height: 52px; margin-top: 6px; font-family: var(--font-head); font-weight: 500; font-size: 16px;
  color: #070a12; background: var(--text-main); border: 0; cursor: pointer;
}
.si-signin-send:hover { background: var(--accent); }
.si-signin-note { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .si-menu, .si-menu-toggle span, .si-menu-steps-fill, .si-menu-step-mark { transition: none; } }