:root {
  --bg: #0c0f0a;
  --fg: #c8e6c0;
  --dim: #6b7f66;
  --accent: #7ee787;
  --hot: #ff7b72;
  --warn: #e3b341;
  --rule: #1f2a1c;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* A full-height terminal: banner on top, the latest command's output filling
   the middle and scrolling on its own, status line and prompt pinned below. */
.terminal {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 1400px;
  padding: 16px;
  margin: 0 auto;
}
#scrollback { flex: 1; min-height: 0; overflow-y: auto; }
.motd, .status, .prompt { flex: none; }
.status { padding-top: 0.5em; border-top: 1px dashed var(--rule); }

pre { margin: 0; font: inherit; white-space: pre-wrap; }

.motd { color: var(--dim); margin-bottom: 1em; }
.motd b { color: var(--accent); font-weight: normal; }

.exchange { margin-bottom: 0.5em; }
.echo { white-space: pre-wrap; }
.ps1 { color: var(--accent); margin-right: 1ch; }

.prompt { display: flex; align-items: baseline; }
.prompt input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
  caret-color: var(--accent);
  padding: 0;
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 0 2ch 0 0; }
th { color: var(--dim); font-weight: normal; border-bottom: 1px dashed var(--rule); }
td.num, th.num { text-align: right; }
td.cmd { white-space: nowrap; color: var(--accent); }

.help-intro { max-width: 80ch; margin-bottom: 1em; }
.help-intro p { margin: 0 0 0.5em; }
.help-intro b, .usage b { color: var(--accent); font-weight: normal; }
.prompt input::placeholder { color: var(--dim); opacity: 0.7; }

.nowrap { white-space: nowrap; }

.follow::before { content: "● "; color: var(--accent); animation: blink 2s steps(1) infinite; }

/* tail -f output arrives as several tables; fixed widths keep their columns
   aligned. The address column takes whatever is left. */
table.tail { table-layout: fixed; }
table.tail td { overflow-wrap: anywhere; }
.c-when { width: 17ch; }
.c-number { width: 10ch; }
.c-type { width: 22ch; }
.c-level { width: 5ch; }
.c-appliance { width: 12ch; }
.c-station { width: 30ch; }
.c-agency { width: 8ch; }

/* Incidents that arrived via tail -f flash briefly so they're noticed. */
.fresh { animation: arrive 4s ease-out; }
@keyframes arrive { from { background: var(--rule); } to { background: transparent; } }

dl.detail { display: grid; grid-template-columns: max-content 1fr; gap: 0 2ch; margin: 0 0 1em; }
dl.detail dt { color: var(--dim); }
dl.detail dd { margin: 0; white-space: pre-wrap; }

.dim { color: var(--dim); }
.hot { color: var(--hot); }
.warn { color: var(--warn); }
.err { color: var(--hot); }
.usage { color: var(--warn); }

button.link {
  all: unset;
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline dotted;
}
button.link:hover, button.link:focus-visible { background: var(--accent); color: var(--bg); }

.htmx-request.prompt::after { content: "▌"; color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Slim screens: tables would need sideways scrolling, so each row becomes a
   small card laid out on a grid and the column headings are dropped. Cells are
   placed by position, so this follows the column order in the templates. */
@media (max-width: 700px) {
  .terminal { padding: 10px; }
  /* iOS zooms the page when focusing an input smaller than 16px. */
  .prompt input { font-size: 16px; }
  .motd { margin-bottom: 0.5em; }

  :is(.incidents, .stations, .help), :is(.incidents, .stations, .help) tbody { display: block; }
  :is(.incidents, .stations, .help) :is(thead, colgroup) { display: none; }
  :is(.incidents, .stations, .help) tr {
    display: grid;
    gap: 0 1ch;
    padding: 0.4em 0;
    border-bottom: 1px dashed var(--rule);
  }
  :is(.incidents, .stations, .help) td { padding: 0; min-width: 0; }

  /* Incidents:  INC0021  STRUCTURE FIRE      2
                 2026-10-11 14:02
                 12 MAIN ST, MOUNT BARKER
                 MB201    Mount Barker        CFS
     Appliance, station and agency stay side by side so each appliance's
     line lines up; long station names are cut short rather than wrapped. */
  table.incidents tr {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "number type level"
      "when   when when"
      "addr   addr addr"
      "app    stn  agency";
  }
  table.incidents td:nth-child(1) { grid-area: when; }
  table.incidents td:nth-child(2) { grid-area: number; }
  table.incidents td:nth-child(3) { grid-area: type; }
  table.incidents td:nth-child(4) { grid-area: level; }
  table.incidents td:nth-child(5) { grid-area: addr; }
  table.incidents td:nth-child(6) { grid-area: app; }
  table.incidents td:nth-child(7) { grid-area: stn; }
  table.incidents td:nth-child(8) { grid-area: agency; }
  table.incidents td > div { overflow: hidden; text-overflow: ellipsis; }

  /* Stations and an incident's crews: code and name, then region and agency. */
  table.stations tr {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "code name   name"
      ".    region agency";
  }
  table.stations td:nth-child(1) { grid-area: code; }
  table.stations td:nth-child(2) { grid-area: name; }
  table.stations td:nth-child(3) { grid-area: region; }
  table.stations td:nth-child(4) { grid-area: agency; }

  /* Help: the command and its example on one line, what it does below. */
  table.help tr {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "cmd     example"
      "summary summary";
  }
  table.help td:nth-child(1) { grid-area: cmd; }
  table.help td:nth-child(2) { grid-area: summary; padding-left: 2ch; }
  table.help td:nth-child(3) { grid-area: example; text-align: right; }

  dl.detail { grid-template-columns: max-content minmax(0, 1fr); }
  dl.detail dd { overflow-wrap: anywhere; }
}