/* coach.css · Manager Coach — scenario-based coaching assistant.
   Demo-specific layout only; tokens + primitives come from lab-kit.css. */

.co-stage {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

/* ---- scenario picker (left rail) ---- */
.co-picker { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 86px; }
.co-block { display: flex; flex-direction: column; gap: 11px; }
.co-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
}

.co-scenarios { flex-direction: column; align-items: stretch; gap: 9px; }
.co-scenarios .chip {
  justify-content: flex-start; gap: 10px;
  display: flex; align-items: center; text-align: left; width: 100%;
}
.co-chip-ico { font-size: 16px; line-height: 1; flex-shrink: 0; }
.co-scenarios .chip[aria-pressed="true"] {
  border-color: var(--mint); color: var(--mint-ink);
  background: var(--mint-tint-2); box-shadow: 0 4px 12px rgba(4,190,140,.12);
}
.co-scenarios .chip[aria-pressed="true"] .co-chip-ico { transform: scale(1.05); }

/* ---- free-text ask ---- */
.co-ask { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.co-ask-row { display: flex; gap: 8px; }
.co-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 15px; font-size: 13.5px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.co-input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(4,190,140,.14); }
.co-send { padding: 10px 16px; flex-shrink: 0; }

.co-meta {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft);
}
.co-meta__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }

/* ---- output column ---- */
.co-output { min-height: 360px; padding: 22px; }
.co-empty { margin: auto; }

/* the streamed script */
.co-script { display: flex; flex-direction: column; gap: 16px; }
.co-script[hidden] { display: none; }

/* header of a script: scenario name + intent badge */
.co-script__head { display: flex; align-items: center; gap: 11px; }
.co-script__head .pc-h { margin-bottom: 0; flex: 1; }

/* goal callout */
.co-goal {
  font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
  background: var(--mint-tint-2); border: 1px solid var(--line);
  border-left: 3px solid var(--mint); border-radius: 0 12px 12px 0; padding: 12px 14px;
}
.co-goal b { color: var(--text-1); font-weight: 700; }

/* section block (opening line / do-dont / prep) */
.co-sec { display: flex; flex-direction: column; gap: 10px; }
.co-sec__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
  letter-spacing: -.01em; color: var(--text-1);
}
.co-sec__title .co-num {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--mint-ink); background: var(--mint-tint);
}

/* the quoted opening line */
.co-quote {
  position: relative;
  font-size: 15px; line-height: 1.55; color: var(--text-1);
  font-style: italic;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px 16px 44px;
  box-shadow: var(--shadow-sm);
}
.co-quote::before {
  content: '\201C'; position: absolute; left: 14px; top: 6px;
  font-family: var(--font-display); font-size: 38px; line-height: 1;
  color: var(--mint); opacity: .55;
}
.co-quote .co-streaming { white-space: pre-wrap; }

/* do / don't grid */
.co-dd { display: grid; gap: 9px; }
.co-dd__row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  animation: lab-up .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.co-dd__tag {
  flex-shrink: 0; width: 30px; text-align: center;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 0; border-radius: 6px;
}
.co-dd__row.is-do { border-left: 3px solid var(--ok); }
.co-dd__row.is-do .co-dd__tag { color: var(--ok); background: var(--ok-soft); }
.co-dd__row.is-dont { border-left: 3px solid var(--danger); }
.co-dd__row.is-dont .co-dd__tag { color: var(--danger); background: var(--danger-soft); }
.co-dd__row b { color: var(--text-1); }

/* prep checklist */
.co-prep { display: flex; flex-direction: column; gap: 2px; }
.co-prep__item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 4px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; line-height: 1.45; color: var(--text-2);
  cursor: pointer; transition: color .15s;
  animation: lab-up .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.co-prep__item:last-child { border-bottom: 0; }
.co-prep__item:hover { color: var(--text-1); }
.co-prep__box {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px;
  border: 1.8px solid var(--line); border-radius: 6px;
  display: grid; place-items: center;
  transition: background .18s, border-color .18s, transform .15s;
}
.co-prep__box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; transition: opacity .15s; }
.co-prep__item.is-checked .co-prep__box { background: var(--mint); border-color: var(--mint); }
.co-prep__item.is-checked .co-prep__box svg { opacity: 1; }
.co-prep__item.is-checked .co-prep__text { color: var(--text-soft); text-decoration: line-through; text-decoration-color: var(--line); }
.co-prep__text { flex: 1; }

/* prep progress meter */
.co-prep__meter {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.co-prep__bar { flex: 1; height: 6px; background: var(--soft); border-radius: var(--r-pill); overflow: hidden; }
.co-prep__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint-600), var(--mint)); border-radius: var(--r-pill); transition: width .4s cubic-bezier(.2,.7,.2,1); }

/* thinking trace before the script appears */
.co-think {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--text-dim); white-space: pre-wrap;
  background: var(--soft); border-radius: var(--r-md); padding: 12px 14px;
}
.co-think .co-think__cur { color: var(--mint-ink); }

@media (max-width: 860px) {
  .co-stage { grid-template-columns: 1fr; }
  .co-picker { position: static; }
  .co-output { min-height: 240px; }
}