/* The card playground's shell.
 *
 * Hand-written and small on purpose. The page's whole claim is that a card
 * needs no build step, and it would be a poor one to make from behind a CSS
 * toolchain. */

:root {
  --bg: #12141a;
  --panel: #1a1d26;
  --line: #2a2f3c;
  --ink: #e6e8ef;
  --dim: #9aa2b5;
  --good: #7ee2a8;
  --warn: #f0c674;
  --bad: #f08a8a;
  --accent: #8ab4f8;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, sans-serif;
}

.bar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}

.bar h1 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.tagline {
  margin: 0;
  color: var(--dim);
  font-size: 0.85rem;
}

.tagline code {
  font-family: var(--mono);
}

.examples {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dim);
  font-size: 0.85rem;
}

select {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font: inherit;
}

/* The mode switch: one card, two ways to look at it. A segmented pair rather
   than a dropdown, because there are two and both are always available. */
.modes {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.mode {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}

.mode.on {
  background: var(--line);
  color: var(--ink);
}

.status {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim);
}
.status.good {
  color: var(--good);
  border-color: var(--good);
}
.status.warn {
  color: var(--warn);
  border-color: var(--warn);
}
.status.bad {
  color: var(--bad);
  border-color: var(--bad);
}

.grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  height: calc(100vh - 3.5rem);
}

@media (max-width: 60rem) {
  .grid {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.pane {
  background: var(--bg);
  padding: 0.75rem 1rem;
  overflow: auto;
  min-height: 0;
}

/* The pane's OWN heading — a direct child, so a card that renders an `<h2>`
 * into the preview keeps its own typography rather than being labelled like a
 * pane. (It used to be `.pane h2`, and a margaui `card-title` came out
 * uppercase and 0.75rem.) */
.pane > h2 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  font-weight: 600;
}

.pane > h2 + * {
  margin-top: 0;
}

.editor-pane {
  display: flex;
  flex-direction: column;
}

.editor {
  display: flex;
  flex: 1;
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.gutter {
  margin: 0;
  padding: 0.6rem 0.4rem 0.6rem 0.6rem;
  color: var(--dim);
  text-align: right;
  font: 12px/1.55 var(--mono);
  user-select: none;
  overflow: hidden;
  border-right: 1px solid var(--line);
  white-space: pre;
}

textarea {
  flex: 1;
  border: 0;
  resize: none;
  padding: 0.6rem;
  background: transparent;
  color: var(--ink);
  font: 12px/1.55 var(--mono);
  tab-size: 2;
}

textarea:focus {
  outline: none;
}

/* CodeMirror, once the shell has upgraded to it — in either box, since both
 * hold one editor filling them. The editor brings its own line numbers, so the
 * hand-drawn gutter is hidden rather than doubled (shell.js). Its own theme
 * paints the text and keeps the background transparent, so the panel below
 * shows through and there is nothing to restate here. */
.editor .cm-editor,
.part .cm-editor {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.editor .cm-scroller,
.part .cm-scroller {
  overflow: auto;
}

/* `display: flex` beats the `hidden` attribute, and both editors have it —
   so say it once, here, rather than discovering it as two panes stacked. */
[hidden] {
  display: none !important;
}

/* The structured view. Same height as the raw editor, so switching does not
   move the panes beside it. */
.structured {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 24rem;
  gap: 0.4rem;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.tab.on {
  color: var(--ink);
  border-color: var(--ink);
}

/* The view tabs sit under the part tabs and are visibly subordinate: a card
   has one state block and one script block, and as many views as it likes. */
.tabs.views .tab {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.tab.add {
  font-family: var(--mono);
}

/* The box the part pane's editor sits in — a textarea, or the CodeMirror that
 * replaced it. Same border either way, so switching does not move the pane. */
.part {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.part-empty {
  flex: 1;
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.preview {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem;
  background: var(--panel);
  margin-bottom: 1rem;
}

/* The last good render, while the card does not parse. Dimmed rather than
 * removed: a half-typed line is the ordinary state of an editor, and a preview
 * that blanks between keystrokes is worse than one that is visibly behind. */
.preview.stale {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* The card's own markup is NOT styled from here.
 *
 * It used to be — a hand-written set of `.preview button` / `.preview input`
 * rules, "enough that a starter looks deliberate". They are gone because the
 * page now compiles the card's own class names with margaui (shell.js →
 * web/margaui.js), and the two cannot both be right: an unlayered rule here
 * outranks every layered one in that sheet, so `.preview input` painted a
 * margaui `input` in the shell's palette and nothing looked like either.
 *
 * A card that wants to look like something has two ways to say so, and both
 * work: margaui classes, compiled here, or its own `<style>` block, which the
 * loader keeps and the framework scopes to the view. */

.issues,
.activity {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}

.issues .ok {
  color: var(--good);
  font-family: var(--mono);
}

.issue {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.issue .where {
  background: none;
  border: 0;
  color: var(--accent);
  font: 0.78rem var(--mono);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.issue code {
  color: var(--warn);
  font: 0.72rem var(--mono);
  white-space: nowrap;
}

.json {
  margin: 0 0 1rem;
  padding: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 12px/1.5 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}

.activity {
  counter-reset: none;
}

.activity li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.activity code {
  color: var(--dim);
}

.activity .hit {
  color: var(--good);
}
.activity .miss {
  color: var(--warn);
}

/* --- the compiled panel ---------------------------------------------------
 *
 * The other backend's output. `wasm-out` is a code pane rather than a JSON
 * one: what it shows is Wax or WAT, both of which are long lines that want to
 * scroll rather than wrap, and both of which are read rather than skimmed.
 */
.wasm-out {
  max-height: 22rem;
  overflow: auto;
  white-space: pre;
  font-size: 0.72rem;
  line-height: 1.45;
}

.wasm-out.bad {
  color: var(--bad, #b4232c);
  white-space: pre-wrap;
}

/* Pushed to the right of the two output tabs, because these are actions and
 * those are a choice — and disabled until there is something to act on. Only
 * the FIRST action carries the `auto`: two of them would split the free space
 * and separate the pair rather than move it. */
.tab.download,
.tab.action {
  font-variant-numeric: tabular-nums;
}

.tab.download {
  margin-left: auto;
}

.tab.download[disabled],
.tab.action[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* The size and field count, beside the heading rather than in the pane: it is
 * the one number a reader wants without scrolling. */
h2 .note {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.65;
  margin-left: 0.5rem;
}

/* The mounted pane's note says which bundle is running, or that the host
 * refused it — an outcome rather than a measurement, so it is coloured like the
 * status pill and not dimmed like a size. */
h2 .note.good {
  color: var(--good);
  opacity: 1;
}

h2 .note.bad {
  color: var(--bad);
  opacity: 1;
}