/* SPDX-License-Identifier: AGPL-3.0-or-later · Copyright (C) 2026 Nicholas Gardella */
/*
 * app.css — layout for the compiler page (index.html).
 *
 * Goal: on a typical laptop/desktop window the whole app fits in the
 * viewport with no page scrollbar. Only the syntax guide and the editor
 * scroll internally. On small or short screens we fall back to normal
 * document flow (page scrolls), because squeezing everything into one
 * screen there would make the editor unusably small.
 *
 * How the "fits the window" layout works:
 *   body      = flex column, exactly 100dvh tall
 *   header/footer take their natural height (flex: none)
 *   main      = flex: 1 + min-height: 0  → gets the leftover height
 *   main      = 2-column grid; each column is min-height: 0 so that its
 *               children can shrink and scroll instead of growing the page.
 * `min-height: 0` is the key: flex/grid items default to min-height:auto,
 * which refuses to shrink below content height and causes overflow.
 */

.app {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Syntax guide (left column) ---------- */
.guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide h2,
.editor h2 {
  font-size: var(--text-lg);
  color: var(--wl-blue);
}

.guide__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guide__body h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.guide__body pre {
  /* Wrap long lines in the narrow column instead of scrolling sideways. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guide__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ---------- Editor (right column) ---------- */
.editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.editor__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.editor textarea {
  width: 100%;
  min-height: 16rem;
  resize: vertical;
  font-size: var(--text-base);
  line-height: 1.5;
  padding: var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  tab-size: 4;
}

.editor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.editor__actions .button--primary {
  margin-left: auto;   /* push the main action to the right */
}

.status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.status[data-state="ready"],
.status[data-state="success"] {
  color: var(--color-success);
  font-weight: 700;
}
.status[data-state="error"] {
  color: var(--color-error);
  font-weight: 700;
}

.error-output {
  color: var(--color-error);
  background: var(--color-error-bg);
  border-left: 4px solid var(--color-error);
  white-space: pre-wrap;
  max-height: 10rem;
  overflow: auto;
}

/* ---------- Wide + tall enough: fit everything in one screen ---------- */
@media (min-width: 60rem) and (min-height: 36rem) {
  body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .site-header,
  .site-footer {
    flex: none;
  }

  .app {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
    /* A single row that is exactly the available height (not content height). */
    grid-template-rows: minmax(0, 1fr);
  }

  .guide,
  .editor {
    min-height: 0;
    grid-row: 1;
  }

  /* Visual order differs from source order (editor is first in the HTML). */
  .guide {
    grid-column: 1;
  }
  .editor {
    grid-column: 2;
  }

  /* The guide content scrolls inside its card. */
  .guide__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--space-2);
  }

  /* The textarea absorbs all remaining height in the editor card. */
  .editor textarea {
    flex: 1;
    min-height: 8rem;
    resize: none;
  }
}