/* Catppuccin Mocha. Only a handful of the 26 accents are used, each with one job. */
:root {
  --base:     #1e1e2e;
  --mantle:   #181825;
  --crust:    #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text:     #cdd6f4;
  --lavender: #b4befe;
  --blue:     #89b4fa;
  --sky:      #89dceb;
  --teal:     #94e2d5;
  --green:    #a6e3a1;
  --yellow:   #f9e2af;
  --peach:    #fab387;
  --red:      #f38ba8;
  --mauve:    #cba6f7;

  /* Roles - change these, not the palette above. */
  --accent:   var(--mauve);   /* prompt, links, headings */
  --dir:      var(--blue);    /* directories */
  --ok:       var(--green);   /* resolvable command */
  --bad:      var(--red);     /* unknown command */
  --str:      var(--yellow);  /* quoted string */
  --flag:     var(--peach);   /* -f / --flag */
  --ghost:    var(--overlay0);/* autosuggestion */

  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --line: 1.55;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--crust);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: var(--line);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--lavender); }

/* Progressive enhancement: with JS, the terminal is the page.
   Without it, the plain CV below stays exactly where it is. */
.js .plain { display: none; }
.js .term[hidden] { display: none; }
.js .term { display: flex; }
.plain-mode .plain { display: block; }
.plain-mode .term { display: none; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--surface0);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--surface2);
  text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus-visible { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Terminal window ─────────────────────────────────────────────── */

.term {
  display: none;
  flex-direction: column;
  height: 100dvh;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--base);
  border-left: 1px solid var(--surface0);
  border-right: 1px solid var(--surface0);
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 10px 14px;
  background: var(--mantle);
  border-bottom: 1px solid var(--surface0);
  padding-top: max(10px, env(safe-area-inset-top));
}
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dots .d1 { background: var(--red); }
.dots .d2 { background: var(--yellow); }
.dots .d3 { background: var(--green); }

.term-title {
  flex: 1;
  text-align: center;
  color: var(--overlay1);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plain-toggle, .linkish {
  font: inherit;
  font-size: 12.5px;
  color: var(--overlay1);
  background: transparent;
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
.plain-toggle:hover, .linkish:hover { color: var(--text); border-color: var(--surface2); }
.linkish { border: 0; color: var(--accent); padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.term-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* Persistent nav: the commands stay written out and clickable at all times,
   so a page never replaces the way back to the other pages. */
.nav {
  flex: 0 0 26ch;
  overflow-y: auto;
  padding: 16px 10px;
  background: var(--mantle);
  border-right: 1px solid var(--surface0);
}
.nav-group {
  color: var(--overlay0);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 8px 4px;
}
.nav-group:first-child { padding-top: 0; }
.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--ok);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item::before { content: "❯ "; color: var(--accent); }
.nav-item:hover { background: var(--surface0); color: var(--text); }
.nav-item[aria-current="page"] {
  background: var(--surface0);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 8px;
  scrollbar-color: var(--surface2) transparent;
}
.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 10px; }

/* ── Output ──────────────────────────────────────────────────────── */

.row { white-space: pre-wrap; word-break: break-word; }
.blank { height: .75em; }

.prompt { white-space: pre; }
.p-user { color: var(--accent); font-weight: 600; }
.p-path { color: var(--teal); }
.p-caret { color: var(--green); }
.p-err   { color: var(--red); }

.o-h1 { color: var(--accent); font-weight: 700; margin-top: .3em; }
.o-h2 { color: var(--lavender); font-weight: 700; margin-top: .6em; }
.o-h3 { color: var(--sky); font-weight: 600; margin-top: .5em; }
.o-rule { color: var(--surface2); }
.o-bullet { color: var(--accent); }
.o-dim { color: var(--overlay1); }
.o-err { color: var(--red); }
.o-code { color: var(--teal); background: var(--mantle); }
.o-codeblock { color: var(--subtext1); background: var(--mantle); display: block; padding: 8px 12px; border-left: 2px solid var(--surface2); margin: .4em 0; }
.o-b { color: var(--text); font-weight: 700; }
.o-i { font-style: italic; color: var(--subtext1); }
.o-todo { color: var(--yellow); }

.f-dir  { color: var(--dir); font-weight: 600; }
.f-file { color: var(--text); }

/* Anything the visitor can click: file names, links, chips. */
.hit {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.hit:hover { filter: brightness(1.25); }

/* Boot menu: the primary way in. Written out, clickable, no typing required. */
.menu-cmd {
  color: var(--ok);
  border-bottom: 0;
  padding: 1px 6px;
  margin-left: -6px;
  border-radius: 5px;
}
.menu-cmd:hover { background: var(--surface0); color: var(--text); filter: none; }

.ls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21ch, 1fr));
  gap: 0 2ch;
}

/* Pinned header: always the first thing in the output, never replaced by a
   page. It scrolls with the content rather than being fixed, so a long page
   still gets the full height to be read in. */
.header {
  padding-bottom: .7em;
  margin-bottom: .9em;
  border-bottom: 1px solid var(--surface0);
}

.neofetch { display: flex; gap: 3ch; align-items: flex-start; }
.neofetch .art { flex: 0 0 auto; white-space: pre; color: var(--accent); }
.neofetch .info { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) { .neofetch .art { display: none; } }

/* ── Input line ──────────────────────────────────────────────────── */

.inputline { display: flex; align-items: baseline; white-space: pre; }
.editor { position: relative; flex: 1 1 auto; min-width: 0; }

.editor .render {
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 1.55em;
  display: block;
}
.editor input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  outline: none;
  resize: none;
  overflow: hidden;
}
.editor input::selection { background: var(--surface2); color: transparent; }

.t-cmd-ok  { color: var(--ok); }
.t-cmd-bad { color: var(--bad); }
.t-arg     { color: var(--text); }
.t-path    { color: var(--dir); text-decoration: underline; text-underline-offset: 3px; }
.t-flag    { color: var(--flag); }
.t-str     { color: var(--str); }
.t-ghost   { color: var(--ghost); }

.caret {
  display: inline-block;
  width: 0.6em;
  margin-right: -0.6em;
  background: var(--accent);
  color: var(--base);
  animation: blink 1.05s steps(1) infinite;
}
.caret.wide { margin-right: 0; }
.blurred .caret { background: transparent; box-shadow: inset 0 0 0 1px var(--overlay1); animation: none; }
@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* ── Plain document ──────────────────────────────────────────────── */

.plain {
  background: var(--base);
  min-height: 100%;
  padding: 40px 20px 80px;
}
.plain-inner { max-width: 72ch; margin: 0 auto; }
.plain h1 { color: var(--accent); font-size: 1.6rem; margin: 1.8em 0 .4em; }
.plain h1:first-child { margin-top: 0; }
.plain h2 { color: var(--lavender); font-size: 1.15rem; margin: 1.4em 0 .3em; }
.plain h3 { color: var(--sky); font-size: 1rem; margin: 1.2em 0 .3em; }
.plain p, .plain li { color: var(--subtext1); }
.plain li { margin: .25em 0; }
.plain strong { color: var(--text); }
.plain em { color: var(--subtext0); }
.plain code { color: var(--teal); background: var(--mantle); padding: 1px 5px; border-radius: 4px; }
.plain pre { background: var(--mantle); padding: 10px 14px; border-left: 2px solid var(--surface2); overflow-x: auto; }
.plain hr { border: 0; border-top: 1px solid var(--surface0); margin: 2.4em 0; }
.plain-head { color: var(--overlay1); font-size: 13px; }
.plain-foot { color: var(--overlay1); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .caret { animation: none; }
}

@media (max-width: 760px) {
  /* Nav moves above the output and wraps, rather than eating a third of a
     phone screen as a column. */
  .term-body { flex-direction: column; }
  .nav {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--surface0);
    max-height: 30vh;
  }
  .nav-group { display: none; }
  .nav-item {
    width: auto;
    background: var(--surface0);
    border: 1px solid var(--surface1);
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  html, body { font-size: 14px; }
  .screen { padding: 12px 12px 6px; }
  .term-title { font-size: 11.5px; }
}