/* The intake flow's own rules. Everything the flow needs to sit on a site page
   is in this file; lab.css owns only the lab furniture around it. Tokens come
   from site/assets/tokens.css, nothing here restates a colour. */

.it {
  --it-rail: 232px;
  --it-pad-x: clamp(24px, 6vw, 96px);
  --it-pad-y: clamp(32px, 7vh, 88px);
  --it-measure: 720px;
  --it-move: 460ms;
  --it-shadow-rest: 0 1px 1px var(--hairline-paper), 0 16px 38px -26px var(--brass-hair);
  --it-shadow-lift: 0 1px 1px var(--hairline-paper), 0 22px 48px -26px var(--brass-hair);
  position: relative;
  display: grid;
  grid-template-columns: var(--it-rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "rail stage"
    "rail foot";
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
}

.it *,
.it *::before,
.it *::after { box-sizing: border-box; }

.it h2,
.it p,
.it ol { margin: 0; }
.it ol { padding: 0; list-style: none; }

.it button { font: inherit; color: inherit; }

/* ---------- head ---------- */

.it__head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 24px 14px 28px;
  border-bottom: 1px solid var(--hairline-paper);
}

.it__brand {
  font-size: 22px;
  line-height: 1;
}

.it__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  font-size: var(--t-small);
}

.it__title strong { font-weight: 500; }

.it__minutes {
  color: var(--clay);
  white-space: nowrap;
}

.it[data-resumed="1"] .it__minutes::after { content: ", picking up where you left off"; }

.it__saved {
  margin-left: auto;
  color: var(--clay);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.it__saved[data-on="1"] { opacity: 1; }

.it__close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -6px -8px -6px 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.it__close:hover { border-color: var(--hairline-paper); background: var(--bone); }

/* ---------- rail ---------- */

.it__rail {
  grid-area: rail;
  position: relative;
  padding: var(--it-pad-y) 20px var(--it-pad-y) 28px;
  border-right: 1px solid var(--hairline-paper);
  overflow: hidden;
}

.it__chapters {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* The line. Its x is the dot centre. It runs past the last chapter to the cap. */
.it__chapters::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 6px;
  left: 6px;
  width: 1px;
  background: var(--hairline-paper);
}

.it__end {
  display: grid;
  grid-template-columns: 13px;
  height: 13px;
}

.it__cap {
  display: block;
  width: 9px;
  height: 1px;
  margin: 6px 0 0 2px;
  background: var(--rule-mark);
  transition: background 300ms var(--ease);
}

.it[data-done="1"] .it__cap { background: var(--brass); }

.it__chapter {
  position: relative;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  grid-template-areas:
    "dot label"
    "ticks ticks";
  column-gap: 14px;
  align-items: center;
}

.it__dot {
  grid-area: dot;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--rule-mark);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}

.it__chapter-label {
  grid-area: label;
  color: var(--clay);
  font-size: var(--t-small);
  line-height: 1.2;
  transition: color 300ms var(--ease);
}

.it__chapter[data-state="current"] .it__chapter-label,
.it__chapter[data-state="part"] .it__chapter-label { color: var(--ink); }
.it__chapter[data-state="done"] .it__chapter-label { color: var(--ink-soft); }

/* A chapter fills the moment it is reached, Can's ruling 2026-09-02: the
   dots are the only marks on the line, so a reached one that stayed hollow
   read as not yet begun. Current, part and done are one look; only what is
   still ahead is hollow. */
.it__chapter[data-state="current"] .it__dot,
.it__chapter[data-state="part"] .it__dot,
.it__chapter[data-state="done"] .it__dot { border-color: var(--brass); background: var(--brass); }

/* Ticks: one per question, on the line, under the chapter dot. */
.it__ticks {
  grid-area: ticks;
  display: none;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px;
  padding-left: 0;
}

.it[data-rail="ticks"] .it__ticks { display: flex; }

.it__tick { display: block; height: 7px; }

.it__tick-btn {
  display: block;
  width: 13px;
  height: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.it__tick-btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 7px;
  height: 1px;
  background: var(--rule-mark);
  transition: background 300ms var(--ease), width 300ms var(--ease);
}

.it__tick[data-state="done"] .it__tick-btn::before { width: 9px; background: var(--brass); }
.it__tick[data-state="open"] .it__tick-btn::before { background: var(--clay); }
.it__tick-btn:disabled { cursor: default; }

/* The spark: the same copper point that walks section 5's line. */
.it__spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brass-bright);
  box-shadow: 0 0 0 4px var(--brass-wash), 0 0 14px 1px var(--brass-hair);
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%));
  transition: transform var(--it-move) var(--ease), opacity 300ms var(--ease);
}

:root:not([data-theme="dark"]) .it__spark { background: var(--brass); }
.it__spark[data-on="1"] { opacity: 1; }
/* Off since 2026-09-02, Can's ruling: a second, larger point travelling the
   line beside the chapter dots read as a dot of its own. The fill still
   moves with every question; the engine still places the spark, so this is
   one line to take back. */
.it__spark { display: none; }

/* The copper fill on the line, dot to dot, placed by script. */
.it__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: var(--brass);
  pointer-events: none;
  transition: width var(--it-move) var(--ease), height var(--it-move) var(--ease), left var(--it-move) var(--ease), top var(--it-move) var(--ease);
}

.it[data-rail="counter"] .it__rail { display: none; }
.it[data-rail="counter"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "stage"
    "foot";
}

/* ---------- stage ---------- */

.it__stage {
  grid-area: stage;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.it__q {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--it-pad-y) var(--it-pad-x);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transform: translateY(0);
  transition: transform var(--it-move) var(--ease), opacity calc(var(--it-move) * 0.8) var(--ease);
}

.it__q[data-enter="up"] { opacity: 0; transform: translateY(44px); }
.it__q[data-enter="down"] { opacity: 0; transform: translateY(-44px); }
.it__q[data-leave="up"] { opacity: 0; transform: translateY(-44px); pointer-events: none; }
.it__q[data-leave="down"] { opacity: 0; transform: translateY(44px); pointer-events: none; }

.it__q > * { max-width: var(--it-measure); }

.it__chapter-name {
  margin-bottom: 14px;
  color: var(--clay);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.it__ask {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 2.55rem);
  font-weight: var(--display-weight);
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
}

.it__why {
  margin-top: 12px;
  max-width: 52ch;
  color: var(--ink-soft);
  font-family: var(--quote);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: 1.4;
}

.it__answer {
  margin-top: clamp(26px, 4vh, 40px);
  width: 100%;
}

/* ---------- inputs ---------- */

.it__field { display: block; position: relative; }

.it__field[data-shake="1"] { animation: it-shake 480ms var(--ease); }

@keyframes it-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

.it__label {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
  color: var(--clay);
  font-size: var(--t-small);
}

.it__optional {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.it__input,
.it__area {
  display: block;
  width: 100%;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--rule-mark);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.it__area {
  min-height: 2.6em;
  max-height: 360px;
  resize: none;
  overflow-y: auto;
}

.it__input::placeholder,
.it__area::placeholder { color: var(--clay); opacity: 0.75; }

.it__input:focus,
.it__area:focus {
  border-bottom-color: var(--brass);
  box-shadow: 0 1px 0 0 var(--brass);
}

.it__answer[data-type="fields"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px 36px;
}

.it__field--follow {
  margin-top: 26px;
  max-width: 480px;
}

.it__field--follow .it__input { font-size: var(--t-body); }

.it__field--line {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
}

.it__field--line + .it__field--line { margin-top: 10px; }

.it__line-n {
  color: var(--clay);
  font-family: var(--mono);
  font-size: var(--t-small);
}

.it__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 14px 7px 10px;
  border: 1px dashed var(--rule-mark);
  border-radius: 999px;
  background: transparent;
  color: var(--clay);
  cursor: pointer;
  font-size: var(--t-small);
  line-height: 1.2;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.it__more:hover { border-color: var(--brass); color: var(--ink); }
.it__more[hidden] { display: none; }

/* ---------- choice ---------- */

.it__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
}

.it__choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--hairline-paper);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-size: var(--t-body);
  text-align: left;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), translate 180ms var(--ease);
}

.it__choice:hover { border-color: var(--brass-hair); background: var(--brass-wash); }
.it__choice[aria-checked="true"] { border-color: var(--brass); background: var(--brass-wash); }

.it__key {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--hairline-paper);
  border-radius: 6px;
  color: var(--clay);
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1;
}

.it__choice[aria-checked="true"] .it__key { border-color: var(--brass); color: var(--brass-bright); }
:root:not([data-theme="dark"]) .it__choice[aria-checked="true"] .it__key { color: var(--brass); }

/* ---------- chips ---------- */

.it__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.it__chip {
  padding: 9px 16px;
  border: 1px solid var(--hairline-paper);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: var(--t-small);
  line-height: 1.2;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.it__chip:hover { border-color: var(--brass-hair); }
.it__chip[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-wash); }

/* ---------- need ---------- */

.it__need {
  min-height: 1.4em;
  margin-top: 14px;
  color: var(--down);
  font-size: var(--t-small);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.it__q[data-need="1"] .it__need { opacity: 1; }

/* ---------- foot ---------- */

.it__foot {
  grid-area: foot;
  padding: 14px 24px 16px var(--it-pad-x);
  border-top: 1px solid var(--hairline-paper);
}

.it__foot-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.it__foot[data-done="1"] .it__foot-in > * { visibility: hidden; }

.it__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--t-small);
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.it__back:hover { border-color: var(--hairline-paper); color: var(--ink); }
.it__back[hidden] { visibility: hidden; display: inline-flex; }

.it__go {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.it__hint {
  color: var(--clay);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.it__hint kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--hairline-paper);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.2;
}

.it__counter {
  color: var(--clay);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* The site button, restated so the flow can stand alone. */
.it .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.95rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--brass);
  box-shadow: var(--it-shadow-rest);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  transition: translate 450ms var(--ease), background-color 450ms var(--ease), box-shadow 450ms var(--ease);
}

.it .btn:hover {
  background: var(--brass-bright);
  box-shadow: var(--it-shadow-lift);
  translate: 0 -2px;
}

:root:not([data-theme="dark"]) .it .btn { color: var(--paper); }

/* ---------- done ---------- */

.it__why--done { max-width: 56ch; }

.it__done-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(26px, 4vh, 40px);
}

.it__again {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clay);
  cursor: pointer;
  font-size: var(--t-small);
  text-decoration: underline;
  text-decoration-color: var(--rule-mark);
  text-underline-offset: 0.25em;
}

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

/* ---------- layouts ---------- */

/* Centre: the rail stays, the question sits in a measure in the middle of
   what is left, and the foot lines up under it. */
.it[data-layout="centre"] .it__q { align-items: center; }
.it[data-layout="centre"] .it__q > * { width: 100%; }
.it[data-layout="centre"] .it__foot { padding-right: var(--it-pad-x); }
.it[data-layout="centre"] .it__foot-in { max-width: var(--it-measure); margin-inline: auto; }

/* Column: one condensed column. The chapters run across the top with the
   line through them, the question sits under, narrower. */
.it[data-layout="column"] {
  --it-measure: 660px;
  --it-column: 860px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head"
    "rail"
    "stage"
    "foot";
}

.it[data-layout="column"][data-rail="counter"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head" "stage" "foot";
}

.it[data-layout="column"] .it__rail {
  padding: 26px var(--it-pad-x) 20px;
  border-right: 0;
  border-bottom: 1px solid var(--hairline-paper);
}

.it[data-layout="column"] .it__chapters {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  gap: 0;
  max-width: var(--it-column);
  margin-inline: auto;
}

.it[data-layout="column"] .it__chapters::before {
  top: 6px;
  right: calc(50% / var(--n, 6));
  bottom: auto;
  left: calc(50% / var(--n, 6));
  width: auto;
  height: 1px;
}

.it[data-layout="column"] .it__chapter {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "dot" "label";
  justify-items: center;
  /* Packed to the top, so a label that wraps cannot move a dot. The outer
     grid stretches every chapter to the tallest one, and stretched auto
     rows share that height out and centre the dot in a taller row: with one
     two line label the other five dots sat 5px under the line. Seen on the
     sheet 2026-09-02. */
  align-content: start;
  align-items: start;
  row-gap: 10px;
}

.it[data-layout="column"] .it__chapter-label { text-align: center; }
.it[data-layout="column"] .it__ticks { display: none; }

.it[data-layout="column"] .it__end {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.it[data-layout="column"] .it__cap {
  width: 1px;
  height: 9px;
  margin: 2px 0 0;
}
.it[data-layout="column"] .it__q { align-items: center; }
.it[data-layout="column"] .it__q > * { width: 100%; }
.it[data-layout="column"] .it__foot { padding-right: var(--it-pad-x); }
.it[data-layout="column"] .it__foot-in { max-width: var(--it-measure); margin-inline: auto; }

/* ---------- reduced motion ---------- */

html[data-reduced-motion="true"] .it__q,
html[data-reduced-motion="true"] .it__spark,
html[data-reduced-motion="true"] .it__fill,
html[data-reduced-motion="true"] .it__field { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .it__q,
  .it__spark,
  .it__fill,
  .it__field { transition: none !important; animation: none !important; }
}

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .it {
    --it-pad-x: 22px;
    --it-pad-y: 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head"
      "rail"
      "stage"
      "foot";
  }

  .it[data-rail="counter"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "stage" "foot";
  }

  .it__head { gap: 12px; padding: 12px 16px 10px 18px; }
  .it__minutes { display: none; }
  .it[data-resumed="1"] .it__minutes::after { content: none; }

  .it__rail {
    padding: 14px 22px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline-paper);
  }

  .it__chapters {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .it__chapters::before {
    top: 6px;
    right: 6px;
    bottom: auto;
    left: 6px;
    width: auto;
    height: 1px;
  }

  .it__chapter { grid-template-columns: 13px; grid-template-areas: "dot"; }
  .it__chapter-label,
  .it[data-rail="ticks"] .it__ticks { display: none; }
  .it__cap { width: 1px; height: 9px; margin: 2px 0 0 6px; }
  .it[data-layout="column"] .it__cap { margin: 2px 0 0; }

  .it__q { justify-content: flex-start; }
  .it__ask { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .it__why { font-size: var(--t-body); }
  .it__answer[data-type="fields"] { gap: 20px; }

  .it__foot { padding: 12px 16px 14px 18px; }
  .it__foot-in { gap: 10px; }
  .it[data-layout="column"] .it__rail { padding: 14px 22px 12px; }
  .it[data-layout="column"] .it__chapter { row-gap: 0; }

  .it__hint { display: none; }
  .it__back span:last-child { display: none; }
  .it__back { padding: 8px 10px; }
}