/* Beautech — page styles: Project Brief. Loaded after assets/site.css. */
/* ============================================================
   PROJECT BRIEF — guided questionnaire
   ============================================================ */
.brief-hero { padding: clamp(36px,5vw,64px) 0 clamp(18px,2.4vw,30px); }
.brief-hero .breadcrumb { font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; gap:10px; }
.brief-hero .breadcrumb a:hover{ color:var(--accent); }
.brief-hero h1{ margin-top:16px; font-size:clamp(30px,4.2vw,52px); font-weight:300; }
.brief-hero .lead{ margin-top:14px; max-width:46ch; }

/* shell ------------------------------------------------------*/
.brief { padding: clamp(8px,2vw,24px) 0 clamp(64px,8vw,110px); }
.brief-shell{
  display:grid; grid-template-columns: 300px 1fr; gap:clamp(28px,4vw,64px);
  align-items:start;
}
@media(max-width:920px){ .brief-shell{ grid-template-columns:1fr; gap:24px; } }

/* left rail --------------------------------------------------*/
.q-rail{ position:sticky; top:100px; }
@media(max-width:920px){ .q-rail{ position:static; top:auto; } }
.q-rail-prog{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.q-rail-prog .pn{ font-family:var(--f-display); font-size:34px; font-weight:300; line-height:1; color:var(--ink); }
.q-rail-prog .pn b{ color:var(--accent); font-weight:300; }
.q-rail-prog .pl{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.q-bar{ height:3px; background:var(--line); border-radius:3px; overflow:hidden; }
.q-bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:3px; transition:width .5s cubic-bezier(.2,.7,.3,1); }

.q-steps{ margin-top:26px; border-top:1px solid var(--line); }
@media(max-width:920px){ .q-steps{ display:none; } }
.q-steps li{ list-style:none; display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line-soft); color:var(--muted); transition:color .2s; }
.q-steps li .sn{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; }
.q-steps li .st{ font-size:14px; }
.q-steps li.done{ color:var(--ink-soft); cursor:pointer; }
.q-steps li.done .sn{ color:var(--accent); }
.q-steps li.done:hover .st{ color:var(--accent); }
.q-steps li.active{ color:var(--ink); }
.q-steps li.active .sn{ color:#fff; background:var(--accent); border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; }
.q-steps li.active .st{ font-weight:600; }
.q-reassure{ margin-top:22px; font-size:13px; color:var(--muted); line-height:1.55; display:flex; gap:9px; }
.q-reassure svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:2px; }

/* mobile step pills */
.q-mini{ display:none; }
@media(max-width:920px){
  .q-mini{ display:flex; gap:5px; margin-top:18px; }
  .q-mini i{ flex:1; height:3px; border-radius:3px; background:var(--line); transition:background .3s; }
  .q-mini i.on{ background:var(--accent); }
}

/* panel ------------------------------------------------------*/
.q-panel{
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:clamp(26px,3.4vw,48px);
  box-shadow:0 30px 70px -46px rgba(27,19,32,.4);
  min-height:440px; display:flex; flex-direction:column;
}
.q-eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); display:flex; gap:10px; align-items:center; }
.q-eyebrow .idx{ color:var(--muted); }
.q-question{ font-family:var(--f-display); font-weight:300; font-size:clamp(26px,3.1vw,40px); line-height:1.05; letter-spacing:-.02em; margin-top:16px; color:var(--heading); text-wrap:balance; }
.q-help{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; max-width:54ch; }
.q-body{ margin-top:clamp(22px,3vw,34px); flex:1; }

/* selectable cards */
.q-grid{ display:grid; gap:12px; }
.q-grid.c2{ grid-template-columns:1fr 1fr; }
.q-grid.c3{ grid-template-columns:repeat(3,1fr); }
.q-grid.c4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:680px){ .q-grid.c3,.q-grid.c4{ grid-template-columns:1fr 1fr; } .q-grid.c2{ grid-template-columns:1fr; } }
.q-opt{
  position:relative; text-align:left; border:1px solid var(--line); border-radius:6px;
  background:var(--paper); padding:18px 18px 16px; transition:border-color .18s, background .18s, transform .18s, box-shadow .25s;
  display:flex; flex-direction:column; gap:5px; min-height:96px; justify-content:flex-start;
}
.q-opt:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 16px 34px -26px rgba(27,19,32,.5); }
.q-opt .on-num{ font-family:var(--f-mono); font-size:11px; color:var(--muted); }
.q-opt .on-t{ font-family:var(--f-display); font-weight:400; font-size:19px; line-height:1.12; color:var(--ink); }
.q-opt .on-t .zh{ font-size:.92em; }
.q-opt .on-d{ font-size:13px; color:var(--ink-soft); line-height:1.45; }
.q-opt .on-check{ position:absolute; top:14px; right:14px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; transition:.18s; }
.q-opt .on-check svg{ width:11px; height:11px; color:#fff; opacity:0; transform:scale(.5); transition:.18s; }
.q-opt.sel{ border-color:var(--accent); background:var(--accent-tint); }
.q-opt.sel .on-check{ background:var(--accent); border-color:var(--accent); }
.q-opt.sel .on-check svg{ opacity:1; transform:none; }
.q-opt.compact{ min-height:0; flex-direction:row; align-items:center; gap:12px; padding:14px 16px; }
.q-opt.compact .on-t{ font-size:17px; }

/* chips */
.q-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.q-chip{ font-family:var(--f-sans); font-size:14.5px; padding:10px 16px; border:1px solid var(--line);
  border-radius:100px; color:var(--ink-soft); background:var(--paper); transition:.16s; display:inline-flex; gap:8px; align-items:center; }
.q-chip:hover{ border-color:var(--accent); color:var(--ink); }
.q-chip.sel{ background:var(--accent); border-color:var(--accent); color:#fff; }
.q-chip .x{ font-family:var(--f-mono); font-size:13px; }

/* slider */
.q-slider-wrap{ padding-top:6px; }
.q-slider-read{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.q-slider-read .sv{ font-family:var(--f-display); font-weight:300; font-size:30px; color:var(--accent); line-height:1; }
.q-slider-read .sd{ font-size:14.5px; color:var(--ink-soft); }
/* outline:none removed: a range input draws an outline only while focused, so
   this suppressed the keyboard ring and nothing else. site.css handles both
   halves — :focus-visible paints the ring, :focus:not(:focus-visible) hides it
   for pointer users. */
.q-range{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:var(--line); }
.q-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--accent); border:4px solid var(--surface-2); box-shadow:0 2px 10px rgba(27,19,32,.3); cursor:pointer; transition:transform .15s; }
.q-range::-webkit-slider-thumb:active{ transform:scale(1.12); }
.q-range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--accent); border:4px solid var(--surface-2); box-shadow:0 2px 10px rgba(27,19,32,.3); cursor:pointer; }
.q-ticks{ display:flex; justify-content:space-between; margin-top:14px; }
.q-ticks span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); flex:1; text-align:center; }
.q-ticks span:first-child{ text-align:left; } .q-ticks span:last-child{ text-align:right; }
.q-ticks span.on{ color:var(--accent); }

/* texture — per-product sliders */
.q-tex-list{ display:flex; flex-direction:column; gap:24px; }
.q-tex + .q-tex{ border-top:1px solid var(--line-soft); padding-top:24px; }
.q-tex-top{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:16px; }
.q-tex-cat{ font-family:var(--f-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); flex:none; }
.q-tex-read{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.q-tex-read .sv{ font-family:var(--f-display); font-weight:300; font-size:23px; line-height:1; color:var(--ink); }
.q-tex-read .sd{ font-size:13.5px; color:var(--ink-soft); }

/* contact fields */
.q-fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .q-fields{ grid-template-columns:1fr; } }
.q-fld{ display:flex; flex-direction:column; }
.q-fld.full{ grid-column:1 / -1; }
.q-fld label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.q-fld label .req{ color:var(--signal); }
.q-fld input, .q-fld textarea{ width:100%; font-family:var(--f-sans); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; transition:border-color .2s, box-shadow .2s; }
.q-fld textarea{ resize:vertical; min-height:96px; }
/* Decoration only — see the same split in pages/contact.css. The tint halo is
   ~1.1:1 against the white field and is not a focus indicator; site.css's
   :focus-visible ring is (10.4:1 on .q-panel's --surface-2). Do not re-add
   outline:none. */
.q-fld input:focus, .q-fld textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }

/* review spec sheet */
.q-spec{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.q-spec-top{ background:var(--ink); color:var(--paper); padding:18px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
:root[data-theme="dark"] .q-spec-top{ background:var(--surface-dark); }
.q-spec-top .st-k{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-on-dark); }
.q-spec-top .st-t{ font-family:var(--f-display); font-weight:300; font-size:24px; color:#fff; margin-top:3px; }
.q-spec-top .st-id{ font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,.55); text-align:right; }
.q-row{ display:grid; grid-template-columns:160px 1fr; gap:18px; padding:15px 22px; border-top:1px solid var(--line); align-items:start; }
.q-row:first-child{ border-top:0; }
.q-row .rk{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.q-row .rv{ font-size:15px; color:var(--ink); display:flex; flex-wrap:wrap; gap:7px; }
.q-row .rv .pill{ font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:5px 12px; color:var(--ink-soft); white-space:nowrap; line-height:1.4; }
.q-row .rv .pill.wide{ white-space:normal; }
.q-row .rv.empty{ color:var(--muted); font-style:italic; }
.q-row .edit{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.q-row .edit:hover{ color:var(--accent); }
@media(max-width:560px){ .q-row{ grid-template-columns:1fr; gap:6px; } }

/* footer nav */
.q-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(24px,3vw,36px); padding-top:22px; border-top:1px solid var(--line-soft); }
.q-skip{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.q-skip:hover{ color:var(--accent); }
.q-foot-r{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.q-back{ font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; padding:13px 6px; }
.q-back:hover{ color:var(--ink); }
.q-back[disabled]{ opacity:0; pointer-events:none; }
.q-kbd{ font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-right:4px; }
@media(max-width:560px){ .q-kbd{ display:none; } }

/* panel transition */
.q-panel.swap .q-eyebrow,.q-panel.swap .q-question,.q-panel.swap .q-help,.q-panel.swap .q-body{ opacity:0; transform:translateY(10px); }
.q-panel .q-eyebrow,.q-panel .q-question,.q-panel .q-help,.q-panel .q-body{ transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1); }
.q-panel .q-question{ transition-delay:.04s; } .q-panel .q-help{ transition-delay:.08s; } .q-panel .q-body{ transition-delay:.12s; }

/* success */
.q-done{ text-align:center; padding:clamp(20px,4vw,48px) 0; }
.q-done .seal{ width:64px; height:64px; border-radius:50%; background:var(--accent-tint); border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.q-done .seal svg{ width:30px; height:30px; color:var(--accent); }
.q-done h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(26px,3vw,38px); color:var(--heading); }
.q-done p{ color:var(--ink-soft); margin-top:14px; max-width:48ch; margin-inline:auto; }
.q-done .acts{ display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.q-done .ref{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:26px; }
.q-mailnote{ font-size:13.5px; color:var(--muted); margin-top:22px; }
.q-mailnote b{ color:var(--ink-soft); font-weight:600; }
.q-restart{ display:block; margin:18px auto 0; font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); transition:color .18s; }
.q-restart:hover{ color:var(--accent); }