/* Koma phone and tablet navigation: the one place the small-width masthead is
 * defined.
 *
 * Linked from every signed-out public page, both the static files in public/
 * and the page templates inside server.js, alongside koma-tokens.css. The
 * markup is injected by koma-nav.js rather than copied into each page, so the
 * button, the panel and the five links exist in exactly one place.
 *
 * Below 860px the masthead carries two things and nothing else: the wordmark on
 * the left and the menu button on the right. Everything that sat between them
 * (the inline nav, the record and collection meta blocks, the standalone Sign
 * in link) is hidden and its links live in the panel instead.
 *
 * Deliberately not linked from: the signed-in views that already render the
 * hamburger menu. koma-nav.js stands down when it finds a .ham-btn, so those
 * pages never get a second menu even if this sheet is present.
 *
 * The 860px breakpoint matches every other responsive rule on the site, so
 * 860px itself is phone and tablet mode and 861px up is desktop.
 */

/* The hiding below is scoped to this class, which koma-nav.js adds only when it
 * has actually injected a menu. Without that scope the same rules would strip
 * the masthead on hamburger pages too. */
.koma-nav-on {
  position: relative;
}

/* The icon, split out from the button so the signed-in hamburger can wear the
 * same one. It carries the look and the open state and deliberately no display
 * rule, because the two buttons differ on when they are visible: the shared
 * phone menu appears only below 860px, where the inline nav drops out, while
 * the hamburger is the only navigation signed-in pages have and is visible at
 * every width. */
.koma-nav-icon {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.koma-nav-btn {
  display: none;
  margin-left: auto;
}

/* Three 2px lines with 4px gaps: 2+4+2+4+2 = 14px tall inside the 28px button,
 * so the line centres sit at 1px, 7px and 13px and the middle one is the axis
 * the other two rotate about. */
.koma-nav-icon span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--accent);
}

/* Open state: an X, drawn from the same three lines. The middle line is taken
 * out of sight and the outer two are brought to the centre line (6px each, the
 * distance from 1px and 13px to the 7px axis) and crossed.
 *
 * Driven off aria-expanded rather than a second class, so the visual state and
 * the state announced to assistive tech cannot drift apart.
 *
 * No transition anywhere on this button: the switch between the two states is
 * instant by requirement, and transform and opacity are not transitioned by
 * default, so there is nothing to suppress. */
.koma-nav-icon[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.koma-nav-icon[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.koma-nav-icon[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.koma-nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 14px);
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 120;
}

.koma-nav-panel a {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
}

.koma-nav-panel a:last-child { border-bottom: none; }

.koma-nav-panel a:hover {
  color: var(--accent);
  background: var(--paper-deep);
}

@media (max-width: 860px) {
  .koma-nav-btn { display: flex; }

  /* Only the wordmark and the menu itself survive. Listing the survivors rather
   * than naming what to hide means a page with its own masthead furniture is
   * reduced correctly without this sheet having to know about it. The two
   * wordmark classes are the only ones in use: .wordmark on the standard
   * masthead, .caf-wordmark on the Check for AI header.
   *
   * The notification bell is the one survivor besides those. Clearing the bar
   * was about not repeating links that the panel already carries; the bell is a
   * feature rather than a link, and it is not in the panel, so on the signed-in
   * pages that have one it is the only route to notifications at this width. It
   * sits to the left of the menu button. */
  .koma-nav-on > *:not(.wordmark):not(.caf-wordmark):not(.koma-nav-btn):not(.koma-nav-panel):not(:has(.notif-bell-wrap)) {
    display: none;
  }

  /* The bell is nested inside a wrapper (.masthead-right) that also holds meta
   * text, so the wrapper is kept as a box and its other children are dropped.
   * Matching on :has rather than the wrapper's class keeps this working if the
   * bell is ever moved into a different container.
   *
   * The auto margin goes on the wrapper, which is the same element the :has
   * exemption keys on, so the thing that survives and the thing that anchors
   * the right-hand group cannot drift apart. The record, collection and creator
   * templates carry this wrapper with the bell inside it hidden until there is
   * a session, so there the group is a zero-width box that still parks the
   * button at the gutter. */
  .koma-nav-on > *:has(.notif-bell-wrap) {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .koma-nav-on > *:has(.notif-bell-wrap) > *:not(.notif-bell-wrap) {
    display: none;
  }

  .koma-nav-on > *:has(.notif-bell-wrap) ~ .koma-nav-btn {
    margin-left: 14px;
  }

  /* The wordmark is the only thing left on the left, so the masthead no longer
   * needs space-between to separate three items; the button's margin-left:auto
   * pins it to the right edge on its own.
   *
   * The class is repeated to raise specificity to (0,2,0). Five pages (enter,
   * email-sent, and the record, collection and creator templates) set
   * .masthead { flex-direction: column } at this breakpoint, which was correct
   * when a meta block sat under the wordmark but stacks the button below it now
   * that the meta block is hidden. A single .koma-nav-on ties with those rules
   * on specificity and loses on source order, because this sheet is linked
   * before each page's own styles. */
  .koma-nav-on.koma-nav-on {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;

    /* The masthead itself has to be lifted, not just the panel. The record,
     * collection and creator templates animate .masthead on load, and an
     * element with an active animation becomes a stacking context with
     * z-index auto. That traps the panel's own z-index inside the masthead,
     * so it is the masthead that gets compared against the rest of the page.
     * The seal on those pages carries a transform, which likewise makes it a
     * stacking context at the same level, and being later in the DOM it was
     * painting straight through the open panel.
     *
     * Scoped to this breakpoint because it is the only place the panel exists,
     * which also keeps the desktop stacking order exactly as it was. */
    z-index: 200;
  }
}

/* The same small-width geometry, for the mastheads that carry the hamburger
 * instead of the shared menu.
 *
 * Those pages were never reduced, because the rules above are scoped to
 * .koma-nav-on and koma-nav.js deliberately does not run where a hamburger
 * exists. The record and creator templates set .masthead to flex-direction
 * column at this breakpoint, which stacked the button under the wordmark and a
 * meta block: measured before this, the creator page put the button 314px from
 * the right edge at 768px, and neither page had it level with the wordmark.
 *
 * Keyed on :has(.ham-btn) so it applies wherever that button is rendered and
 * nowhere else. The registration page already looked like this, so there it is
 * a no-op. Nothing here touches the panel, its contents, or any width above
 * 860px.
 */
@media (max-width: 860px) {
  .masthead:has(.ham-btn) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  /* Only the wordmark and the group holding the button survive. */
  .masthead:has(.ham-btn) > *:not(.wordmark):not(.ham-btn):not(:has(.ham-btn)) {
    display: none;
  }

  /* The button sits inside .masthead-right alongside the meta block and the
   * bell. Keep that wrapper as the right-hand group, drop the meta, and leave
   * the bell for the same reason it is kept on the shared menu pages: it is a
   * feature rather than a duplicated link. */
  .masthead:has(.ham-btn) > *:has(.ham-btn) {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
  }

  .masthead:has(.ham-btn) > *:has(.ham-btn) > *:not(.notif-bell-wrap):not(.ham-btn) {
    display: none;
  }

  /* And when the button is a direct child rather than nested in a wrapper. */
  .masthead:has(.ham-btn) > .ham-btn {
    margin-left: auto;
  }
}

/* Above the breakpoint the inline nav carries everything, so the panel can
 * never be reachable even if the viewport is widened while it is open. */
@media (min-width: 861px) {
  .koma-nav-panel { display: none; }
}