@charset "utf-8";

/* Light/dark theming. `color-scheme: light dark` lets light-dark() resolve each
   token to its light or dark value automatically: from the OS preference by
   default (so the no-JS path follows the OS for free), and forced one way by the
   toggle, which only flips color-scheme below. Each colour is written once as
   light-dark(<light>, <dark>); the plain :root values and the `@supports not`
   block below are the fallback for browsers without light-dark() support and
   duplicate those values. test/themeFallback.test.js keeps the fallback in sync
   with the light-dark() tokens so the two can't drift. */
:root {
  color-scheme: light dark;

  /* Fallback for browsers without light-dark() support */
  --page-bg: #e8e6df;
  --term-bg: #fff;
  --term-bar: #efede6;
  --term-border: #d3d1c7;
  --fg: #2c2c2a;
  --muted: #76756f;
  --rule: #b4b2a9;
  --prompt: #0f6e56;
  --cmd: #3b6d11;
  --name: #0f6e56;

  /* Field labels share the prompt's green in both schemes. */
  --label: var(--prompt);
  --link: #185fa5;

  /* Theme-independent. */
  --accent: #1d9e75;
  --dot-red: #e24b4a;
  --dot-amber: #ef9f27;
  --dot-green: var(--accent);
}

@supports (color: light-dark(#fff, #000)) {
  :root {
    --page-bg: light-dark(#e8e6df, #0e0f10);
    --term-bg: light-dark(#fff, #1b1d1e);
    --term-bar: light-dark(#efede6, #242728);
    --term-border: light-dark(#d3d1c7, #2c2f30);
    --fg: light-dark(#2c2c2a, #d3d1c7);
    --muted: light-dark(#76756f, #888780);
    --rule: light-dark(#b4b2a9, #5f5e5a);
    --prompt: light-dark(#0f6e56, #5dcaa5);
    --cmd: light-dark(#3b6d11, #c0dd97);
    --name: light-dark(#0f6e56, #9fe1cb);
    --link: light-dark(#185fa5, #85b7eb);
  }
}

/* The toggle's explicit override: force one scheme, which steers every
   light-dark() token above. Absent data-theme = auto = follow the OS. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@supports not (color: light-dark(#fff, #000)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --page-bg: #0e0f10;
      --term-bg: #1b1d1e;
      --term-bar: #242728;
      --term-border: #2c2f30;
      --fg: #d3d1c7;
      --muted: #888780;
      --rule: #5f5e5a;
      --prompt: #5dcaa5;
      --cmd: #c0dd97;
      --name: #9fe1cb;
      --link: #85b7eb;
    }
  }

  :root[data-theme="dark"] {
    --page-bg: #0e0f10;
    --term-bg: #1b1d1e;
    --term-bar: #242728;
    --term-border: #2c2f30;
    --fg: #d3d1c7;
    --muted: #888780;
    --rule: #5f5e5a;
    --prompt: #5dcaa5;
    --cmd: #c0dd97;
    --name: #9fe1cb;
    --link: #85b7eb;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 24px;
  background: var(--page-bg);
  color: var(--fg);
  font-family:
    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono",
    Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.85;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.terminal {
  width: 100%;
  max-width: 620px;
  background: var(--term-bg);
  border: 0.5px solid var(--term-border);
  border-radius: 12px;
  overflow: hidden;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--term-bar);
  border-bottom: 0.5px solid var(--term-border);
}

.dots {
  display: flex;
  gap: 8px;
}

.dots i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dots i:nth-child(1) {
  background: var(--dot-red);
}

.dots i:nth-child(2) {
  background: var(--dot-amber);
}

.dots i:nth-child(3) {
  background: var(--dot-green);
}

.title {
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.theme-toggle {
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--accent);
}

.theme-toggle:focus-visible {
  color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.screen {
  padding: 22px 26px 26px;

  /* When JS freezes the height (see index.html), command history scrolls inside
     the window instead of growing it, like a real terminal. A no-op until then.
     The standard scrollbar properties (not ::-webkit-scrollbar) are used on
     purpose: the native scrollbar auto-hides on macOS and, unlike a custom one,
     does not leave a ghost thumb behind when the content shrinks again. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.login {
  margin: 0 0 14px;
  color: var(--muted);
}

.cmd {
  margin: 0;
}

.prompt {
  color: var(--prompt);
}

.run {
  color: var(--cmd);
}

.whoami {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 14px 0 4px;
}

.ascii {
  margin: 0;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  white-space: pre;
}

.info {
  flex: 1;
  min-width: 0;
}

.name {
  margin: 0;
  color: var(--name);
  font-size: 15px;
  font-weight: normal;
}

.info hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 8px 0 12px;
}

.fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 18px;
  margin: 0;
}

.fields dt {
  color: var(--label);
}

.fields dd {
  margin: 0;
  color: var(--fg);
}

.fields em {
  font-style: italic;
}

.run-projects {
  margin-top: 20px;
}

.projects {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.projects .proj {
  color: var(--name);
}

.projects .arrow {
  margin: 0 6px;
  color: var(--rule);
}

.prompt-last {
  margin-top: 18px;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}

a:hover,
a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -2px;
  background: var(--name);
  animation: blink 1.1s steps(1) infinite;
}

/* The real prompt input, injected by JS as progressive enhancement. It grows
   with its content (width set inline, in ch) so the trailing .cursor block sits
   right after the text. The native caret is hidden so the blinking block stays
   the only cursor in every state — focusing the field doesn't swap its look. */
.cmd-input {
  width: 0;

  /* Cap growth at the screen width so a very long line scrolls inside the
     field instead of forcing a horizontal scrollbar on .screen.
     Using calc to leave room for the prompt and cursor so they don't wrap. */
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cmd);
  font: inherit;
  caret-color: transparent;
}

/* Modern browsers: let the engine size the input to its content natively,
   avoiding the JS ghost-element reflow path entirely. The width: 0 / JS path
   above remains the fallback for browsers that don't support field-sizing. */
@supports (field-sizing: content) {
  .cmd-input {
    width: auto;
    field-sizing: content;
  }
}

.cmd-input:focus {
  outline: none;
}

/* Command reply output, both real replies and denials. pre-wrap preserves the
   newlines and indentation of multi-line replies like the sudo lecture; echoed
   commands reuse .cmd/.prompt/.run above. */
.reply {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

/* The `help` listing: a preformatted block that keeps its aligned columns,
   in the page's own monospace rather than the UA <pre> default. */
.help {
  margin: 0;
  color: var(--muted);
  font: inherit;
  white-space: pre;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (width <= 520px) {
  body {
    padding: 14px;
    align-items: flex-start;
  }

  .screen {
    padding: 18px 16px 22px;
  }

  .whoami {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .ascii,
  .name {
    text-align: center;
  }

  .fields {
    display: block;
  }

  .fields dt {
    margin-top: 8px;
  }

  .fields dt:first-of-type {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}

@media print {
  body {
    display: block;
    padding: 0;
    background: #fff;
    color: #000;
  }

  .terminal {
    max-width: none;
    border: 0;
    border-radius: 0;
  }

  .titlebar,
  .cursor,
  .cmd-input {
    display: none;
  }

  .prompt,
  .run,
  .name,
  .proj,
  .fields dt {
    color: #000;
  }

  a {
    color: #000;
    border-bottom: 0;
  }
}