/* The nanofil playground, in the wiki's palette and type (../../style.css)
   with terms drawn by ../dterm.css. On a wide screen it fills the window:
   the source, the Compile row, Data and Symbols in a column beside the
   tabbed output, each scrolling on its own. On a narrow one it is a page:
   source, Compile, output, Data, Symbols. */

/* Monaspace Neon (GitHub Next, OFL), subset by default.nix, for every
   monospaced thing on the page. */
@font-face {
  font-family: "Monaspace Neon";
  src: url("neon.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
:root { --mono-font: "Monaspace Neon", ui-monospace, "SF Mono", menlo, consolas, monospace; }

/* The wiki's library band, in one short row. */
.library-frame {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.45rem var(--gutter);
}
.library .eyebrow { font-size: 0.62rem; margin-bottom: 0.15rem; }
.library .eyebrow a { color: inherit; }
.library h1 { font-size: 1.35rem; margin: 0; }

main.play {
  display: grid;
  grid-template-columns: minmax(20rem, 30rem) minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 0.7rem var(--gutter) 0;
  max-width: var(--workspace-max);
  margin: 0 auto;
}
@media (min-width: 900px) {
  body { display: flex; flex-direction: column; height: 100vh; }
  main.play { flex: 1; min-height: 0; width: 100%; }
  .side, .panes { overflow: auto; padding-bottom: 2rem; }
  .out { overflow: hidden; display: flex; flex-direction: column; }
  .panes { flex: 1; }
}

/* The source as a little program: a bar with the example it holds, -O
   and Compile over the code (editor/editor.js draws its inside, and its
   corner resizes it), and a foot with how the compile went, whose dot
   opens the stages, and where the cursor is. */
.editor {
  position: relative;
  margin-bottom: 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--code-bg);
}
.editor:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.code { height: 16rem; min-height: 6rem; overflow: hidden; resize: vertical; }

.bar, .foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 0.78rem var(--mono-font);
}
.bar {
  padding: 0.3rem 0.3rem 0.3rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 45%, var(--code-bg));
  border-radius: 6px 6px 0 0;
}
.foot {
  padding: 0.25rem 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  color: var(--muted);
}
.bar select {
  field-sizing: content;
  flex: none;
  padding: 0.2rem 1.4rem 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23667078'/%3E%3C/svg%3E") no-repeat right 0.45rem center;
  color: var(--ink);
  font: 600 0.8rem var(--mono-font);
  appearance: none;
  cursor: pointer;
}
.bar select:hover, .bar select:focus-visible { border-color: var(--rule); background-color: var(--paper); outline: none; }
.bar button {
  padding: 0.22rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 600 0.78rem var(--mono-font);
  cursor: pointer;
}
.bar .quiet { background: none; color: var(--muted); }
.bar .quiet:hover { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.bar .opt {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.bar .opt:has(:checked) { color: var(--ink); }
.bar .opt input { margin: 0; accent-color: var(--accent); }
.passes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0;
  padding: 0.25rem 0.6rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font: 0.7rem var(--mono-font);
}
.passes legend { padding: 0.4rem 0 0.2rem; color: var(--muted); }
.passes label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.passes input { margin: 0; accent-color: var(--accent); }
#run { background: var(--accent); color: white; white-space: nowrap; }
#run:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
#run:disabled { opacity: 0.5; cursor: progress; }
#run kbd {
  margin-left: 0.3rem;
  padding: 0 0.25rem;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.18);
  font: inherit;
  font-weight: 400;
  font-size: 0.9em;
}

details.stages { min-width: 0; }
details.stages > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}
details.stages > summary:hover { color: var(--ink); }
details.stages > summary::-webkit-details-marker { display: none; }
details.stages > summary::after { content: "▾"; font-size: 0.8em; }
details.stages[open] > summary::after { content: "▴"; }
.dot { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--rule); }
body[data-state="ok"] .dot { background: #3f9a52; }
body[data-state="failed"] .dot { background: var(--accent); }
body[data-state="failed"] #status { color: var(--accent); font-weight: 700; }
body[data-state="busy"] .dot { background: #c9962a; animation: pulse 0.8s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: 0.25; } }
.pos { margin-left: auto; font-variant-numeric: tabular-nums; }

details.stages .drop {
  position: absolute;
  z-index: 2;
  left: 0.3rem;
  top: calc(100% + 0.2rem);
  min-width: 13rem;
  padding: 0.5rem 0.8rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
}
.memory { font: 0.72rem var(--mono-font); color: var(--muted); }
table.stages { display: table; width: 100%; margin: 0 0 0.4rem; font: 0.78rem/1.5 var(--mono-font); }
table.stages td { padding: 0 0 0 1rem; border: 0; }
table.stages td.name { padding-left: 0; color: var(--muted); }
table.stages td.time { text-align: right; font-variant-numeric: tabular-nums; }
table.stages tr.bad td { color: var(--accent); font-weight: 700; }
table.stages tr.total td { border-top: 1px solid var(--rule); font-weight: 700; padding-top: 0.15rem; }
/* The output: the pipeline. Each pass's output is a tab, and the pass
   that made it stands before it, an arrow with its name and time; the
   bar scrolls sideways when it is wider than the page. */
.out { min-width: 0; }
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.tabs button {
  flex: none;
  margin-bottom: -1px;
  padding: 0.15rem 0.1rem 0.4rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: 600 0.88rem var(--display-font);
  cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button.selected { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:disabled { opacity: 0.35; cursor: default; }
.tabs .pass {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.25em;
  justify-items: center;
  padding: 0 0.3rem 0.4rem;
  color: var(--muted);
  font: 0.6rem/1.2 var(--mono-font);
  cursor: help;
}
.tabs .pass:first-child { padding-left: 0; }
.tabs .pass .arrow { grid-row: 2; grid-column: 1 / -1; font-size: 1rem; line-height: 0.85; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.tabs .pass .ptime { font-variant-numeric: tabular-nums; opacity: 0.7; }
.tabs .pass.bad { color: var(--accent); font-weight: 700; }
.tabs .pass.none { opacity: 0.45; }
.tabs .as-text { margin-left: auto; padding-left: 1rem; font-weight: 500; font-size: 0.8rem; }
.panes { padding-top: 0.5rem; }
.panes .clause { font-size: 0.9rem; line-height: 1.42; }

.failure:empty { display: none; }
.failure { margin: 0.9rem 0 0.4rem; }
.failure .name { font: 700 0.85rem var(--mono-font); color: var(--accent); }
.failure pre.why { margin: 0.3rem 0 0; color: var(--ink); white-space: pre-wrap; font-size: 0.8rem; }

/* IR: a function is its head over its blocks, a block its label over one
   instruction per row; functions and data fold under their heads. */
details.clause > summary { list-style: none; cursor: default; }
details.clause > summary::-webkit-details-marker { display: none; }
details.clause > summary::before {
  content: "▾";
  position: absolute;
  left: -1.1em;
  color: var(--muted);
  font-size: 0.8em;
  cursor: pointer;
}
details.clause:not([open]) > summary::before { content: "▸"; }
.pane { padding-left: 1.4em; }
details.clause { margin: 0.2rem 0 0.9rem; scroll-margin-top: 1rem; }
details.clause.func > .goals { margin: 0.35em 0 0; row-gap: 0; grid-template-columns: minmax(0, 1fr); }
details.clause.data > .goals { margin-left: 0.8em; }
.block-ir {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  column-gap: 0.9em;
  padding: 0.3em 0 0.4em;
  border-top: 1px solid color-mix(in srgb, var(--rule) 65%, transparent);
  line-height: 1.32;
}
.block-ir > .label { font-weight: 700; color: var(--w-control, var(--ink)); overflow-wrap: anywhere; }
.block-ir > .label .neck { margin-left: 0.1em; }
.block-size { display: block; color: var(--muted); font: 0.6rem/1.4 var(--mono-font); opacity: 0.7; }
.block-ir > .goals { margin-left: 0; row-gap: 0.04em; }
.source-hint { display: flex; align-items: baseline; gap: 0.7em; min-width: 0; margin: 0.12em 0 0.2em; color: var(--muted); }
.source-hint .source-line { flex: none; font: 0.6rem var(--mono-font); font-variant-numeric: tabular-nums; }
.source-hint code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.68rem/1.35 var(--mono-font); color: inherit; background: none; padding: 0; }
.source-hint:hover { color: var(--atom); }
.pane .source-hint[data-line] { cursor: pointer; }
.more { color: var(--muted); font-size: 0.85em; }
.clause.item { margin: 0.4rem 0 0.9rem; }

/* The item the cursor is in: its fold mark and name in the accent. IR
   rows from the cursor's line: a rule in the margin, continuous across a
   run, and their line number. Rows pizlonation wrote: a thin rule of
   their own. Nothing takes a background, so no row turns into a box. */
details.clause.here > summary::before { color: var(--accent); }
details.clause.here > summary .f.def { color: var(--accent); }
.clause.item.here { box-shadow: -0.5em 0 0 -0.32em var(--accent); }
.clause.item[data-line] { cursor: pointer; }
.goal { position: relative; }
.goal::before {
  content: "";
  position: absolute;
  left: -0.45em;
  top: -0.03em;
  bottom: -0.03em;
  width: 2px;
}
.goal.pz::before { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.goal.at::before { left: -0.55em; width: 3px; background: var(--atom); }
.goal > .ln {
  position: absolute;
  right: calc(100% + 0.9em);
  white-space: nowrap;
  font: 0.62rem/1.9 var(--mono-font);
  color: color-mix(in srgb, var(--atom) 50%, transparent);
  font-variant-numeric: tabular-nums;
}
.goal.at > .ln { color: var(--atom); font-weight: 700; }
.symbol { max-width: min(34rem, 90vw); padding: 0.4rem 0.6rem; }
.symbol .head { font: 0.85rem var(--display-font); margin-bottom: 0.2rem; }
.symbol .facts { font: 0.72rem var(--mono-font); color: var(--muted); }

.pane pre.text { margin: 0; font-size: 0.78rem; background: none; padding: 0; }

/* Assembly: the term and the line it prints as. */
table.asm { display: table; font-size: 0.88rem; margin: 0; }
table.asm td { padding: 0.04rem 1.4rem 0.04rem 0; border-bottom: 0; vertical-align: baseline; }
table.asm td.term { padding-left: 1.2em; }
table.asm tr.label td.term { padding-left: 0; padding-top: 0.4rem; }
table.asm td.att code { font-size: 0.78rem; color: var(--muted); white-space: pre; }
table.asm tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-slot="asm"] { overflow-x: auto; }

/* Data and Symbols. */
.panel { margin-bottom: 1.2rem; min-width: 0; }
.panel:has([data-slot]:empty) { display: none; }
.panel h2 {
  margin: 0 0 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  letter-spacing: 0;
}
.panel table { display: table; width: 100%; margin: 0; font: 0.75rem/1.55 var(--mono-font); }
.panel td { padding: 0 0.8rem 0 0; border: 0; white-space: nowrap; }
.panel a { color: var(--ink); }
.panel a:hover { color: var(--accent); }

details.object { margin-bottom: 0.4rem; }
details.object > summary { font: 0.78rem var(--mono-font); cursor: pointer; color: var(--muted); }
details.object > summary .name { color: var(--ink); font-weight: 600; margin-right: 0.8em; }
table.hex td.off { color: color-mix(in srgb, var(--muted) 70%, transparent); }
table.hex td.bytes { color: var(--num); }
table.hex td.text { color: var(--str); white-space: pre; }
table.hex tr.sym td.bytes, table.hex tr.zero td.bytes { color: var(--muted); }
table.hex { width: auto; }

table.symbols td { color: var(--muted); }
table.symbols td.name { color: var(--ink); }
table.symbols td.type { color: var(--atom); }
table.symbols tr.import td.name { color: var(--muted); }

/* On a narrow screen the side column dissolves into the page, with the
   output between Compile and Data. */
@media (max-width: 899px) {
  main.play {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "editor" "out" "data" "symbols";
    padding-bottom: 2rem;
  }
  .doors { justify-content: flex-end; flex-wrap: nowrap; gap: 0; }
  .door { padding: 0.35rem 0.4rem; font-size: 0.82rem; }
  main.play { padding: 0.4rem 0.6rem 2rem; }
  .library-frame { padding: 0.35rem 0.6rem; }
  .code { height: 10rem; }
  .editor { --code-size: 0.72rem; margin-bottom: 0.7rem; border-radius: 4px; }
  .bar { padding: 0.2rem 0.25rem; }
  .foot { padding: 0.15rem 0.45rem; }
  .bar, .foot { font-size: 0.72rem; }
  /* Terms a size smaller, with shallower hangs, so an instruction fits
     a phone's line. */
  .panes { --indent: 1em; --hang: 1em; }
  .panes .clause { font-size: 0.8rem; }
    .pane { padding-left: 1.2em; }
  details.legend { margin-left: -1.2em; }
  details.legend > summary .hint { display: none; }
  /* Only the arrows between outputs: each pass is named in its hover
     text, and the stages under the editor give the times. */
  .tabs { gap: 0; }
  .tabs .pass { display: inline-block; padding: 0 0.15rem 0.45rem; }
  .tabs .pass .pname, .tabs .pass .ptime { display: none; }
  .tabs .pass .arrow { font-size: 0.8rem; }
  .tabs .pass:first-child { display: none; }
  .tabs button { font-size: 0.8rem; padding-bottom: 0.4rem; }
  .tabs .as-text { padding-left: 0.6rem; }
  #run kbd { display: none; }
  .side { display: contents; }
  .editor { grid-area: editor; }
  .out { grid-area: out; margin-bottom: 1.5rem; }
  #data-panel { grid-area: data; }
  #symbols-panel { grid-area: symbols; }
  .panel { overflow-x: auto; }
}

/* The IR's words by role (play.js's gloss): what computes, what touches
   memory, Fil-C's checks and where control goes stand apart, and the
   wrappers of values recede so their names and numbers read first. A
   class is a small badge. The legend over the IR uses the same colours. */
.pane {
  --w-inst: var(--ink);
  --w-memory: #94570c;
  --w-check: var(--accent);
  --w-control: #2f6f8f;
  --w-global: #3d7a3d;
}
.w-inst > .f, dt.w-inst { color: var(--w-inst); font-weight: 600; }
.w-memory > .f, dt.w-memory, .a.w-memory { color: var(--w-memory); font-weight: 600; }
.w-check > .f, dt.w-check, .a.w-check { color: var(--w-check); font-weight: 700; }
.w-control > .f, dt.w-control, .a.w-control { color: var(--w-control); font-weight: 600; }
.a.w-op, dt.w-op, .w-op > .f { color: var(--atom); font-weight: 600; }
.c.w-value { --paren: color-mix(in srgb, var(--ink) 18%, transparent); }
.w-value > .f { color: color-mix(in srgb, var(--ink) 38%, transparent); font-weight: 400; }
dt.w-value { color: var(--var); }
.c[data-tmp] > .args .a { color: var(--var); font-weight: 600; }
.c.w-value:has(> .args .n) > .args .n { font-weight: 600; }
.c.w-value:not([data-tmp]):not(:has(.n)) > .args .a { color: var(--w-global); font-weight: 600; }
.c.lit { background: color-mix(in srgb, var(--var) 16%, transparent); border-radius: 3px; }
.ir-value { display: inline; white-space: nowrap; color: var(--var); font-weight: 600; }
.ir-value sub { font-size: 0.72em; line-height: 0; font-variant-numeric: tabular-nums; }
.ir-value .value-role { color: var(--muted); font-weight: 400; }
.ir-value .value-scope { color: var(--muted); font-size: 0.6em; line-height: 0; }
.ir-value.lit { background: color-mix(in srgb, var(--var) 16%, transparent); border-radius: 3px; outline: 1px solid color-mix(in srgb, var(--var) 35%, transparent); }
.a.w-class, .a.w-type, .a.w-cond, dt.w-class, dt.w-type, dt.w-cond {
  padding: 0 0.22em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--atom) 9%, transparent);
  color: color-mix(in srgb, var(--atom) 80%, var(--ink));
  font: 600 0.78em var(--mono-font);
}
.a.w-cond, dt.w-cond { background: color-mix(in srgb, var(--w-control) 10%, transparent); }
.a.w-data, dt.w-data { color: var(--muted); }
.pane [title] { cursor: help; }

details.legend {
  margin: 0 0 0.8rem -1.4em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 55%, var(--code-bg));
  font-size: 0.82rem;
}
details.legend > summary { cursor: pointer; font-weight: 700; }
details.legend > summary .hint { margin-left: 0.8em; font-weight: 400; color: var(--muted); }
details.legend .roles { columns: 19rem auto; column-gap: 2rem; margin-top: 0.5rem; }
details.legend .role { break-inside: avoid; margin-bottom: 0.7rem; }
details.legend h3 { margin: 0 0 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
details.legend dl { margin: 0; }
details.legend .word { margin: 0.12rem 0; padding-left: 1.2em; text-indent: -1.2em; }
details.legend .word[hidden] { display: none; }
details.legend dt, details.legend dd { display: inline; margin: 0; text-indent: 0; }
details.legend dt { margin-right: 0.5em; font-family: var(--mono-font); font-size: 0.78rem; }
details.legend dd { color: var(--ink); }