/*
 * Terminal CLI, matched to the reference at designprompts.dev/terminal:
 * JetBrains Mono, phosphor green on #0a0a0a with amber accents, no glow,
 * faint green scanlines under a vignette, dashed borders for secondary
 * controls, everything laid out like a shell session.
 *
 * Layout is one left-aligned column. Each section maps to one of the
 * reference's components:
 *   hero        → ">_ NAME.EXE" top bar, pulsing prompt, huge caps headline
 *   about       → stat strip (left-ruled cells) over ">>" paragraphs
 *   experience  → STEP timeline with square nodes
 *   skills      → "> LS ./MODULES" numbered module cards
 *   projects    → "+--- PROJECT_ID ---+" cards under a dashed-rule heading
 *   contact     → "> CAT ./USER_LOGS.TXT" log card with a square avatar
 */

:root[data-theme="terminal"] {
  --bg: #0a0a0a;
  --fg: #33ff00;
  --accent: #33ff00;
  --accent-2: #ffb000;
  --accent-3: #ffb000;
  --error: #ff3333;
  --on-accent: #0a0a0a;
  /* The reference sets muted text in its border green, #1f521f, which is
     2.2:1 on the background and fails AA. Text uses the darkest green that
     passes (5.5:1); #1f521f stays for borders and decorative rules. */
  --border: #1f521f;
  --border-strong: #1f521f;
  --fg-dim: #3a9a2c;
  --fg-soft: #2bce02; /* the reference's primary at 80%, flattened */
  --surface: transparent;

  --font-body: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-heading: var(--font-body);

  --line: 1.5rem;
  --gap: 6rem;
  --pad-x: 1.5rem;
  --page-max: 80rem;

  /* No glow: the reference's text is flat. */
  --glow-title: none;
  --glow-body: none;
  --glow-accent-2: none;
  --glow-box: none;

  /* Green scanlines at 10%, then a vignette, as the reference layers them. */
  --crt:
    radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.4) 100%),
    repeating-linear-gradient(0deg, rgba(51, 255, 0, 0) 0 2px, rgba(51, 255, 0, 0.1) 4px);

  --icon-cap: square;
  --icon-join: miter;
  --transition: 150ms linear;

  .icon { shape-rendering: crispEdges; }

  /* ---- Layout: one column, sections divided by rules -------------------- */

  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "about" "experience" "skills" "projects" "contact";
    padding-top: 0;
  }
  .page > .pane {
    padding-top: var(--gap);
    border: 0;
    border-top: 1px solid var(--border);
  }
  /* Sections are open, not boxed: the heading sits above bare content. */
  .page > .pane > .pane__bar {
    display: block;
    padding: 0;
    white-space: normal;
    border: 0;
    margin-bottom: 1rem;
  }
  .page > .pane > .pane__bar :is(h1, h2) { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; }
  .page > .pane > .pane__body { padding: 0; }
  .pane__fill { display: none; }
  .page > .pane > .pane__body > .cmd { margin-bottom: 3rem; font-size: 1rem; color: var(--fg-soft); }
  .cmd::before { content: "> "; color: var(--fg-dim); }

  /* ---- Top bar ---------------------------------------------------------- */

  .hero__top {
    align-items: center;
    padding: 1.25rem 0;
    margin-bottom: 6rem;
    border-bottom: 1px solid var(--border);
  }
  .brand {
    display: inline-flex; align-items: center;
    font-size: var(--text-sm); font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .brand::before { content: ">_\00a0\00a0"; }
  .brand__mark { display: none; }
  .brand__name::after { content: ".EXE"; }
  .topnav { display: flex; gap: 1.5rem; }
  .topnav a {
    padding: 0.25rem 0.5rem;
    font-size: var(--text-sm);
    text-decoration: none;
    text-transform: lowercase;
  }
  .topnav a::before { content: "./"; }
  .topnav a:hover { background: var(--accent); color: var(--on-accent); }

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

  .hero { padding-bottom: 5rem; }
  .hero > * + * { margin-top: 0; }
  .hero__cmd { margin-bottom: 1.5rem; color: var(--accent); animation: pulse 2s ease-in-out infinite; }
  .hero__cmd::before { content: "> "; color: inherit; }
  .hero__name {
    margin-bottom: 1rem;
    font-size: clamp(2.25rem, 7vw, 4.5rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
  }
  .hero__role { margin-bottom: 1.5rem; font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 700; color: var(--accent-2); }
  .hero__role + .dim {
    max-width: 42rem;
    margin-bottom: 2.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.625;
    color: var(--fg-soft);
  }
  .hero__actions { order: 1; gap: 1rem; }
  .hero .ok { order: 2; margin-top: 3rem; font-size: var(--text-sm); color: var(--fg-dim); }
  .hero .ok::before { content: "STATUS: "; color: inherit; }
  .hero { display: flex; flex-direction: column; }

  /* ---- Buttons ------------------------------------------------------------
     Primary: a solid green block. Secondary: a dashed outline with its label
     in brackets. Both invert on hover. */

  .btn {
    --btn-h: 2.75rem; --btn-pad: 0 2rem;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: none;
    color: var(--on-accent);
    background: var(--accent);
  }
  .btn:hover, .btn:focus-visible { background: var(--fg-soft); color: var(--on-accent); }
  .btn--alt, .project .btn, .btn.theme-toggle {
    color: var(--accent);
    background: transparent;
    border: 1px dashed var(--accent);
  }
  .btn--alt .btn__label::before, .project .btn .btn__label::before, .theme-toggle .btn__label::before { content: "[\00a0\00a0"; color: var(--fg-dim); }
  .btn--alt .btn__label::after, .project .btn .btn__label::after, .theme-toggle .btn__label::after { content: "\00a0\00a0]"; color: var(--fg-dim); }
  .btn--alt:hover, .btn--alt:focus-visible,
  .project .btn:hover, .project .btn:focus-visible,
  .btn.theme-toggle:hover, .btn.theme-toggle:focus-visible { background: var(--accent); color: var(--on-accent); border-style: solid; }
  .btn:is(:hover, :focus-visible) .btn__label::before,
  .btn:is(:hover, :focus-visible) .btn__label::after { color: inherit; }
  /* margin-left: 0 lets the top bar's space-between center the nav. */
  .btn.theme-toggle { --btn-h: 2.25rem; --btn-pad: 0 0.75rem; margin-left: 0; text-transform: uppercase; }
  .btn__label { gap: 0.5rem; }

  /* ---- About: stat strip over paragraphs -------------------------------- */

  #about > .pane__body { display: flex; flex-direction: column; gap: 1.25rem; }
  #about > .pane__body > * { margin-top: 0; }
  #about > .pane__body > .cmd { margin-bottom: 1rem; }
  #about > .pane__body > p:not(.cmd) { max-width: 48rem; line-height: 1.7; color: var(--fg-soft); }
  #about > .pane__body > p:not(.cmd)::before { content: ">> "; color: var(--fg-dim); }

  .stats {
    order: -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 2rem 0;
    margin-bottom: 2rem;
    padding: 2rem 0;
    border-block: 1px solid var(--border);
  }
  .stats > div {
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
  }
  .stats dt { width: auto; font-size: var(--text-sm); text-transform: uppercase; color: var(--fg-dim); }
  .stats dd { min-width: 0; font-size: 1.875rem; font-weight: 700; line-height: 1.25; color: var(--accent); }
  .stats > div:last-child dd { font-size: 1rem; }
  .stats .bar { display: none; }

  /* ---- Experience: STEP timeline ---------------------------------------- */

  .log { max-width: 52rem; }
  .log > li {
    position: relative;
    padding: 0 0 2.5rem 2rem;
    border-left: 1px solid var(--border);
  }
  .log > li + li { margin-top: 0; padding-top: 0; border-top: 0; }
  .log > li:last-child { padding-bottom: 0; }
  /* The square node on the line. */
  .log > li::before {
    content: "";
    position: absolute; top: 0.3rem; left: -6px;
    width: 12px; height: 12px;
    background: var(--bg);
    border: 1px solid var(--accent);
  }
  .log > li:first-child::before { background: var(--accent); }
  .log__commit, .log__ref { font-size: 0.75rem; color: var(--fg-dim); }
  .log__ref { color: var(--accent-2); }
  .log__meta { font-size: 0.75rem; text-transform: uppercase; color: var(--fg-dim); }
  .log__title { margin-top: 0.5rem; font-size: 1.25rem; text-transform: none; }
  .log__points { margin-top: 0.75rem; font-size: var(--text-sm); line-height: 1.7; color: var(--fg-soft); }
  .log__points li::before { color: var(--fg-dim); }

  /* ---- Skills: "> LS ./MODULES" numbered module cards ------------------- */

  #skills > .pane__bar {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
  }
  #skills > .pane__bar h2 { font-size: 1.5rem; text-transform: uppercase; }
  #skills > .pane__bar h2::before { content: "> ls "; }
  #skills > .pane__body > .cmd { display: none; }

  .ls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; counter-reset: module; }
  .ls > div + div { margin-top: 0; }
  .ls > div {
    counter-increment: module;
    padding: 2.5rem;
    border: 1px solid var(--border);
    transition: border-color var(--transition), background-color var(--transition);
  }
  .ls > div:hover { border-color: var(--accent); background: rgba(51, 255, 0, 0.05); }
  .ls dt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
    font-size: 1.125rem; font-weight: 700;
    color: var(--accent);
  }
  .ls__icon { display: block; width: 2rem; height: 2rem; }
  .ls__name { text-transform: uppercase; }
  .ls__name::before { content: counter(module, decimal-leading-zero) "\00a0"; color: var(--fg-dim); }
  .ls dd { display: block; margin-top: 1.25rem; padding: 0; font-size: var(--text-sm); line-height: 1.7; color: var(--fg-soft); }
  .ls dd > span + span::before { content: ", "; color: var(--fg-dim); }
  .ls dd::after { content: "--load-module"; display: block; margin-top: 1rem; font-size: 0.75rem; color: var(--fg-dim); }

  /* ---- Projects: dashed-rule heading, PROJECT_ID cards ------------------ */

  #projects > .pane__bar::before,
  #projects > .pane__bar::after {
    content: "+----------------------------------------------------------------------------+";
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--border);
  }
  #projects > .pane__bar::before { margin-bottom: 2rem; }
  #projects > .pane__bar::after { margin-top: 2rem; }
  #projects > .pane__bar h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1; text-transform: uppercase; }
  #projects > .pane__body > .cmd { margin-top: -1rem; font-size: 1.25rem; }

  .projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); gap: 3rem; counter-reset: project; }
  .project {
    counter-increment: project;
    padding: 2.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: border-color var(--transition), background-color var(--transition);
  }
  .project:hover, .project:focus-within { border-color: var(--accent); background: rgba(51, 255, 0, 0.05); }
  .project > .pane__bar {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem 1rem;
    padding: 0; margin: 0;
    white-space: normal;
    border: 0;
  }
  /* "+--- PROJECT_ID: 01 ---+" header rule, which lights up on hover. */
  .project > .pane__bar::before {
    content: "+--- PROJECT_ID: " counter(project, decimal-leading-zero) " ---+";
    flex-basis: 100%;
    padding-bottom: 0.75rem;
    font-size: var(--text-sm);
    color: var(--border);
    border-bottom: 1px solid var(--border);
    transition: color var(--transition), border-color var(--transition);
  }
  .project:is(:hover, :focus-within) > .pane__bar::before { color: var(--accent); border-color: var(--accent); }
  .project > .pane__bar h3 { font-size: 1.875rem; text-transform: uppercase; }
  .project .pane__status { margin-left: auto; font-size: var(--text-sm); color: var(--accent-2); }
  .project > .pane__body { padding: 1.5rem 0 0; }
  .project > .pane__body > p { line-height: 1.8; color: var(--fg-soft); }
  .flags { gap: 0.25rem 1.5rem; font-size: var(--text-sm); color: var(--fg-dim); }
  .flags li::before { content: "--"; }
  .project .actions { gap: 1rem; }

  /* ---- Contact: "> CAT ./USER_LOGS.TXT" log card ------------------------ */

  #contact > .pane__bar h2 {
    display: inline-block;
    padding-bottom: 0.25rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent);
  }
  #contact > .pane__bar h2::before { content: "> cat "; }
  #contact > .pane__bar { margin-bottom: 3rem; }
  #contact > .pane__body {
    display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 36rem;
    padding: 2rem;
    border: 1px solid var(--border);
  }
  #contact > .pane__body > * { margin-top: 0; }
  #contact > .pane__body > .cmd { margin: 0; font-size: 0.75rem; color: var(--fg-dim); }
  .contact-list { font-style: italic; color: var(--fg-soft); }
  .contact-list li + li { margin-top: 0.25rem; }
  .contact-list .key { font-style: normal; color: var(--fg-dim); }
  /* Signature row: square avatar, name, role. Sits last, as in the reference. */
  .irc-head {
    order: 1;
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem;
    align-items: center;
  }
  .irc-head::before {
    content: "A";
    grid-row: span 2;
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    font-size: 0.75rem; font-weight: 700;
    border: 1px solid var(--accent);
    background: rgba(51, 255, 0, 0.1);
  }
  .irc-head b { font-size: var(--text-sm); text-transform: uppercase; }
  .irc-head span { font-size: 0.75rem; color: var(--fg-dim); }

  /* ---- Prompt and footer ------------------------------------------------ */

  .prompt__ps1 b { color: var(--accent); }
  .footer { padding-top: 3rem; }
  .footer::before {
    content: "================================================================================================";
    display: block; overflow: hidden; white-space: nowrap;
    margin-bottom: 0.5rem;
    color: var(--border);
  }

  /* ---- Phones ----------------------------------------------------------- */

  @media (max-width: 48rem) {
    --gap: 4rem;
    .topnav { display: none; }
    .hero__top { margin-bottom: 3rem; }
    .hero__actions .btn { flex: 1 1 100%; }
    .ls > div, .project { padding: 1.5rem; }
  }
  @media (max-width: 30rem) {
    .brand__name::after { content: none; }
    /* "[ VAPORWAVE ]" alone fits beside the logo; the verb stays for screen readers. */
    .theme-toggle__verb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
}

@keyframes pulse { 50% { opacity: 0.5; } }