/* The base sheet: the tokens, the fonts, the reset, and the classes the
   server's own pages use (D12). The console's own vocabulary is in
   console/src/app.css, and a class one component uses is in that
   component's scoped style. Separation is by plane, never by a border: the
   only rings are focus and a danger ring on an input that can't be used.
   Colour literals live in :root and nowhere else. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --page: oklch(0.15 0.012 293);
  --surface: oklch(0.19 0.014 293);
  --raised: oklch(0.23 0.016 293);
  --raised-hi: oklch(0.27 0.018 293);
  --ink: oklch(0.94 0.006 293);
  --mu: oklch(0.72 0.014 293);
  /* Ink for the mark on an empty screen: present, and quieter than text. */
  --dim: oklch(0.4 0.016 293);
  --accent: oklch(0.71 0.16 293);
  --accent-ink: oklch(0.17 0.03 293);
  --accent-tint: oklch(0.71 0.16 293 / 0.16);
  --ok: oklch(0.8 0.15 150);
  --ok-fill: oklch(0.27 0.05 150);
  --warn: oklch(0.83 0.14 80);
  --warn-fill: oklch(0.27 0.05 80);
  --danger: oklch(0.72 0.17 25);
  --danger-fill: oklch(0.27 0.06 25);
  --neutral-fill: oklch(0.27 0.016 293);
  /* Below the page: the slot a dragged tile leaves behind, and a choice
     that cannot be taken. */
  --sunk: oklch(0.17 0.013 293);
  --slot-ring: oklch(0.3 0.02 293);
  /* What a lifted tile casts. */
  --lift: oklch(0.06 0.01 293 / 0.7);
  /* A person's own tile carries more of the accent than any plane does, so
     a face is never read as one more surface behind the page. */
  --person: oklch(0.27 0.04 293);
  /* The tints every picture is drawn in: the three a computer uses, plus a
     roof, foliage and glass, which only a house has. */
  --pic-body: oklch(0.34 0.022 293);
  --pic-inset: oklch(0.26 0.018 293);
  --pic-line: oklch(0.52 0.03 293);
  --pic-roof: oklch(0.42 0.06 30);
  --pic-leaf: oklch(0.42 0.07 150);
  --pic-glass: oklch(0.46 0.06 230);
  --backdrop: oklch(0.1 0.01 293 / 0.7);
  --shadow: oklch(0 0 0 / 0.5);
  --mono: "Geist Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--page);
  color: var(--ink);
  font: 400 14px/1.5 "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The agent column is as wide as its edge was dragged
   (console/src/routes/Agent.svelte), and never so wide that the main column
   drops under 480px. */
body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) clamp(280px, var(--agent-w, 400px), calc(100vw - 700px));
  overflow: hidden;
}

/* The console renders into div.app (console/src/app.html). Its children
   are the cells of the body grid. */
.app { display: contents; }

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::placeholder { color: var(--mu); opacity: 1; }

/* The console's .spin (console/src/app.css) is the only user. */
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- the classes the server's pages use, and the console with them ----- */

.danger-ink { color: var(--danger); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.field {
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 2px;
  background: var(--raised);
  color: var(--ink);
}
.field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.field.invalid { box-shadow: inset 0 0 0 2px var(--danger); }
.field-mono { font-family: var(--mono); }

.fold { display: flex; flex-direction: column; gap: 8px; align-self: stretch; align-items: flex-start; }
.fold-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mu);
  cursor: pointer;
}
.fold-toggle:hover { color: var(--ink); }

.mono-block {
  align-self: stretch;
  max-height: 320px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: 2px;
  background: var(--page);
  color: var(--mu);
  font-family: var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.notice { display: flex; align-items: center; justify-content: center; overflow: auto; }
.notice main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 320px;
  padding: 32px;
}
.brand { margin: 0; font-weight: 600; }
.notice main { gap: 8px; }
.notice h1 { margin: 0; font-size: 22px; font-weight: 600; }
.notice p { margin: 0; }
.notice .btn { margin-top: 16px; }
/* Choose your username: the field, its refusal 4px under it, the button. */
.ask { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.ask-field { width: 100%; }