/* ═══════════════════════════════════════════════════════════════════
   Phase 2B — Estimation landing + LLM Hub + utility drawer elevation
   Loaded after app.css. Override-only: no tokens are redefined here;
   every value routes through the token foundation at the top of
   app.css. Surfaces: estimation intake (.estimation-*, .project-dropzone,
   .file-row chips), reserved "waiting for project" state (.reserved-*),
   LLM Control Hub (.hub-*, .chat-*) and utility drawers (.utility-*,
   .faq-list, .support-form, .principles, .legal-*). Motion is
   reduced-motion safe; focus-visible comes from the global rule.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Estimation landing — intake as a calm instrument ───────────── */

.estimation-stage{gap:var(--s4)}

.estimation-intake{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--n-000) 0%,var(--n-050) 100%);
  border:var(--hairline);
  border-radius:var(--r-xl);
  padding:var(--s6);
  box-shadow:var(--e1);
}
.estimation-intake::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--a-500) 60%,transparent 100%);
}
.estimation-intake .big-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:19px;
  margin:var(--s1) 0 var(--s3);
  box-shadow:0 8px 18px rgba(20,34,56,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
.estimation-intake h2{
  font-size:var(--fs-head);
  letter-spacing:-.01em;line-height:1.28;
  margin:var(--s2) 0 var(--s2);
}
.estimation-intake .hero-copy{
  font-size:var(--fs-small);line-height:var(--lh-body);
  max-width:52ch;
}

/* project dropzone — dashed hairline that warms to the accent */
.project-dropzone{
  margin-top:var(--s5);
  border:1.5px dashed var(--n-300);
  border-radius:var(--r-lg);
  padding:var(--s5) var(--s5) var(--s4);
  background:var(--n-050);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.project-dropzone:hover{border-color:var(--a-300);background:var(--a-050)}
.project-dropzone:focus-within{border-color:var(--a-300);box-shadow:var(--focus-shadow)}
.project-dropzone .drop-title{
  font-size:var(--fs-small);font-weight:var(--wt-bold);letter-spacing:.01em;
}
.project-dropzone .drop-copy{
  font-size:var(--fs-caption);color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin:6px 0 var(--s3);
}

/* file chips — technical identity in mono, hairline, quiet shadow */
.file-row{gap:var(--s2)}
.file-chip{
  border:var(--hairline);background:var(--n-000);
  border-radius:var(--r-pill);padding:5px 10px;
  font-family:var(--mono);font-size:var(--fs-caption);color:var(--n-700);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:var(--e1);
}

/* analyze CTA — the instrument's single trigger */
.estimation-cta{
  margin-top:auto;
  display:grid;gap:var(--s3);
  padding-top:var(--s4);
}
#startProjectAnalysis{
  padding:15px var(--s4);
  font-size:var(--fs-small);font-weight:var(--wt-bold);
  letter-spacing:var(--track-caps);text-transform:uppercase;
}
#startProjectAnalysis:hover:not(:disabled){
  box-shadow:0 14px 30px rgba(20,34,56,.24);
}
.estimation-cta .helper{
  margin-top:0;padding-top:var(--s3);
  border-top:var(--hairline-soft);
  font-size:var(--fs-caption);letter-spacing:.01em;
}

/* ── Reserved project view — premium "waiting for project" ────── */

.estimation-reserved{
  border:var(--hairline);
  border-radius:var(--r-xl);
  box-shadow:var(--e1);
  background:
    radial-gradient(420px 300px at 50% 34%,var(--a-050) 0%,transparent 72%),
    linear-gradient(180deg,var(--n-000) 0%,var(--n-050) 100%);
}
.reserved-grid{
  background-image:
    linear-gradient(rgba(70,88,112,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,88,112,.5) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.09;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);
}
.reserved-center{gap:var(--s2)}
.reserved-center .eyebrow{color:var(--a-400)}
.reserved-mark{
  width:56px;height:56px;border-radius:var(--r-lg);
  border:var(--hairline);background:var(--surface);
  color:var(--n-400);font-size:18px;
  box-shadow:var(--e1),0 0 0 6px rgba(132,168,227,.10);
}
@media (prefers-reduced-motion: no-preference){
  .reserved-mark{animation:reservedBreathe 5.5s var(--ease) infinite}
}
@keyframes reservedBreathe{
  0%,100%{box-shadow:var(--e1),0 0 0 5px rgba(132,168,227,.08)}
  50%{box-shadow:var(--e1),0 0 0 12px rgba(132,168,227,.16)}
}
.reserved-center strong{
  font-size:var(--fs-lead);font-weight:var(--wt-medium);
  line-height:var(--lh-snug);color:var(--n-800);
}
.reserved-center span{font-size:var(--fs-small);color:var(--n-500)}

/* ── LLM Control Hub drawer ────────────────────────────────────── */

.hub-block{
  border:var(--hairline);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--e1);
}
.hub-block h3{
  margin:0 0 var(--s3);
  font-size:var(--fs-small);font-weight:var(--wt-bold);
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--n-700);
}
.hub-block .helper{font-size:var(--fs-caption);color:var(--n-500)}
.hub-row .modal-input{font-family:var(--mono);font-size:var(--fs-small)}

.hub-models{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.hub-models .pill-button{
  border:var(--hairline);border-radius:var(--r-pill);
  background:var(--n-000);color:var(--n-700);
  font-family:var(--mono);font-size:var(--fs-caption);
  padding:4px 10px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.hub-models .pill-button:hover{
  border-color:var(--a-300);background:var(--a-050);color:var(--a-700);
}

/* conversation — quiet hierarchy, hairline frames */
.chat-log{
  gap:var(--s3);
  padding:var(--s4);
  background:var(--n-050);
  border:var(--hairline);
  border-radius:var(--r-lg);
}
.chat-msg{
  max-width:min(92%,560px);
  padding:var(--s3) var(--s4);
  font-size:var(--fs-lead);line-height:1.5;
  border-radius:var(--r-lg);
  animation:chatIn var(--dur-slow) var(--ease);
}
.chat-msg.user{
  background:var(--navy-800);color:#f2f6fb;
  border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  box-shadow:0 6px 16px rgba(20,34,56,.16);
}
.chat-msg.assistant{
  background:var(--n-000);
  border:var(--hairline);
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);
}
.chat-msg .chat-tools{
  margin-top:var(--s2);padding-top:var(--s2);
  border-top:var(--hairline-soft);
  font-family:var(--mono);font-size:var(--fs-caption);
  opacity:1;color:var(--faint);
}
.chat-msg.user .chat-tools{border-top-color:rgba(255,255,255,.16);color:#aebed1}
@keyframes chatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* composer row */
.chat-input-row{margin-top:var(--s3);gap:var(--s2);align-items:flex-end}
.chat-input-row textarea{min-height:44px}
.chat-send{
  min-width:88px;min-height:44px;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  font-size:var(--fs-small);
}
.hub-toggle{
  margin-top:var(--s3);gap:var(--s2);
  font-size:var(--fs-small);color:var(--n-600);
}
.hub-empty{color:var(--faint);font-size:var(--fs-small)}
.chat-log .hub-empty{padding:var(--s6) var(--s4);text-align:center}

/* ── Utility drawer surfaces (help / FAQ / support / about / legal) ── */

.utility-intro p{
  font-size:var(--fs-body);color:var(--n-600);
  line-height:var(--lh-body);max-width:58ch;
}
.utility-intro .helper{font-size:var(--fs-caption);color:var(--n-500)}

.utility-cards{gap:var(--s2)}
.utility-card{
  grid-template-columns:32px 1fr;gap:var(--s3);
  border:var(--hairline);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  box-shadow:var(--e1);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.utility-card:hover{border-color:var(--n-250);box-shadow:var(--e2)}
.utility-number{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:var(--a-050);color:var(--a-600);
  box-shadow:inset 0 0 0 1px var(--a-100);
  font-size:var(--fs-small);font-weight:var(--wt-bold);
}
.utility-card h3{margin:2px 0 4px;font-size:var(--fs-body);font-weight:var(--wt-bold)}
.utility-card p{font-size:var(--fs-small);line-height:1.55}
.utility-card p + h3{margin-top:var(--s3)}

/* FAQ — hairline accordions with a marked rotating glyph */
.faq-list details{
  border:var(--hairline);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.faq-list details:hover{border-color:var(--n-250)}
.faq-list details[open]{border-color:var(--n-300);background:var(--n-050)}
.faq-list summary{
  list-style:none;
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--fs-body);font-weight:var(--wt-medium);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{
  content:"+";
  flex:none;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;
  border:var(--hairline);color:var(--n-500);
  font-family:var(--mono);font-size:11px;
  transition:transform var(--dur) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.faq-list details[open] summary::before{
  transform:rotate(45deg);color:var(--a-500);border-color:var(--a-200);
}
.faq-list details p{
  font-size:var(--fs-small);line-height:var(--lh-snug);
  color:var(--muted);
  margin:var(--s2) 0 2px;padding-left:calc(20px + var(--s3));
}

/* support form */
.support-form{margin-top:var(--s4);gap:var(--s3)}
.support-form label{
  gap:6px;font-size:var(--fs-small);font-weight:var(--wt-medium);
  color:var(--n-700);letter-spacing:.02em;
}

/* about — numbered principles */
.principles{margin-top:var(--s4)}
.principles h3{
  margin:0 0 var(--s2);
  font-size:var(--fs-small);font-weight:var(--wt-bold);
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--n-700);
}
.principle{padding:var(--s3) 0;border-bottom:var(--hairline-soft)}
.principle:last-child{border-bottom:0}
.principle span{
  width:24px;flex:none;
  font-family:var(--mono);font-size:var(--fs-caption);color:var(--n-400);
}
.principle b{font-size:var(--fs-small);font-weight:var(--wt-medium)}

/* legal — warn banner stays warn, darkened enough to read */
.legal-banner{
  border:1px solid var(--warn-line);
  background:var(--warn-100);
  color:color-mix(in oklab,var(--warn-500),var(--n-900) 22%);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  font-size:var(--fs-small);line-height:1.5;
  margin-bottom:var(--s3);
}
.legal-card{
  border:var(--hairline);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);box-shadow:var(--e1);
}
.legal-card h3{margin:0 0 4px;font-size:var(--fs-body);font-weight:var(--wt-bold)}
.legal-card p{font-size:var(--fs-small);line-height:1.55}
.legal-placeholder{
  margin-top:var(--s2);padding-top:var(--s2);
  border-top:1px dashed var(--n-250);
  font-size:var(--fs-caption);color:var(--faint);
}

/* ── reduced-motion: every animation settles instantly ─────────── */
@media (prefers-reduced-motion: reduce){
  .chat-msg{animation:none}
  :is(.estimation-intake,.project-dropzone,.file-chip,.utility-card,.faq-list details,.hub-models .pill-button,.chat-input-row textarea,.chat-send){transition:none}
  .faq-list summary::before{transition:none}
}