/* Assembly Tracing (computer-science/trace-table-challenge.php). The page chrome is the one-screen
   layout in /css/resource.css. On a laptop or desktop: the question, then the program in memory
   with the trace table to its right, filling what's left (each scrolls inside its panel); the
   instruction set and ASCII table are dialogs. On smaller screens everything stacks and the page
   scrolls. Theme tokens only. */


.at-task{flex:none}
.at-task p{margin:2px 0 0;max-width:100ch;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.at-task .task-note{margin-top:6px;padding:6px 10px;font-size:13.5px;background:var(--accent-b-tint);border-left:3px solid var(--accent-b-deep);border-radius:3px;color:var(--ink)}

/* the program in memory on the left, the trace table to its right, together filling what's left */
.at-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(230px,max-content) minmax(0,1fr);gap:10px}
.at-code{padding:10px 12px;display:flex;flex-direction:column;min-height:0}
.at-code .asm-list{flex:1;min-height:0;overflow:auto}
.at-ref-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;flex:none}
.asm-list{list-style:none;margin:0;padding:0;font:13px/1.45 var(--font-mono)}
.asm-list li{display:grid;grid-template-columns:30px 42px 1fr;gap:8px;color:var(--ink-soft)}
.asm-addr{color:var(--muted);text-align:right}
.asm-op{color:var(--accent-b-deep);font-weight:600}
.asm-operand-wrap{display:flex;flex-wrap:wrap;column-gap:8px;align-items:baseline}
.asm-operand{color:var(--ink)}
.asm-note{color:var(--hint);font-style:italic;font-size:12px}
table.ref{width:100%;border-collapse:collapse;font-size:12.5px}
table.ref th,table.ref td{border:1px solid var(--line);padding:3px 7px;text-align:left;vertical-align:top}
table.ref th{background:var(--accent-tint);font:600 10.5px/1.3 var(--font-display);text-transform:uppercase;color:var(--ink-soft);position:sticky;top:-16px}
table.ref td.opc{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
table.ref td.opr{font-family:var(--font-mono);color:var(--muted);white-space:nowrap}
.ref-note{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.at-dlg-instr{max-width:900px}
.at-dlg-ascii{max-width:1000px}
.ascii-wrap{overflow-x:auto;margin:8px 0}
table.ascii{border-collapse:collapse;font:13px/1.25 var(--font-mono);width:100%;min-width:720px}
table.ascii.selected{min-width:0;width:auto}
.ascii-wrap:has(table.ascii.selected)+.ref-note{display:none}
table.ascii th,table.ascii td{border:1px solid var(--line);padding:3px 5px;text-align:center}
table.ascii th{background:var(--accent-tint);font:600 9.5px/1.3 var(--font-display);text-transform:uppercase;color:var(--ink-soft)}
table.ascii td.code{color:var(--muted)}
table.ascii td.ch{font-weight:600;color:var(--ink)}
table.ascii td.group,table.ascii th:nth-child(odd):not(:first-child){border-left:2px solid var(--line-strong)}
table.ascii td.used{background:var(--accent-b-tint);color:var(--ink)}
table.ascii abbr.ctl{font-size:10px;font-weight:400;color:var(--muted);text-decoration:none}

/* the trace table fills what's left */
.at-trace{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 12px 12px}
.at-trace .table-wrap{flex:1;min-height:120px;overflow:auto;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
table.trace{border-collapse:collapse;width:100%;min-width:640px;font:13.5px/1.2 var(--font-mono)}
table.trace th,table.trace td{border:1px solid var(--line);padding:4px 6px;text-align:center}
table.trace thead{position:sticky;top:0;z-index:1}
table.trace thead th{background:var(--accent-tint);color:var(--ink-soft);font:600 11px/1.25 var(--font-display);text-transform:uppercase;letter-spacing:.04em}
table.trace thead tr.sub th{font:600 12px/1.2 var(--font-mono);text-transform:none;letter-spacing:0}
col.col-addr{width:88px}
col.col-actions{width:112px}
tr.given td{background:var(--panel-2);color:var(--muted);font-style:italic}
tr.given td.given-label{font:600 11.5px/1 var(--font-display);font-style:normal;text-transform:uppercase;letter-spacing:.03em}
.cell-input{width:100%;min-width:40px;border:1px solid transparent;background:transparent;font:13.5px/1.2 var(--font-mono);color:var(--ink);text-align:center;padding:5px 2px;border-radius:3px}
.cell-input:disabled{color:var(--muted);opacity:.55}
.cell-input:not(:disabled):hover{border-color:var(--line-strong)}
.cell-input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
tr.row-correct .cell-input{background:var(--ok-tint)}
tr.row-incorrect .cell-input{background:var(--bad-tint)}
tr.row-hinted .cell-input{background:var(--hint-tint)}
tr.row-correct td:first-child{box-shadow:inset 4px 0 0 0 var(--ok)}
tr.row-incorrect td:first-child{box-shadow:inset 4px 0 0 0 var(--bad)}
tr.row-hinted td:first-child{box-shadow:inset 4px 0 0 0 var(--hint)}
td.field-bad{outline:2px solid var(--bad);outline-offset:-2px}
/* right, but in quotation marks the mark scheme doesn't use: a small mark in the corner, the note on hover (and in a toast) */
td.field-quoted{position:relative;cursor:help}
td.field-quoted::after{content:"\201C\201D";position:absolute;top:1px;right:3px;font-size:11px;line-height:1;color:var(--hint)}
.row-actions{display:flex;gap:4px;align-items:center;justify-content:center}
.icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line-strong);background:var(--panel);cursor:pointer;color:var(--ink-soft)}
.icon-btn svg{width:14px;height:14px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
.icon-btn.tick:hover{border-color:var(--ok);color:var(--ok)}
.icon-btn.cross:hover{border-color:var(--bad);color:var(--bad)}
.icon-btn.hint{color:var(--hint);border-color:var(--hint-tint)}
.icon-btn.hint:hover{border-color:var(--hint);color:var(--hint)}
.row-badge{font:700 10.5px/1 var(--font-body);letter-spacing:.03em;text-transform:uppercase}
.row-badge.ok{color:var(--ok)} .row-badge.bad{color:var(--bad)} .row-badge.hint{color:var(--hint)} .row-badge.pending{color:var(--muted)}
tr.na td{color:var(--muted)}
tr.missing td{background:var(--accent-tint);color:var(--ink-soft)}
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;flex:none}
.action-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.summary{font-size:13px;color:var(--ink-soft)}
.summary strong{color:var(--ink);font-family:var(--font-mono)}


/* the line explanations */
.explain-lede{margin:0 0 12px;line-height:1.6;font-size:14px;color:var(--ink-soft)}
.explain-lede.explain-after{margin-top:12px}
.explain-none{color:var(--muted);font-size:13px;margin:0}
.hint-list,.mismatch-list{list-style:none;margin:10px 0 0;padding:0;font:13px/1.3 var(--font-mono)}
.hint-list li{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);align-items:center}
.mismatch-list li{display:grid;grid-template-columns:70px 1fr 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);align-items:center}
.hint-list li:last-child,.mismatch-list li:last-child{border-bottom:none}
.field-name{color:var(--muted);font:11px/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.03em}
.mismatch-you{color:var(--bad);font-weight:600}
.mismatch-expected{color:var(--ok);font-weight:600}
.expected-only{color:var(--hint);font-weight:600}
#dlgExplain .dialog-foot{border-top:0;padding-top:0}

/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:900px),(max-height:620px){
  .at-work{grid-template-columns:1fr;flex:none}
  .at-code .asm-list{max-height:46vh}
  .at-trace .table-wrap{max-height:70vh}
}
@media (max-width:560px){
  table.trace{min-width:560px;font-size:13px}
  col.col-addr{width:66px} col.col-actions{width:96px}
}