/* boot.css · P34, Boot: the layout of the computer page, the page against
   riscv-tests and the inspector on the design system's tokens. The buttons,
   segmented control, fields, badges and table are the design system's; this
   file places them and draws what a computer's pages have that the design
   system does not: the terminal with its sixteen colors, the boot phases,
   the disassembly with the program counter, the registers and the mix. */

.b, .b-page, .b-insp { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.b { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 24px; }
.b-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.b-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the four phases of a boot, the current one marked */
.b-phases { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.b-phases li { position: relative; padding: 4px 10px 4px 22px; border-radius: var(--r-press); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.b-phases li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--line-3); }
.b-phases li[data-done] { color: var(--ink-2); }
.b-phases li[data-done]::before { background: var(--green-500); }
.b-phases li[aria-current] { color: var(--ink); font-weight: var(--fw-550); box-shadow: inset 0 0 0 var(--px) var(--accent-line); background: var(--accent-tint); }
.b-phases li[aria-current]::before { background: var(--accent); }

.b-status { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 4px 32px; margin: 0; }
.b-status div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-status dt { font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
.b-status dd { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the terminal: a dark screen in both themes, 80 columns and 24 rows, its scrollback above. Linux and BusyBox
   write to 80 columns, so the screen is as wide as 80 characters and its scroll bar, and no wider */
.b-screen { --cell: 18px; position: relative; width: fit-content; max-width: 100%; height: calc(24 * var(--cell) + 24px); overflow-x: auto; overflow-y: scroll; padding: 12px 14px; border-radius: var(--r-contain); background: var(--gray-900); color: var(--gray-100); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-13); line-height: var(--cell); outline: none; box-shadow: inset 0 0 0 var(--px) var(--gray-800); }
.b-screen:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--gray-800), 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.b-rows { width: 80ch; }
.b-row { height: var(--cell); white-space: pre; }
.b-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; text-align: center; font-family: "Inter Variable", system-ui, sans-serif; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--gray-200); }
.b-screen .t-cur { background: var(--gray-100); color: var(--gray-900); }
.b-screen:not(:focus) .t-cur { background: transparent; box-shadow: inset 0 0 0 var(--px) var(--gray-300); color: inherit; }
.b-screen .t-b { font-weight: var(--fw-550); }
.b-screen .t-u { text-decoration: underline; }
.b-screen .t-c0 { color: var(--gray-400); } .b-screen .t-c1 { color: var(--red-300); } .b-screen .t-c2 { color: var(--green-300); } .b-screen .t-c3 { color: var(--yellow-300); }
.b-screen .t-c4 { color: var(--blue-300); } .b-screen .t-c5 { color: var(--magenta-300); } .b-screen .t-c6 { color: var(--aqua-300); } .b-screen .t-c7 { color: var(--gray-200); }
.b-screen .t-c8 { color: var(--gray-300); } .b-screen .t-c9 { color: var(--red-200); } .b-screen .t-c10 { color: var(--green-200); } .b-screen .t-c11 { color: var(--yellow-200); }
.b-screen .t-c12 { color: var(--blue-200); } .b-screen .t-c13 { color: var(--magenta-200); } .b-screen .t-c14 { color: var(--aqua-200); } .b-screen .t-c15 { color: var(--gray-0); }
.b-screen .t-ci { color: var(--gray-900); }
.b-screen .t-k0 { background: var(--gray-800); } .b-screen .t-k1 { background: var(--red-700); } .b-screen .t-k2 { background: var(--green-700); } .b-screen .t-k3 { background: var(--yellow-700); }
.b-screen .t-k4 { background: var(--blue-700); } .b-screen .t-k5 { background: var(--magenta-700); } .b-screen .t-k6 { background: var(--aqua-700); } .b-screen .t-k7 { background: var(--gray-300); }
.b-screen .t-k8 { background: var(--gray-700); } .b-screen .t-k9 { background: var(--red-600); } .b-screen .t-k10 { background: var(--green-600); } .b-screen .t-k11 { background: var(--yellow-600); }
.b-screen .t-k12 { background: var(--blue-600); } .b-screen .t-k13 { background: var(--magenta-600); } .b-screen .t-k14 { background: var(--aqua-600); } .b-screen .t-k15 { background: var(--gray-100); }
.b-screen .t-ki { background: var(--gray-100); }

.b-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-line { flex: 1 1 280px; min-width: 0; }
.b-line input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.b-keys { display: flex; gap: 2px; flex-wrap: wrap; }
.b-try { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
.b-try > span { margin-right: 4px; }
.b-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* the page against riscv-tests; the padding is inside the scrolling element, so the table's sticky head sticks at its top edge */
.b-page-in { padding: 24px 24px 40px; }
.b-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1280px; margin-bottom: 12px; }
.b-page-head h1 { margin: 0 0 6px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-550); color: var(--ink); }
.b-page-head p { max-width: 760px; margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.b-sum { max-width: 1280px; margin: 0 0 12px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); font-variant-numeric: tabular-nums; }
.b-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px; align-items: start; max-width: 1280px; }
.b-table td { vertical-align: top; }
.b-link { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 2px; }
.b-link[aria-pressed="true"] { font-weight: var(--fw-550); text-decoration-color: var(--accent); }
.b-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-mark); }
.b-dim { color: var(--ink-3); }
.b-suite { white-space: nowrap; }
.b-why { display: block; margin-top: 4px; max-width: 320px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.b-dis-pane { position: sticky; top: 0; min-width: 0; }
.b-h { margin: 0 0 6px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.b-note { margin: 0 0 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }

/* disassembly: address, word and instruction, the program counter's row marked */
.b-dis { max-height: 70vh; overflow: auto; margin: 0; padding: 6px 0; list-style: none; border-radius: var(--r-contain); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: 20px; color: var(--ink); }
.b-dis li { display: grid; grid-template-columns: 9ch 9ch minmax(0, 1fr); gap: 10px; padding: 0 10px; white-space: pre; }
.b-dis .b-addr, .b-dis .b-word { color: var(--ink-3); }
.b-dis .b-ins { overflow: hidden; text-overflow: ellipsis; }
.b-dis .b-here { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
.b-dis .b-here .b-addr, .b-dis .b-here .b-word { color: var(--ink-2); }
.b-dis [data-bp] .b-addr { color: var(--red-600); }
.b-dis .b-gap { display: block; color: var(--ink-3); }
.b-dis .b-label { display: block; padding-top: 4px; color: var(--ink-2); font-weight: var(--fw-550); }

/* the inspector */
.b-insp { padding: 16px 24px 32px; }
.b-insp-head { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.b-bp { margin: 0; }
.b-bp [data-r="field"] { width: 200px; }
.b-bp input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.b-insp-state { align-self: flex-end; padding-bottom: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.b-insp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.b-insp-code .b-dis { max-height: none; }
.b-uart:empty::before { content: "Nothing printed yet."; color: var(--gray-300); }
.b-uart { min-height: 120px; max-height: 260px; overflow: auto; margin: 0; padding: 8px 10px; border-radius: var(--r-contain); background: var(--gray-900); color: var(--gray-100); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-12); line-height: 18px; white-space: pre-wrap; }
.b-insp-code .b-h:not(:first-child), .b-insp-grid section > .b-h + * + .b-h { margin-top: 16px; }
.b-regs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; font-size: var(--fs-12); line-height: 20px; }
.b-reg { display: flex; justify-content: space-between; gap: 8px; padding: 0 6px; border-radius: var(--r-mark); }
.b-reg span { color: var(--ink-3); white-space: nowrap; }
.b-reg b { font-weight: var(--fw-450); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
.b-reg.b-changed { background: var(--accent-tint); }
.b-csrs { grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
.b-mix { display: grid; gap: 4px; }
.b-bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px; align-items: center; gap: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
.b-bar i { display: block; height: 8px; border-radius: var(--r-mark); background: linear-gradient(to right, var(--accent) var(--w), var(--line-2) var(--w)); }
.b-bar b { font-weight: var(--fw-450); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.b-mnems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--fs-12); line-height: 18px; }
.b-mnems li { display: flex; justify-content: space-between; gap: 8px; }
.b-mnems span { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-2); }
.b-mnems b { font-weight: var(--fw-450); font-variant-numeric: tabular-nums; color: var(--ink); }

@media (min-width: 1100px) {
  .b-screen { --cell: 20px; font-size: var(--fs-15); }
}
@media (max-width: 1100px) {
  .b-split { grid-template-columns: minmax(0, 1fr); }
  .b-dis-pane { position: static; }
  .b-insp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .b-insp-code { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .b, .b-page-in, .b-insp { padding: 12px 16px 24px; }
  .b-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .b-screen { --cell: 16px; font-size: var(--fs-11); height: calc(20 * var(--cell) + 24px); padding: 8px 10px; }
  .b-insp-grid { grid-template-columns: minmax(0, 1fr); }
  .b-table { overflow-x: auto; }
  .b-dis li { grid-template-columns: 9ch minmax(0, 1fr); }
  .b-dis .b-word { display: none; }
}