/* Affordance. Target sizes, the browser surfaces the design never claimed,
   and a visible cue on the one control that had none.
   Loads last, after typeset.css. */

/* ------------------------------------------------- target size (WCAG 2.5.8) */

/* These were 16px tall: the text box with no padding around it. AA wants
   24x24 CSS px; the nav is the page's primary wayfinding so it gets 44. */
.topbar .nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

.topbar .nav { gap: 26px; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

.footer .text-link { min-height: 44px; }

/* The chapter rail is how a reader moves through the story, so it should be
   comfortably hittable rather than merely compliant. The dot stays 5px; the
   button around it grows. */
.chapter-dots button { width: 44px; height: 44px; }
.chapter-dots { right: 6px; gap: 2px; }

/* Disclosure rows are a primary control on the questions chapter. */
.landing-story .faq summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Both atmosphere controls. 36px met AA but sat under the comfort target. */
.hero-motion,
.landing-story .motion-toggle { min-height: 44px; padding: 0 16px; }

/* --------------------------------------- the life chapter's hidden control */

/* The three lines are buttons that swap the photograph. Under reduced motion
   the scroll never advances them, so without a visible cue two of the three
   images are unreachable and nothing says the words can be pressed. */
.meaning-word button {
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s;
}

.meaning-word button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: opacity 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.meaning-word:not(.is-active) button:is(:hover, :focus-visible)::after {
  opacity: 0.55;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  /* No scroll advance here, so the affordance has to be permanent. */
  .meaning-word:not(.is-active) button::after {
    opacity: 0.4;
    transform: scaleX(1);
    transition: none;
  }
  .meaning-word button::after { transition: none; }
}

/* ---------------------------------------------------- the browser surfaces */

/* Selection, caret, focus ring and scrollbar ship with defaults that belong
   to no design system. They are part of the page. */
::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--ink); }
:root { caret-color: var(--gold); accent-color: var(--gold); }

/* The default ring is the page accent, which is near-invisible against the
   two fixed dark chapters in light mode. Each chapter names its own. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.landing-story .tension :focus-visible,
.landing-story .story-hero :focus-visible { outline-color: #b7d5a3; }

* { scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 38%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 62%, transparent); background-clip: content-box; }

@media (max-width: 760px) {
  .topbar .nav a, .text-link { min-height: 40px; }
}

/* The three questions are not a sequence, so the injected counter was
   decoration standing in for hierarchy. The rules already group them. */
.questions-stack p:before { content: none; }
.landing-story .tension .questions-stack p { padding-left: 0; }

/* ------------------------------------------------------------ account entry */

/* "Log in" was a 13px underlined text link and there was no Sign up control at
   all: the only route to an account was the hero's story CTA. Worse, styles.css
   hides .text-link entirely under 760px, so a phone had no account entry point.
   These are the two things a visitor looks for first, so they get real weight. */

.nav-actions { gap: 14px; }

.auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.18s, color 0.18s;
}

.auth-link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* The page's one accent, at the page's one radius. */
.topbar .btn.auth-cta {
  min-height: 44px;
  padding: 0 20px;
  gap: 0;
  font-size: 13px;
  font-weight: 600;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--button-ink);
}

.topbar .btn.auth-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--button-ink);
  transform: translateY(-1px);
}

.topbar .btn.auth-cta:active { transform: translateY(0) scale(0.98); }

/* The theme switch is a preference, not a destination: it steps back. */
.topbar .theme {
  font-size: 12px;
  color: var(--muted);
  min-height: 44px;
  padding: 0 8px;
  border-radius: 5px;
}

.topbar .theme:hover { color: var(--ink); }

@media (max-width: 860px) {
  /* Three section links plus two account controls will not sit on one line.
     The page is a scroll story and the chapter rail already covers movement,
     so the section links yield to the two controls people came for. */
  .on-landing .topbar .nav { display: none; }
  .nav-actions { gap: 8px; }
  .auth-link { padding: 0 10px; }
  .topbar .btn.auth-cta { padding: 0 16px; }
  .topbar .theme { padding: 0 6px; }
}

@media (max-width: 460px) {
  /* Last to go is the preference, never the account. */
  .topbar .theme { display: none; }
}

/* cinematic.css restores 88px after styles.css sets 80px, but the hero sizes
   itself with calc(100svh - 80px). The 8px difference pushed the first screen
   past the viewport. 80px is also the cap a nav bar should respect. */
.on-landing .topbar { height: 80px; }

/* ------------------------------------------------- the bar becomes no bar */

/* The topbar was a solid band with its own background and a hard edge where
   the photograph began. Lifting it out of flow lets the hero run to the very
   top of the page and leaves the mark floating on the image. */

.on-landing .shell { position: relative; }

.on-landing .topbar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 100vw;
  padding-inline: max(clamp(22px, 5vw, 80px), calc(50vw - 660px));
  background: transparent;
  border: 0;
}

/* Nothing guarantees what the photograph is doing behind the mark, so a short
   scrim at the very top keeps it legible without touching the composition. */
.landing-story .story-hero .hero-veil::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--hero-veil) 62%, transparent) 0%,
    color-mix(in srgb, var(--hero-veil) 28%, transparent) 46%,
    transparent 100%);
}

/* The hero owns the whole first screen now that nothing sits above it. */
.landing-story .story-hero {
  min-height: min(1000px, 100svh);
  padding-block-start: clamp(150px, 20vh, 210px);
}

@media (max-width: 760px) {
  /* Taller on phones so the cutout has room above the copy. The copy is
     bottom-aligned, so the extra height opens up above it rather than pushing
     the headline down onto her. */
  .landing-story .story-hero {
    min-height: 1010px;
    padding-block-start: clamp(120px, 16vh, 150px);
  }
  .landing-story .story-hero .hero-veil::after { height: 150px; }
}





/* A touch more cover at the very top, where the window is brightest. */
.landing-story .story-hero .hero-veil::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--hero-veil) 74%, transparent) 0%,
    color-mix(in srgb, var(--hero-veil) 38%, transparent) 46%,
    transparent 100%);
}

/* ------------------------------------------------------ provider sign-in */

/* Provider first, email beneath it: the shape people now expect from an
   account screen. Both screens are still mockups and say so. */

.oauth { display: grid; gap: 10px; margin-bottom: 20px; }

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--field);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

.oauth-btn:hover { background: var(--raised); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.oauth-btn:active { transform: scale(0.99); }

/* The mark keeps Google's own colours in both themes, which is what their
   brand terms require; it is never recoloured to match the page. */
.oauth-mark { flex: none; width: 18px; height: 18px; }

.oauth-sep {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.oauth-sep::before,
.oauth-sep::after { content: ''; height: 1px; background: var(--line); }

.oauth-sep span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Pressing an inert control should say something rather than do nothing. */
.note[data-flash] { color: var(--gold); }