/* Beautech — page styles: Project Brief. Loaded after assets/site.css. */
/* ============================================================
   PROJECT BRIEF — guided questionnaire
   ============================================================ */
.brief-hero { padding: var(--gap-lg) 0 var(--gap-xs); }
.brief-hero .breadcrumb { font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--muted); display:flex; gap:8px; }
.brief-hero .breadcrumb a:hover{ color:var(--accent); }
.brief-hero h1{ margin-top:16px; font-size: var(--ds-3xl); }
.brief-hero .lead{ margin-top:12px; max-width:46ch; }

/* shell ------------------------------------------------------*/
.brief { padding: var(--gap-xs) 0 var(--gap-2xl); }
.brief-shell{
  display:grid; grid-template-columns: 300px 1fr; gap:var(--gap-lg);
  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:12px; }
.q-rail-prog .pn{ font-family:var(--f-display); font-size: var(--fs-2xl); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; line-height: var(--lh-none); color:var(--ink); }
.q-rail-prog .pn b{ color:var(--accent); font-weight:var(--fw-med); }
.q-rail-prog .pl{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--muted); }
.q-bar{ height:3px; background:var(--line); border-radius: var(--radius); overflow:hidden; }
.q-bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius: var(--radius); transition: width var(--dur-slow) var(--ease); }

.q-steps{ margin-top:24px; 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:12px 0; border-bottom:1px solid var(--line-soft); color:var(--muted); transition: color var(--dur-base); }
.q-steps li .sn{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); }
.q-steps li .st{ font-size: var(--fs-base); }
.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: var(--fs-micro); }
.q-steps li.active .st{ font-weight:var(--fw-head); }
.q-reassure{ margin-top:20px; font-size: var(--fs-sm); color:var(--muted); line-height: var(--lh-body); display:flex; gap:8px; }
.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:4px; margin-top:16px; }
  .q-mini i{ flex:1; height:3px; border-radius: var(--radius); background:var(--line); transition: background var(--dur-slow); }
  .q-mini i.on{ background:var(--accent); }
}

/* panel ------------------------------------------------------*/
.q-panel{
  background:var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding:var(--gap-md);
  box-shadow:var(--shadow-lg);
  min-height:440px; display:flex; flex-direction:column;
}
.q-eyebrow{ font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--accent); display:flex; gap:8px; align-items:center; }
.q-eyebrow .idx{ color:var(--muted); }
.q-question{ font-family:var(--f-display); font-weight:var(--fw-head); font-size: var(--ds-xl); line-height: var(--lh-display); letter-spacing: var(--track-tight); margin-top:16px; color:var(--heading); text-wrap:balance; }
.q-help{ color:var(--ink-soft); margin-top:12px; font-size: var(--fs-base); max-width:54ch; }
.q-body{ margin-top:var(--gap-sm); 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: var(--radius-lg);
  background:var(--paper); padding:16px 16px 16px; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-base);
  display:flex; flex-direction:column; gap:4px; min-height:96px; justify-content:flex-start;
}
.q-opt:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.q-opt .on-num{ font-family:var(--f-mono); font-size: var(--fs-micro); color:var(--muted); }
.q-opt .on-t{ font-family:var(--f-display); font-weight: var(--fw-head); font-size: var(--fs-lg); line-height: var(--lh-heading); color:var(--ink); }
.q-opt .on-t .zh{ font-size:.92em; }
.q-opt .on-d{ font-size: var(--fs-sm); color:var(--ink-soft); line-height: var(--lh-snug); }
.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: var(--dur-fast); }
.q-opt .on-check svg{ width:11px; height:11px; color:#fff; opacity:0; transform:scale(.5); transition: var(--dur-fast); }
.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:12px 16px; }
.q-opt.compact .on-t{ font-size: var(--fs-md); }

/* chips */
.q-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.q-chip{ font-family:var(--f-sans); font-size: var(--fs-base); padding:8px 16px; border:1px solid var(--line);
  border-radius: var(--radius-pill); color:var(--ink-soft); background:var(--paper); transition: var(--dur-fast); 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: var(--fs-sm); }

/* slider */
.q-slider-wrap{ padding-top:6px; }
.q-slider-read{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.q-slider-read .sv{ font-family:var(--f-display); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; font-size:var(--fs-2xl); color:var(--accent); line-height: var(--lh-none); }
.q-slider-read .sd{ font-size: var(--fs-base); 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: var(--radius);
  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:var(--shadow-sm); cursor:pointer; transition: transform var(--dur-fast); }
.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:var(--shadow-sm); cursor:pointer; }
.q-ticks{ display:flex; justify-content:space-between; margin-top:12px; }
.q-ticks span{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); 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:6px; margin-bottom:16px; }
.q-tex-cat{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--accent); flex:none; }
.q-tex-read{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.q-tex-read .sv{ font-family:var(--f-display); font-weight:var(--fw-med); font-size:var(--fs-xl); line-height: var(--lh-none); color:var(--ink); }
.q-tex-read .sd{ font-size: var(--fs-sm); 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: var(--fs-micro); letter-spacing: var(--track-wide); 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: var(--fs-base); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.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: var(--radius-lg); overflow:hidden; }
.q-spec-top{ background:var(--ink); color:var(--paper); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
:root[data-theme="dark"] .q-spec-top{ background:var(--surface-dark); }
.q-spec-top .st-k{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--accent-on-dark); }
.q-spec-top .st-t{ font-family:var(--f-display); font-weight:var(--fw-med); font-size:var(--fs-xl); color:#fff; margin-top:4px; }
.q-spec-top .st-id{ font-family:var(--f-mono); font-size: var(--fs-micro); color:rgba(255,255,255,.55); text-align:right; }
.q-row{ display:grid; grid-template-columns:160px 1fr; gap:16px; padding:16px 20px; 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: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--muted); padding-top:4px; }
.q-row .rv{ font-size: var(--fs-base); color:var(--ink); display:flex; flex-wrap:wrap; gap:6px; }
.q-row .rv .pill{ font-size: var(--fs-sm); background:var(--surface); border:1px solid var(--line); border-radius: var(--radius-pill); padding:4px 12px; color:var(--ink-soft); white-space:nowrap; line-height: var(--lh-snug); }
.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: var(--fs-micro); letter-spacing: var(--track-wide); 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:var(--gap-sm); padding-top:20px; border-top:1px solid var(--line-soft); }
.q-skip{ font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); 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: var(--fs-sm); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; padding:12px 6px; }
.q-back:hover{ color:var(--ink); }
.q-back[disabled]{ opacity:0; pointer-events:none; }
.q-kbd{ font-family:var(--f-mono); font-size: var(--fs-micro); 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 var(--dur-slow) ease, transform var(--dur-slow) var(--ease); }
.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:var(--gap-md) 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 20px; }
.q-done .seal svg{ width:30px; height:30px; color:var(--accent); }
.q-done h2{ font-family:var(--f-display); font-size: var(--ds-xl); color:var(--heading); }
.q-done p{ color:var(--ink-soft); margin-top:12px; max-width:48ch; margin-inline:auto; }
.q-done .acts{ display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.q-done .ref{ font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--muted); margin-top:24px; }
.q-mailnote{ font-size: var(--fs-sm); color:var(--muted); margin-top:20px; }
.q-mailnote b{ color:var(--ink-soft); font-weight:var(--fw-head); }
.q-restart{ display:block; margin:16px auto 0; font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--muted); transition: color var(--dur-fast); }
.q-restart:hover{ color:var(--accent); }

/* validation messaging — was a border colour only, which is invisible to
   screen readers and fails colour-as-sole-indicator */
.q-fld .q-err { display: none; margin-top: 6px; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--signal); }
.q-fld .q-err.show { display: block; }
.q-fld input.is-invalid, .q-fld textarea.is-invalid { border-color: var(--signal); }
/* the rail jump target is now a button; keep it looking like the old <li> */
.q-steps li .sbtn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.q-steps li .sbtn[aria-disabled="true"] { cursor: default; }