/* TUI palette — deep slate, warm amber accent. Dark only, on purpose. */
:root {
  --bg: #101216;
  --panel: #14171c;
  --border: #2a2f38;
  --fg: #c2c8d2;
  --dim: #6b7385;
  --amber: #d7a65f;
  --green: #8fae72;
  --red: #c96f6f;
  --sel-fg: #101216;
}

/* light terminal scheme — warm paper, accents dark enough to pop */
:root[data-theme="light"] {
  --bg: #eae7e0;
  --panel: #f2f0ea;
  --border: #c8c3b6;
  --fg: #33373d;
  --dim: #6d7078;
  --amber: #7d5717;
  --green: #47613b;
  --red: #91403f;
  --sel-fg: #f2f0ea;
}

/* theme switch: repaint top-to-bottom in chunky scanline steps */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: theme-wipe 0.45s steps(24) forwards; }
  @keyframes theme-wipe {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0); }
  }
}

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

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.55;
  height: 100svh;
  overflow: hidden; /* the screen is the terminal; only panes scroll */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.term {
  width: min(88ch, 100% - 2ch);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 1rem;
}

/* very short viewports (phone landscape): fall back to normal page scroll */
@media (max-height: 420px) {
  body { height: auto; min-height: 100svh; overflow: auto; }
  .term { height: auto; }
}

::selection { background: var(--amber); color: var(--sel-fg); }

a { color: var(--amber); text-decoration: none; }
a:hover { background: var(--amber); color: var(--sel-fg); }
a:focus-visible, .tabs a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

/* ── prompt lines ────────────────────────────── */
.prompt { color: var(--dim); margin-bottom: 1rem; }
.prompt .user { color: var(--green); }
.prompt .path { color: var(--amber); }

/* live shell prompt — a bar across the pane bottom, tmux-statusline style */
.prompt.live {
  display: flex;
  flex-shrink: 0;
  margin: 1rem -2ch 0; /* bleed to the pane edges */
  padding: 0.35rem 2ch;
  background: var(--bg);
  border-top: 1px solid var(--border);
  color: var(--fg);
}
.prompt.live:focus-within {
  border-top-color: var(--amber);
}

/* cmd mode: prompt focused → rest of the pane recedes, statusbar says so */
main > :not(.prompt.live):not(#scrollback),
.tabs {
  transition: opacity 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  main > :not(.prompt.live):not(#scrollback), .tabs { transition: none; }
}
body:has(#cmd:focus) main > :not(.prompt.live):not(#scrollback),
body:has(#cmd:focus) .tabs {
  opacity: 0.45;
}
body:has(#cmd:focus) .statusbar .hints { display: none; }
body:has(#cmd:focus) .statusbar::before {
  content: "-- cmd --  enter run · esc back to keys";
  color: var(--amber);
}
.prompt.live label { white-space: nowrap; }
.prompt.live .cmdbox {
  flex: 1;
  position: relative;
  display: flex;
}
.prompt.live input {
  flex: 1;
  min-width: 4ch;
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  caret-color: transparent; /* real caret hidden; .caret block below replaces it */
}
.prompt.live input::placeholder { color: var(--dim); opacity: 0.7; }

/* block cursor, terminal style — positioned by --caret-pos from app.js */
.caret {
  display: none;
  position: absolute;
  left: calc(var(--caret-pos, 0) * 1ch);
  top: 0;
  bottom: 0;
  width: 1ch;
  background: var(--fg);
  mix-blend-mode: difference; /* inverts the character under the block */
  pointer-events: none;
  animation: blink 1.1s steps(1) infinite;
}
.prompt.live input:focus + .caret { display: block; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* output of the last typed command, shown inside the pane */
#scrollback {
  margin-top: 1rem;
  max-height: 62svh; /* tall output scrolls itself, never displaces the prompt */
  overflow-y: auto;
  flex-shrink: 0;
}
#scrollback:empty { display: none; }
#scrollback .line { white-space: pre-wrap; word-break: break-word; }
#scrollback .cmdline { color: var(--dim); }
#scrollback .cmdline .user { color: var(--green); }
#scrollback .cmdline .path { color: var(--amber); }
#scrollback pre { overflow-x: auto; }

/* ── ascii banner ────────────────────────────── */
.banner {
  color: var(--amber);
  line-height: 1.2;
  font-size: min(15px, 1.5vw + 4px);
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

/* ── tab bar ─────────────────────────────────── */
.tabs {
  display: flex;
  gap: 1ch;
  margin-bottom: -1px; /* tabs sit on the pane border */
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.tabs a {
  color: var(--dim);
  padding: 0 1ch;
  border: 1px solid transparent;
}
.tabs a:hover { background: none; color: var(--fg); }
.tabs a[aria-current="page"] {
  color: var(--amber);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--panel);
  background: var(--panel);
}
.tabs .key { color: var(--dim); }
.tabs a[aria-current="page"] .key { color: var(--fg); }

/* ── main pane ───────────────────────────────── */
main {
  flex: 1;
  min-height: 0; /* lets .pane-scroll shrink and scroll instead of overflowing */
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.25rem 2ch 0;
}

.pane-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 1ch; /* clearance so text never sits under the scrollbar */
}

/* scrollbar as a TUI gutter: dashed rail, solid block thumb.
   Standard props only where ::-webkit-scrollbar is unsupported (firefox):
   in chrome, setting scrollbar-color would disable the webkit styling below. */
@supports not selector(::-webkit-scrollbar) {
  .term * {
    scrollbar-width: thin;
    scrollbar-color: var(--dim) var(--panel);
  }
}
.term *::-webkit-scrollbar { width: 8px; height: 8px; }
.term *::-webkit-scrollbar-track {
  /* 2px dashed center line, like a ┆ rail */
  background: repeating-linear-gradient(
    to bottom,
    var(--border) 0 5px,
    transparent 5px 11px
  );
  background-clip: content-box;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.term *::-webkit-scrollbar-thumb {
  background: var(--dim);
}
.term *::-webkit-scrollbar-thumb:hover {
  background: var(--amber);
}
.term *::-webkit-scrollbar-corner {
  background: transparent;
}

h1, h2 {
  font-size: 1em;
  font-weight: 700;
  color: var(--amber);
  text-transform: lowercase;
  margin-bottom: 1rem;
}
h1::before, h2::before { content: "── "; color: var(--border); }
h1::after, h2::after { content: " ──"; color: var(--border); }

section + section { margin-top: 1.5rem; }

p + p { margin-top: 0.75rem; }

.dim { color: var(--dim); }
.ok { color: var(--green); }
.err { color: var(--red); }

/* ── portrait ────────────────────────────────── */
.intro { display: flex; gap: 3ch; align-items: flex-start; }
.intro > div { flex: 1; }
.portrait {
  flex: 0 0 22ch;
  border: 1px solid var(--border);
  padding: 0.5rem 0.5rem 0.25rem;
  background: var(--bg);
}
.portrait img {
  display: block;
  width: 100%;
  /* muted color: real colors kept, desaturated + warmed to sit in the palette */
  filter: saturate(0.55) sepia(0.08) brightness(0.93) contrast(1.02);
}
.portrait figcaption {
  color: var(--dim);
  text-align: center;
  padding-top: 0.25rem;
}
.portrait figcaption::before { content: "── "; color: var(--border); }
.portrait figcaption::after { content: " ──"; color: var(--border); }

@media (max-width: 640px) {
  .intro { flex-direction: column-reverse; }
  .portrait { flex-basis: auto; width: min(22ch, 60%); }
}

/* key-value rows (about page facts, contact) */
.kv { display: grid; grid-template-columns: 12ch 1fr; row-gap: 0.15rem; }
.kv dt { color: var(--dim); }
.kv dt::after { content: " :"; }

ul.plain { list-style: none; }
ul.plain li::before { content: "· "; color: var(--dim); }

/* ── experience entries: git-log style timeline ─ */
.entry {
  position: relative;
  margin-left: 0.5ch;
  padding-left: 3ch;
  padding-bottom: 1.5rem;
  border-left: 1px solid var(--border); /* the rail */
}
.entry:last-child { padding-bottom: 0.25rem; border-left-color: transparent; }
.entry::before {
  content: "●";
  position: absolute;
  left: -0.55ch;
  top: 0;
  color: var(--dim);
  background: var(--panel); /* masks the rail behind the dot */
  line-height: inherit;
}
.entry.current::before { color: var(--amber); }
.entry-head { display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; }
.entry-head .role { color: var(--fg); font-weight: 700; }
.entry-head .period { color: var(--dim); }
.entry .org { color: var(--amber); }
.entry .loc { color: var(--dim); }
.entry ul { list-style: none; margin-top: 0.35rem; }
.entry ul li { padding-left: 2ch; }
.entry ul li::before { content: "- "; margin-left: -2ch; color: var(--dim); }
.entry .tech { margin-top: 0.35rem; color: var(--dim); }
.entry .tech span { color: var(--green); }
.entry .tech span::before { content: "["; color: var(--dim); }
.entry .tech span::after { content: "]"; color: var(--dim); }

/* ── repo list ───────────────────────────────── */
.repo { padding: 0.6rem 0; border-bottom: 1px dashed var(--border); }
.repo:last-child { border-bottom: none; }
.repo-head { display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; }
.repo-head a { font-weight: 700; }
.repo-meta { color: var(--dim); white-space: nowrap; }
.repo-desc { color: var(--fg); }
.repo-lang::before {
  content: "● ";
  color: var(--lang-color, var(--dim));
}

/* loading/error boxes inside panes */
.notice { color: var(--dim); }
.notice.err { color: var(--red); }

/* ── status bar ──────────────────────────────── */
.statusbar {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  border: 1px solid var(--border);
  border-top: none;
  background: var(--bg);
  color: var(--dim);
  padding: 0.15rem 1ch;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.statusbar .key { color: var(--amber); }
.statusbar .sbright { display: flex; gap: 2ch; }
#themetoggle {
  background: none;
  border: none;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
#themetoggle:hover { color: var(--amber); }
#themetoggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .statusbar .hints-extra { display: none; }
  .kv { grid-template-columns: 1fr; }
  .kv dt::after { content: ":"; }
}