/* Self-hosted "Plex Mono" — IBM Plex Mono aliased as the name glimpse.js
   expects via document.fonts.load('12px "Plex Mono"'). */
@font-face {
  font-family: "Plex Mono";
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url("fonts/plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-weight: 500;
  font-style: normal;
  font-display: block;
  src: url("fonts/plex-mono-500.woff2") format("woff2");
}

/* ── Design tokens ────────────────────────────────────────────────────
   useTheme() writes --bg --ink --chrome --dim --accent --line --insert
   at runtime. The values below are the "blackmoney" starting state.   */
:root {
  /* Surface ramp (12-step neutral, OKLCH-ish lightness) */
  --s0:  #050505;   /* page bg          L≈3%  */
  --s1:  #0b0b0b;   /* canvas bg        L≈5%  */
  --s2:  #111111;   /* tray bg          L≈7%  */
  --s3:  #1a1a1a;   /* border           L≈10% */
  --s4:  #2a2a2a;   /* hover bg         L≈17% */
  --s5:  rgba(235,230,219,0.12);  /* subtle fill    */

  /* Text ramp */
  --t0:  #ebe6db;   /* body             L≈93% */
  --t1:  rgba(235,230,219,0.55);  /* secondary      */
  --t2:  rgba(235,230,219,0.30);  /* tertiary       */
  --t3:  rgba(235,230,219,0.14);  /* ghost          */

  /* Accent */
  --a0:  #c9b96e;   /* primary accent   */
  --a1:  rgba(201,185,110,0.18);  /* accent fill    */

  /* Semantic aliases (written by JS too) */
  --bg:     var(--s0);
  --ink:    var(--t0);
  --chrome: var(--t2);
  --dim:    var(--t1);
  --accent: var(--a0);
  --line:   rgba(235,230,219,0.05);
  --insert: #9ecf8a;

  /* Grid */
  --cw: 7.2px;   /* CELL_W */
  --ch: 13px;    /* CELL_H */

  /* Type */
  --font-mono: "Plex Mono", "IBM Plex Mono", "Menlo", monospace;
  --font-size: 11px;   /* slightly smaller than canvas 12px — intentional */
  --font: var(--font-size)/1 var(--font-mono);

  /* Geometry */
  --r-sm: 2px;
  --r-md: 4px;
  --t-fast: 130ms ease;
  --t-mid:  220ms ease;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--s0);
  color: var(--t0);
  font: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

/* ── Canvas stack ─────────────────────────────────────────────────────
   CRITICAL: canvas needs explicit width/height so clientWidth/Height
   returns the full viewport — glimpse.js reads those in renderWall().  */
canvas.wall,
canvas.tile,
canvas.machine {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;    /* makes clientWidth = viewport width  */
  height: 100%;   /* makes clientHeight = viewport height */
}

canvas.wall    { z-index: 0; }
canvas.tile    { z-index: 1; pointer-events: none; }
canvas.machine { z-index: 2; pointer-events: none; }

/* ── Vignette (pure CSS, no JS) ─────────────────────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 100% 80% at 50% 50%,
      transparent 52%,
      rgba(0,0,0,0.28) 100%
    );
}

/* ── Keyboard glass ─────────────────────────────────────────────────── */
.kb-glass {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mid);
}

.kb-glass.is-on { opacity: 1; }

/* ── Brand — top-left ─────────────────────────────────────────────────
   JS sets .left dynamically; we only fix .top here.
   Font size intentionally smaller than canvas (11px vs 12px).         */
.brand {
  position: fixed;
  top: calc(var(--ch) * 3.5);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: var(--font-size);
  font-weight: 500;
  line-height: 1;
  color: var(--t2);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.06em;
  transition: color var(--t-fast);
  /* left set by JS */
}

.brand:hover { color: var(--t0); }

/* ── Switch nav — top-right ─────────────────────────────────────────── */
.switch {
  position: fixed;
  top: calc(var(--ch) * 3.5);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  /* right set by JS */
}

.switch a,
.switch button {
  font-family: var(--font-mono);
  font-size: var(--font-size);
  line-height: 1;
  color: var(--t2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition: color var(--t-fast);
}

.switch a:hover,
.switch button:hover { color: var(--t0); }
.switch .is-on        { color: var(--a0); }

/* ── Note line — bottom-left ────────────────────────────────────────── */
.note {
  position: fixed;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: var(--font-size);
  line-height: 1;
  color: var(--t1);
  white-space: nowrap;
  pointer-events: none;
  /* left + top set by JS */
}

/* ── Theme key — bottom-right ────────────────────────────────────────── */
.theme-key {
  position: fixed;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: var(--font-size);
  line-height: 1;
  color: var(--t1);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
  /* left + top set by JS */
}

.theme-key:hover,
.theme-key:focus-visible { color: var(--a0); outline: none; }

/* ── Enter link — keycap style ───────────────────────────────────────── */
.enter {
  position: fixed;
  z-index: 10;
  font-family: var(--font-mono);
  font-size: var(--font-size);
  line-height: 1;
  color: var(--t1);
  text-decoration: none;
  white-space: nowrap;
  /* keycap: border + depth shadow */
  padding: 1px 6px 2px;
  border: 1px solid var(--s3);
  border-bottom-color: var(--s5);
  border-radius: var(--r-sm);
  box-shadow:
    0 1px 0 rgba(235,230,219,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast);
  /* left + top set by JS */
}

.enter:hover {
  color: var(--t0);
  border-color: var(--s4);
  background: var(--s5);
}

/* ── Sources nav (toggled by JS via .is-on) ──────────────────────────── */
.sources {
  position: fixed;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
}

.sources.is-on {
  opacity: 1;
  pointer-events: auto;
}

.sources ul { list-style: none; }

.sources a {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--t2);
  text-decoration: none;
  display: block;
  padding: 1px 0;
  transition: color var(--t-fast);
}

.sources a:hover { color: var(--t0); }

/* ── Vim status bar — row (rows-2) ───────────────────────────────────── */
.status,
.pane-status {
  position: fixed;
  bottom: var(--ch);
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  height: var(--ch);
  font-family: var(--font-mono);
  font-size: var(--font-size);
  background: var(--s2);
  border-top: 1px solid var(--s3);
  pointer-events: none;
  user-select: none;
}

.pane-status { display: none; }   /* shown by JS in split mode */

/* NORMAL / INSERT badge */
.status .mode,
.pane-status .mode {
  padding: 0 9px;
  background: var(--t2);
  color: var(--s0);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.status.is-insert .mode,
.pane-status.is-insert .mode { background: var(--insert); }

.status .path,
.pane-status .path {
  flex: 1;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--t2);
  display: flex;
  align-items: center;
}

.status .pos,
.pane-status .pos {
  padding: 0 10px;
  color: var(--t1);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Vim command line — row (rows-1) ─────────────────────────────────── */
.cmdline,
.pane-cmd {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 20;
  height: var(--ch);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--font-size);
  color: var(--t0);
  background: var(--s2);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.pane-cmd { display: none; }

.cmdline .cmd,
.pane-cmd .cmd {
  padding: 0 5px;
  flex: 1;
}

.cmdline .showcmd {
  padding: 0 10px;
  color: var(--t1);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* block cursor in command line */
.cmdline.is-typing .cmd::after {
  content: "▋";
  animation: vim-blink 1s step-end infinite;
}

@keyframes vim-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation: none !important;
  }
  body::after { display: none; }
}