:root {
  --bg: #0f100d;
  --fg: #F8F8F2;
  --comment: #75715E;
  --line: #3E3D32;
  --green: #A6E22E;
  --cyan: #66D9EF;
  --yellow: #E6DB74;
  --orange: #FD971F;
  --pink: #F92672;
  --purple: #AE81FF;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --col: 100ch;
  --bar: 2rem;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--mono);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* JS on: the page is one screen, the terminal is the scrollback, the bar sits under it. */
html.js body { height: 100vh; height: 100dvh; overflow: hidden; }
html:not(.js) body { min-height: 100vh; }

.terminal, main {
  width: 100%;
  padding: 2rem;
}
main { max-width: var(--col); margin: 0 auto; }

/* Full-width scroll container so the scrollbar sits at the window edge; padding centres the column. */
.terminal {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-left: max(2rem, calc((100% - var(--col)) / 2));
  padding-right: max(2rem, calc((100% - var(--col)) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  scrollbar-gutter: stable;
}
.terminal::-webkit-scrollbar { width: 8px; }
.terminal::-webkit-scrollbar-track { background: transparent; }
.terminal::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.terminal::-webkit-scrollbar-thumb:hover { background: var(--comment); }

@media (max-width: 640px) {
  .terminal, main { padding: 1rem; }
}

/* JS off: content renders stacked, no bar. */
html.js main { display: none; }
html:not(.js) .terminal, html:not(.js) .status { display: none; }

a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--yellow); outline-offset: 2px; }

h2 {
  color: var(--yellow);
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 .4em;
}
h2::before { content: "# "; color: var(--pink); }

p { margin: 0 0 .6em; }

section { margin: .4em 0 1.2em; }
main section:last-child { margin-bottom: 0; }

/* ---- inline colour tokens ---- */

.c-green { color: var(--green); }
.c-cyan { color: var(--cyan); }
.c-yellow { color: var(--yellow); }
.c-orange { color: var(--orange); }
.c-pink { color: var(--pink); }
.c-purple { color: var(--purple); }

/* ---- prompt ---- */

.prompt-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
}

.prompt { white-space: pre; margin-right: 1ch; }
.prompt .dir { color: var(--cyan); }
.prompt .sigil { color: var(--green); font-weight: 700; }
.prompt-line[data-status="err"] .sigil { color: var(--pink); }

#cmd {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  width: 1ch;
  max-width: 100%;
  caret-color: transparent;
}
#cmd:focus { outline: none; }

.cursor {
  display: inline-block;
  width: 1ch;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--fg);
  opacity: .55;
}
.prompt-line:focus-within .cursor {
  opacity: 1;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .prompt-line:focus-within .cursor { animation: none; }
}

/* ---- log ---- */

.log .echo { white-space: pre-wrap; margin-top: .8em; }
.log .echo:first-child { margin-top: 0; }
.log .banner { margin: 0; }
.log .banner .name { color: var(--green); font-weight: 700; }
.log .banner .role { color: var(--yellow); }
.log .banner .place { color: var(--cyan); }
.log .hint, .log .muted { color: var(--comment); }
.log .error { color: var(--pink); }

.help { margin: .4em 0 0; }
.help ul { list-style: none; margin: 0; padding: 0; }
.help li {
  display: grid;
  grid-template-columns: 12ch 1fr;
  column-gap: 1ch;
}
.help .desc { color: var(--comment); }
.help .desc code { color: var(--orange); font: inherit; }

button.cmd {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--green);
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
button.cmd:hover, button.cmd:focus { text-decoration: underline; }
button.cmd.active { color: var(--yellow); }

/* ---- tool output (kubectl, ncli, acli) ---- */

.log pre.out {
  margin: .3em 0 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log pre.out .th { color: var(--comment); font-weight: 700; }
.log pre.out .key { color: var(--purple); }
.log pre.out .ok { color: var(--green); }
.log pre.out .bad { color: var(--pink); }
.log pre.out .org { color: var(--cyan); }
.log pre.out .num { color: var(--orange); }
.log pre.out .muted { color: var(--comment); }
.log pre.usage { color: var(--comment); }

/* ---- eggs ---- */

.log pre.out .dir { color: var(--cyan); font-weight: 700; }
.log pre.out .exe { color: var(--green); }
.log pre.man .h { color: var(--yellow); font-weight: 700; }
.log pre.man .b { color: var(--fg); font-weight: 700; }
.neofetch { display: flex; flex-wrap: wrap; gap: .4em 4ch; margin-top: .3em; }
.neofetch pre { margin: 0; font: inherit; }
.neofetch .logo { color: var(--green); line-height: 1.15; }
.neofetch .title { color: var(--green); font-weight: 700; }
.neofetch .key { color: var(--purple); }
.neofetch .sw { display: inline-block; width: 3ch; height: 1.1em; vertical-align: text-bottom; }
.log pre.sl { white-space: pre; line-height: 1.15; color: var(--fg); animation: sl 7s linear forwards; }
@keyframes sl { from { transform: translateX(100%); } to { transform: translateX(-110%); } }
@media (prefers-reduced-motion: reduce) { .log pre.sl { animation: none; } }

/* ---- content lists ---- */

.timeline, .projects, .contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li, .projects li, .contact li {
  display: grid;
  column-gap: 1ch;
  margin-bottom: .9em;
}
.contact li { margin-bottom: 0; }

.timeline li { grid-template-columns: 12ch 1fr; }
.projects li { grid-template-columns: 24ch 1fr; }
.contact li { grid-template-columns: 10ch 1fr; }

.timeline .period { color: var(--orange); grid-row: 1 / span 4; }
.timeline .title, .timeline .org, .timeline .note, .timeline .tags { grid-column: 2; }
.timeline .title { color: var(--yellow); }
.timeline .current .title::after { content: " ●"; color: var(--green); }
.timeline .org { color: var(--cyan); }
.timeline .note { color: var(--comment); }

.tags { color: var(--purple); }
.tags span::before { content: "["; color: var(--line); }
.tags span::after { content: "]"; color: var(--line); }
.tags span { margin-right: 1ch; }

.projects .name { color: var(--green); grid-row: 1 / span 2; font-weight: 700; }
.projects .desc, .projects .meta { grid-column: 2; }
.projects .version { color: var(--orange); }
.projects .lang { color: var(--orange); margin-right: 1.5ch; }
.projects .lang::before { content: "⬢ "; }

.contact .label { color: var(--purple); }

@media (max-width: 640px) {
  .timeline li, .projects li, .contact li { grid-template-columns: 1fr; }
  .timeline .period, .projects .name { grid-row: auto; }
  .timeline .title, .timeline .org, .timeline .note, .timeline .tags,
  .projects .desc, .projects .meta { grid-column: 1; }
  .help li { grid-template-columns: 10ch 1fr; }
}

/* ---- powerline status bar ---- */

.status {
  flex: none;
  display: flex;
  align-items: stretch;
  height: var(--bar);
  line-height: var(--bar);
  background: var(--line);
  color: var(--fg);
  white-space: pre;
  overflow: hidden;
  font-weight: 600;
}
.status .seg { padding: 0 1.2ch; }
.status .spacer { flex: 1; }
.status .arrow { width: 0; border-top: calc(var(--bar) / 2) solid transparent; border-bottom: calc(var(--bar) / 2) solid transparent; }
.status .s1 { background: var(--yellow); color: var(--bg); }
.status .a1 { border-left: .7rem solid var(--yellow); }
.status .windows { display: flex; gap: 2ch; padding: 0 1.5ch; }
.status .windows button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}
.status .windows button:hover { color: var(--cyan); }
.status .windows button.active { color: var(--green); }
.status .windows button.active::after { content: "*"; }
.status .a3 { border-right: .7rem solid var(--green); }
.status .s3 { background: var(--green); color: var(--bg); }
.status .a4 { border-right: .7rem solid var(--orange); background: var(--green); }
.status .s4 { background: var(--orange); color: var(--bg); }

@media (max-width: 640px) {
  :root { --bar: 2.4rem; }
  .status .s4, .status .a4, .status .s3, .status .a3 { display: none; }
  .status .seg { padding: 0 .8ch; }
  .status .windows { gap: 1.2ch; padding: 0 1ch; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}