/* SQL Challenges (computer-science/sql-challenges.php). The page chrome is the one-screen layout in
   /css/resource.css; output questions use its challenge options (.cq-opt). On a laptop or desktop: the database
   bar, then the database's tables on the left and the question on the right, filling what's left (each scrolls
   inside its panel). On smaller screens they stack and the page scrolls. Theme tokens only. */

.rp-main{gap:10px}
.sq-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.sq-bar label{font:600 12px/1 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sq-bar select{font:600 14px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 9px;max-width:min(100%, 420px);cursor:pointer}
.sq-bar select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.sq-done{font-size:13px;color:var(--muted)}
.sq-groups button[hidden]{display:none}
.score-chip{margin-left:auto;font:600 13px/1 var(--font-mono);background:var(--panel);border:1px solid var(--line-strong);padding:7px 12px;border-radius:999px;color:var(--ink-soft);white-space:nowrap}
.score-chip strong{color:var(--ink)}

.sq-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px}
.sq-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}
.sq-scroll{flex:1;min-height:0;overflow:auto;padding-right:2px}
.panel h2{margin:0 0 8px;font:600 11.5px/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* the database: what it is, then each table's columns */
.sq-about{margin:0 0 10px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.sq-source{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.sq-table{border:1px solid var(--line-strong);border-radius:5px;background:var(--paper);overflow:hidden;margin-bottom:10px}
.sq-tname{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 13px/1.2 var(--font-mono);background:var(--accent-deep);color:var(--on-accent);padding:7px 10px}
.sq-count{font:500 11.5px/1 var(--font-mono);opacity:.85}
table.sq-cols{font-size:13px;margin:0}
table.sq-cols th{padding:6px 10px}
table.sq-cols td{padding:5px 10px;color:var(--ink-soft)}
table.sq-cols td.cn{font:600 13px/1.3 var(--font-mono);color:var(--ink);white-space:nowrap}
table.sq-cols td.ct{font:12px/1.3 var(--font-mono);color:var(--muted);white-space:nowrap}
.sq-table>.btn{margin:2px 10px 10px}
.sq-preview{padding:0 10px 10px}

/* the question */
.sq-q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.sq-pips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.sq-pip{min-width:24px;height:24px;padding:0 4px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);font:600 11.5px/1 var(--font-mono);cursor:pointer}
.sq-pip:hover{border-color:var(--accent)}
.sq-pip.now{outline:2px solid var(--accent);outline-offset:1px}
.sq-pip.done{background:var(--ok);border-color:var(--ok);color:#fff}
.sq-pip.shown{background:var(--hint-tint);border-color:var(--hint);color:var(--ink)}
.sq-pip.tried{border-color:var(--bad)}
.sq-pip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.sq-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 11.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sq-level{padding:3px 7px;border-radius:3px;background:var(--accent-tint);color:var(--accent-deep)}
.sq-level.as{background:var(--accent-b-tint);color:var(--accent-b-deep)}
.sq-set{padding:3px 7px;border-radius:3px;background:var(--hint-tint);color:var(--ink)}
.sq-qtext{margin:0 0 12px;font:600 clamp(16px,1.35vw,19px)/1.4 var(--font-display);color:var(--ink);text-wrap:pretty}
.sq-label{display:block;font:600 11px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.sq-editor{display:block;width:100%;min-height:96px;resize:vertical;font:15px/1.5 var(--font-mono);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:6px;padding:10px 12px;tab-size:2}
.sq-editor:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.sq-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.kbd{font:500 10.5px/1 var(--font-mono);opacity:.75;margin-left:4px}
.sq-bad{margin:8px 0;padding:9px 12px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0;font-size:14.5px;color:var(--ink)}
.sq-error{margin:8px 0;padding:9px 12px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0;font-size:14px;color:var(--ink)}
.sq-note{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.sq-null{color:var(--muted);font-style:italic}
.sq-show,.sq-model{margin:0 0 12px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;font:14.5px/1.5 var(--font-mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.sq-model{margin:4px 0 8px;font-size:13.5px}
.cq-working .sq-model{background:var(--panel)}
.cq-working.shown{border-left-color:var(--hint)}
.cq-working.shown h4{color:var(--hint)}
.sq-forms{margin:0 0 6px;font-size:14px;color:var(--ink-soft)}
.sq-form{margin:8px 0 0;font:600 11px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sq-next{display:flex;justify-content:flex-end;margin:8px 0}
.sq-finished{font-size:14px;color:var(--ink);background:var(--ok-tint);border-radius:6px;padding:8px 12px}

/* results */
.sq-result-wrap{overflow:auto;max-height:46vh;border:1px solid var(--line);border-radius:5px;margin-top:8px}
table.sq-result{border-collapse:collapse;width:100%;font:13px/1.35 var(--font-mono)}
table.sq-result th,table.sq-result td{border-bottom:1px solid var(--line);padding:5px 9px;text-align:left;white-space:nowrap}
table.sq-result thead th{position:sticky;top:0;background:var(--accent-tint);color:var(--accent-deep);font:700 11px/1.2 var(--font-mono);text-transform:none;letter-spacing:0}
table.sq-result td{color:var(--ink)}

/* output questions: each option is a result */
.sq-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sq-opt{padding:10px 12px}
.sq-opt .sq-result-wrap{margin:0;max-height:none;background:var(--panel)}
.sq-opt table.sq-result{font-size:12.5px}

/* a mystery: the case notebook (the story, the current step), then the console; the student's own tables */
.sq-table.own{border-color:var(--accent-b-deep)}
.sq-table.own .sq-tname{background:var(--accent-b-deep)}
.sq-tname em{font:500 11px/1 var(--font-body);font-style:normal;opacity:.85;margin-left:6px}
.sq-case-intro{margin:0 0 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:8px 12px}
.sq-case-intro summary{cursor:pointer;font:600 12px/1.4 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sq-case-intro p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.sq-step{border-left:3px solid var(--accent);padding:2px 0 4px 12px;margin-bottom:12px}
.sq-task{margin:-4px 0 10px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.sq-task b{color:var(--ink)}
.sq-answer{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.sq-input{flex:1 1 200px;font:15px/1.4 var(--font-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:6px;padding:8px 10px}
.sq-input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.sq-done-note{margin:8px 0;padding:8px 12px;border-left:3px solid var(--ok);background:var(--ok-tint);border-radius:0 6px 6px 0;font-size:14px;color:var(--ink)}
.sq-reveal{margin:10px 0;padding:12px 14px;border-radius:8px;background:var(--hint-tint);border:1px solid var(--hint);font-size:14.5px;line-height:1.6;color:var(--ink)}
.sq-reveal p{margin:0 0 8px}
.sq-pip:disabled{opacity:.4;cursor:not-allowed}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--accent-deep);color:var(--on-accent);font:600 13px/1.3 var(--font-body);padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:900px),(max-height:620px){
  .sq-work{grid-template-columns:1fr;flex:none}
  .sq-scroll{overflow:visible}
  .score-chip{margin-left:0}
  .sq-result-wrap{max-height:60vh}
}
@media (max-width:560px){
  .sq-bar select{width:100%}
  .sq-groups{width:100%}
  .sq-groups button{flex:1;justify-content:center;padding:7px 8px}
  .sq-work>.panel{padding:10px 12px}
  .sq-editor{font-size:16px}
  .kbd{display:none}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}