/* ============================================================
   whoami — an engineer's portfolio rendered as a source file
   Aesthetic: a designed code editor. Amber-phosphor accent
   (a nod to amber CRT monitors) instead of the terminal-green cliché.
   ============================================================ */

:root {
  /* surfaces */
  --bg:        #0f1216;   /* ink */
  --panel:     #14181f;   /* tab bar, status bar, project hover */
  --gutter-bg: #0c0f14;   /* line-number column */
  --line:      #1d2530;   /* hairline borders */

  /* text */
  --fg:        #b8c2cf;   /* default / punctuation */
  --fg-strong: #e8edf2;   /* property names, headings */
  --comment:   #8b98a8;   /* comments — they carry prose, kept readable */
  --linenum:   #3a4555;   /* gutter numbers */

  /* the three accents — restraint */
  --amber:     #e6b450;   /* the person, the cursor, the branch */
  --rose:      #d98a9b;   /* keywords */
  --cyan:      #84b6cc;   /* strings & links */

  --gut: 4ch;             /* gutter width */
  --col: 1080px;          /* editor column */
  --tab-h: 44px;
  --status-h: 30px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--status-h);
}

a { color: inherit; text-decoration: none; }

/* keyboard focus — visible, on-brand */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; }

/* ===== Tab bar ===== */
.tabbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: stretch;
  height: var(--tab-h);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.window-dots { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--line); }
.window-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); background: #0c0f14; }
.window-dots i:first-child { border-color: var(--amber); }

.tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 0;
  padding: 0 18px; white-space: nowrap;
  color: var(--comment); font-size: 0.85rem; font-weight: 500;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s;
}
.tab .ext { color: var(--linenum); }
.tab:hover { color: var(--fg); background: #11151c; }
.tab.is-active { color: var(--fg-strong); background: var(--bg); border-bottom-color: var(--amber); }
.tab.is-active .ext { color: var(--amber); }

.tabbar-path { margin-left: auto; display: flex; align-items: center; padding: 0 20px; color: var(--linenum); font-size: 0.8rem; }

/* ===== Editor column ===== */
.editor { max-width: var(--col); margin: 0 auto; padding: 0 20px; }

.pane { padding: 64px 0; border-bottom: 1px solid var(--line); scroll-margin-top: var(--tab-h); }
.pane--last { border-bottom: 0; padding-bottom: 96px; }
.pane-label { margin: 0 0 22px; padding-left: var(--gut); color: var(--comment); font-size: 0.82rem; letter-spacing: 0.02em; }
.pane-label .dim { color: var(--linenum); }
.pane-label .ext { color: var(--amber); }

/* ===== Code lines + auto line numbers (CSS counter) =====
   Number is absolutely positioned in the gutter; the code itself
   stays in normal inline flow so multiple <span>s render together.
   Wrapped lines hang-indent under the code, never under the gutter. */
.code { counter-reset: ln; }
.line {
  position: relative;
  padding-left: calc(var(--gut) + 2ch);
  min-height: 1.75em;
  white-space: pre-wrap;
  word-break: break-word;
}
.line::before {
  counter-increment: ln;
  content: counter(ln);
  position: absolute;
  left: 0;
  width: var(--gut);
  text-align: right;
  color: var(--linenum);
  font-size: 0.82rem;
  -webkit-user-select: none; user-select: none;
}
.indent  { padding-left: calc(var(--gut) + 4ch); }
.indent2 { padding-left: calc(var(--gut) + 6ch); }

/* hero gets larger type — it's the thesis */
.code--hero { font-size: clamp(1rem, 2.4vw, 1.5rem); line-height: 1.7; }
.code--hero .line { min-height: 1.7em; }
.code--hero .line::before { font-size: 0.65em; }

/* ===== Syntax tokens ===== */
.cmt    { color: var(--comment); font-style: italic; }
.kw     { color: var(--rose); }
.prop   { color: var(--fg-strong); }
.key    { color: var(--fg); }
.str    { color: var(--cyan); }
.punc   { color: var(--linenum); }
.name   { color: var(--amber); font-weight: 700; }   /* the person's name pops */
.h1     { color: var(--amber); font-weight: 700; }

/* blinking block cursor at the end of the typed status line */
.caret { color: var(--amber); font-weight: 400; }
.caret.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== Links ===== */
.link { color: var(--cyan); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--cyan) 55%, transparent); transition: color 0.15s, border-color 0.15s; }
.link:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ===== Project blocks ===== */
.proj { border-radius: 6px; transition: background 0.15s, box-shadow 0.15s; }
.proj:hover { background: var(--panel); box-shadow: inset 2px 0 0 var(--amber); }
.proj .name { font-size: 1.05em; }

/* ===== Contact commands ===== */
.cmd { align-items: center; }
.prompt  { color: var(--amber); font-weight: 700; }
.builtin { color: var(--rose); }
.arg     { color: var(--cyan); }
.copy {
  margin-left: 1.5ch; padding: 1px 9px; font: inherit; font-size: 0.72rem;
  color: var(--comment); background: transparent;
  border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.copy:hover { color: var(--amber); border-color: var(--amber); }
.copy.done { color: var(--bg); background: var(--amber); border-color: var(--amber); }

/* ===== Status bar ===== */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 0;
  height: var(--status-h);
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--comment); font-size: 0.74rem;
}
.statusbar .st-branch { color: var(--amber); padding: 0 14px; height: 100%; display: flex; align-items: center; }
.st-dirty { color: var(--rose); }
.st-seg { padding: 0 12px; height: 100%; display: flex; align-items: center; border-left: 1px solid var(--line); }
.st-file { color: var(--fg); }
.st-spacer { flex: 1; }
.st-ok { color: var(--amber); }

/* ===== Responsive ===== */
@media (max-width: 680px) {
  :root { --gut: 2.5ch; }
  body { font-size: 13.5px; }
  .tabbar-path { display: none; }
  .window-dots { padding: 0 12px; }
  .tab { padding: 0 13px; }
  .code--hero { font-size: 1.05rem; }
  .st-pos, #stPos, .st-ok { display: none; }
  .pane { padding: 44px 0; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret.blink { animation: none; }
  * { transition: none !important; }
}