/* front-door.css — L0 question-first front door overlay. Prefix: .fd- only.
   Inherits the site design tokens (--paper, --ink, --serif, etc.) from styles.css.
   Also hosts the persistent .view-switcher (Browse / By question / Map) — JS-built,
   so it never appears for no-JS readers (who correctly get only the browse list). */

/* --- view switcher (segmented control / tab row, sits under the site header) --- */
.view-switcher {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  max-width: var(--max, 880px);
  margin: 1.4rem auto 0.4rem;
  padding: 0.3rem;
  background: color-mix(in srgb, var(--card, #fff) 70%, var(--paper, #faf6ef));
  border: 1px solid var(--line, #e7ded1);
  border-radius: 999px;
  width: fit-content;
}

.view-tab {
  appearance: none;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--sans, sans-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft, #5c554c);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  transition: background-color 150ms ease, color 150ms ease;
}

.view-tab:hover {
  color: var(--accent, #c2693b);
}

.view-tab--on,
.view-tab[aria-selected="true"] {
  background: var(--accent, #c2693b);
  color: #fff;
}

.view-tab--on:hover,
.view-tab[aria-selected="true"]:hover {
  color: #fff;
}

.view-tab:focus-visible {
  outline: 2px solid var(--accent, #c2693b);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .view-switcher {
    margin-top: 0.9rem;
    width: auto;
    max-width: calc(100vw - 2rem);
  }
  .view-tab {
    flex: 1 1 0;
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-tab { transition: none; }
}

/* The questions view is now ONE of three switchable views (browse / questions /
   map), not a fullscreen modal. It sits in-flow below the view switcher and fills
   the content column with a comfortable min-height so it still reads as a full view. */
.fd-overlay {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1.25rem 3rem;
  min-height: 60vh;
  background: var(--paper, #faf6ef);
}

.fd-overlay[hidden] {
  display: none;
}

.fd-inner {
  width: 100%;
  max-width: 720px;
  margin: auto;
}

/* --- head --- */
.fd-head {
  text-align: center;
  margin-bottom: 2.25rem;
}

.fd-title {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 600;
  color: var(--ink, #2b2722);
  margin: 0 0 0.4rem;
  letter-spacing: 0.01em;
}

.fd-tagline {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft, #5c554c);
  margin: 0 0 1.8rem;
}

.fd-prompt {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.35rem, 4.2vw, 1.9rem);
  font-weight: 600;
  color: var(--ink, #2b2722);
  margin: 0;
}

/* --- door list --- */
.fd-doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fd-door-item {
  margin: 0;
}

.fd-door {
  display: block;
  text-decoration: none;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line, #e7ded1);
  border-radius: var(--radius, 14px);
  background: var(--card, #fff);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.fd-door:hover,
.fd-door:focus-visible {
  border-color: var(--accent, #c2693b);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(43, 39, 34, 0.08);
  outline: none;
}

.fd-door:focus-visible {
  outline: 2px solid var(--accent, #c2693b);
  outline-offset: 2px;
}

.fd-door-line {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  line-height: 1.35;
  color: var(--ink, #2b2722);
}

/* Arc title withheld until hover/focus — fades in as a subtitle.
   opacity (not display/visibility) keeps it in the accessibility tree. */
.fd-door-title {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint, #8a8278);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 180ms ease, max-height 180ms ease;
}

.fd-door:hover .fd-door-title,
.fd-door:focus-visible .fd-door-title,
.fd-door:focus-within .fd-door-title {
  opacity: 1;
  max-height: 2.5em;
}

/* reshuffle entrance (purely cosmetic; disabled under reduced motion) */
.fd-doors {
  opacity: 1;
}
.fd-doors--in {
  animation: fd-fade-in 220ms ease;
}
@keyframes fd-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* --- footer affordances --- */
.fd-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

.fd-reshuffle,
.fd-climb {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans, sans-serif);
  color: var(--ink-faint, #8a8278);
  padding: 0.3rem 0.5rem;
}

.fd-reshuffle {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fd-reshuffle:hover,
.fd-reshuffle:focus-visible,
.fd-climb:hover,
.fd-climb:focus-visible {
  color: var(--accent, #c2693b);
  outline: none;
}

.fd-reshuffle:focus-visible,
.fd-climb:focus-visible {
  outline: 2px solid var(--accent, #c2693b);
  outline-offset: 2px;
  border-radius: 6px;
}

.fd-climb {
  font-size: 0.95rem;
  font-family: var(--serif, Georgia, serif);
}

/* --- reduced motion: instant swaps, no entrance/hover tweens --- */
@media (prefers-reduced-motion: reduce) {
  .fd-door,
  .fd-door-title,
  .fd-doors--in {
    transition: none;
    animation: none;
  }
}

/* stored-toggle path (ctx.reducedMotion true without the media query) */
.fd-reduced .fd-door,
.fd-reduced .fd-door-title,
.fd-reduced .fd-doors--in {
  transition: none;
  animation: none;
}