/* Start a project — the public intake.

   It is the same idea as the demo, turned round: there, Tesryn reads a request and shows what it
   understood; here, a visitor answers and watches the same understanding assemble. The panel on the
   right (below, on a phone) is the brief, and it is the thing that actually gets sent.

   Phone first. One question on screen at a time, big targets, and the brief always one tap away. */

.start-page{background:var(--void);color:var(--text)}

.start{padding:0 0 clamp(2rem,7vw,4rem)}
.start .wrap{max-width:62rem}

/* ── progress ───────────────────────────────────────────────────────────── */
.st-rail{display:flex;gap:.3rem;margin:0 0 1.2rem;padding:0;list-style:none}
.st-rail li{flex:1 1 0;height:3px;border-radius:2px;background:var(--rule)}
.st-rail li[data-on]{background:var(--flare)}
.st-rail li[data-now]{background:var(--glow)}
.st-where{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem}

/* ── a step ─────────────────────────────────────────────────────────────── */
.st-step{background:var(--panel);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1rem,4vw,1.5rem)}
.st-step[hidden]{display:none!important}
.st-q{font-size:clamp(1.15rem,5vw,1.5rem);line-height:1.25;margin:0 0 .4rem;font-weight:650}
.st-help{margin:0 0 1rem;color:var(--muted);font-size:.92rem;line-height:1.6}

/* A <fieldset> has a browser default of min-inline-size:min-content, so it refuses to be narrower
   than its widest option. At 320 px with the text size doubled that pushed the page sideways by
   24 px. Resetting it is the whole fix, and it is the one every form on a dark page needs. */
.st-choices{display:grid;gap:.5rem;margin:0 0 .2rem;padding:0;list-style:none;border:0;
  min-inline-size:0;min-width:0}
.st-choices>*{min-width:0}
@media (min-width:40rem){.st-choices[data-cols="2"]{grid-template-columns:1fr 1fr}}
.st-choice{display:block}
.st-choice input{position:absolute;opacity:0;width:0;height:0}
/* styles.css has a bare `label{color:var(--ink)}` — dark ink for the light reading surface — and
   this page is a dark band, so every label here states its own colour rather than inheriting the
   wrong one. (The same specificity trap is in CLAUDE.md: a bare element selector quietly winning.) */
.st-choice,.st-field>label,.st-choices legend{color:var(--text);margin:0}
.st-choices legend{font-size:.9rem;font-weight:600;padding:0 0 .45rem}
.st-choice span{display:block;cursor:pointer;font-weight:400;overflow-wrap:break-word;background:var(--panel-2);border:1px solid var(--rule);
  border-radius:11px;padding:.75rem .9rem;min-height:var(--target-comfort,3rem);
  font-size:.98rem;line-height:1.4;transition:border-color 150ms ease,background 150ms ease}
.st-choice span b{display:block;font-weight:600;color:var(--text)}
.st-choice span i{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:.84rem;
  line-height:1.45;margin-top:.15rem}
.st-choice input:checked+span{border-color:var(--flare);background:#171922}
.st-choice input:focus-visible+span{outline:2px solid var(--flare);outline-offset:2px}
.st-choice span:hover{border-color:var(--rule-lit)}

.st-field{margin:0 0 .9rem}
.st-field>label{display:block;font-size:.9rem;font-weight:600;margin:0 0 .35rem;color:var(--text)}
.st-field .hint{display:block;font-weight:400;color:var(--muted);font-size:.82rem;
  line-height:1.5;margin-top:.15rem}
.st-field input[type],.st-field textarea,.st-field select{
  width:100%;background:#0B0C10;color:var(--text);border:1px solid var(--rule);border-radius:10px;
  padding:.7rem .8rem;font:inherit;font-size:16px;  /* 16px: iOS zooms the page under it */
  min-height:var(--target-comfort,3rem)}
.st-field textarea{min-height:7rem;resize:vertical;line-height:1.55}
.st-field input[type]:focus,.st-field textarea:focus,.st-field select:focus{
  outline:2px solid var(--flare);outline-offset:1px;border-color:var(--flare)}
.st-field .bad{display:block;color:#FF8A8A;font-size:.84rem;margin-top:.35rem}
.st-row{display:grid;gap:.9rem}
@media (min-width:40rem){.st-row{grid-template-columns:1fr 1fr}}

/* the honeypot: a real field name a script would fill and a person never sees */
.st-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.st-nav{display:flex;gap:.6rem;margin:1.2rem 0 0;flex-wrap:wrap}
.st-nav .btn{min-height:var(--target-comfort,3rem);flex:1 1 8rem;display:flex;
  align-items:center;justify-content:center}
@media (min-width:40rem){.st-nav .btn{flex:0 0 auto}}

/* ── the brief, assembling as they answer ───────────────────────────────── */
.st-brief{background:var(--panel);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1rem,4vw,1.35rem);margin:1rem 0 0}
.st-brief h2{font-size:1.05rem;margin:0 0 .2rem}
.st-brief .k{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.st-lines{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.st-lines li{border-top:1px solid var(--rule);padding-top:.5rem;display:flex;gap:.7rem;
  align-items:baseline;flex-wrap:wrap}
.st-lines li:first-child{border-top:0;padding-top:0}
.st-lines .l{font-size:.86rem;color:var(--muted);flex:0 0 9rem}
.st-lines .v{font-size:.94rem;flex:1 1 9rem;min-width:0;word-break:break-word}
@media (max-width:26rem){.st-lines .l{flex:0 0 100%}}
.st-empty{color:var(--muted);font-size:.9rem;margin:0}

/* ── the price, and how sure it is ──────────────────────────────────────── */
.st-price{margin:1rem 0 0;background:#0B0C10;border:1px solid var(--rule-lit);border-radius:12px;
  padding:1rem}
.st-price .amt{font-family:var(--mono);font-size:clamp(1.5rem,7vw,2.1rem);color:var(--glow);
  margin:0;line-height:1.1;font-variant-numeric:tabular-nums}
.st-price .basis{margin:.4rem 0 0;font-size:.86rem;color:var(--muted);line-height:1.55}
.st-conf{display:inline-block;margin:.6rem 0 0;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;
  border:1px solid currentColor}
.c-estimate{color:var(--glow)}.c-review{color:#8FB8FF}.c-none{color:var(--muted)}
.st-assume{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.4rem}
.st-assume li{font-size:.85rem;line-height:1.55;color:var(--muted);padding-left:.8rem;
  border-left:2px solid var(--rule-lit)}
.st-assume.st-open li{border-left-color:var(--flare);color:var(--text)}

/* ── sent ───────────────────────────────────────────────────────────────── */
.st-done{background:var(--panel);border:1px solid var(--rule-lit);border-radius:14px;
  padding:clamp(1.1rem,4vw,1.6rem)}
.st-done h2{margin:0 0 .5rem;font-size:clamp(1.3rem,5.5vw,1.8rem)}
.st-done p{color:var(--muted);line-height:1.65;margin:0 0 .8rem}
.st-copy{width:100%;min-height:11rem;font-family:var(--mono);font-size:13px;line-height:1.5;
  background:#0B0C10;color:var(--text);border:1px solid var(--rule);border-radius:10px;padding:.7rem}
.st-sent-note{font-size:.85rem;color:var(--muted);margin:.6rem 0 0;line-height:1.55}

[hidden]{display:none!important}

/* The same as the demo page: a dark page has to state the colours a dark page needs, because
   styles.css writes a normal <section> for the light reading surface. */
.start-page section{color:var(--text)}
.start-page section p,.start-page section li{color:var(--muted)}
.start-page section h2,.start-page section h3,.start-page section strong{color:var(--text)}
.start-page .section-tag{color:var(--flare)}
.start-page .fine{color:var(--muted)}

/* ── Tesryn's reading, as they type ─────────────────────────────────────────
   Signal's idea on the public site: the parts of a system Tesryn can see in somebody's own words,
   each quoting the phrase that put it there, and each one a proposal they correct by tapping.
   assets/signal-read.mjs is the engine. */
.st-reading{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--flare);
  border-radius:0 14px 14px 0;padding:clamp(.9rem,3.5vw,1.25rem);margin:1rem 0 0}
.st-reading .k{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.rd-lede{margin:0 0 .7rem;color:var(--muted);font-size:.88rem;line-height:1.6}
.rd-none{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.rd-fine{margin:.9rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.55}

.rd-parts,.rd-extras{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.rd-parts>li,.rd-extras>li{border-top:1px solid var(--rule);padding:.55rem 0 0}
.rd-parts>li:first-child,.rd-extras>li:first-child{border-top:0;padding-top:0}
.rd-part-top{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.rd-part-name,.rd-extra-name{font-size:.96rem;font-weight:600;color:var(--text);flex:1 1 8rem;
  min-width:0;overflow-wrap:break-word}
.rd-why{display:block;margin:.3rem 0 0;font-size:.8rem;line-height:1.5;color:var(--muted);
  border-left:2px solid var(--rule-lit);padding-left:.6rem;overflow-wrap:break-word}
.rd-why::before{content:"\201C"}.rd-why::after{content:"\201D"}
.rd-why-yours{border-left-color:var(--flare)}
.rd-why-yours::before,.rd-why-yours::after{content:""}

/* the size, as one control that cycles: a phone has no room for three radio buttons per part */
.rd-size{flex:none;cursor:pointer;font:600 .72rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--glow);background:#0B0C10;border:1px solid var(--rule-lit);
  border-radius:999px;padding:0 .6rem;min-height:var(--target-min,2.75rem);
  display:inline-flex;align-items:center;transition:border-color 140ms ease,color 140ms ease}
.rd-size:hover{border-color:var(--flare)}
.rd-size-small{color:var(--muted)}
.rd-size-large{color:var(--flare);border-color:var(--rule-lit)}
.rd-off{flex:none;cursor:pointer;background:none;border:1px solid var(--rule);border-radius:999px;
  color:var(--muted);font:400 1.1rem/1 var(--sans);width:var(--target-min,2.75rem);
  min-height:var(--target-min,2.75rem);display:inline-flex;align-items:center;justify-content:center}
.rd-off:hover{border-color:#6B3030;color:#FF8A8A}

.rd-add{margin:.8rem 0 0;color:var(--muted)}
.rd-add>summary{cursor:pointer;color:var(--flare);font-size:.86rem;
  min-height:var(--target-min,2.75rem);display:flex;align-items:center}
.rd-add-list{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0;padding:0}
.rd-add-btn{cursor:pointer;background:var(--panel-2);border:1px solid var(--rule);border-radius:999px;
  color:var(--text);font:400 .82rem/1.3 var(--sans);padding:.5rem .75rem;
  min-height:var(--target-min,2.75rem)}
.rd-add-btn:hover{border-color:var(--flare)}

@media (max-width:26rem){
  .rd-part-name,.rd-extra-name{flex:1 1 100%}
}

/* Opened from the film with their words carried in, the page scrolls to the step; this keeps the
   sticky header from covering its first line. */
#start{scroll-margin-top:5.5rem}