/* Intro page. Everything is placed on the cell grid (multiples of --cell-w / --cell-h).
   --col-left / --col-w are set by main.js: a centered column, at most 140 cells wide. */
body.intro {
  --col-left: calc(var(--cell-w) * 4);
  --col-w: calc(100vw - var(--cell-w) * 8);
  overflow: hidden; height: 100vh;
}

/* The editor window: buffer, status line, ex row. Header = 6 rows above it. */
#editor {
  position: fixed; z-index: 1;
  left: var(--col-left); top: calc(var(--cell-h) * 9);
  width: var(--left-w, var(--col-w));
  opacity: 0;
  transition: opacity 320ms var(--ease), width 750ms var(--ease);
}
body.ui-on #editor { opacity: 1; }

/* Code fades out toward the top and bottom edges of the window, like the reference. */
#buffer {
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--cell-h) * 3), #000 calc(100% - var(--cell-h) * 4), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--cell-h) * 3), #000 calc(100% - var(--cell-h) * 4), transparent);
}
#wall { position: absolute; left: 0; top: 0; display: block; }
#cursorline { position: absolute; left: 0; top: 0; width: 100%; height: var(--cell-h); background: var(--line); transition: transform 90ms var(--ease); }

/* Caret: one cell, snaps to the grid via transform. */
#caret {
  position: absolute; left: 0; top: 0; pointer-events: none;
  width: var(--cell-w); height: var(--cell-h);
  background: var(--accent); opacity: 0.85;
  animation: blink 1.1s steps(1) infinite;
}
#caret[hidden] { display: none; }
#caret.moving { animation: none; }
@keyframes blink { 50% { opacity: 0; } }

/* Vim-style status line */
#status, #status2 {
  display: flex; justify-content: space-between;
  height: var(--cell-h); line-height: var(--cell-h);
  background: color-mix(in srgb, var(--ink) 11%, var(--bg));
  white-space: nowrap; overflow: hidden;
  transition: background-color 420ms var(--ease);
}
#status .left, #status2 .left { display: flex; gap: var(--cell-w); min-width: 0; }
#status .right, #status2 .right { padding-right: var(--cell-w); color: var(--dim); }
#path, #status2 .path { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
#mode, #status2 .mode {
  padding: 0 var(--cell-w); font-weight: 600;
  background: var(--accent); color: var(--bg);
  transition: background-color 320ms var(--ease);
}
#mode.insert { background: var(--color2, #689e80); }

/* `:` command row; the editor types into it by itself */
#ex {
  height: var(--cell-h); line-height: var(--cell-h);
  white-space: pre; color: var(--ink);
  opacity: 0; transition: opacity 320ms var(--ease);
}
#ex.on { opacity: 1; }

/* Boot command line (shell, before the editor opens) */
#cmdline {
  position: fixed; z-index: 3;
  left: var(--col-left); top: calc(var(--cell-h) * 9);
  white-space: pre;
  transition: opacity 320ms var(--ease);
}
#cmdline[hidden] { display: none; }
#cmdline.done { opacity: 0; }
#cmdline .prompt { color: var(--dim); }
#cmdline .cursor {
  display: inline-block; width: var(--cell-w); height: var(--cell-h);
  vertical-align: top; background: var(--accent);
}
#cmdline.off .cursor { opacity: 0; }

/* Fixed chrome in the margins, aligned to the column edges. */
.ui {
  position: fixed; z-index: 2;
  height: var(--cell-h); line-height: var(--cell-h);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
body.ui-on .ui { opacity: 1; }

.ui.tl { left: calc(var(--col-left) + var(--inset-l, 0px)); top: calc(var(--cell-h) * 3); }
.ui.tr { right: calc(var(--col-left) + var(--inset-r, 0px)); top: calc(var(--cell-h) * 3); }
.ui.bl { left: calc(var(--col-left) + var(--inset-l, 0px)); bottom: calc(var(--cell-h) * 3); }
.ui.br { right: calc(var(--col-left) + var(--inset-r, 0px)); bottom: calc(var(--cell-h) * 3); display: flex; gap: calc(var(--cell-w) * 2); align-items: center; }

.logo { text-decoration: none; font-weight: 600; }
.logo .cur { color: var(--accent); animation: blink 1.1s steps(1) infinite; }

.ui a, .ui button {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
  transition: color 240ms var(--ease), text-decoration-color 240ms var(--ease), background-color 240ms var(--ease);
}
.ui .logo { text-decoration: none; }
#tagline { color: var(--dim); }

/* Primary action: filled badge, like the mode label. */
.ui a.enter {
  text-decoration: none; padding: 0 var(--cell-w);
  background: var(--accent); color: var(--bg);
}

@media (hover: hover) {
  .ui a:hover, .ui button:hover { color: var(--accent); text-decoration-color: currentColor; }
  .ui a.enter:hover { color: var(--bg); background: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
}

/* ---- Eye, shell pane, desk ---- */
#eye { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; display: block; }
#buffer { touch-action: pan-x; }

/* Second window (:vsplit): right of the editor, one-cell gutter with a hairline divider. */
#pane2 {
  position: absolute; top: 0; left: calc(100% + var(--cell-w) * 2);
  width: var(--shell-w); height: calc(var(--shell-h) - var(--cell-h));
  opacity: 0; pointer-events: none;
  transition: opacity 750ms var(--ease);
}
#pane2.open { opacity: 1; }
#pane2::before {
  content: ''; position: absolute; left: calc(var(--cell-w) * -1); top: 0; bottom: 0;
  border-left: 1px solid color-mix(in srgb, var(--dim) 40%, transparent);
}
#pane { display: block; }
#status2 { margin-top: 0; }

#desk { position: fixed; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease); }
#desk[hidden] { display: none; }
body.ui-on #desk { opacity: 1; }

.ui .ico { color: var(--dim); margin-right: calc(var(--cell-w) * -1); }



/* Frosted glass: blurred, tinted panel with feathered edges (two crossed gradients, intersected). */
.glass {
  position: fixed; z-index: 1; pointer-events: none; opacity: 0;
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
}
#eye-glass { z-index: 1; }
#kb-glass { z-index: 0; opacity: 1; transition: opacity 320ms var(--ease); }
#kb-glass[hidden] { display: none; }

/* Hovered line: the same soft band as the current line, plus a pointer cursor. */
#hoverline { position: absolute; left: 0; top: 0; width: 100%; height: var(--cell-h); background: var(--line); opacity: 0; transition: opacity 120ms var(--ease); pointer-events: none; }
#hoverline.on { opacity: 0.7; }
#buffer { cursor: default; }
#buffer.on-line { cursor: pointer; }


/* ---- front door: password prompt above the footer ---- */
.gate {
  position: fixed; z-index: 6;
  right: calc(var(--col-left) + var(--inset-r, 0px)); bottom: calc(var(--cell-h) * 5);
  width: calc(var(--cell-w) * 34); max-width: calc(100vw - 2 * var(--cell-w) * 2);
  padding: var(--cell-h) calc(var(--cell-w) * 2);
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--dim) 45%, transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.gate[hidden] { display: none; }
.gate.on { opacity: 1; transform: none; }
.gate-row { display: flex; align-items: center; gap: calc(var(--cell-w) * 2); height: var(--cell-h); }
.gate label { color: var(--dim); }
.gate input {
  flex: 1; min-width: 0; height: var(--cell-h); padding: 0; margin: 0;
  background: none; border: 0; outline: none; color: var(--ink);
  font: inherit; letter-spacing: 0.1em; caret-color: var(--accent);
}
.gate p { margin: var(--cell-h) 0 0; height: var(--cell-h); color: var(--dim); }
.gate p.bad { color: var(--accent); }
@media (max-width: 700px) { .gate { right: var(--cell-w); left: var(--cell-w); width: auto; max-width: none; } }