/* studio: styles for app/routes/studio.py pages (uses the tokens in app.css) */

/* ---------------------------------------------------------------- Course Studio */
.studio-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.studio-stats > .card { margin: 0; padding: .8rem .9rem; }
.studio-stats .st-sub { font-size: .9rem; font-weight: 500; }
.studio-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.studio-form { position: sticky; top: 76px; margin: 0; }
.studio-form h2 { font-size: 1.15rem; }
.st-skills { border: 0; padding: 0; margin: .8rem 0; }
.st-skills legend { padding: 0; margin-bottom: .3rem; }
.st-skill { gap: .5rem; align-items: flex-start; margin: .25rem 0; font-weight: 400; font-size: .9rem; }
.st-skill input { margin-top: .3rem; }
.st-skill .pill { font-size: .68rem; margin-left: .2rem; }

.studio-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.studio-tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px;
  padding: .3rem .75rem; font: 600 .84rem var(--font); cursor: pointer; }
.studio-tabs button[aria-selected="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.studio-tabs button[aria-selected="true"] .pill { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
.studio-tabs .pill { font-size: .72rem; padding: 0 .4rem; margin-left: .15rem; }
.studio-queue > .stack { margin-top: .8rem; }

.st-card { margin: 0; }
.st-card + .st-card { margin-top: 1rem; }
.st-card.published { border-left: 4px solid var(--ok); }
.st-card.rejected { opacity: .8; }
.st-card-head { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin-bottom: .8rem; }
.st-prov { background: var(--surface-2); }
.st-verify { font-size: .8rem; border-radius: 6px; padding: .15rem .5rem; }
.st-verify.ok { background: var(--ok-bg); color: var(--ok); }
.st-verify.warn { background: var(--warn-bg); color: var(--warn); }
.st-card-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.st-card-body.readonly { grid-template-columns: minmax(0, 1fr); }
.st-edit .field { margin: .55rem 0; }
.st-edit .field:first-child { margin-top: 0; }
.st-edit label { font-size: .84rem; font-weight: 650; }
.st-edit textarea { min-height: 0; width: 100%; }
.st-edit .st-code { font-family: var(--mono); font-size: .84rem; }
.st-small { gap: .75rem; }
.st-optset { border: 0; padding: 0; }
.st-optset legend { font-size: .84rem; font-weight: 650; padding: 0; margin-bottom: .35rem; }
.st-opts { display: grid; gap: .45rem; }
.st-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: start;
  border: 1px solid var(--line); border-radius: 8px; padding: .45rem .5rem; background: var(--surface); }
.st-opt:has(input[type=radio]:checked) { border-color: var(--ok); background: var(--ok-bg); }
.st-opt input[type=radio] { margin-top: .55rem; accent-color: var(--maroon); }
.st-opt-fields { display: grid; gap: .3rem; }
.st-opt-fields input { width: 100%; font-size: .88rem; }
.st-opt-fields input[data-o="why"] { font-size: .8rem; color: var(--ink-2); background: var(--surface-2); }
.st-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; padding: .35rem; border-radius: 6px; }
.st-x:hover:not([disabled]) { background: var(--surface-2); color: var(--ink); }
.st-x[disabled] { opacity: .3; cursor: not-allowed; }

.st-preview { background: var(--surface-2); border-radius: 10px; padding: .8rem .95rem; min-width: 0; }
.st-preview .eyebrow { margin-bottom: .4rem; }
.st-pv-prompt p:first-child { margin-top: 0; }
.st-preview pre { overflow-x: auto; }
.st-preview .options { margin-top: .6rem; }
.st-preview .option { cursor: default; }
.st-pv-key { margin-top: .7rem; font-size: .9rem; }
.st-pv-key summary { cursor: pointer; font-weight: 650; color: var(--ink-2); }
.st-reason { margin-top: .8rem; }
.st-reason summary { cursor: pointer; color: var(--muted); }
.st-reason .eyebrow { margin: .6rem 0 .2rem; }
.st-actions { margin-top: .9rem; gap: .4rem; flex-wrap: wrap; align-items: center; }
.st-msg { margin-left: .3rem; }

@media (max-width: 1100px) {
  .studio-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-form { position: static; }
}
@media (max-width: 760px) {
  .st-card-body { grid-template-columns: minmax(0, 1fr); }
  .studio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-queue > .row { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ---------------------------------------------------------------- Tutor quality & cost */
.q-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.q-kpis > .card { margin: 0; padding: .8rem .9rem; }
.q-kpis .stat small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.q-section { margin-top: 1rem; }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.q-grid > .card { margin: 0; }
.q-signal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line); }
.q-signal:last-child { border-bottom: 0; }
.q-signal .v { font-weight: 750; font-variant-numeric: tabular-nums; }
.q-signal .why { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); }
.q-meter { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--viz-grid); overflow: hidden; }
.q-meter > span { display: block; height: 100%; background: var(--viz-s1); border-radius: 0 4px 4px 0; }
.q-flag { display: inline-block; font-size: .8rem; border-radius: 6px; padding: .1rem .45rem; }
.q-flag.answer { background: var(--bad-bg); color: var(--bad); }
.q-flag.code { background: var(--warn-bg); color: var(--warn); }
.q-excerpt { color: var(--ink-2); font-size: .82rem; max-width: 46ch; }
.q-scroll { overflow-x: auto; }
.q-config dt { font-size: .78rem; color: var(--muted); }
.q-config dd { margin: 0 0 .5rem; font-weight: 600; }
.q-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin: 0; }
.q-checks .pass { color: var(--ok); font-weight: 700; }
.q-checks .fail { color: var(--bad); font-weight: 700; }
.q-checks .skip { color: var(--muted); }
.q-checks pre { white-space: pre-wrap; }

@media (max-width: 900px) {
  .q-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-grid { grid-template-columns: minmax(0, 1fr); }
}