/* ============================================================================
   Dorcha — a full-bleed terminal in the root.vc style, on the classic
   Linux-console theme: pure black with canonical VGA brights. Dorcha means
   dark; the terminal is as dark as they come. Command grammar keeps root.vc's
   ANSI roles: commands magenta, links blue, user yellow, prompt green.
   Font: Source Code Pro.
   ========================================================================== */

:root {
  --bg:      #000000;   /* the console */
  --bg-hi:   #262626;   /* selection, rules */
  --fg:      #aaaaaa;   /* VGA white — body text */
  --bright:  #ffffff;   /* VGA bright white — bold/emphasis */
  --gray:    #7f7f7f;   /* muted asides */
  --green:   #55ff55;   /* the prompt $ and the caret */
  --yellow:  #ffff55;   /* the user, engagement tags */
  --blue:    #5c5cff;   /* hyperlinks */
  --magenta: #ff55ff;   /* commands */
  --mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection { background: var(--bg-hi); color: var(--bright); }

/* the whole page is the terminal */
.terminal {
  height: 100dvh;
  overflow-y: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-hi) transparent;
}
.terminal::-webkit-scrollbar { width: 8px; }
.terminal::-webkit-scrollbar-thumb { background: var(--bg-hi); border-radius: 8px; }

.line { white-space: pre-wrap; word-break: break-word; }

/* ANSI roles */
.prompt-u { color: var(--yellow); }   /* guest */
.prompt-p { color: var(--blue); }     /* ~ */
.prompt-s { color: var(--green); }    /* $ */
.cmd  { color: var(--bright); }
.out  { color: var(--fg); }
.out b { color: var(--bright); font-weight: 700; }
.muted { color: var(--gray); }
.ok   { color: var(--green); }
.hl   { color: var(--yellow); }

/* links the root.vc way: ANSI 1;34 bold bright blue, underline on hover only
   (that is how xterm's web-links addon renders them) */
a { color: var(--blue); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* command names are magenta — type them, or tap them */
.run { color: var(--magenta); cursor: pointer; }
.run:hover { text-decoration: underline; text-underline-offset: 2px; }
.kw { color: var(--magenta); }  /* command syntax in documentation, not tappable */

/* output prints: lines pop in sequence, no fading — terminals don't fade */
.cascade { opacity: 0; animation: pop 1ms steps(1) forwards; }
@keyframes pop { to { opacity: 1; } }

/* the spinning Dorcha mark, kept from the old site: the login banner */
.boot-logo { display: block; height: 88px; width: 88px; margin: 2px 0 4px; }
.spin { animation: spin-ccw 9s linear infinite; }
@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* founder portraits: real photos where root.vc has ASCII art */
.portrait {
  display: block;
  width: 140px; height: 140px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid #444;
  margin: 2px 0 8px;
}

/* live input line — flows right after the output, like a real shell prompt.
   The visible text + block cursor is a mirror; the real <input> is invisible
   underneath and only captures keystrokes. */
.inputline { position: relative; display: flex; align-items: baseline; gap: 1ch; margin-top: 2px; }
.ps { white-space: nowrap; }
.typed { white-space: pre-wrap; word-break: break-word; color: var(--fg); min-width: 0; }
.bcaret {
  background: var(--green); color: var(--bg);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { background: transparent; color: var(--fg); } }
#cmdInput {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; outline: none; background: transparent;
  font: inherit; color: transparent; caret-color: transparent;
}

/* iOS Safari zooms the page when focusing inputs under 16px; keep it still */
@media (max-width: 640px) {
  #cmdInput { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .cascade { animation: none; opacity: 1; }
  .bcaret { animation: none; }
}