/* Trace Tables (computer-science/pseudocode-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 pseudocode or flowchart
   with the trace table to its right, filling what's left (each scrolls inside its panel); the notation
   is a dialog. On smaller screens everything stacks and the page scrolls. Theme tokens only. */


.tt-task{flex:none}
.kind-badge{display:inline-block;font:700 10.5px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:999px;margin-left:6px;vertical-align:1px}
.kind-badge.pseudocode{background:var(--accent-tint);color:var(--accent-deep)}
.kind-badge.flowchart{background:var(--accent-b-tint);color:var(--accent-b-deep)}
.tt-task p{margin:2px 0 0;max-width:100ch;color:var(--ink-soft);font-size:14.5px;line-height:1.5;white-space:pre-line}
.tt-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 on the left, the trace table to its right, together filling what's left */
.tt-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,38%) minmax(0,1fr);gap:10px}
.tt-source{padding:10px 12px;display:flex;flex-direction:column;min-height:0;min-width:0}
.tt-source .src-scroll{flex:1;min-height:0;overflow:auto}
.panel-cap{font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.4;flex:none}
.tt-ref-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;flex:none;align-items:center}

/* pseudocode, with the lines being traced highlighted */
.pc-list{list-style:none;margin:0;padding:0;font:13px/1.45 var(--font-mono)}
.pc-list li{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:1px 4px;color:var(--ink-soft);border-radius:4px;white-space:pre-wrap;transition:background .25s ease,box-shadow .25s ease}
.pc-addr{color:var(--muted);text-align:right;user-select:none}
.pc-text{color:var(--ink)}
.pc-list li.pc-active{background:var(--active-tint);box-shadow:inset 3px 0 0 0 var(--active)}
.pc-list li.pc-active .pc-addr{color:var(--active);font-weight:700}
.pc-list li.pc-blank .pc-addr{opacity:.45}

/* flowcharts */
.fc-wrap{border:1px solid var(--line);border-radius:5px;background:var(--paper);padding:6px}
.fc-svg{display:block;max-width:100%;height:auto}
.fc-svg text{font-family:var(--font-body)}
.fc-node-shape{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.6}
.fc-node.fc-active .fc-node-shape{fill:var(--active-tint);stroke:var(--active);stroke-width:2.4}
.fc-node.fc-active .fc-node-label{font-weight:700}
.fc-node-label{fill:var(--ink);font-size:11.5px}
.fc-badge-circle{fill:var(--accent)}
.fc-node.fc-active .fc-badge-circle{fill:var(--active)}
.fc-badge-text{fill:var(--on-accent);font-size:10px;font-weight:700}
.fc-edge{stroke:var(--muted);stroke-width:1.4;fill:none}
.fc-edge-label{fill:var(--ink-soft);font-size:10.5px}
/* click the flowchart: the whole of it, fitted, in place of the trace table (full screen on a phone) */
.fc-wrap{cursor:zoom-in}
.fc-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tt-trace,.tt-fcfull{grid-column:2;grid-row:1}
.tt-fcfull{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 12px 12px}
.tt-fcfull[hidden],.tt-trace[hidden]{display:none}
.fcfull-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;margin-bottom:8px}
.fcfull-head h2{margin:0}
.fcfull-body{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:5px;background:var(--paper);padding:8px;cursor:zoom-out}
.fcfull-body svg{display:block;margin:0 auto;max-width:none}
.fc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--muted);margin-top:8px}
.fc-legend span{display:inline-flex;align-items:center;gap:5px}
.fc-legend .sw{width:13px;height:13px;border-radius:2px;border:1.4px solid var(--line-strong);background:var(--paper);display:inline-block}
.fc-legend .sw.dec{border-radius:0;transform:rotate(45deg);width:10px;height:10px}
.fc-legend .sw.term{border-radius:8px}
.fc-legend .sw.io{border-radius:0;transform:skewX(-12deg)}

/* the trace table fills what's left */
.tt-trace{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 12px 12px}
.tt-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:560px;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-actions{width:112px}
tr.given td{background:var(--panel-2);color:var(--muted);font-style:italic}
tr.given td.given-mark{font:600 11.5px/1 var(--font-display);font-style:normal;text-transform:uppercase;letter-spacing:.03em}
tr.step-active td:first-child{box-shadow:inset 4px 0 0 0 var(--active)}
.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}
.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)}
.legend{font-size:12px;color:var(--muted);margin:8px 2px 0;line-height:1.45;flex:none}
.symbol-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding:6px 10px;background:var(--active-tint);border:1px solid var(--line);border-radius:6px;flex:none}
.symbol-toolbar-label{font-size:12px;color:var(--muted)}
.symbol-btn{font:600 14px/1.2 var(--font-mono);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px}
.symbol-btn:hover{border-color:var(--accent)}
.symbol-note{font:400 11px/1 var(--font-body);color:var(--muted)}
.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 notation and the line explanations */
table.ref{width:100%;border-collapse:collapse;font-size:12.5px}
table.ref th,table.ref td{border:1px solid var(--line);padding:5px 8px;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)}
table.ref td.opc{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.ref-note{font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.45}
.ref-head{margin:14px 0 6px;font-weight:600;font-size:12.5px;color:var(--ink)}
.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:90px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);align-items:center}
.mismatch-list li{display:grid;grid-template-columns:90px 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;overflow-wrap:anywhere}
.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){
  .tt-work{grid-template-columns:1fr;flex:none}
  .tt-trace{grid-column:1;grid-row:auto}
  .tt-fcfull{position:fixed;inset:0;z-index:60;border-radius:0}

  .tt-source .src-scroll{max-height:52vh}
  .tt-trace .table-wrap{max-height:70vh}
}
@media (max-width:560px){
  table.trace{font-size:13px}
  col.col-actions{width:96px}
  .mismatch-list li{grid-template-columns:70px 1fr}
  .mismatch-list li .mismatch-expected{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.pc-list li{transition:none}}