/* Layout and component structure, shared by every theme.
   Only semantic tokens here; each theme's decoration lives in css/themes/. */

/* ---- Layout: a grid of panes --------------------------------------------- */

.page {
  position: relative; z-index: 1; /* above the theme backdrop */
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--line) var(--pad-x) calc(var(--line) * 2);
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "about" "experience" "skills" "projects" "contact";
}

@media (min-width: 64rem) {
  .page {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "hero     hero"
      "about    experience"
      "skills   experience"
      "projects projects"
      "contact  contact";
    align-items: start;
  }
}

.hero       { grid-area: hero; }
#about      { grid-area: about; }
#experience { grid-area: experience; }
#skills     { grid-area: skills; }
#projects   { grid-area: projects; }
#contact    { grid-area: contact; }

/* Decorative layers behind the page (grid floor, sun). Themes opt in. */
.backdrop { display: none; }

/* ---- Pane: a window with a title bar ------------------------------------- */

.pane {
  min-width: 0;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--glow-box);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.pane__bar {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 0 1ch;
  white-space: nowrap;
  overflow: hidden;
  color: var(--border-strong);
  text-shadow: none;
  border-bottom: var(--border-w) solid var(--border);
}
.pane__bar :is(h1, h2, h3) {
  flex: none;
  color: var(--accent);
  text-shadow: var(--glow-title);
}
.pane__fill { flex: 1; overflow: hidden; }
.pane__status { flex: none; color: var(--accent); text-shadow: var(--glow-body); }

.pane__body { padding: var(--line) var(--pad-x); }
.pane__body > * + * { margin-top: var(--line); }

/* Panes nest (project windows inside ~/projects); keep inner text wide on phones. */
@media (max-width: 40rem) {
  .pane .pane .pane__body { padding-inline: 1ch; }
  .pane__body:has(> .projects) { padding-inline: 1ch; }
}

/* Set by the shell when it jumps to a pane: the title bar inverts briefly. */
@keyframes pane-flash { 0%, 60% { background: var(--accent); color: var(--on-accent); } }
.pane.is-active > .pane__bar,
.pane.is-active > .pane__bar :is(h2, h3) { animation: pane-flash 1.2s steps(2) 1; }

/* ---- Hero ----------------------------------------------------------------- */

.hero { padding-top: var(--line); }
.hero > * + * { margin-top: var(--line); }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2ch; }
/* Theme-specific pieces of markup. Each is off unless a theme turns it on. */
.ascii, .brand, .topnav, .irc-head, .ls__icon, .eyebrow, .lede { display: none; }
.hero__name { font-size: var(--text-hero, var(--text-2xl)); line-height: 1.25; }
.hero__role { font-size: var(--text-lg); }

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h, auto);
  padding: var(--btn-pad, 0 0.5ch);
  font: inherit;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui, 0);
  text-decoration: none;
  color: var(--accent);
  background: transparent;
  border: var(--btn-border, 0);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.btn__label { display: inline-flex; align-items: center; gap: 1ch; }
.btn:hover, .btn:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
  text-shadow: none;
}
.btn:active { transform: translateY(1px); }
.btn--alt { color: var(--accent-2); }
.btn--alt:hover, .btn--alt:focus-visible { background: var(--accent-2); }

.actions { display: flex; flex-wrap: wrap; gap: 1ch 2ch; }

/* ---- Icons (Lucide) ------------------------------------------------------- */

.icon {
  width: 1em; height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: var(--icon-cap, round);
  stroke-linejoin: var(--icon-join, round);
}

/* ---- Status, flags, bars -------------------------------------------------- */

.ok::before   { content: "[OK] ";   color: var(--accent); }
.warn::before { content: "[WARN] "; color: var(--accent-2); }
.fail::before { content: "[ERR] ";  color: var(--error); }

.flags { display: flex; flex-wrap: wrap; gap: 0.5ch 2ch; color: var(--fg-dim); text-shadow: none; }

.bar { white-space: pre; }
.bar__fill { color: var(--accent); }
.bar__empty { color: var(--border-strong); text-shadow: none; }

/* ---- Stats: key / value readout ------------------------------------------ */

.stats > div { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.stats dt { flex: none; width: 14ch; color: var(--fg-dim); text-shadow: none; }
.stats dd { flex: 1; min-width: 20ch; color: var(--accent); }

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

.log > li + li { margin-top: var(--line); padding-top: var(--line); border-top: var(--border-w) dashed var(--border); }
.log__commit { color: var(--accent-2); text-shadow: var(--glow-accent-2); }
.log__ref { color: var(--accent); }
.log__meta { color: var(--fg-dim); text-shadow: none; }
.log__title { margin-top: calc(var(--line) / 2); color: var(--accent); }
/* The marker is positioned, not a flex item, so links inside a bullet flow
   inline with its text. */
.log__points li { position: relative; padding-left: 2ch; }
.log__points li::before { content: "-"; position: absolute; left: 0; color: var(--fg-dim); }

/* ---- Skills --------------------------------------------------------------- */

.ls > div + div { margin-top: var(--line); }
.ls dt { color: var(--accent-2); text-shadow: var(--glow-accent-2); }
.ls dd { display: grid; grid-template-columns: repeat(auto-fill, minmax(16ch, 1fr)); gap: 0 2ch; padding-left: 2ch; }

/* ---- Projects ------------------------------------------------------------- */

.projects { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 44ch), 1fr)); }
.project .pane__body { display: flex; flex-direction: column; }
.project .actions { margin-top: auto; padding-top: var(--line); }

/* ---- Contact -------------------------------------------------------------- */

.contact-list li { display: flex; gap: 2ch; align-items: baseline; flex-wrap: wrap; }
.contact-list .key { flex: none; width: 10ch; color: var(--fg-dim); text-shadow: none; }
.contact-list a { display: inline-flex; gap: 1ch; align-items: center; }

/* ---- Theme toggle --------------------------------------------------------- */

.theme-toggle { flex: none; margin-left: auto; font-size: var(--text-sm); }

/* ---- Shell: pinned prompt with an output drawer --------------------------- */

.shell {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--shell-bg, var(--bg));
  border-top: var(--border-w) solid var(--border);
  backdrop-filter: var(--shell-blur, none);
}
.shell__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--pad-x); }

.shell__out {
  max-height: calc(var(--line) * 10);
  overflow-y: auto;
  padding-top: calc(var(--line) / 2);
  white-space: pre-wrap;
}
.shell__out:empty { display: none; }
.shell__out .echo { color: var(--fg-dim); text-shadow: none; }

.prompt { display: flex; gap: 1ch; align-items: baseline; padding: calc(var(--line) / 2) 0; }
.prompt__ps1 { flex: none; color: var(--fg-dim); text-shadow: none; }
.prompt__ps1 b { color: var(--accent); font-weight: 400; }
.prompt__field { position: relative; flex: 1; min-width: 0; }
.prompt__input {
  width: 100%;
  padding: 0; border: 0; border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font: inherit;
  text-shadow: var(--glow-body);
  caret-color: transparent; /* the block cursor below replaces the caret */
}
.prompt__input:focus-visible { outline: none; background: transparent; color: var(--accent); }
.prompt__input::placeholder { color: var(--fg-dim); opacity: 1; }
/* Positioned at the caret by shell.js, in whole characters. */
.prompt__cursor {
  position: absolute; top: 0;
  left: calc(var(--caret, 0) * 1ch);
  width: 1ch;
  background: var(--accent);
  /* Inverts the character underneath, like a real terminal cursor. */
  mix-blend-mode: difference;
  pointer-events: none;
}
.prompt__cursor::before { content: "\00a0"; }
.prompt__input:not(:focus) + .prompt__cursor { animation: none; opacity: 0.35; }

@media (max-width: 30rem) {
  .prompt { flex-wrap: wrap; row-gap: 0; }
  .prompt__field { flex-basis: 100%; }
}

/* ---- Footer --------------------------------------------------------------- */

/* Bottom padding clears the pinned prompt. */
.footer {
  position: relative; z-index: 1;
  max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--pad-x) calc(var(--line) * 5);
  color: var(--fg-dim); text-shadow: none;
}