/* =========================================================
   PROJECT BRIEF — guided requirements form
   Shares tokens from styles.css (colors, type, spacing)
   ========================================================= */

.brief-body{ overflow-x:hidden; }

.brief-nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  background:var(--bg); border-bottom:1px solid var(--line);
}
.brief-back{ font-size:.9rem; color:var(--ink-2); transition:color .3s; }
.brief-back:hover{ color:var(--ink); }

.brief-main{ display:flex; justify-content:center; padding:0 0 120px; }
.brief-wrap{ width:100%; max-width:720px; padding:64px var(--gut) 0; }

/* ---------- intro ---------- */
.brief-intro{ padding-block:40px; }
.brief-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem, 5vw, 3.2rem); line-height:1.05; letter-spacing:-.02em;
  margin-top:16px; max-width:18ch;
}
.brief-sub{ margin-top:18px; max-width:52ch; font-size:1.05rem; line-height:1.6; color:var(--ink-2); }
.brief-intro .cta{ margin-top:34px; }

.brief-draft-banner{
  margin-top:28px; padding:16px 20px; border:1px dashed var(--blue);
  border-radius:14px; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px; font-size:.92rem; color:var(--ink-2);
  background:var(--blue-soft);
}
.brief-draft-banner:not([hidden]){ display:flex; }
.brief-draft-actions{ display:flex; gap:16px; }
.brief-link{
  background:none; border:none; padding:0; font:inherit; color:var(--blue);
  text-decoration:underline; cursor:pointer;
}

/* ---------- progress ---------- */
.brief-progress{ margin-bottom:44px; }
.brief-progress-bar{ height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.brief-progress-bar span{
  display:block; height:100%; width:14.28%; border-radius:99px;
  background:var(--blue); transition:width .45s var(--ease);
}
.brief-step-label{
  display:block; margin-top:10px; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------- steps ---------- */
.brief-step{ padding-bottom:10px; }
.step-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 3vw, 2rem); letter-spacing:-.01em;
}
.step-hint{ margin-top:8px; margin-bottom:30px; color:var(--ink-2); font-size:.98rem; line-height:1.5; }

.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:26px; }
.field > span{ font-weight:500; font-size:.92rem; color:var(--ink); }
.field em{ font-style:normal; color:var(--blue); margin-left:3px; }

input[type="text"],
input[type="email"],
textarea,
select{
  width:100%; font-family:var(--sans); font-size:.98rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
textarea{ resize:vertical; line-height:1.5; }
select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235d5b54' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
}
.field.invalid input, .field.invalid textarea, .field.invalid .chip-group{
  border-color:#c94a3b;
}
.field-error-msg{ font-size:.82rem; color:#c94a3b; }

.chip-other-input{ margin-top:10px; }

/* ---------- chips ---------- */
.chip-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--line); border-radius:99px; padding:10px 18px;
  font-size:.9rem; font-family:var(--sans); color:var(--ink-2); background:transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ---------- nav buttons ---------- */
.brief-nav-btns{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:44px; }
.brief-btn{
  border-radius:100px; padding:15px 30px; font-size:.98rem; font-weight:500;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.brief-btn.primary{ background:var(--ink); color:var(--bg); margin-left:auto; }
.brief-btn.primary:hover{ background:var(--blue); border-color:var(--blue); }
.brief-btn.ghost{ border-color:var(--line); color:var(--ink-2); }
.brief-btn.ghost:hover{ border-color:var(--ink); color:var(--ink); }
.brief-btn:disabled{ opacity:.55; cursor:not-allowed; }

.brief-hidden-trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.brief-error{
  margin-top:22px; padding:14px 18px; border-radius:12px; font-size:.92rem;
  background:rgba(201,74,59,.08); color:#a83a2d; border:1px solid rgba(201,74,59,.25);
}

/* ---------- review ---------- */
.brief-review{
  display:flex; flex-direction:column; gap:18px; padding:26px;
  border:1px solid var(--line); border-radius:16px; background:var(--bg-deep);
  margin-bottom:30px;
}
.r-row{ display:flex; flex-direction:column; gap:4px; }
.r-row .r-label{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.r-row .r-value{ font-size:.98rem; color:var(--ink); line-height:1.55; white-space:pre-wrap; }
.brief-review-empty{ color:var(--ink-3); font-size:.92rem; }

/* ---------- success ---------- */
.brief-success{ text-align:center; padding:80px 10px 40px; }
.brief-success h2{ font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.4rem); font-weight:400; }
.brief-success p{ margin:20px auto 8px; max-width:46ch; color:var(--ink-2); line-height:1.6; }
.brief-success .cta{ margin-top:28px; }

@media (max-width:640px){
  .brief-wrap{ padding-top:44px; }
  .brief-nav-btns{ flex-direction:column-reverse; align-items:stretch; }
  .brief-btn.primary{ margin-left:0; }
  .brief-btn{ text-align:center; }
}