:root {
  --bg: #0b100d;
  --bg-raised: #101613;
  --fg: #c8d3c8;
  --dim: #7a8a7e; /* 5.27:1 on --bg — WCAG AA for normal text */
  --accent: #2ee66b;
  --accent-soft: rgba(46, 230, 107, 0.35);
  --link: #5fd7d0;
  --error: #ff6b6b;
  --border: #223028;
  --font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- subtle CRT flourish ---- */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ---- persistent top bar: key links always visible ---- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* full-bleed backdrop so content scrolling underneath stays hidden */
#topbar::before {
  content: "";
  position: absolute;
  inset: 0 -100vw;
  z-index: -1;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.brand-name {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-soft);
  white-space: nowrap;
}
.brand-role {
  color: var(--dim);
  font-size: 0.85em;
  white-space: nowrap;
}
.brand:hover .brand-name { text-decoration: underline dotted; text-underline-offset: 3px; }

.topbar-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.topbar-links a,
.topbar-links button {
  font-family: inherit;
  font-size: 0.88em;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.32em 0.7em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-links a:hover,
.topbar-links button:hover,
.topbar-links a:focus-visible,
.topbar-links button:focus-visible {
  color: var(--accent);
  border-color: var(--border);
  outline: none;
}
.topbar-links .cta {
  color: var(--accent);
  border-color: var(--accent-soft);
}
.topbar-links .cta:hover,
.topbar-links .cta:focus-visible {
  background: rgba(46, 230, 107, 0.12);
  border-color: var(--accent);
}

/* ---- terminal layout ---- */
#terminal {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  min-height: calc(100vh - 60px);
  cursor: text;
}

#output { word-wrap: break-word; }

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

.echo .prompt { margin-right: 0.6ch; }

/* ---- prompt + input ---- */
#input-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.prompt {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-soft);
  margin-right: 0.6ch;
  white-space: nowrap;
}

#input-display { white-space: pre-wrap; word-break: break-all; }

#caret {
  background: var(--accent);
  color: var(--bg);
  animation: blink 1.1s steps(2, start) infinite;
}

#terminal.blurred #caret { animation: none; background: transparent; outline: 1px solid var(--dim); }

@keyframes blink { 50% { background: transparent; color: inherit; } }

/* real input is visually hidden but focusable (mobile keyboards, paste, IME) */
#cmd-input {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0.01;
  font-size: 16px; /* prevents iOS focus zoom */
  background: transparent;
  color: transparent;
}

/* ---- output styling ---- */
a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent); }

.dim { color: var(--dim); }
.accent { color: var(--accent); }
.error { color: var(--error); }
.bold { font-weight: 700; }

/* The logo is painted with a real color and a text-shadow glow only.
   Deliberately NOT background-clip:text — a parent's text-clipped gradient
   is not painted through child row elements in WebKit, which rendered the
   whole logo invisible on iOS Safari. Animation here only ever moves color,
   opacity and transform, so the letterforms cannot vanish. */
.banner-art {
  color: var(--accent);
  line-height: 1.05;
  margin: 0 0 0.4rem;
  text-shadow: 0 0 12px var(--accent-soft);
}

/* One row per line; joined without newlines in js/commands.js so these block
   elements are the only thing creating line breaks. */
.banner-line { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Rows cascade in, then a teal wave drifts down the letterforms. */
  .banner-line {
    animation:
      bannerIn 0.4s ease-out both,
      bannerWave 4.5s ease-in-out infinite;
  }
  .banner-line:nth-child(1) { animation-delay: 0ms, 0ms; }
  .banner-line:nth-child(2) { animation-delay: 55ms, 140ms; }
  .banner-line:nth-child(3) { animation-delay: 110ms, 280ms; }
  .banner-line:nth-child(4) { animation-delay: 165ms, 420ms; }
  .banner-line:nth-child(5) { animation-delay: 220ms, 560ms; }
  .banner-line:nth-child(6) { animation-delay: 275ms, 700ms; }
}

/* Slide only — never opacity. An opacity-0 start state means the logo is
   invisible for as long as the animation has not run, which is exactly how
   it broke before. Animating transform alone keeps every row painted at
   every instant, whatever the browser does with the animation. */
@keyframes bannerIn {
  from { transform: translateX(-10px); }
  to { transform: none; }
}

@keyframes bannerWave {
  0%, 100% { color: var(--accent); }
  50% { color: #7ff0d4; }
}

pre {
  margin: 0.25rem 0;
  overflow-x: auto;
  line-height: 1.35;
  font-family: inherit;
  font-size: 0.92em;
}

.section-title {
  color: var(--accent);
  font-weight: 700;
  margin-top: 0.5rem;
}

.indent { padding-left: 2ch; }

/* clickable command tokens inside output */
.cmd {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.cmd:hover { text-shadow: 0 0 8px var(--accent-soft); }

/* clickable suggestion chips */
.chips { margin: 0.6rem 0 0.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.92em;
  padding: 0.3em 0.85em;
  border-radius: 5px;
  cursor: pointer;
}
.chip:hover, .chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.spacer { height: 0.8rem; }

/* virtual filesystem listings: dirs bold accent, files plain like real ls */
.fs-dir { font-weight: 700; text-decoration: none; }
.fs-file { color: var(--fg); text-decoration: none; }
.fs-file:hover, .fs-dir:hover { color: var(--accent); text-decoration: underline dotted; }

/* PR status glyphs (GitHub semantics: merged = violet, open = green) */
.pr-merged { color: #b493f5; }
.pr-open { color: #3fb950; }

/* experience list rows */
.xp-row { display: block; margin-bottom: 0.35rem; }
.xp-sub { padding-left: 4ch; display: inline-block; }
.xp-dates { color: var(--dim); }

/* skills: aligned cloud sub-providers */
.skill-row { white-space: pre-wrap; }
.skill-sub { color: var(--fg); font-weight: 700; }

/* contact key column */
.contact-key { color: var(--dim); }

/* stealth-mode marker on the current role */
.confidential { color: #d9a441; }

/* ---- noscript fallback ---- */
.noscript-fallback {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ---- responsive ---- */
@media (max-width: 700px) {
  body { font-size: 13.5px; }
  #terminal { padding: 0.9rem 0.7rem 3rem; }
  .banner-art { font-size: 0.78em; }

  #topbar {
    padding: 0.55rem 0.7rem;
    gap: 0.4rem;
  }
  .brand-role { display: none; }
  .topbar-links {
    gap: 0.15rem;
    width: 100%;
    justify-content: space-between;
  }
  .topbar-links a,
  .topbar-links button {
    font-size: 0.82em;
    padding: 0.3em 0.45em;
  }
  .xp-sub { padding-left: 4ch; }
}

@media (max-width: 380px) {
  .topbar-links .cta { padding: 0.3em 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
  #caret { animation: none; }
  .banner-art { animation: none; }
}