/* ================================================================
   Ask Better — custom theme
   Bootstrap provides primitives; everything visible is overridden
   here so the page reads as a warm, editorial workspace, not a
   template. Type, color, and spatial rhythm carry the voice.
   ================================================================ */

:root {
  /* Warm paper palette */
  --paper: #f7f3ed;
  --paper-warm: #f1eade;
  --paper-deep: #ece2d0;
  --ink: #3a2e22;
  --ink-soft: #5a4632;
  --ink-faded: rgba(90, 70, 50, 0.55);
  --ink-muted: rgba(90, 70, 50, 0.35);
  --rule: rgba(90, 70, 50, 0.18);
  --rule-soft: rgba(90, 70, 50, 0.1);
  --accent: #8b6c3a;
  --accent-ink: #5a4020;

  /* Bloom palette — stepped warm→cool, matching v2 prototypes */
  --bloom-0: #b85c3a; /* Remember   */
  --bloom-1: #c4763c; /* Understand */
  --bloom-2: #9a8b4f; /* Apply      */
  --bloom-3: #5b8a6f; /* Analyze    */
  --bloom-4: #4a7b8c; /* Evaluate   */
  --bloom-5: #6b5b8a; /* Create     */

  /* Type */
  --serif-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --serif-body: "Source Serif 4", "Newsreader", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --column: 680px;
  --gutter: 24px;
}

/* Bootstrap override surface ------------------------------------- */
body {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(210, 190, 165, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(190, 165, 140, 0.14) 0%, transparent 55%);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* Positioning context for the corner hex accents — they're absolutely
     positioned against the document body so they scroll with the page. */
  position: relative;
  overflow-x: hidden; /* keep the full-bleed bloom-map-wrap from causing h-scroll */
}

::selection {
  background: rgba(139, 108, 58, 0.22);
  color: var(--ink);
}

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  color: var(--ink);
}

kbd {
  font-family: var(--mono);
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(90, 70, 50, 0.08);
  color: var(--ink-soft);
  border: 1px solid var(--rule-soft);
  box-shadow: none;
}

/* Corner hex accents -------------------------------------------- */
/* Tiny honeycomb patches anchored to opposite corners of the viewport.
   Same motif as the main Bloom's map, rendered whisper-quiet so the
   hex vocabulary carries through every page without competing with
   content. Fixed-position so they stay put across scrolls. */
.corner-hex {
  /* absolute so the corners scroll with the document rather than stay
     pinned to the viewport — they read as part of the page, not HUD. */
  position: absolute;
  width: 440px;
  height: 440px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.corner-hex__hex {
  position: absolute;
  fill: none;
  stroke: rgba(139, 108, 58, 0.1);
  stroke-width: 1;
}
.corner-hex--tr {
  top: -80px;
  right: -80px;
  mask-image: radial-gradient(
    circle at 100% 0%,
    black 0%,
    black 30%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    circle at 100% 0%,
    black 0%,
    black 30%,
    transparent 75%
  );
}
.corner-hex--bl {
  bottom: -80px;
  left: -80px;
  mask-image: radial-gradient(
    circle at 0% 100%,
    black 0%,
    black 30%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    circle at 0% 100%,
    black 0%,
    black 30%,
    transparent 75%
  );
}
@media (max-width: 767px) {
  .corner-hex { display: none; }
}

/* Page frame ----------------------------------------------------- */
.page {
  position: relative;
  z-index: 1; /* sit above fixed corner-hex decorations */
  max-width: var(--column);
  margin: 0 auto;
  padding: 72px var(--gutter) 120px;
}
@media (min-width: 768px) {
  .page { padding-top: 96px; padding-bottom: 160px; }
}

/* Header --------------------------------------------------------- */
.page__header {
  margin-bottom: 56px;
  position: relative;
}

/* Account corner: sign-in affordance in the header's upper-right ---- */
.account-corner {
  position: absolute;
  top: -4px;
  right: 0;
  z-index: 50;
  pointer-events: auto;
}
.account-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  overflow: hidden;
  /* iOS Safari needs these to reliably fire taps on absolutely-positioned
     buttons. touch-action: manipulation also disables the 300ms tap delay. */
  -webkit-tap-highlight-color: rgba(139, 108, 58, 0.24);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.account-btn:active {
  background: rgba(139, 108, 58, 0.14);
  transform: scale(0.94);
}
.account-btn:hover,
.account-btn:focus-visible {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--ink-faded);
  outline: none;
}
.account-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.account-btn__initial {
  font-family: var(--serif-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--paper);
  /* TEMP DEBUG — hot pink ring so we can't miss this element if it's on
     screen anywhere. Revert once we've identified the cause. */
  border: 4px solid hotpink;
  outline: 4px dashed lime;
  border-radius: 2px;
  box-shadow:
    0 2px 6px rgba(58, 46, 34, 0.1),
    0 20px 56px rgba(58, 46, 34, 0.32);
  padding: 6px 0;
  z-index: 2000;
}
.account-menu__header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--serif-display);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}
.account-menu__header em {
  display: block;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faded);
  margin-top: 3px;
  line-height: 1.4;
}
.account-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 14.5px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.account-menu__item i { font-size: 14px; color: var(--ink-faded); }
.account-menu__item:hover,
.account-menu__item:focus-visible {
  background: rgba(139, 108, 58, 0.08);
  color: var(--ink);
  outline: none;
}
.account-menu__item:hover i { color: var(--ink-soft); }
.account-menu__item--muted {
  color: var(--ink-faded);
  font-style: italic;
}
.account-menu__divider {
  height: 1px;
  background: var(--rule-soft);
  margin: 4px 0;
}

/* Save-before-reset modal adds on top of .level-modal-backdrop ----- */
.save-modal { max-width: 440px; }
.save-modal__eyebrow { color: var(--accent); }
.save-modal__eyebrow i { font-size: 14px; }
.save-modal__actions {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.save-modal__primary {
  padding-bottom: 6px;
}

.wordmark {
  font-family: var(--serif-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--ink);
  display: inline-flex;
  gap: 0;
  align-items: baseline;
}
.wordmark__prefix {
  /* Upright half of the wordmark — "Un" in "Unanswer". */
  font-weight: 300;
}
.wordmark__italic {
  /* Italic half — "answer" in "Unanswer". */
  font-style: italic;
  font-weight: 400;
  color: var(--accent-ink);
}

.tagline {
  margin-top: 14px;
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
}
.tagline__sub {
  display: block;
  margin-top: 4px;
  color: var(--ink-faded);
  font-size: 15.5px;
  font-style: italic;
}

/* Writing area --------------------------------------------------- */
.writing {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  position: relative;
}

.previous-question {
  margin-bottom: 24px;
  padding: 14px 16px 14px 18px;
  border-left: 2px solid var(--prev-color, var(--rule));
  background: rgba(255, 255, 255, 0.35);
  animation: rise 0.4s ease both;
}
.previous-question .eyebrow--prev {
  margin-bottom: 6px;
}
.previous-question__text {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}

.writing__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 14px;
}
.writing__label-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.4);
}

.writing__input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  resize: vertical;
  font-family: var(--serif-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  padding: 8px 0 20px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s ease;
  min-height: 120px;
}
.writing__input::placeholder {
  color: var(--ink-muted);
  font-style: italic;
}
.writing__input:focus {
  border-bottom-color: var(--accent);
}

.writing__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.writing__hint {
  font-size: 13px;
  color: var(--ink-faded);
  font-style: italic;
}
.writing__error {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(184, 92, 58, 0.08);
  border-left: 2px solid var(--bloom-0);
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* Buttons -------------------------------------------------------- */
.btn-ink {
  --bs-btn-padding-x: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--serif-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  transition: gap 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-ink:hover,
.btn-ink:focus-visible {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  gap: 12px;
  background: transparent;
}
.btn-ink:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-ink__icon { font-size: 1.1em; }
.btn-ink.is-loading .btn-ink__label { opacity: 0.5; }
.btn-ink.is-loading .btn-ink__icon {
  animation: spin 1.2s linear infinite;
  display: inline-block;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--serif-display);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--ink-soft);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}
.btn-ghost--sm { font-size: 12.5px; padding: 6px 12px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Analysis section ----------------------------------------------- */
.analysis {
  margin-top: 56px;
  padding-top: 40px;
  /* The hex field's top fade already acts as a section break; the
     border-top here just duplicated it as a hard line. */
  animation: rise 0.5s ease both;
}

/* Eyebrows (section micro-labels) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 12px;
}
.eyebrow__icon { font-size: 13px; }
.eyebrow__sep { opacity: 0.6; }
.eyebrow__next {
  color: var(--accent-ink);
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 12px;
}
.eyebrow--trajectory { margin-bottom: 20px; }

/* Bloom's honeycomb map ----------------------------------------- */
.bloom-map-wrap {
  --hex-w: 92px;
  position: relative;
  /* Large negative vertical margins so the wrap *overlaps* the writing
     section above and the where/challenge content below. The field's
     own fade mask (top 20% fading in, bottom 20% fading out) then does
     the right thing — faded hexes start in the writing section, fully
     visible hexes sit near where the section border line used to live,
     and the hexes fade back out into the 'where' section below. */
  margin: -110px calc(-50vw + 50%) -70px;
  padding: 0;
  width: 100vw;
  perspective: 900px; /* enables 3D tilt on child cells */
  overflow: hidden;
  /* Height = 4-row grid height (w * 1.1547 * (rows*0.75 + 0.25) = w * 3.755). */
  min-height: calc(var(--hex-w) * 3.75);
  /* Because the wrap now overlaps neighboring sections (writing above,
     where-block below), its own surface must not swallow clicks meant
     for elements underneath. Re-enable pointer events only on the hex
     cells themselves. */
  pointer-events: none;
}

/* Ambient honeycomb strip behind the Bloom's hexes */
.bloom-field {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--field-width, 100vw);
  min-width: 100vw;
  pointer-events: none;
  z-index: 0;
  /* Two-axis fade — hexes fade in from every edge (top, bottom, left,
     right), so the cluster appears to emerge from a soft ambient haze. */
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 14%, black 86%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-composite: source-in;
}
.bloom-field__hex {
  position: absolute;
  fill: none;
  stroke: rgba(139, 108, 58, 0.09);
  stroke-width: 1;
}
.bloom-map {
  /* --hex-w is inherited from .bloom-map-wrap so the wrap, the map, and the
     field all agree on hex sizing. The map shares its grid geometry with
     .bloom-field — both render their children at absolute positions computed
     in JS from the same formula. z-index keeps Bloom's hexes on top. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  transform-style: preserve-3d;
}
@media (max-width: 575px) {
  .bloom-map-wrap { --hex-w: 68px; margin-bottom: 36px; }
}

.bloom-cell {
  position: absolute;
  /* width/height + left/top come from inline style set in JS so the cell
     lands exactly on a shared grid position. */
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  /* Re-enable pointer events on the hexes only (wrap is pointer-events:none
     so it doesn't block clicks to neighboring sections). */
  pointer-events: auto;
  /* Transform order: tilt (from cursor) → then scale (from press). Scaling
     on :hover caused an oscillation because the scaled-up hit area could
     flicker in/out as the cursor sat near a clip-path edge, producing a
     visible pulse. Keep only the press/active scale — tilt alone carries
     the hover feedback. */
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale(var(--push, 1));
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.bloom-cell:active { --push: 0.93; transition-duration: 0.08s; }
/* Shine layer — a soft radial highlight that tracks the cursor, clipped
   to the hex shape. Inert until hovered. */
.bloom-cell__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 22%,
    transparent 55%
  );
  mix-blend-mode: screen;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.bloom-cell:hover .bloom-cell__shine { opacity: 1; }
.bloom-cell.is-active .bloom-cell__shine { mix-blend-mode: overlay; }
.bloom-cell__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: var(--cell-color);
  stroke-width: 1.5;
  opacity: 0.55;
  transition:
    fill 0.5s ease,
    stroke-width 0.3s ease,
    opacity 0.3s ease,
    filter 0.3s ease;
}
.bloom-cell__label {
  /* The button expands to cover the full hex shape so clicks anywhere
     inside the hex land on the button, not only where the text sits.
     clip-path matches the hex polygon so adjacent cells never steal
     clicks along the edges. */
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 3;
  text-align: center;
  line-height: 1.05;
  padding: 0 6px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.bloom-cell__label:focus-visible {
  /* Use an inset ring drawn inside the hex since outline can't follow
     clip-path. Mirrors the level's own color. */
  box-shadow: inset 0 0 0 2px var(--cell-color);
}
.bloom-cell__name {
  display: block;
  font-family: var(--serif-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: color 0.3s ease, font-weight 0.3s ease;
}
.bloom-cell__verb {
  display: block;
  margin-top: 3px;
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-faded);
  letter-spacing: 0.03em;
  transition: color 0.3s ease;
}

.bloom-cell.is-visited .bloom-cell__shape {
  fill: color-mix(in srgb, var(--cell-color) 16%, var(--paper));
  opacity: 0.9;
}
.bloom-cell.is-active .bloom-cell__shape {
  fill: var(--cell-color);
  stroke-width: 2;
  opacity: 1;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cell-color) 45%, transparent));
}
.bloom-cell.is-active .bloom-cell__name {
  color: var(--paper);
  font-weight: 500;
}
.bloom-cell.is-active .bloom-cell__verb {
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

@media (max-width: 575px) {
  .bloom-cell__name { font-size: 11px; }
  .bloom-cell__verb { font-size: 9px; margin-top: 2px; }
}

/* Level info modal ---------------------------------------------- */
.level-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(58, 46, 34, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFade 0.25s ease both;
}
.level-modal {
  background: var(--paper);
  color: var(--ink);
  max-width: 460px;
  width: 100%;
  padding: 32px 32px 28px;
  border-radius: 4px;
  position: relative;
  box-shadow:
    0 20px 60px rgba(58, 46, 34, 0.3),
    0 0 0 1px rgba(90, 70, 50, 0.12);
  animation: modalRise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.level-modal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cell-color);
  border-radius: 4px 0 0 4px;
}
.level-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: var(--ink-faded);
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.level-modal__close:hover,
.level-modal__close:focus-visible {
  color: var(--ink);
  background: rgba(90, 70, 50, 0.08);
  outline: none;
}
.level-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cell-color);
  margin-bottom: 10px;
}
.level-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cell-color);
  display: inline-block;
}
.level-modal__title {
  margin: 0 0 10px;
  font-family: var(--serif-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.level-modal__summary {
  margin: 0 0 20px;
  font-family: var(--serif-body);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.level-modal__details {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 10px;
}
.level-modal__details dt {
  font-family: var(--serif-display);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  padding-top: 2px;
}
.level-modal__details dd {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 575px) {
  .level-modal { padding: 24px 22px 22px; }
  .level-modal__title { font-size: 22px; }
  .level-modal__details { grid-template-columns: 1fr; row-gap: 14px; }
  .level-modal__details dt { padding-top: 0; }
}

/* Where / Challenge cards --------------------------------------- */
.where, .challenge {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule-soft);
}
.where:last-child, .challenge:last-child { border-bottom: 0; }

.where__level {
  font-family: var(--serif-display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--level-color, var(--ink));
}
.where__level::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--level-color, var(--ink));
  margin-right: 14px;
  vertical-align: middle;
  transform: translateY(-4px);
}
.where__why {
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 36em;
}

.challenge__body {
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 36em;
}

/* Critical Thinking Boost ---------------------------------------- */
.boost {
  padding: 18px 20px;
  margin-bottom: 28px;
  border: 1px solid var(--rule-soft);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.15)
  );
  position: relative;
}
.boost::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--level-color, var(--accent));
  opacity: 0.8;
}
.boost .eyebrow--boost {
  margin-bottom: 8px;
  color: var(--level-color, var(--accent-ink));
}
.boost__body {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 36em;
}

/* Revise prompt -------------------------------------------------- */
.revise {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.revise__prompt {
  margin: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* Movement banner ------------------------------------------------ */
.movement {
  margin-bottom: 28px;
  padding: 14px 18px;
  border-left: 3px solid var(--mv-color, var(--accent));
  background: var(--mv-bg, rgba(139, 108, 58, 0.06));
  font-family: var(--serif-body);
  font-size: 15.5px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  animation: rise 0.5s ease both;
}
.movement__icon { font-size: 16px; color: var(--mv-color, var(--accent)); }
.movement__from { font-style: italic; color: var(--ink-faded); }
.movement__arrow { color: var(--ink-muted); }
.movement__to { color: var(--mv-color); font-weight: 500; }
.movement__note { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 14.5px; }

/* Trajectory ----------------------------------------------------- */
.trajectory {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.trajectory__stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.attempt {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.attempt:last-child { border-bottom: 0; }
.attempt__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faded);
  padding-top: 3px;
}
.attempt__text {
  font-family: var(--serif-body);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.attempt__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif-display);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color) 15%, var(--paper));
  color: var(--tag-color);
  border: 1px solid color-mix(in srgb, var(--tag-color) 35%, transparent);
  white-space: nowrap;
  align-self: start;
}
.attempt__tag--current {
  background: var(--tag-color);
  color: var(--paper);
}

/* Reflection ----------------------------------------------------- */
.reflection {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  animation: rise 0.5s ease both;
}
.eyebrow--reflection { margin-bottom: 14px; }

.reflection__compare {
  margin: 4px 0 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.reflection__compare-arrow {
  color: var(--ink-muted);
  font-size: 18px;
  text-align: center;
  line-height: 1;
  padding: 2px 0;
  opacity: 0.55;
}
.anchor {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  position: relative;
}
.anchor--first::before,
.anchor--latest::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tag-color, var(--accent));
  opacity: 0.45;
}
.anchor__eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.anchor__label {
  font-family: var(--serif-display);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.anchor__level {
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--tag-color, var(--accent));
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--tag-color, var(--accent)) 35%, transparent);
}
.anchor__text {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.anchor--first .anchor__text {
  font-style: italic;
  color: var(--ink-soft);
}
.anchor--first::before { opacity: 0.35; }
.anchor--latest::before { opacity: 0.85; }

.reflection__prompt {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 36em;
}
.reflection__input {
  width: 100%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  min-height: 88px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.reflection__input::placeholder {
  color: var(--ink-muted);
  font-style: italic;
}
.reflection__input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.6);
}
.reflection__footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.reflection__status {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-faded);
  transition: opacity 0.4s ease;
}
.reflection__history {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reflection__entry {
  padding: 12px 14px;
  border-left: 2px solid var(--rule);
  background: rgba(255, 255, 255, 0.25);
}
.reflection__meta {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faded);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.reflection__text {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* Footer --------------------------------------------------------- */
.page__footer {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.colophon {
  margin: 0;
  font-size: 13px;
  color: var(--ink-faded);
  line-height: 1.5;
  font-style: italic;
  text-wrap: pretty;
}
.colophon a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.colophon a:hover { text-decoration-color: currentColor; }

.copyright {
  align-self: stretch;
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

/* History page --------------------------------------------------- */
.page--history { padding-top: 56px; }
.page__header--history { margin-bottom: 40px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-family: var(--serif-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-faded);
  text-decoration: none;
  padding: 6px 2px 6px 0;
  transition: color 0.2s ease, gap 0.2s ease;
}
.back-link:hover,
.back-link:focus-visible {
  color: var(--ink);
  gap: 10px;
  outline: none;
}

.history__state {
  padding: 48px 0;
  text-align: left;
}
.history__state-text {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 36em;
}

.history { padding-top: 24px; }
.history__eyebrow { margin-bottom: 18px; }
.history__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.session {
  border-top: 1px solid var(--rule);
}
.session:last-child { border-bottom: 1px solid var(--rule); }
.session__header {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 20px 0;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  color: var(--ink);
  font-family: var(--serif-body);
  transition: background 0.15s ease;
}
.session__header:hover {
  background: rgba(255, 255, 255, 0.25);
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.session__meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.session__stats { font-style: italic; letter-spacing: 0.08em; text-transform: none; font-size: 12.5px; color: var(--ink-muted); }
.session__first {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 40em;
}
.session__journey {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-family: var(--serif-display);
  font-size: 11.5px;
}
.session__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tag-color);
  background: color-mix(in srgb, var(--tag-color) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--tag-color) 35%, transparent);
}
.session__arrow { color: var(--ink-muted); font-size: 13px; }
.session__chev {
  margin-left: auto;
  color: var(--ink-faded);
  font-size: 14px;
  transition: transform 0.25s ease;
}
.session.is-open .session__chev { transform: rotate(180deg); }

.session__detail {
  padding: 8px 0 28px 0;
  animation: rise 0.3s ease both;
}
.session__trajectory { margin-bottom: 24px; }
.session__trajectory .eyebrow,
.session__reflections .eyebrow {
  margin-bottom: 14px;
}
.session__trajectory .attempts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.session__trajectory .attempt {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.session__trajectory .attempt:last-child { border-bottom: 0; }
.session__trajectory .attempt__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.session__trajectory .attempt__why {
  margin: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-faded);
  line-height: 1.5;
}
.reflection__history--inline { margin-top: 0; }

@media (max-width: 575px) {
  .session__header { gap: 10px; }
  .session__first { font-size: 16.5px; }
  .session__journey { flex-wrap: wrap; }
  .session__chev { margin-left: 0; }
  .session__trajectory .attempt {
    grid-template-columns: 28px 1fr;
  }
  .session__trajectory .attempt__tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* Motion --------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Skip link ------------------------------------------------------ */
.visually-hidden-focusable:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  z-index: 1000;
  text-decoration: none;
}