/* ---------- App masthead (every view) ----------
   One slim bar across every view, and it does exactly one thing: orient the
   writer. Wordmark (-> Slate) on the left; Slate + Account nav on the right.
   The page's own primary action lives in the page (the Slate's "Start a read");
   read utilities (Download report) live in the header on finished reads. A signed-out visitor
   gets a single Sign in; the login threshold shows the wordmark alone, inverted
   on the dark room. */

.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  /* The header slides (translate only — never blur/shadow) for the immersive read;
     elsewhere the transform is identity, so this transition is inert. */
  transition: transform 0.26s ease;
  will-change: transform;
}

.app-header-bar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1120px;
  min-height: 60px;
  padding: 12px clamp(18px, 4vw, 40px);
}

.app-wordmark {
  color: var(--ink);
  font-family: var(--brand);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-wordmark:hover { color: var(--gold); }

/* The nav — Slate + Account. Mono labels, quiet until hover. */
.app-menu { margin-left: auto; }
.app-menu-trigger { display: none; }
.app-header-nav {
  align-items: center;
  display: flex;
  gap: clamp(14px, 3vw, 28px);
}
.app-nav-link {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--brand);
  font-size: var(--fs-slug);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  padding: 4px 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-nav-link:hover { color: var(--ink); }

/* Account navigation stays hidden until authentication resolves. */
body[data-signed-out="true"] .app-nav-link { display: none; }
#download-report { display: none; }
body[data-view="read"][data-read-mode="full"][data-final-report-ready="true"] #download-report {
  color: var(--gold);
  display: inline-flex;
}

/* THE IMMERSIVE READ — the site header gets out of the way while the writer is
   inside the read. render-result.js toggles .read-immersive off the read's scroll
   position; once they scroll down into the read the bar slides up out of view
   (translate only, no blur/shadow — depth law preserved), leaving just the rail +
   the read. It slides back at the top of the read, and the moment they leave the
   read the [data-view="read"] guard stops matching, so the bar returns on every
   other view automatically. */
body[data-view="read"].read-immersive .app-header {
  transform: translateY(-100%);
}

/* THE NEW-EVENT CUE — reaching a new phase during the live walk should read as a
   discrete event, not a full-page swap. The walk re-renders the gate cards, so the
   just-revealed phase card is a fresh element with data-phase-entered; this one-shot
   in-place animation (a brief ink-offset settle + fade, NO blur) plays on mount, so
   the new room lands rather than the whole view blinking. (Lives here with the
   header because the read's own CSS sheets are owned by a separate stream.) */
@keyframes read-phase-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gate-card[data-phase-entered] {
  animation: read-phase-enter 0.32s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .app-header { transition: none; }
  .gate-card[data-phase-entered] { animation: none; }
}

/* Login threshold — dark room, wordmark alone. */
body[data-view="login"] .app-header {
  background: var(--screen);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
body[data-view="login"] .app-wordmark { color: var(--on-screen); }
body[data-view="login"] .app-wordmark:hover { color: var(--gold-soft); }
body[data-view="login"] .app-menu { display: none; }

/* Reading-room threshold — the "lights dim" live read darkens the WHOLE surface to
   the dark room (body.read-waiting); the masthead is part of that threshold, so it
   darkens to the same --screen ground (mirrors the login dark room) instead of
   floating as a light bar. It is raised ABOVE the dark backdrop (z-dialog-1) so the
   dark header bar reads at the top of the room; the nav stays usable, dimmed to the
   dark-room tones. */
body.read-waiting .app-header {
  background: var(--screen);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  z-index: calc(var(--z-dialog) + 1);
}
body.read-waiting .app-wordmark { color: var(--on-screen); }
body.read-waiting .app-wordmark:hover { color: var(--gold-soft); }
body.read-waiting .app-nav-link { color: var(--screen-dim); }
body.read-waiting .app-nav-link:hover { color: var(--on-screen); }

/* THE TITLE BLOCK (rule 1) — the identical opener on every page: mono eyebrow ->
   serif title -> one-line lede -> the page's one action. One flex-column with a
   single gap is the sole source of vertical rhythm, so the block reads the same
   on the slate, the account view, and a project home. */
.view-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 26px 0 18px;
}
.view-head .cl-eyebrow,
.view-head h1,
.view-head .cl-heading { margin: 0; }
.view-head h1:not(.cl-heading) {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.12;
}
/* The page's one action sits just under the lede in the same block. */
.view-head-actions { margin-top: 6px; }

@media (max-width: 720px) {
  .app-header-bar { gap: 12px; min-height: 52px; padding: 10px 16px; }
  .app-wordmark { font-size: var(--fs-slug); letter-spacing: 0.14em; }
  .app-header-nav { gap: 16px; }
}

@media (max-width: 560px) {
  .app-menu { position: relative; }
  .app-menu-trigger {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--brand);
    font-size: var(--fs-slug);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    min-height: var(--tap-min);
    padding: 6px 10px;
    text-transform: uppercase;
  }
  .app-menu-trigger:hover,
  .app-menu[data-open] .app-menu-trigger {
    border-color: var(--ink);
    color: var(--ink);
  }
  .app-menu:not([data-open]) > .app-header-nav { display: none; }
  .app-menu > .app-header-nav {
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 210px;
    padding: 8px 14px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
  }
  .app-menu .app-nav-link {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: var(--tap-min);
    text-align: right;
    width: 100%;
  }
  body.read-waiting .app-menu-trigger {
    border-color: var(--screen-hairline);
    color: var(--screen-dim);
  }
  body.read-waiting .app-menu-trigger:hover,
  body.read-waiting .app-menu[data-open] .app-menu-trigger {
    border-color: var(--on-screen);
    color: var(--on-screen);
  }
  body.read-waiting .app-menu > .app-header-nav {
    background: var(--screen);
    border-color: var(--screen-hairline);
  }
}

#update-notice {
  align-items: center;
  background: var(--screen);
  border-top: 1px solid var(--gold);
  bottom: 0;
  color: var(--on-screen);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--brand);
  font-size: var(--fs-small);
  gap: 10px 18px;
  justify-content: center;
  left: 0;
  padding: 12px 20px;
  position: fixed;
  right: 0;
  z-index: var(--z-toast);
}

#update-notice button {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold-soft);
  color: var(--gold-soft);
  font: inherit;
  padding: 0 0 1px;
}

#update-notice button:hover {
  color: var(--on-screen);
}

body.has-update-notice {
  padding-bottom: 72px;
}