/* Dynamic task studio (from the BREIN demos): pick a task, fill a short brief, get a checked draft. */
.studio{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(0,1.05fr);min-height:calc(100vh - 64px)}
.tasks{display:flex;flex-direction:column;gap:4px;padding:22px 14px;border-right:1px solid var(--line);background:var(--panel)}
.tasks p{margin:0 10px 10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.task{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px;border:1px solid transparent;border-radius:12px;background:none;text-align:left;transition:background .2s,border-color .2s}
.task .icon{margin-top:2px;color:var(--muted)}
.task strong{display:block;font-size:14px}
.task small{margin-top:2px}
.task:hover{background:var(--panel-2)}
.task[aria-pressed="true"]{border-color:#007ac266;background:var(--orange-tint)}
.task[aria-pressed="true"] .icon{color:var(--orange-text)}

.brief{display:flex;flex-direction:column;gap:16px;padding:26px 28px 32px;border-right:1px solid var(--line)}
.brief h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.8vw,40px);line-height:.95}
.brief-desc{margin-top:-6px;color:var(--muted)}
#briefForm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#briefForm .full{grid-column:1/-1}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.form-note{font-size:12px;color:var(--muted)}

.output{display:flex;flex-direction:column;gap:16px;padding:26px 28px 32px;background:radial-gradient(520px circle at 100% 0%,var(--orange-tint),transparent 60%)}
.out-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.out-head h2{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.paper{min-height:230px;padding:26px 28px;border-radius:14px;background:#ffffff;color:#1c2a36;box-shadow:0 20px 50px -24px #000000cc;white-space:pre-wrap;line-height:1.7;font-size:14.5px}
:root[data-theme="light"] .paper{border:1px solid var(--line);box-shadow:0 20px 50px -30px #0e1a2455}
.paper strong{color:#0e1a24}
.paper .empty{white-space:normal;color:#5f6d78}
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.45}
.check .icon{width:17px;height:17px;margin-top:1px}
.check.ok{background:var(--ok-tint);color:var(--ok-text)}
.check.flag{background:var(--gold-tint);color:var(--gold-text)}
.check b{color:var(--ink);font-weight:800}
.out-actions{display:flex;gap:10px;flex-wrap:wrap}
.out-actions[hidden]{display:none}
.error{color:#ff7a66;font-size:13px}
:root[data-theme="light"] .error{color:#b3261e}

@media (max-width:1100px){
  .studio{grid-template-columns:200px minmax(0,1fr)}
  .output{grid-column:2;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .studio{display:block}
  .tasks{flex-direction:row;overflow-x:auto;padding:12px;border-right:0;border-bottom:1px solid var(--line)}
  .tasks p{display:none}
  .task{flex:none;width:auto;padding:9px 12px}
  .task small{display:none}
  .brief,.output{padding:20px 16px;border:0}
  #briefForm{grid-template-columns:1fr}
}