/* The Pseudocode pages (computer-science/pseudocode.js). The chrome is the one-screen layout (/css/resource.css);
   the question's pips, hint and feedback look like SQL Challenges' (sql-challenges.css, loaded first). On a laptop
   or desktop: the topic bar, then the question on the left and, on the right, the code over the run window and
   trace table, filling what's left. On smaller screens they stack and the page scrolls. Theme tokens only. */

.pc-bar select{max-width:min(100%, 420px)}
.pc-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:10px}
.pc-work>.panel,.pc-right>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}
.pc-right{min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,3fr) minmax(0,2fr);gap:10px}
.pc-scroll{flex:1;min-height:0;overflow:auto;padding-right:2px}
.pc-play .pc-work{grid-template-columns:minmax(0,1fr)}
.pc-play .pc-q,.pc-play .pc-bar{display:none}

/* the question */
.pc-q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.pc-qtitle{margin:0 0 8px;font:700 clamp(16px,1.3vw,19px)/1.3 var(--font-display);color:var(--ink)}
.pc-task{font-size:15px;line-height:1.55;color:var(--ink)}
.pc-task p{margin:0 0 8px}
.pc-task code,.pc-ex code{font:13.5px/1.4 var(--font-mono);background:var(--panel-2);padding:1px 4px;border-radius:3px}
.pc-task ul{margin:0 0 8px;padding-left:20px}
.pc-given{margin:8px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.pc-given summary{cursor:pointer;padding:6px 10px;font:600 12.5px/1.3 var(--font-display);color:var(--ink-soft)}
.pc-given pre{margin:0;padding:6px 10px 10px;font:13px/1.45 var(--font-mono);color:var(--ink);overflow:auto;white-space:pre}
.pc-given .sq-label{margin:4px 10px 0}
.pc-examples{margin:8px 0}
table.pc-ex{width:100%;font-size:13px;border-collapse:collapse;margin:0}
table.pc-ex th{font:600 11px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 8px;border-bottom:1px solid var(--line)}
table.pc-ex td{padding:5px 8px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.9}
table.pc-ex td code{display:inline-block;line-height:1.4;margin:0 2px 2px 0}
.sq-bad code{font:13px/1.4 var(--font-mono);background:var(--paper);padding:1px 4px;border-radius:3px}

/* the code: a toolbar, the editor (line numbers beside it), and what's wrong with it */
.pc-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none;margin-bottom:6px}
.pc-tools .btn{padding:5px 11px}
.pc-tools .pc-arrow{font:700 20px/1 var(--font-mono);min-width:48px;padding:3px 11px 5px}
.pc-sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.pc-grow{flex:1}
.pc-editor{flex:1;min-height:120px;display:flex;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--paper);overflow:hidden}
.pc-editor:focus-within{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.pc-gutter{flex:none;width:42px;overflow:hidden;padding:10px 0;background:var(--panel-2);border-right:1px solid var(--line);text-align:right;user-select:none}
.pc-ln{display:block;height:21px;padding-right:8px;font:12px/21px var(--font-mono);color:var(--muted)}
.pc-ln.err{color:var(--bad);font-weight:700;background:var(--bad-tint)}
.pc-ln.sty{color:var(--hint)}
.pc-ln.now{color:var(--on-accent);background:var(--accent)}
.pc-textwrap{position:relative;flex:1;min-width:0;display:flex}
.pc-text{flex:1;min-width:0;border:0;outline:0;resize:none;padding:10px 12px;margin:0;font:14.5px/21px var(--font-mono);color:var(--ink);background:transparent;tab-size:4;white-space:pre;overflow:auto;position:relative;z-index:1}
.pc-hl{position:absolute;left:0;right:0;height:21px;top:calc(10px + var(--pc-line, 0) * 21px - var(--pc-scroll, 0px));background:var(--accent-tint);border-left:3px solid var(--accent);pointer-events:none;z-index:0}
.pc-keys{margin:4px 0 0;font-size:12px;color:var(--muted);flex:none}
.pc-keys kbd{font:11.5px/1 var(--font-mono);padding:1px 4px}
.pc-diag{flex:none;max-height:32%;overflow:auto;margin-top:6px}
.pc-diag ul{margin:0;padding-left:0;list-style:none}
.pc-diag li{font-size:13.5px;line-height:1.45;margin:2px 0;color:var(--ink)}
.pc-diag-head{margin:0 0 2px;font:600 11px/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.pc-errs{padding:6px 10px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0}
.pc-errs .pc-diag-head{color:var(--bad)}
.pc-styles{margin-top:6px;padding:6px 10px;border-left:3px solid var(--hint);background:var(--hint-tint);border-radius:0 6px 6px 0}
.pc-styles .pc-diag-head{color:var(--hint)}
.pc-goto{border:0;background:none;padding:0;font:600 12.5px/1.4 var(--font-mono);color:var(--ink);text-decoration:underline;cursor:pointer}
.pc-ok{margin:0;font-size:13px;color:var(--ok)}

/* the run window and the trace table */
.pc-out-tabs{flex:none;align-self:flex-start;margin-bottom:6px}
.pc-console{font:14px/1.5 var(--font-mono);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.pc-cl{white-space:pre-wrap;overflow-wrap:anywhere}
.pc-o{color:var(--ink)}
.pc-i{color:var(--accent-deep)}
.pc-i::before{content:"> ";color:var(--muted)}
.pc-sys{margin:0;color:var(--muted);font-style:italic;font-family:var(--font-body, inherit);font-size:13px}
.pc-err{color:var(--bad);font-weight:600}
.pc-in{display:flex;align-items:center;gap:6px;margin:4px 0;flex-wrap:wrap}
.pc-in label{font:600 13px/1.2 var(--font-mono);color:var(--accent-deep)}
.pc-type{font-weight:400;color:var(--muted)}
.pc-in input{flex:1;min-width:120px;font:14px/1.4 var(--font-mono);padding:3px 8px;border:1.5px solid var(--accent);border-radius:4px;background:var(--paper);color:var(--ink)}
.pc-in input:focus{outline:2px solid var(--focus);outline-offset:1px}
.pc-trace{border:1px solid var(--line);border-radius:6px;background:var(--paper)}
table.pc-ttable{border-collapse:collapse;font:13px/1.35 var(--font-mono);margin:0;min-width:100%}
table.pc-ttable th{position:sticky;top:0;text-transform:none;letter-spacing:0;background:var(--accent-deep);color:var(--on-accent);font-weight:700;padding:5px 9px;text-align:left;white-space:nowrap}
table.pc-ttable td{padding:3px 9px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:var(--ink);white-space:nowrap}
table.pc-ttable td.o{color:var(--accent-deep);font-weight:600}
.pc-trace .pc-sys{padding:8px 10px}

/* smaller screens: everything stacks, and the page scrolls */
@media (max-width:900px){
  .pc-work{grid-template-columns:minmax(0,1fr)}
  .pc-right{grid-template-rows:auto auto}
  .pc-editor{min-height:260px}
  .pc-console,.pc-trace{min-height:180px;max-height:50vh}
}