/* The laboratory. It borrows the book's palette (web/book.css) and adds region colours: each
   means one kind of structure, in the byte view, the structure view and the legend alike. */

:root {
  --r-magic: rgba(200,121,26,.30);
  --r-footer: rgba(126,87,194,.20);
  --r-length: rgba(179,65,58,.35);
  --r-col0: rgba(53,100,143,.22);
  --r-col1: rgba(46,125,50,.22);
  --r-col2: rgba(156,79,150,.20);
  --r-col3: rgba(138,90,20,.22);
  --hl: #c8791a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --r-magic: rgba(224,163,78,.30); --r-footer: rgba(179,157,219,.22); --r-length: rgba(232,117,108,.40);
    --r-col0: rgba(127,178,221,.22); --r-col1: rgba(129,199,132,.20); --r-col2: rgba(214,163,209,.20);
    --r-col3: rgba(224,180,110,.20); --hl: #e0a34e;
  }
}
:root[data-theme="dark"] {
  --r-magic: rgba(224,163,78,.30); --r-footer: rgba(179,157,219,.22); --r-length: rgba(232,117,108,.40);
  --r-col0: rgba(127,178,221,.22); --r-col1: rgba(129,199,132,.20); --r-col2: rgba(214,163,209,.20);
  --r-col3: rgba(224,180,110,.20); --hl: #e0a34e;
}

.lab { margin: 1.8rem 0; border: 1px solid var(--edge); border-radius: 8px; background: var(--bg);
       font: 14px/1.5 var(--chrome); box-shadow: 0 1px 2px var(--raise); overflow: hidden; }
.lab-fallback, .lab-loading, .lab-error { margin: 0; padding: 1rem; color: var(--muted); }
.lab-error { color: var(--stop); }
.lab-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; padding: .6rem 1rem;
            border-bottom: 1px solid var(--edge); background: var(--panel); }
.lab-title { font-weight: 650; }
.lab-note { color: var(--faint); font-size: 12.5px; margin-left: auto; }
.lab select, .lab input[type=number], .lab input[name=byte] { font: 13.5px var(--chrome); color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: .15rem .3rem; }
.lab input[type=number] { width: 4.5rem; }
.lab input[name=byte] { width: 2.6rem; font-family: var(--mono); }
.lab button { font: 13px var(--chrome); color: var(--ink); background: var(--bg); border: 1px solid var(--rule);
              border-radius: 4px; padding: .2rem .55rem; cursor: pointer; }
.lab button:hover { border-color: var(--accent); color: var(--accent); }
.lab code { font-size: 12.5px; }

.controls { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: .7rem 1rem;
            border-bottom: 1px solid var(--edge); }
.controls fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem;
                     align-items: center; }
.controls legend { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                   color: var(--faint); padding: 0; margin-bottom: .2rem; width: 100%; }
.controls label { white-space: nowrap; }
.controls output { font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.controls input[type=range] { width: 11rem; accent-color: var(--accent); }

.panel { padding: .7rem 1rem; min-width: 0; }
.panel h4 { margin: 0 0 .5rem; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
            text-transform: uppercase; color: var(--faint); }

.steps { margin: 0; padding-left: 1.3rem; }
.steps li { margin-bottom: .45rem; }
.steps li b { font-weight: 600; margin-right: .25rem; }
.steps button.span { font: 12.5px var(--mono); padding: 0 .3rem; background: var(--code); border-color: var(--edge); }
.totals { margin: .6rem 0 0; color: var(--muted); }

/* Bytes, structure, inspector. */
.lab-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr);
            grid-template-areas: "hex tree" "inspect inspect"; }
.lab-grid .p-hex { grid-area: hex; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.lab-grid .p-tree { grid-area: tree; border-bottom: 1px solid var(--edge); }
.lab-grid .p-tree .tree { max-height: 26rem; }
.lab-grid .p-inspect { grid-area: inspect; }
.legend { max-width: 34rem; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: 12px; color: var(--muted); }
.legend .key::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .3rem;
                       vertical-align: -.1rem; border-radius: 2px; background: var(--k, transparent);
                       border: 1px solid var(--rule); }
.legend .key.r-magic { --k: var(--r-magic); } .legend .key.r-footer { --k: var(--r-footer); }
.legend .key.r-length { --k: var(--r-length); } .legend .key.col0 { --k: var(--r-col0); }
.legend .key.r-pagehead { --k: repeating-linear-gradient(135deg, var(--r-col0) 0 3px, transparent 3px 6px); }
.legend .key.unfetched::before { opacity: .3; background: var(--muted); }

.hex { font: 12.5px/1.55 var(--mono); max-height: 26rem; overflow: auto; outline: none;
       font-variant-numeric: tabular-nums; }
.hex .row { display: flex; gap: 1rem; white-space: pre; }
.hex .off { color: var(--faint); user-select: none; }
.hex .hexcol { display: flex; }
.hex .b { display: inline-block; width: 2.3ch; text-align: center; cursor: pointer; border-radius: 2px; }
.hex .gap { display: inline-block; width: .8ch; }
.hex .pad { display: inline-block; width: 2.3ch; }
.hex .asc { color: var(--muted); }
.hex .a { cursor: pointer; }
.hex .r-magic { background: var(--r-magic); }
.hex .r-footer { background: var(--r-footer); }
.hex .r-length { background: var(--r-length); }
.hex .r-body.col0 { background: var(--r-col0); } .hex .r-body.col1 { background: var(--r-col1); }
.hex .r-body.col2 { background: var(--r-col2); } .hex .r-body.col3 { background: var(--r-col3); }
.hex .r-pagehead.col0 { background: repeating-linear-gradient(135deg, var(--r-col0) 0 3px, transparent 3px 6px); }
.hex .r-pagehead.col1 { background: repeating-linear-gradient(135deg, var(--r-col1) 0 3px, transparent 3px 6px); }
.hex .r-pagehead.col2 { background: repeating-linear-gradient(135deg, var(--r-col2) 0 3px, transparent 3px 6px); }
.hex .r-pagehead.col3 { background: repeating-linear-gradient(135deg, var(--r-col3) 0 3px, transparent 3px 6px); }
.hex .unfetched { opacity: .28; }
.hex .hl { box-shadow: inset 0 -2px 0 var(--hl); color: var(--ink); font-weight: 700; opacity: 1; }
.hex .sel { outline: 2px solid var(--accent); outline-offset: -1px; opacity: 1; }

.tree { max-height: 16rem; overflow: auto; font-size: 12.5px; }
.tree ul { list-style: none; margin: 0; padding-left: 1rem; }
.tree ul.root { padding-left: 0; }
.tree li > ul { display: none; }
.tree li.open > ul { display: block; }
.node-row { display: flex; gap: .5rem; align-items: baseline; padding: .05rem .25rem; border-radius: 3px;
            cursor: pointer; white-space: nowrap; }
.node-row:hover { background: var(--wash); }
.tree li.picked > .node-row { background: var(--wash); box-shadow: inset 2px 0 0 var(--accent); }
.twisty { width: .8rem; color: var(--faint); flex: none; }
.tree li.has-kids > .node-row .twisty::before { content: "▸"; }
.tree li.has-kids.open > .node-row .twisty::before { content: "▾"; }
.node-label { font-weight: 600; }
.node-span { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.node-value { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.inspector .hint { color: var(--faint); margin: 0; }
.inspector .where { margin: 0 0 .4rem; color: var(--muted); font-size: 12.5px; }
.inspector table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.inspector th { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); font-weight: 500;
                white-space: nowrap; padding: .2rem .5rem .2rem 0; border-bottom: 1px solid var(--edge); }
.inspector td { padding: .2rem .5rem .2rem 0; border-bottom: 1px solid var(--edge); font-variant-numeric: tabular-nums; }
.inspector td.note { color: var(--faint); }
.inspector td:nth-child(2) { white-space: nowrap; }
.inspector form.edit { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

@media (max-width: 90rem) {
  .enc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "steps" "dict" "values"; }
  .enc-grid .p-summary, .enc-grid .p-dict { border-right: 0; }
  .comp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chunks" "pages" "tokens" "output"; }
  .comp-grid .p-tokens { border-right: 0; border-bottom: 1px solid var(--edge); }
  .scan-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "time"; }
  .scan-grid .p-scan-sum { border-right: 0; border-bottom: 1px solid var(--edge); }
}

/* The notes under a panel. */
.lab .note { color: var(--faint); font-size: 12.5px; margin: .4rem 0; }

/* A stepper through a list of steps (ch07), a list of values (ch08) and bars (ch09). */
.stepper { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.stepper .where { color: var(--faint); font-size: 12.5px; }
.enc-steps { margin: 0; padding-left: 1.4rem; font-size: 12.5px; max-height: 18rem; overflow: auto; }
.enc-steps li { margin-bottom: .3rem; }
.enc-steps li.current { background: var(--wash); border-radius: 4px; }
.enc-steps .detail { color: var(--muted); overflow-wrap: anywhere; }
.value-list { display: flex; flex-wrap: wrap; gap: .25rem .4rem; margin: 0; padding: 0; list-style: none; }
.bars { font-size: 12.5px; }
.bar-row { display: grid; grid-template-columns: 5.5rem 1fr 6rem; gap: .5rem; align-items: center; margin: .25rem 0; }
.bar-row .bar { background: var(--panel); border: 1px solid var(--edge); height: .8rem; border-radius: 2px; }
.bar-row .bar i { display: block; height: 100%; background: var(--accent); opacity: .7; }

/* A table of pages or rows (the later panels). */
.pages-list { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.pages-list th, .pages-list td { padding: .22rem .45rem; border-bottom: 1px solid var(--edge); text-align: left; white-space: nowrap; }
.pages-list th { font-size: 10.5px; }
.pages-list .num { text-align: right; font-variant-numeric: tabular-nums; }
.pages-list tr.err td { color: var(--stop); }
.pages-list button.span { font: 11.5px var(--mono); padding: 0 .25rem; background: var(--code); border-color: var(--edge); }

/* Ch07: compression. */
.comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
             grid-template-areas: "pages pages" "tokens output"; border-bottom: 1px solid var(--edge); }
.comp-grid .p-comp-pages { grid-area: pages; border-bottom: 1px solid var(--edge); }
.comp-grid .p-tokens { grid-area: tokens; border-right: 1px solid var(--edge); }
.comp-grid .p-output { grid-area: output; }
.comp-grid button.span { font: 12px var(--mono); padding: 0 .3rem; background: var(--code); border-color: var(--edge); }
.comp-columns { margin-bottom: .5rem; }
.page-picks { display: flex; flex-wrap: wrap; gap: .3rem; }
.page-picks button { font-size: 12.5px; }
.comp-tokens li.k-copy button.span { border-color: var(--warn); }
.comp-tokens li.k-header button.span { color: var(--muted); }
.out-rows { font: 11px/1.5 var(--mono); max-height: 18rem; overflow: auto; }
.out-row { display: flex; gap: .5rem; white-space: pre; }
.out-row .off { color: var(--faint); }
.out-row i { font-style: normal; padding: 0 1px; }
.out-row .hx i { margin-right: 2px; }
.out-row .tx i { padding: 0; }
.out-row i.out { background: var(--wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.out-row i.src { outline: 1px solid var(--warn); outline-offset: -1px; }

/* Ch10: the read path. */
.scan-pick label { white-space: normal; }
.scan-pick select { max-width: 100%; }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
             grid-template-areas: "sum time"; border-bottom: 1px solid var(--edge); }
.scan-grid .p-scan-sum { grid-area: sum; border-right: 1px solid var(--edge); }
.scan-grid .p-scan-time { grid-area: time; }
.scan-costs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: 0; }
.scan-costs dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.scan-costs dd { margin: 0; font: 600 18px/1.3 var(--chrome); font-variant-numeric: tabular-nums; }
.scan-costs dd small { font-weight: 400; font-size: 12px; color: var(--muted); }
.timeline .lane { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
.timeline .lane-name { width: 1.2rem; font: 11px var(--mono); color: var(--faint); text-align: right; }
.timeline .lane-track { position: relative; flex: 1; height: 1.4rem; background: var(--panel); border: 1px solid var(--edge); border-radius: 3px; }
.timeline .req { position: absolute; top: 2px; bottom: 2px; padding: 0; min-width: 0; overflow: hidden;
                 font: 10px var(--mono); border-radius: 2px; border: 1px solid var(--edge); color: var(--on-accent); }
.timeline .req.foot { background: var(--muted); }
.timeline .req.idx { background: var(--warn); }
.timeline .req.data { background: var(--accent); }

/* Ch13: encryption. */
.crypt-grid { border-bottom: 1px solid var(--edge); }
.crypt-grid button.span { font: 12px var(--chrome); padding: 0 .3rem; background: var(--code); border-color: var(--edge); text-align: left; }

/* Ch15: a changing table. */
.changes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
                grid-template-areas: "answer time"; border-bottom: 1px solid var(--edge); }
.changes-grid .c-answer { grid-area: answer; border-right: 1px solid var(--edge); }
.changes-grid .c-time { grid-area: time; }
.changes-grid .scan-costs { grid-template-columns: minmax(0, 1fr); }
.lab input[name="key"] { width: 5.5rem; }
@media (max-width: 760px) {
  .changes-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "answer" "time"; }
  .changes-grid .c-answer { border-right: 0; border-bottom: 1px solid var(--edge); }
}

/* Tables inside a panel. */
.lab .table-wrap { margin: .7rem 0; }

@media (max-width: 52rem) {
  .enc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "steps" "dict" "values"; }
  .enc-grid .p-summary, .enc-grid .p-dict { border-right: 0; }
  .comp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chunks" "pages" "tokens" "output"; }
  .comp-grid .p-tokens { border-right: 0; border-bottom: 1px solid var(--edge); }
  .scan-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "time"; }
  .scan-grid .p-scan-sum { border-right: 0; border-bottom: 1px solid var(--edge); }
  .lab-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hex" "tree" "inspect"; }
  .lab-grid .p-hex { border-right: 0; border-bottom: 1px solid var(--edge); }
  .hex { font-size: 11px; }
  .hex .row { gap: .5rem; }
  .lab-note { margin-left: 0; }
}

/* Code a reader edits and runs: a chapter's problems workbench. */
.workbench { margin: 1.8rem 0; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--bg); font: 14px/1.5 var(--chrome); box-shadow: 0 1px 2px var(--raise); overflow: hidden; }
.lab-error { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-area { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: .8rem 1rem;
  border: 0; border-bottom: 1px solid var(--edge); background: var(--code); color: var(--ink);
  font: 13px/1.55 var(--mono); tab-size: 4; resize: vertical; white-space: pre; overflow: auto; }
.code-area:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
.workbench-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--edge); background: var(--panel); }
.workbench button { font: 13px var(--chrome); color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px; padding: .25rem .65rem; cursor: pointer; }
.workbench button:hover { border-color: var(--accent); color: var(--accent); }
.workbench button.primary { background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); }
.workbench button:disabled { opacity: .6; cursor: progress; }
.workbench-bar .status { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.workbench-note { margin: 0; padding: .6rem 1rem; color: var(--faint); font-size: 12.5px; }
.workbench-note code { font-size: 12px; }
.results { list-style: none; margin: 0; padding: 0; }
.results:empty { display: none; }
.results li { padding: .35rem 1rem; border-bottom: 1px solid var(--edge); }
.results .mark { display: inline-block; width: 1.2rem; font-weight: 700; }
.results .passed .mark, .results .passed .outcome { color: var(--go); }
.results .failed .mark, .results .failed .outcome { color: var(--stop); }
.results .skipped .mark, .results .skipped .outcome { color: var(--faint); }
.results .outcome { font-size: 12.5px; }
.results pre, .workbench .output pre { margin: .3rem 0 .1rem 1.2rem; padding: .4rem .6rem;
  background: var(--code); border-radius: 4px; font: 12px/1.45 var(--mono); white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 16rem; overflow: auto; }
.workbench .output { padding: .4rem 1rem; border-bottom: 1px solid var(--edge); font-size: 13px; }
.workbench .output summary { cursor: pointer; color: var(--muted); }
.workbench .output pre { margin-left: 0; max-height: 24rem; }
@media (max-width: 640px) {
  .code-area { font-size: 12px; padding: .6rem .7rem; }
  .workbench-bar, .workbench-note, .results li { padding-left: .7rem; padding-right: .7rem; }
}

/* A command the page can run itself: a Run button on the block, and what it printed below. */
.runnable { position: relative; }
.runnable > pre { margin-bottom: 0; }
.run-button { position: absolute; top: .45rem; right: .45rem; font: 12.5px var(--chrome); color: var(--on-accent);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: .15rem .6rem;
  cursor: pointer; opacity: .9; }
.run-button:hover { opacity: 1; }
.runnable[data-state="running"] .run-button { background: var(--bg); color: var(--stop); border-color: var(--stop); }
.run-result { margin: 0 0 1.2rem; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 6px 6px;
  background: var(--bg); font: 13px/1.5 var(--chrome); }
.run-head { padding: .35rem .8rem; color: var(--muted); font-size: 12.5px; border-bottom: 1px solid var(--edge);
  font-variant-numeric: tabular-nums; }
.run-output { margin: 0; padding: .6rem .8rem; max-height: 26rem; overflow: auto; background: var(--code);
  font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0 0 6px 6px; }
.run-output:empty { display: none; }

.runnable[data-codespace] .run-button { color: var(--accent); background: var(--bg); border-color: var(--rule); }
.runnable[data-codespace] .run-button:hover { border-color: var(--accent); }
.run-note { margin: .3rem 0 1rem; color: var(--muted); font: 12.5px/1.45 var(--chrome); }
/* A walkthrough step: Run and Edit side by side on the code. */
.runnable .run-button.edit-button { right: calc(var(--u, 16px) * 4.6); color: var(--accent); background: var(--bg); border-color: var(--rule); }
.walkthrough .runnable .code-area { border: 1px solid var(--edge); border-radius: 0 0 6px 6px; }
/* The buttons sit above a walkthrough's code, and above a command on a narrow screen, not over it. */
.walkthrough .runnable > pre, .walkthrough .runnable > .code-area { padding-top: 2.5rem; }
@media (max-width: 640px) { .runnable > pre { padding-top: 2.5rem; } }