/* The Start a project funnel. Generated from tools/mockup_start.py; the
   mockup is the drawing board, this is the page. */
/* ---- the start funnel -------------------------------------------------- */
.sf{max-width:760px;margin:0 auto}
.sf-rail{display:flex;gap:.4rem;margin-bottom:2.25rem}
.sf-rail i{flex:1;height:3px;border-radius:99px;background:var(--u-line);
  transition:background .4s cubic-bezier(.16,1,.3,1)}
.sf-rail i.on{background:var(--u-text)}

.sf-step{display:none}
.sf-step.on{display:block;animation:sf-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes sf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sf-q{font-family:var(--u-font-display);font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;
  font-weight:900;margin:0 0 .6rem}
.sf-hint{color:var(--u-text-2);max-width:56ch;margin:0 0 2rem}

/* the doors. A tap answers and advances, so they are buttons, not radios */
.sf-doors{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.sf-door{display:grid;gap:.2rem;text-align:left;padding:1.15rem 1.25rem;border-radius:16px;
  border:1px solid var(--u-line);background:var(--u-surface);cursor:pointer;font:inherit;
  color:var(--u-text);transition:border-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.sf-door:hover{border-color:var(--u-text-2);transform:translateY(-2px)}
.sf-door b{font-size:1.0625rem;font-weight:600}
.sf-door span{font-size:.875rem;color:var(--u-text-2);line-height:1.45}
.sf-door.picked{border-color:var(--u-text);box-shadow:inset 0 0 0 1px var(--u-text)}

/* what we say back, the moment they choose: proof we have seen it before */
.sf-echo{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  margin-top:1.5rem;padding:1rem 1.15rem;border-radius:16px;
  background:color-mix(in srgb,var(--u-text) 5%,transparent);
  font-size:.9375rem;line-height:1.55;
  animation:sf-in .4s cubic-bezier(.16,1,.3,1) both}
.sf-echo .av{width:34px;height:34px;border-radius:99px;object-fit:cover;display:block}

.sf-field{display:grid;gap:.4rem;margin-bottom:1.25rem}
.sf-field label{font-size:.9375rem;font-weight:600}
.sf-field .sub{font-weight:400;color:var(--u-text-2)}
.sf-in{font:inherit;font-size:1rem;padding:.85rem 1rem;border:1px solid var(--u-line);
  border-radius:8px;background:var(--u-surface);color:var(--u-text);width:100%}
.sf-in:focus{outline:2px solid var(--u-focus);outline-offset:2px;border-color:var(--u-text-2)}
textarea.sp-in{min-height:9rem;resize:vertical;line-height:1.6}
.sf-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* the quiet questions: chips, so skipping them costs nothing */
.sf-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.sf-chip{font:inherit;font-size:.875rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid var(--u-line);background:transparent;color:var(--u-text-2);cursor:pointer}
.sf-chip:hover{border-color:var(--u-text-2);color:var(--u-text)}
.sf-chip.on{background:var(--u-text);color:var(--u-bg);border-color:var(--u-text)}

/* the person asking */
.sf-who{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;
  margin:0 0 1.75rem;padding-bottom:1.5rem;border-bottom:1px solid var(--u-line)}
.sf-who img{width:56px;height:56px;border-radius:99px;object-fit:cover;display:block}
.sf-who p{font-size:.9375rem;color:var(--u-text-2);line-height:1.55;margin:0}
.sf-who b{color:var(--u-text)}

/* the summary, written as the note it becomes rather than as a form review */
.sf-note{border:1px solid var(--u-line);border-radius:16px;background:var(--u-surface);
  padding:1.5rem 1.75rem;display:grid;gap:.9rem}
.sf-note .row{display:grid;grid-template-columns:7.5rem 1fr auto;gap:1rem;align-items:baseline;
  font-size:.9375rem}
.sf-note .k{font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--u-text-2)}
.sf-note .v{line-height:1.55}
.sf-note .v em{font-style:normal;color:var(--u-text-2)}
.sf-note .ed{background:none;border:0;font:inherit;font-size:.8125rem;color:var(--u-text-2);
  cursor:pointer;text-decoration:underline;text-underline-offset:.2em;padding:0}
.sf-note .ed:hover{color:var(--u-text)}

.sf-nav{display:flex;align-items:center;gap:1rem;margin-top:2rem}
/* display:flex outranks the browser's own [hidden] rule, so say it again */
.sf-nav[hidden]{display:none}
.sf-back{background:none;border:0;font:inherit;font-weight:500;font-size:.9375rem;
  color:var(--u-text-2);cursor:pointer;text-decoration:underline;text-underline-offset:.2em;padding:.5rem 0}
.sf-back:hover{color:var(--u-text)}
.sf-nav .small{margin-left:auto}

/* the end */
.sf-done{text-align:center;padding:1rem 0}
.sf-done .tick{width:56px;height:56px;border-radius:99px;margin:0 auto 1.5rem;
  display:grid;place-items:center;background:var(--u-text)}
.sf-done .tick i{display:block;width:18px;height:9px;border-left:2.5px solid var(--u-bg);
  border-bottom:2.5px solid var(--u-bg);transform:rotate(-45deg) translate(2px,-2px)}
.sf-next{display:grid;gap:.9rem;max-width:46ch;margin:2rem auto 0;text-align:left}
.sf-next div{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;font-size:.9375rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--u-line)}
.sf-next div:last-child{border-bottom:0}
.sf-next b{font-weight:600}
.sf-sig{width:170px;height:auto;display:block;margin:2rem auto 0}
:root[data-theme="dark"] .sf-sig{filter:invert(1) brightness(1.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sf-sig{filter:invert(1) brightness(1.1)}}

@media (max-width:620px){
  .sf-doors,.sf-two{grid-template-columns:1fr}
  .sf-note .row{grid-template-columns:1fr;gap:.2rem}
  .sf-note .ed{justify-self:start}
}


/* the form itself: on the page and laid out, but nowhere the eye goes. Not
   display:none, because a browser will not submit a form it cannot lay out. */
.sf-bridge{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.sf{position:relative}
.sf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.sf-live{min-height:1.4em;margin:0 0 .5rem;font-size:.9375rem;color:var(--u-ochre)}
.sf-err{margin:.2rem 0 0;font-size:.875rem;color:var(--u-ochre)}
.sf-in.bad{border-color:var(--u-ochre)}
.sf-echo{margin-top:1.5rem;padding:1rem 1.15rem;border-radius:16px;
  background:color-mix(in srgb,var(--u-text) 5%,transparent);font-size:.9375rem;line-height:1.55;
  animation:sf-in .4s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.sf-step.on,.sf-echo{animation:none}}

/* what the block looks like in the editor: a label, not a live funnel */
.sf-editor-note{border:1px dashed var(--u-line);border-radius:16px;padding:1.25rem 1.5rem}
.sf-editor-note b{font-weight:600}
.sf-editor-note p{margin:.35rem 0 0;font-size:.875rem;color:var(--u-text-2)}