/* ==========================================================================
   KUTAY OS — brief wizard (js/apps/brief.js)
   Layered on the shared .os-dialog shell (css/shell.css): only the
   wizard's own content — progress, chips, fields, summary, stamp — and a
   wider panel. Loaded by every page that can open the wizard (contact,
   pack, terminal).
   ========================================================================== */

.os-dialog.brief-wizard { width: min(620px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: min(760px, 90dvh); overflow: hidden; }
.brief-wizard .dialog-content { padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.bw-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-2); }
.bw-kicker { font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--text-dim); }
.bw-count { font: 600 12px/1 var(--font-mono); color: var(--accent); }
.bw-bar { height: 3px; margin: 0 var(--space-6); background: var(--line-2); border-radius: 3px; overflow: hidden; }
.bw-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s var(--ease-out, cubic-bezier(.2,.7,.2,1)); }

.bw-body { padding: var(--space-5) var(--space-6) var(--space-3); overflow-y: auto; flex: 1 1 auto; min-height: 240px; }
.bw-body h3 { margin: 0 0 6px; font-size: clamp(22px, 3.2vw, 28px); letter-spacing: -.025em; line-height: 1.1; }
.bw-body h3:focus { outline: none; }
.bw-hint { margin: 0 0 var(--space-5); color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }

.bw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.bw-chip {
  min-height: 42px; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; color: var(--text); font-size: 14px; line-height: 1.2;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.bw-chip:hover { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.bw-chip:active { transform: scale(.97); }
.bw-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.bw-chip[aria-pressed="true"]::before { content: "✓ "; }

.bw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); font-size: 12.5px; color: var(--text-muted); }
.brief-wizard .bw-field input, .brief-wizard .bw-field textarea {
  margin: 0; height: auto; min-height: 46px; width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 13px; resize: vertical; color-scheme: dark;
}
:root[data-theme="light"] .brief-wizard .bw-field input, :root[data-theme="light"] .brief-wizard .bw-field textarea { background: rgba(0, 0, 0, .03); color-scheme: light; }
.brief-wizard .bw-field :is(input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.brief-wizard .bw-field [aria-invalid="true"] { border-color: #ff8a7a; box-shadow: 0 0 0 1px #ff8a7a; }

.bw-summary { margin: var(--space-3) 0 var(--space-5); border-top: 1px solid var(--line-2); }
.bw-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.bw-row dt { font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.bw-row dd { margin: 0; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.bw-row dd i { color: var(--text-dim); }
.bw-edit { min-height: 32px; padding: 4px 10px; border-radius: var(--r-pill); color: var(--accent); font-size: 12.5px; }
.bw-edit:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bw-extra { margin: 0 0 var(--space-5); }
.bw-extra summary { cursor: pointer; font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding: 6px 0; }
.bw-extra .bw-row { grid-template-columns: 130px minmax(0, 1fr); }
.bw-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.bw-contact .bw-wide { grid-column: 1 / -1; }

.brief-wizard .bw-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6) var(--space-5); border-top: 1px solid var(--line-2); justify-content: flex-start; }
.bw-foot [data-bw-back][hidden] { display: none; }
.bw-save { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.bw-save.is-need { color: var(--text-muted); }
.bw-save.is-shake { color: #ffb3a8; animation: bw-shake .32s ease; }
@keyframes bw-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.bw-foot [data-bw-next] { margin-left: auto; min-width: 128px; justify-content: center; }
.bw-foot [data-bw-next].is-disabled { opacity: .5; cursor: not-allowed; filter: none; }

.bw-error { color: #ffb3a8; font-size: 13px; margin-top: var(--space-2); }
.bw-done { text-align: center; padding: var(--space-6) 0 var(--space-7); }
.bw-done p { color: var(--text-muted); max-width: 40ch; margin: 0 auto; }
.bw-stamp {
  display: inline-flex; flex-direction: column; align-items: center; padding: 8px 18px; margin-bottom: var(--space-5);
  border: 3px solid var(--accent); color: var(--accent); transform: rotate(-10deg);
  font: 900 26px/.95 Impact, "Arial Narrow", sans-serif; letter-spacing: .12em; box-shadow: 5px 5px 0 var(--line);
  animation: bw-stamp .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes bw-stamp { from { transform: rotate(-10deg) scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bw-stamp, .bw-save.is-shake { animation: none; } .bw-bar i { transition: none; } }

@media (max-width: 600px) {
  .os-dialog.brief-wizard { max-height: calc(100dvh - 24px); }
  .bw-meta, .bw-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .bw-bar { margin: 0 var(--space-4); }
  .bw-contact { grid-template-columns: 1fr; }
  .bw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bw-row dt { grid-column: 1 / -1; }
  .brief-wizard .bw-foot { padding: var(--space-3) var(--space-4) var(--space-4); flex-wrap: wrap; }
  .bw-save { order: -1; flex-basis: 100%; }
  .bw-foot [data-bw-next] { flex: 1; }
}