/* Lab workbench (lab.js): briefing, request inspector and grading as three flat
   panes on wide screens, stacked on narrow ones. Uses the tokens in style.css.
   Only state changes animate (a mark turning from Fail to Pass); everything is
   instant under prefers-reduced-motion through the global rule in style.css. */

.wb { margin-bottom: 20px; min-width: 0; }
.wb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wb-head h2 { margin: 0; }
.wb-head h2:focus { outline: none; }
.wb-head h2:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }
.wb-head .tag { margin-left: 2px; }
.wb-state { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.wb-state.done { color: var(--ok); border-color: rgba(60,207,145,.45); background: rgba(60,207,145,.08); }
.wb-state.open { color: var(--accent-2); border-color: rgba(56,189,248,.4); }

/* completion banner */
.wb-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius-sm); border: 1px solid rgba(60,207,145,.4); background: rgba(60,207,145,.08); }
.wb-banner .wb-ic { color: var(--ok); flex: none; display: grid; place-items: center; }
.wb-banner-text { flex: 1; min-width: 200px; }
.wb-banner-t { font-weight: 600; }
.wb-banner-d { font-size: 13px; color: var(--text-2); }

/* grid of panes */
.wb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.wb-pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.wb-pane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wb-pane-head h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.wb-pane-hint { font-size: 12px; color: var(--muted); }

/* briefing */
.wb-objective { font-size: 15px; color: var(--text); margin: 0 0 12px; line-height: 1.5; }
.wb-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 0 6px; font-size: 13.5px; }
.wb-facts dt { color: var(--muted); }
.wb-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-2); }
.wb-facts code { color: var(--text); }
.wb-sub { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--text); }
.wb-note { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.55; }
.wb-note code { color: var(--text-2); }
.wb-steps { margin-top: 4px; }
.wb-steps p, .wb-steps li { color: var(--text-2); font-size: 14px; margin: 0 0 8px; }
.wb-steps ul, .wb-steps ol { padding-left: 20px; margin: 0 0 8px; }
.wb-steps code { font-family: var(--mono); font-size: .88em; background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 4px; }
.wb-steps pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; margin: 0 0 8px; }
.wb-steps pre code { background: none; padding: 0; }

/* code and command blocks */
.wb-code-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 12px; color: var(--muted); }
.wb-code-head:first-child { margin-top: 0; }
.wb-code-head span { font-weight: 600; letter-spacing: .02em; }
.wb-code { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.wb-code.muted { color: var(--muted); }
.wb-copy { padding: 4px 10px; font-size: 12px; min-height: 28px; }
.wb-copy.copied { border-color: rgba(60,207,145,.5); color: var(--ok); }

/* request builder */
.wb-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; min-width: 0; }
.wb-field > span { font-size: 12px; color: var(--muted); }
.wb-url { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.wb-mono, .wb input.wb-mono, .wb select.wb-mono, .wb textarea.wb-mono { font-family: var(--mono); font-size: 13px; }
.wb-base { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; margin: 4px 0 0; }
.wb input[type=text], .wb select, .wb textarea { min-height: 40px; width: 100%; }
.wb select { padding-right: 28px; }
.wb textarea { min-height: 72px; }
.wb-hdrs { display: flex; flex-direction: column; gap: 6px; }
.wb-hdr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
.wb-hdr .btn { padding: 6px 10px; min-height: 40px; }
.wb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.wb-row .small { font-size: 13px; }
.wb-plain { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* grading */
.wb-block + .wb-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.wb-block-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.wb-block-t .wb-done { font-size: 12px; font-weight: 600; color: var(--ok); }
.wb-flag input { font-family: var(--mono); letter-spacing: .01em; }
.wb-status { margin-top: 2px; }
.wb-status .feedback { margin-top: 10px; }
.wb-status .feedback.ok { color: var(--text); }
.wb-tests { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; table-layout: fixed; }
.wb-tests th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.wb-tests th.res, .wb-tests td.res { width: 54px; text-align: right; padding-right: 0; }
.wb-tests th.tid, .wb-tests td.tid { width: 38%; }
.wb-tests td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); overflow-wrap: anywhere; }
.wb-tests td.tid { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.wb-tests tr.fail td { background: rgba(240,106,126,.05); }
.wb-tests tr { transition: background .2s var(--ease); }
.wb-mark { display: inline-block; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; transition: color .2s var(--ease); }
.wb-mark.pass { color: var(--ok); }
.wb-mark.fail { color: var(--danger); }
.wb-mark.none { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.wb-summary { margin: 10px 0 0; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wb-summary .muted { font-weight: 400; }
.wb-demo { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.wb-demo .wb-note { margin: 0 0 8px; }

/* attempt timeline */
.wb-timeline { list-style: none; padding: 0; margin: 4px 0 0; }
.wb-timeline li { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.wb-timeline li:first-child { border-top: 0; }
.wb-time { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-empty { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* locked */
.wb-locked { display: flex; gap: 12px; align-items: flex-start; }
.wb-locked .wb-ic { color: var(--muted); flex: none; margin-top: 2px; }
.wb-locked-t { font-weight: 600; margin-bottom: 4px; }

/* icons and visually hidden text */
.wb-ic svg { display: block; }
.wb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* static preview for the landing page: the same panes, frozen. Fields and
   buttons are drawn as plain spans, so nothing in the figure is interactive. */
figure.wb-preview { margin: 0; }
.wb-preview .card.wb { margin-bottom: 0; }
.wb-preview .wb-grid { gap: 12px; }
.wb-preview .wb-pane { padding: 16px 18px; }
.wb-preview .wb-static { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-3); background: var(--bg); font-family: var(--mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.wb-preview .wb-hdr .wb-static { display: block; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-preview .wb-flag-static { flex: 1; min-width: 160px; color: var(--muted); }
.wb-preview .wb-url .wb-static:first-child { padding-right: 28px; }
.wb-preview .btn { cursor: default; }
/* On a phone width container the figure keeps the three panes but drops the
   notes a learner reads once, so it stays a preview rather than a long page. */
@container (max-width: 480px) { .wb-preview .wb-pv-extra { display: none; } }

/* layout steps: the workbench sits inside the lesson column (next to the side
   rail) or inside a landing card, so the columns follow the container width,
   not the viewport. The briefing always comes first; the request and grading
   panes sit side by side once there is room for two columns, and only a very
   wide container (a lesson page without the rail) gets all three in a row.
   The query measures the card's content box (its padding is 24 px a side), so
   640 px here is a card about 690 px wide. */
.wb, figure.wb-preview { container-type: inline-size; }
@container (min-width: 640px) {
  .wb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wb-grid.three > .wb-brief { grid-column: 1 / -1; }
}
@container (min-width: 1040px) {
  .wb:not(.wb-preview .wb) .wb-grid.three { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.2fr) minmax(300px, 1fr); }
  .wb:not(.wb-preview .wb) .wb-grid.three > .wb-brief { grid-column: auto; }
}
@media (max-width: 640px) {
  .wb-pane { padding: 16px; }
  .wb input[type=text], .wb select, .wb textarea { min-height: 44px; }
  .wb-hdr .btn, .wb-copy { min-height: 44px; }
  .wb-tests th.tid, .wb-tests td.tid { width: 42%; }
}