/* ════════════════════════════════════════════════════════════
   admin-studio.css — Site Studio surface (lives inside cc-panel).
   Reuses the Command Center tokens (admin-cc.css :root).
   ════════════════════════════════════════════════════════════ */

/* ── breadcrumb + save status bar ── */
.st-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.st-crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.st-crumb{background:none;border:0;color:var(--cc-text-dim);font:600 13px/1 var(--cc-sans);
  cursor:pointer;padding:5px 9px;border-radius:7px;transition:.15s;white-space:nowrap}
.st-crumb:hover{background:var(--cc-surface-2);color:var(--cc-text)}
.st-crumb.root{color:var(--cc-bronze)}
.st-crumb.cur{color:var(--cc-text);cursor:default;background:var(--cc-surface-2)}
.st-sep{color:var(--cc-shale);font-size:12px}
.st-status{font:600 12px/1 var(--cc-mono);min-width:78px;text-align:right}
.st-status.saving{color:var(--cc-bronze)}
.st-status.ok{color:var(--cc-olive)}
.st-status.err{color:var(--cc-terra)}

/* ── grade cards ── */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;margin-top:14px}
.st-card{text-align:left;background:var(--cc-surface);border:1px solid var(--cc-border);
  border-radius:12px;padding:16px;cursor:pointer;transition:.16s;color:var(--cc-text);display:block}
.st-card:hover{border-color:var(--cc-bronze);transform:translateY(-2px);background:var(--cc-surface-2)}
.st-card-cyc{font:600 10px/1 var(--cc-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cc-shale)}
.st-card-nm{font:700 17px/1.2 var(--cc-serif,var(--cc-sans));margin:7px 0 6px;color:var(--cc-text)}
.st-card-meta{font:500 12px/1.3 var(--cc-sans);color:var(--cc-text-dim)}
.st-card-flag{margin-top:9px;font:600 11px/1 var(--cc-mono);color:var(--cc-terra)}
.st-card-ok{margin-top:9px;font:600 11px/1 var(--cc-mono);color:var(--cc-olive)}

/* ── generic list / rows ── */
.st-list{display:flex;flex-direction:column;gap:8px;background:var(--cc-surface);
  border:1px solid var(--cc-border-soft);border-radius:12px;padding:10px;margin:4px 0 14px}
.st-row{display:flex;align-items:center;gap:10px;background:var(--cc-surface-2);
  border:1px solid var(--cc-border-soft);border-radius:9px;padding:9px 11px;transition:.14s}
.st-row.drag{cursor:grab}
.st-row.dragging{opacity:.45}
.st-row.drop-into{border-color:var(--cc-bronze);box-shadow:0 0 0 1px var(--cc-bronze) inset}
.st-row.sys{opacity:.82;border-style:dashed}
.st-grip{color:var(--cc-shale);font-size:15px;cursor:grab;user-select:none}
.st-grip.ghost{cursor:default;color:var(--cc-shale-dim,var(--cc-shale))}
.st-row-ic{font-size:20px;width:26px;text-align:center}
.st-row-ic.big{font-size:30px;width:auto}
.st-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-row-sub{font:500 11px/1.2 var(--cc-sans);color:var(--cc-text-dim)}
.st-row-sub code,code.st-type{font:600 11px var(--cc-mono);color:var(--cc-bronze)}
.st-type{color:var(--cc-text-dim)}
.st-sysnm{font:700 14px/1.2 var(--cc-sans);color:var(--cc-text)}
.st-systag{color:var(--cc-shale);font-weight:600}

/* inline inputs */
.st-inp{background:var(--cc-bg);border:1px solid var(--cc-border-soft);border-radius:7px;
  color:var(--cc-text);font:500 13px/1.2 var(--cc-sans);padding:7px 9px;width:100%}
.st-inp:focus{outline:none;border-color:var(--cc-bronze);background:var(--cc-rail)}
.st-inp.nm{font-weight:600}
.st-inp.en{font-size:12px;color:var(--cc-text-dim)}
.st-inp.q{font-weight:600;font-size:14px}

.st-count{font:600 11px/1 var(--cc-mono);color:var(--cc-text-dim);white-space:nowrap}
.st-count.zero{color:var(--cc-terra)}
.st-track{font:600 10px/1 var(--cc-mono);color:var(--cc-aegean);text-transform:uppercase;letter-spacing:.06em}

/* buttons */
.st-open,.st-edit{background:var(--cc-surface-3);border:1px solid var(--cc-border);color:var(--cc-text);
  font:600 12px/1 var(--cc-sans);padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.14s}
.st-open:hover,.st-edit:hover{border-color:var(--cc-bronze);color:var(--cc-bronze)}
.st-edit.ghost{background:none;border-style:dashed;color:var(--cc-shale);cursor:default}
.st-edit.ghost:hover{color:var(--cc-shale);border-color:var(--cc-border-soft)}
.st-del{background:none;border:1px solid var(--cc-border-soft);color:var(--cc-shale);
  width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:13px;transition:.14s;flex:0 0 auto}
.st-del:hover{border-color:var(--cc-terra);color:var(--cc-terra);background:rgba(200,81,46,.08)}
.st-tier{background:var(--cc-bg);border:1px solid var(--cc-border-soft);color:var(--cc-text-dim);
  font:600 11px var(--cc-sans);padding:6px 7px;border-radius:7px;cursor:pointer}
.st-add{margin-top:2px;background:linear-gradient(180deg,var(--cc-surface-3),var(--cc-surface-2));
  border:1px solid var(--cc-border);color:var(--cc-bronze);font:700 13px/1 var(--cc-sans);
  padding:11px 16px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.st-add:hover{border-color:var(--cc-bronze);background:var(--cc-surface-3)}
.st-add .ai{font-size:15px}

/* key chips (rhapsody letters / slice slugs) */
.st-key{font:700 14px/1 var(--cc-serif,var(--cc-sans));color:var(--cc-bronze);background:var(--cc-bg);
  border:1px solid var(--cc-border);border-radius:7px;min-width:30px;height:30px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 8px}
.st-key.sm{font-size:12px;min-width:26px;height:26px}
.st-key.slug{font-family:var(--cc-mono);font-size:11px}

/* game header */
.st-gamehd{display:flex;align-items:center;gap:14px;background:var(--cc-surface);
  border:1px solid var(--cc-border);border-radius:12px;padding:14px 16px;margin:4px 0 12px}
.st-gamehd-nm{font:700 18px/1.1 var(--cc-serif,var(--cc-sans));color:var(--cc-text)}
.st-gamehd-sub{font:500 12px/1.3 var(--cc-sans);color:var(--cc-text-dim);margin-top:3px}
.st-gamehd-sub code{font:600 11px var(--cc-mono);color:var(--cc-bronze)}
.st-schema{margin-left:auto;font:600 11px/1 var(--cc-mono);color:var(--cc-aegean);
  border:1px solid var(--cc-border);border-radius:20px;padding:6px 11px;white-space:nowrap}

/* tabs */
.st-tabs{display:flex;gap:6px;border-bottom:1px solid var(--cc-border-soft);margin-bottom:14px}
.st-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--cc-text-dim);
  font:600 13px/1 var(--cc-sans);padding:10px 14px;cursor:pointer;margin-bottom:-1px}
.st-tab.on{color:var(--cc-bronze);border-bottom-color:var(--cc-bronze)}

/* questions */
.st-qlist{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.st-q{background:var(--cc-surface);border:1px solid var(--cc-border-soft);border-radius:11px;padding:12px}
.st-q.dragging{opacity:.45}
.st-q.drop-into{border-color:var(--cc-bronze)}
.st-q-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.st-q-n{font:700 12px/1 var(--cc-mono);color:var(--cc-bronze);background:var(--cc-bg);
  border:1px solid var(--cc-border);border-radius:6px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.st-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-opt{display:flex;align-items:center;gap:8px;background:var(--cc-surface-2);
  border:1px solid var(--cc-border-soft);border-radius:8px;padding:6px 9px;cursor:pointer}
.st-opt.correct{border-color:var(--cc-olive);background:rgba(154,160,94,.12)}
.st-opt input[type=radio]{display:none}
.st-opt-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--cc-shale);flex:0 0 auto;transition:.14s}
.st-opt.correct .st-opt-dot{border-color:var(--cc-olive);background:var(--cc-olive);box-shadow:0 0 0 3px rgba(154,160,94,.2)}
.st-inp.o{border:0;background:none;padding:4px 2px}
.st-inp.o:focus{background:var(--cc-bg);border:1px solid var(--cc-border-soft)}

/* texts */
.st-text{background:var(--cc-surface);border:1px solid var(--cc-border-soft);border-radius:11px;padding:12px;margin-bottom:10px}
.st-text-hd{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.st-text-body{width:100%;background:var(--cc-bg);border:1px solid var(--cc-border-soft);border-radius:8px;
  color:var(--cc-text);font:400 13px/1.5 var(--cc-serif,var(--cc-sans));padding:10px;resize:vertical}
.st-text-body:focus{outline:none;border-color:var(--cc-bronze)}

/* empty states */
.st-empty{text-align:center;padding:22px;color:var(--cc-text-dim);font:500 13px var(--cc-sans)}
.st-empty.big{padding:38px 22px}
.st-empty-ic{font-size:44px;opacity:.5;margin-bottom:10px}
.st-empty-t{font:700 16px var(--cc-sans);color:var(--cc-text);margin-bottom:5px}
.st-empty-s{font:500 13px var(--cc-sans);color:var(--cc-text-dim)}

/* badges + confirm detail lines */
.st-badge{font:600 10px/1 var(--cc-mono);padding:3px 7px;border-radius:5px;text-transform:uppercase}
.st-badge.free{color:var(--cc-olive);border:1px solid var(--cc-olive)}
.st-badge.student{color:var(--cc-bronze);border:1px solid var(--cc-bronze)}
.st-badge.teacher{color:var(--cc-aegean);border:1px solid var(--cc-aegean)}
.st-conf-lines{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.st-conf-lines>div{display:flex;justify-content:space-between;font:500 12px var(--cc-sans);
  color:var(--cc-text-dim);border-top:1px solid var(--cc-border-soft);padding-top:6px}
.st-conf-lines b{color:var(--cc-text)}

/* add-game picker grid (rendered into #cc-confirm-modal) */
.st-pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin:14px 0}
.st-pick{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  background:var(--cc-surface-2);border:1px solid var(--cc-border);border-radius:10px;padding:12px;cursor:pointer;transition:.14s;color:var(--cc-text)}
.st-pick:hover{border-color:var(--cc-bronze);background:var(--cc-surface-3)}
.st-pick-ic{font-size:22px}
.st-pick-nm{font:700 13px/1.2 var(--cc-sans)}
.st-pick-k{font:600 10px/1 var(--cc-mono);color:var(--cc-shale)}

/* ── paradigm table editor ── */
.pt-axes{display:flex;flex-wrap:wrap;gap:18px;background:var(--cc-surface);
  border:1px solid var(--cc-border-soft);border-radius:11px;padding:13px;margin-bottom:14px}
.pt-axgrp{display:flex;flex-direction:column;gap:7px}
.pt-axlbl{font:600 10px/1 var(--cc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cc-shale)}
.pt-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pt-chip{display:inline-flex;align-items:center;gap:3px;background:var(--cc-surface-2);
  border:1px solid var(--cc-border-soft);border-radius:7px;padding:2px 4px}
.pt-axin{background:none;border:0;color:var(--cc-text);font:600 12px var(--cc-sans);padding:4px 6px;width:118px}
.pt-axin:focus{outline:none}
.pt-x{background:none;border:0;color:var(--cc-shale);cursor:pointer;font-size:11px;padding:0 4px}
.pt-x:hover{color:var(--cc-terra)}
.pt-addax{background:var(--cc-surface-3);border:1px solid var(--cc-border);color:var(--cc-bronze);
  width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px}
.pt-entry{background:var(--cc-surface);border:1px solid var(--cc-border-soft);border-radius:11px;padding:12px;margin-bottom:12px}
.pt-entry-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.pt-lemma{flex:0 0 auto;background:var(--cc-bg);border:1px solid var(--cc-border);border-radius:7px;
  color:var(--cc-bronze);font:700 14px var(--cc-serif,var(--cc-sans));padding:7px 10px;min-width:160px}
.pt-meta{flex:1;background:var(--cc-bg);border:1px solid var(--cc-border-soft);border-radius:7px;
  color:var(--cc-text-dim);font:500 12px var(--cc-sans);padding:7px 10px}
.pt-lemma:focus,.pt-meta:focus{outline:none;border-color:var(--cc-bronze)}
.pt-wrap{overflow-x:auto}
.pt{border-collapse:collapse;width:100%;min-width:340px}
.pt th,.pt td{border:1px solid var(--cc-border-soft);padding:0}
.pt-corner{background:var(--cc-rail)}
.pt-colh,.pt-rowh{background:var(--cc-surface-2);color:var(--cc-text-dim);
  font:600 11px var(--cc-sans);padding:7px 9px;text-align:center;white-space:nowrap}
.pt-rowh{text-align:right}
.pt-cell{width:100%;min-width:96px;background:none;border:0;color:var(--cc-text);
  font:500 13px var(--cc-serif,var(--cc-sans));padding:8px 9px;text-align:center}
.pt-cell:focus{outline:none;background:var(--cc-rail);box-shadow:0 0 0 1px var(--cc-bronze) inset}

/* note variant */
.cc-note.warn{border-left:3px solid var(--cc-terra)}

@media(max-width:640px){
  .st-opts{grid-template-columns:1fr}
  .st-row{flex-wrap:wrap}
  .st-row-main{flex-basis:100%;order:5}
}

/* ── Levels & Access panel (inline per-class curriculum) ── */
.st-la{margin-top:18px;background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:12px;padding:14px 16px}
.st-la-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.st-la-title{font:700 15px/1.2 var(--cc-serif,var(--cc-sans));color:var(--cc-text)}
.st-la-sub{font:600 10px/1 var(--cc-mono);color:var(--cc-shale);text-transform:uppercase;letter-spacing:.08em;margin-left:6px}
.st-la-tabs{display:flex;flex-wrap:wrap;gap:5px}
.st-la-cls{background:var(--cc-surface-2);border:1px solid var(--cc-border-soft);color:var(--cc-text-dim);
  font:600 12px/1 var(--cc-sans);padding:7px 11px;border-radius:7px;cursor:pointer;transition:.14s}
.st-la-cls:hover{border-color:var(--cc-bronze);color:var(--cc-text)}
.st-la-cls.on{background:var(--cc-surface-3);border-color:var(--cc-bronze);color:var(--cc-bronze)}
.st-la-enable{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:600 13px var(--cc-sans);color:var(--cc-text);
  background:var(--cc-surface-2);border:1px solid var(--cc-border-soft);border-radius:8px;padding:9px 12px}
.st-la-enable input{width:16px;height:16px;accent-color:var(--cc-bronze);cursor:pointer}
.st-la-foot{margin-top:12px;font:500 11px/1.4 var(--cc-sans);color:var(--cc-shale);border-top:1px solid var(--cc-border-soft);padding-top:9px}
.st-la-foot code{font:600 11px var(--cc-mono);color:var(--cc-bronze)}