/* ==========================================================================
   Textum Media — concept.css
   Page-only rules for /concept. Loaded after site.css.

   Everything here either lays out the two-column stepped form page or
   extends a shared component (.field, .pill, .steps, .notice) for this
   page. No new parallel components, no hex, no raw px except 1px
   hairlines. Every value comes from tokens.css.

   CONTENTS
     01 Page shell + two-column grid
     02 Form column
     03 Progress indicator
     04 Steps (one fieldset visible at a time, JS only)
     05 Needs pills (checkbox group)
     06 Honeypot
     07 Notice + controls
     08 Success panel
     09 Sticky aside
   ========================================================================== */


/* == 01 Page shell + two-column grid ====================================== */

/* The page head already carries the top rhythm and a hairline, so the form
   section opens tighter than a standard --space-section. */
.cf-section {
  padding-block: var(--space-9);
}

.cf-grid {
  align-items: start;
}


/* == 02 Form column ======================================================= */

.cf-main > * + * {
  margin-top: var(--space-6);
}

.cf-main__title {
  font-size: var(--fs-xl);
  max-width: 18ch;
}

.cf-main__intro {
  font-size: var(--fs-sm);
  max-width: var(--measure);
}

/* <noscript> is inline by default; the notice inside needs a block box. */
.cf-noscript {
  margin-top: var(--space-4);
}


/* == 03 Progress indicator ================================================ */

/* Without JavaScript every step is visible at once, so the indicator has
   nothing to track and stays out of the way. */
.cf-progress {
  display: none;
}

/* A fixed minimum holds the text plus the bar even when the label wraps to
   two lines, so moving between steps never shifts the layout. */
.js .cf-progress {
  display: grid;
  gap: var(--space-2);
  min-height: calc(var(--space-7) + var(--space-2));
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.cf-progress__text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--fg-2);
}

.cf-progress__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-progress__seg {
  min-height: var(--space-1);
  border-radius: var(--r-pill);
  background-color: var(--line);
}

.cf-progress__seg.is-active,
.cf-progress__seg.is-done {
  background-color: var(--signal);
}


/* == 04 Steps ============================================================= */

/* All three steps stack with JS off. Only JavaScript collapses them to one
   at a time, by adding .is-active to the current step. */
.cf-form {
  display: grid;
  gap: var(--space-5);
}

.js .cf-step {
  display: none;
}

.js .cf-step.is-active {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.cf-step {
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

.cf-step__title {
  padding: 0;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  color: var(--fg);
  /* The legend takes focus on every step change and scrolls itself in;
     keep it clear of the sticky nav. */
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

.cf-step__title:focus {
  outline: none;
}

.cf-step__title:focus-visible {
  outline: var(--focus-width) solid var(--ring);
  outline-offset: var(--focus-offset);
}

/* The "no website yet" checkbox sits inside the website field, under the hint. */
.cf-no-website {
  margin-top: var(--space-2);
}


/* == 05 Needs pills (checkbox group) ====================================== */

.cf-choice {
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

.cf-choice__legend {
  display: block;
  margin-bottom: var(--space-1);
}

.cf-choice__hint {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.cf-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* The <label> is the hit area; the visually-hidden checkbox inside it stays
   focusable and keeps the visible checked state on its own pill. */
.cf-choice__option {
  display: inline-flex;
  max-width: 100%;
  cursor: pointer;
}

.cf-choice__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  padding: var(--space-1) var(--space-2);
  max-width: 100%;
  white-space: normal;
  text-align: left;
  font-size: var(--fs-sm);
  background-color: var(--surface-card);
  color: var(--fg);
  user-select: none;
}

/* The check mark: drawn but invisible until the box is checked, so picking
   a pill never reflows its neighbours. */
.cf-choice__check {
  width: var(--space-2);
  height: var(--space-2);
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.6);
}

.cf-choice__option:hover .cf-choice__pill {
  border-color: var(--fg);
}

.cf-choice__input:checked + .cf-choice__pill {
  background-color: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
}

.cf-choice__input:checked + .cf-choice__pill .cf-choice__check {
  opacity: 1;
  transform: none;
}

/* The checkbox itself is clipped to a hairline, so the ring has to be drawn
   on the pill that stands in for it. */
.cf-choice__input:focus-visible + .cf-choice__pill {
  outline: var(--focus-width) solid var(--ring);
  outline-offset: var(--focus-offset);
}


/* == 06 Honeypot ==========================================================
   Off-screen rather than display:none, so a bot that ignores hidden fields
   still fills it. Never shown, never focusable, never announced.
   ======================================================================== */

.cf-hp {
  position: absolute;
  /* Far off-screen, built from a spacing token so no raw length is needed. */
  left: calc(-100 * var(--space-12));
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* == 07 Notice + controls ================================================= */

/* The live region is always in the DOM so screen readers announce a server
   error the moment it lands; it must not open a gap while it is empty. */
.cf-notice:empty {
  display: none;
}

.cf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

/* Side by side with room, full-width stacked on a narrow phone. Every
   control clears a 44px tap target. */
.cf-controls .btn {
  flex: 1 1 12rem;
  justify-content: center;
  min-height: var(--space-6);
}

/* .btn sets display:inline-flex, which outranks the global [hidden] rule at
   the same specificity — so the Back button needs its own hiding rule for
   step 1. */
.cf-back[hidden] {
  display: none;
}

.cf-promise {
  max-width: var(--measure);
}

.cf-next[disabled] .arrow {
  transform: none;
}


/* == 08 Success panel ===================================================== */

/* .notice--success is a signal-blue block, so the default blue focus ring
   would be invisible on it — the panel takes focus after a successful post. */
.cf-success {
  --ring: var(--on-signal);
  padding: var(--space-4);
  /* The panel takes focus and scrolls itself in; keep it clear of the
     sticky nav. */
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

.cf-success__body > * + * {
  margin-top: var(--space-2);
}


/* == 09 Sticky aside ====================================================== */

.cf-aside {
  align-self: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.cf-aside__sticky > * + * {
  margin-top: var(--space-5);
}

.cf-aside__title {
  font-size: var(--fs-xl);
  max-width: 16ch;
}

/* .steps goes two-column at 901px, which is far too wide for a 4-column
   aside — keep the numbered rows stacked and tighter at every width. */
.cf-steps .steps__item {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding-block: var(--space-3);
}

.cf-steps .steps__title {
  font-size: var(--fs-md);
  margin-bottom: 0;
}

.cf-direct {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  justify-items: start;
}

.cf-direct__body {
  font-size: var(--fs-sm);
  max-width: var(--measure-narrow);
}

.cf-direct__list {
  display: grid;
  gap: var(--space-1);
}

.cf-direct__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--link);
  text-decoration: none;
}

.cf-direct__link:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cf-direct__icon {
  width: var(--space-3);
  height: var(--space-3);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The page grid goes two-column at 901px (site.css), but a 4-of-12 aside is
   too narrow to hold its own heading and hint text at that width. Stay
   single-column through that range and only split once the aside has enough
   room to read comfortably. */
@media (min-width: 901px) and (max-width: 1099px) {
  .cf-main,
  .cf-aside {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  /* On desktop the aside sits beside the form, so the mobile separator is
     replaced by a hairline that travels with the sticky block. */
  .cf-aside {
    padding-top: 0;
    border-top: 0;
  }

  .cf-aside__sticky {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-4));
    padding-left: var(--space-6);
    border-left: 1px solid var(--rule);
  }
}


/* == 10 Motion ============================================================
   State feedback only. Everything here is decorative and sits inside the
   reduced-motion guard; the form works identically without it.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .cf-choice__pill,
  .cf-choice__check,
  .cf-progress__seg {
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease),
      color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }
}