/* ------------------------------------------------------------------
   The ICP generator.

   Sits on top of styles.css. Everything here is namespaced under .gen,
   because names like card, btn, field and row collide with the main
   sheet otherwise.

   It is a wizard. Steps run down the left like a checkout, the current
   question sits on the right as a headline with its fields under it,
   Back is quiet and Next is obvious. The finished file is the last
   screen. Nothing about how the file is built changed, only what is
   on screen at once.
   ------------------------------------------------------------------ */

.gen {
  background: var(--page);
  padding: clamp(24px, 3.5vw, 44px) 20px clamp(56px, 7vw, 88px);
}

.gen__wrap {
  max-width: 1160px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ shell */

.wiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (min-width: 900px) {
  .wiz { grid-template-columns: 280px minmax(0, 1fr); }
}

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

.wiz__rail {
  background: var(--brand-wash);
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
}

@media (min-width: 900px) {
  .wiz__rail {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 30px 26px;
  }
}

.wiz__count {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.wiz__bar {
  height: 5px;
  border-radius: 999px;
  background: #D6EDE0;
  overflow: hidden;
}
.wiz__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s var(--ease-out);
}

.wiz__steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
}
@media (min-width: 900px) { .wiz__steps { display: flex; } }

.wiz__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-control);
  font-size: 15px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.wiz__step:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
.wiz__step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.wiz__step i {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--ink-faint);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.wiz__step.is-now { color: var(--ink); font-weight: 600; }
.wiz__step.is-now i { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.wiz__step.is-done i {
  background: var(--brand-mint);
  border-color: var(--brand-mint);
  color: var(--brand);
}
.wiz__step.is-done i::before { content: "\2713"; }
.wiz__step.is-done i span { display: none; }

.wiz__rail-note {
  margin: 26px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- pane */

.wiz__pane {
  padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3.5vw, 44px) clamp(22px, 3vw, 32px);
  min-height: 460px;
  display: flex;
  flex-direction: column;
}

/* One step at a time. The legend is the headline of the screen. */
.gen fieldset[data-step] { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.gen fieldset[data-step].is-now {
  display: block;
  animation: wiz-in 0.3s var(--ease-out) both;
}
@keyframes wiz-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.gen legend {
  float: left;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.gen legend + * { clear: left; }
.gen legend .step { display: none; }

.gen .help {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- the start

   The first screen. Pick a template, which fills every step in, or
   start with nothing. */

.wiz__start { animation: wiz-in 0.3s var(--ease-out) both; }
.wiz__start[hidden] { display: none; }

.wiz__start-title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.wiz__start-choices {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .wiz__start-choices { grid-template-columns: 1fr 1fr; }
}

.wiz__choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: left;
}
.wiz__choice--template {
  background: var(--brand-wash);
  border-color: #D6EDE0;
}
.wiz__choice-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.wiz__choice-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.wiz__choice select { margin-top: 6px; }
.wiz__choice-btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 600 15px Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.wiz__choice-btn:hover { border-color: var(--accent); color: var(--accent); }
.wiz__choice-btn:focus-visible { outline: 3px solid var(--brand-mint); outline-offset: 1px; }

/* ------------------------------------------------------------ fields */

.gen .field { margin-bottom: 18px; }

.gen .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
}
@media (min-width: 640px) {
  .gen .row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gen label {
  display: block;
  margin-bottom: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.gen label .opt { font-weight: 400; color: var(--ink-faint); }

.gen input[type="text"],
.gen input[type="email"],
.gen input[type="number"],
.gen textarea,
.gen select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  /* 16px so iOS does not zoom the page when a field is tapped */
  font: 16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
  transition: border-color 0.2s var(--ease-out);
}
.gen textarea { min-height: 108px; resize: vertical; }

.gen input:hover, .gen textarea:hover, .gen select:hover { border-color: var(--ink-faint); }
.gen input:focus, .gen textarea:focus, .gen select:focus,
.gen button:focus-visible, .gen a:focus-visible {
  outline: 3px solid var(--brand-mint);
  outline-offset: 1px;
  border-color: var(--accent);
}

.gen .hint { margin-top: 6px; font-size: 13px; color: var(--ink-faint); }

.gen .checks { display: grid; gap: 8px; }
.gen .check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.gen .check:hover { border-color: var(--line-strong); background: var(--brand-wash); }
.gen .check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.gen .check small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-faint); }

.gen .warnbox {
  display: none;
  margin-top: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-control);
  background: var(--warn-bg);
  color: #7A3A06;
  font-size: 14px;
  line-height: 1.5;
}
.gen .warnbox.show { display: block; }

/* -------------------------------------------------------------- nav */

.wiz__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.wiz__nav[hidden] { display: none; }
.wiz__nav [data-next] { margin-left: auto; }
.wiz__nav [data-back][hidden] { display: none; }

.gen .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-control);
  font: 600 16px Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.gen .btn.primary { background: var(--accent); color: #FFFFFF; }
.gen .btn.primary:hover { background: var(--accent-hover); }
.gen .btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.gen .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.gen .btn.quiet { background: transparent; color: var(--ink-soft); padding-left: 8px; padding-right: 8px; }
.gen .btn.quiet:hover { color: var(--ink); }
.gen .btn.reset { margin-left: auto; background: transparent; color: var(--ink-faint); padding: 12px 8px; }
.gen .btn.reset:hover { color: var(--ink); }

/* ------------------------------------------------------------ result */

.gen .out { animation: wiz-in 0.3s var(--ease-out) both; }
.gen .out[hidden] { display: none; }

.gen .outhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.gen .outhead h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.gen .outhead .meta {
  font-size: 13.5px;
  color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The file, shown as a file. */
.gen pre#preview {
  margin: 0;
  padding: 18px 20px;
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #FBFDFC;
  color: var(--ink);
  font: 13.5px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.gen .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.gen .status {
  min-height: 20px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--accent);
}

.gen .next {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.gen .next strong { color: var(--ink); }
.gen .next ol { margin: 10px 0 0; padding-left: 20px; }
.gen .next li { margin-bottom: 7px; }
.gen .next code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--line-soft);
  font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
  .gen fieldset[data-step].is-now, .wiz__start, .gen .out { animation: none; }
  .wiz__bar i, .gen .btn, .gen .check, .gen input, .gen textarea, .gen select { transition: none; }
}

.wiz__form { min-width: 0; }
.wiz__form[hidden] { display: none; }

/* ---------------------------------------------------------- the gate

   Its own card before the wizard, not a screen inside it, so nobody
   sees six steps beside a question that is not one of them. */

.gate { animation: wiz-in 0.3s var(--ease-out) both; }
.gate[hidden] { display: none; }

.gate__card {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(20 24 31 / 0.05), 0 12px 32px -18px rgb(20 24 31 / 0.3);
}

.gate__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-mint);
}

.gate__title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.gate__text {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.gate__label {
  display: block;
  margin-bottom: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.gate__row { display: flex; flex-wrap: wrap; gap: 10px; }
.gate__row input { flex: 1 1 240px; }
.gate__row .btn { flex: 0 0 auto; }
@media (max-width: 520px) { .gate__row .btn { flex-basis: 100%; justify-content: center; } }

.gate__error {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--bad);
}

/* .gen label is more specific, so this has to be too, or the consent
   line comes out bold and stacked. */
.gen .gate__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.gate__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.gate__small {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-faint);
}
.gate__small a { color: var(--accent); }