/*
 * Stage 5.3 styling: the comic pane as a Comic Chat window (ADR 0004 §4), and
 * the console pane as the terminal Zork was played on, beside it.
 *
 * §4a governs the layout: responsiveness outranks retro fidelity. Nothing here
 * is sized in fixed pixels except type; the panes are a fluid grid that stacks
 * on narrow viewports with *both halves still visible* — a console truncated to
 * fit has broken §2's "narration is accompanied, never replaced", not just the
 * shell.
 */

@import url("/tokens.css");

/* Comic Sans MS is not installed on every platform (Android, notably), so the
   balloon/title font falls back to whatever the OS has — which is not the
   iconic look Comic Chat needs. Self-hosting the open-license fallback that
   was already second in the canvas font stack (`comic/balloon.ts`,
   `comic/render.ts`) makes that fallback identical everywhere instead of
   depending on the OS. See THIRD_PARTY.md → Comic Neue. */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/comic-neue-400.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/comic-neue-700.woff2") format("woff2");
}

:root {
  --status-bg: #d8d8d8;
  --status-fg: #000;
  --panel-bg: #1b1b1f;
  --panel-fg: #c9c9d1;
  --mono: "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--page-bg);
  color: var(--console-fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.45;
}

#shell {
  display: grid;
  /* The comic pane is primary and the console subordinate-but-complete (§4).
     Primary is expressed as *more room*, never as the other pane's absence. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0.75rem;
  padding: 0.75rem;
  height: 100dvh;
}

section {
  min-height: 0; /* lets the inner scrollers, not the grid, take the overflow */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  overflow: hidden;
}

/* ---------------- comic pane: a Comic Chat window ---------------- */

#comic {
  /* Not a skin: Comic Chat *was* an IRC client, so this is the artifact
     rebuilt. §4a is what keeps it a reconstruction in style and not in bitmap
     dimensions — the chrome stretches, the figures do not distort. */
  background: var(--comic-chrome);
  border-color: var(--comic-edge);
}

#comic h2 {
  margin: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f4f4f4;
  background: linear-gradient(90deg, #1c2f6b, #4a6bbd);
  border-bottom: 1px solid var(--comic-edge);
}

#comic h2 small {
  font-weight: 400;
  color: #c3cef0;
}

#comic h2 .wordmark {
  color: inherit;
  text-decoration: none;
}

#comic h2 .wordmark:hover {
  text-decoration: underline;
}

/* The member list, with this strip's two members in it (5.4). */
.comic-cast {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--comic-chrome);
  border-bottom: 1px solid var(--comic-edge);
}

.cast-member {
  margin: 0;
  text-align: center;
  color: #202020;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.cast-portrait {
  display: block;
  background: #fff;
  border: 1px solid var(--comic-edge);
}

.comic-strip {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Panel sequencing (5.4): a uniform grid, ported from `CUnitPanelPage`. The
     column count and track width are set in script — they are a function of the
     measured container (§4a) — and so is `gap`, because `layout.ts` does column
     arithmetic with the same number and the two must not drift. */
  display: grid;
  justify-content: center;
  align-content: start;
  padding: 0.6rem;
  background: var(--comic-paper);
}

/* Panels size themselves in script — width is a Layout Manager input evaluated
   per render (§4a), not a CSS constant — so this only draws the edge. */
.panel {
  display: block;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.comic-notice {
  margin: 0;
  padding: 0.6rem;
  color: #7a2020;
  font-size: 0.85rem;
}

/* ---------------- console pane ---------------- */

#console {
  background: var(--console-bg);
}

.status-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: var(--status-bg);
  color: var(--status-fg);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
  overflow: hidden;
}

.status-room {
  overflow: hidden;
  text-overflow: ellipsis;
}

.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
}

/* Interior newlines are the game's own paragraphing (`TELL` emits them); only
   the trailing one is stripped, in console-view.ts. */
.line {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin-bottom: 0.55rem;
}

/* Styling is by ADR 0002 channel, never by inspecting the text. */
.line.echo {
  color: var(--accent);
}
.line.prose {
  color: var(--console-fg);
}
.line.room-title {
  color: #fff;
  font-weight: 700;
}
.line.system {
  color: var(--console-dim);
}
.line.question {
  color: #e0c46c;
}
.line.speech {
  color: #8fb8ff;
}
.line.game-over {
  color: #e08a8a;
  font-weight: 700;
}

#command-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-top: 1px solid var(--rule);
  padding: 0.35rem 0.6rem;
}

.prompt {
  color: var(--accent);
}

#command {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--console-fg);
  font: inherit;
  padding: 0.2rem 0;
}

#command:focus {
  outline: none;
}

/* ---------------- inspector ---------------- */

/* Collapsed inside the console pane as of 5.3: the comic now holds the primary
   slot, and the inspector renders exactly the event types the console drops —
   the ones the comic draws — so it stays one click away rather than on stage. */
#inspector {
  background: var(--panel-bg);
  color: var(--panel-fg);
  border-top: 1px solid var(--rule);
  max-height: 45%;
  display: flex;
  flex-direction: column;
}

#inspector > summary {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex: 0 0 auto;
}

#inspector > summary small {
  color: var(--console-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

#inspector h3 {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--console-dim);
}

.inspector-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
  font-size: 0.8rem;
}

.inspector-block + .inspector-block {
  margin-top: 1rem;
}

.mix-row,
.event-row {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  padding: 0.1rem 0;
}

/* A zero row is dimmed but never hidden: the 0-`speech` finding (ADR 0004
   §Context) is only legible if the row is present. */
.mix-zero {
  color: #5a5a63;
}

.event-row {
  justify-content: flex-start;
  border-top: 1px solid #26262c;
}

.event-kind {
  flex: 0 0 8.5rem;
  color: var(--accent);
}

.event-detail {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-empty {
  color: var(--console-dim);
}

/* ---------------- §4a: stack, keep both panes visible ---------------- */

@media (max-width: 720px) {
  #shell {
    grid-template-columns: minmax(0, 1fr);
    /* The comic leads and the console keeps a real share of the vertical.
       "Subordinate" means smaller, never hidden: a transcript behind a gesture
       does not satisfy §2, and one truncated to fit has broken it outright. */
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* The member list is chrome, not content: it names the two roles but the panel
   already draws them, so on a stacked portrait phone — and above all once the
   on-screen keyboard halves the viewport — the row is height the panel needs
   more. Hidden there so a whole panel fits without scrolling; the width query
   keeps it on phones held upright, the height query catches the keyboard (and
   short landscape) whichever way the device is turned. The panel itself is also
   capped to the pane height in comic-view.ts; this simply hands it the room. */
@media (max-width: 720px) and (orientation: portrait) {
  .comic-cast {
    display: none;
  }
}

@media (max-height: 560px) {
  .comic-cast {
    display: none;
  }
}