/* ==========================================================================
   Variant: Terminal — the CV as a TTY.

   Loaded only when data-variant="terminal" is active, and every rule is
   scoped by that attribute, so this file can never leak into another
   variant. It redefines the same semantic tokens style.css declares, which
   is what carries the whole page — chrome, palette and all — into the
   phosphor without restyling each component twice.
   ========================================================================== */

html[data-variant="terminal"][data-theme="dark"] {
  --bg: #060d09;
  --bg-alt: #08110c;
  --surface: #0a1610;
  --surface-2: #0d1d15;
  --border: rgba(94, 240, 160, 0.14);
  --border-strong: rgba(94, 240, 160, 0.30);
  --text: #c8f7dd;
  --text-muted: #6fbf92;
  --text-dim: #48876a;
  --accent: #3ef08a;
  --accent-2: #9dffc9;
  --accent-soft: rgba(62, 240, 138, 0.12);
  --accent-contrast: #04160c;
  --shadow-color: 150 60% 2%;
}

/* Not "the dark one inverted" — a paper terminal: warm stock, dark ink, and
   an accent dark enough to hold contrast on it. */
html[data-variant="terminal"][data-theme="light"] {
  --bg: #f2f0e6;
  --bg-alt: #ebe8db;
  --surface: #faf8f0;
  --surface-2: #edeade;
  --border: rgba(20, 40, 28, 0.16);
  --border-strong: rgba(20, 40, 28, 0.34);
  --text: #16241c;
  --text-muted: #3c5245;
  --text-dim: #66786c;
  --accent: #0a6b3d;
  --accent-2: #08532f;
  --accent-soft: rgba(10, 107, 61, 0.10);
  --accent-contrast: #f7fff9;
  --shadow-color: 100 20% 55%;
}

html[data-variant="terminal"] {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

/* Type ---------------------------------------------------------------- */

html[data-variant="terminal"] body,
html[data-variant="terminal"] h1,
html[data-variant="terminal"] h2,
html[data-variant="terminal"] h3 {
  font-family: var(--font-mono);
  font-style: normal;
  letter-spacing: 0;
}
html[data-variant="terminal"] body { line-height: 1.65; }

/* JetBrains Mono has no Arabic, so Arabic prose would fall through to a
   default sans and lose the whole effect anyway. Give it Kufam and keep the
   mono for the chrome below, which is Latin by nature. */
html[data-variant="terminal"][dir="rtl"] body,
html[data-variant="terminal"][dir="rtl"] h1,
html[data-variant="terminal"][dir="rtl"] h2,
html[data-variant="terminal"][dir="rtl"] h3 { font-family: var(--font-body-ar); }

/* Backdrop ------------------------------------------------------------ */

/* the noise layer is already in the markup and already fixed and inert —
   re-skinning it into scanlines costs nothing extra */
html[data-variant="terminal"] .noise-overlay {
  mix-blend-mode: normal;
  opacity: .55;
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 7%, transparent) 0 1px,
    transparent 1px 3px
  );
}
html[data-variant="terminal"][data-theme="light"] .noise-overlay { opacity: .3; }

html[data-variant="terminal"] .hero-blob,
html[data-variant="terminal"] .hero-grid,
html[data-variant="terminal"] .cursor-glow { display: none; }

html[data-variant="terminal"] .progress-bar {
  background: var(--accent); box-shadow: none; height: 2px;
}

/* Header -------------------------------------------------------------- */

html[data-variant="terminal"] .site-header.scrolled {
  box-shadow: 0 1px 0 var(--border-strong);
  backdrop-filter: blur(10px);
}
html[data-variant="terminal"] .brand-logo { height: 44px; width: 53px; }
html[data-variant="terminal"] .nav-link { font-size: .85rem; }
html[data-variant="terminal"] .nav-link::before { content: "/"; color: var(--text-dim); margin-inline-end: 2px; }

html[data-variant="terminal"] .lang-toggle,
html[data-variant="terminal"] .variant-chip,
html[data-variant="terminal"] .theme-toggle-track,
html[data-variant="terminal"] .variant-chip-key { border-radius: 0; }
html[data-variant="terminal"] .theme-toggle-thumb { border-radius: 0; }

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

/* A shell prompt is not prose — it is chrome, and it stays pinned LTR in
   both directions so `~$` never reorders. `direction` also redefines what
   `start` means, though, so the alignment is stated physically: the prompt
   sits on whichever edge the reader begins at, with its glyphs still
   running left to right inside. */
html[data-variant="terminal"] .hero-name::before {
  content: "mohamed@riyadh:~$ whoami";
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-size: clamp(.72rem, 1.6vw, .9rem);
  letter-spacing: .02em;
  color: var(--text-dim);
  margin-bottom: 14px;
}
html[data-variant="terminal"][dir="rtl"] .hero-name::before { text-align: right; }
html[data-variant="terminal"] .hero-name {
  font-size: clamp(2.2rem, 6.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
html[data-variant="terminal"] .accent-text { font-style: normal; }
html[data-variant="terminal"] .hero-eyebrow { border-radius: 0; padding: 6px 12px; }
html[data-variant="terminal"] .status-dot { border-radius: 0; width: 7px; height: 7px; }
html[data-variant="terminal"] .caret { background: var(--accent); width: 9px; height: 1.05em; vertical-align: -3px; }

html[data-variant="terminal"] .scroll-cue-line { display: none; }
html[data-variant="terminal"] .scroll-cue::before { content: "▼"; color: var(--accent); }

/* Buttons become bracketed commands. The brackets wrap every child, icon
   included, which is exactly how a shell would render the affordance. */
html[data-variant="terminal"] .btn-primary,
html[data-variant="terminal"] .btn-ghost {
  border-radius: 0;
  padding: 11px 16px;
  font-weight: 500;
  background: none;
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
html[data-variant="terminal"] .btn-primary { border-color: var(--accent); color: var(--accent); }
/* Authored once, in logical order, and deliberately NOT swapped for RTL:
   `[` and `]` are bidi-mirrored characters, so in an Arabic run the browser
   already draws `[` with the `]` glyph. ::before lands on the right there
   and mirrors to `]`; ::after lands on the left and mirrors to `[`. The pair
   still encloses the label. Swapping them by hand mirrors twice and turns
   the brackets outward — `] label [`. */
html[data-variant="terminal"] .btn-primary::before,
html[data-variant="terminal"] .btn-ghost::before { content: "["; color: var(--text-dim); }
html[data-variant="terminal"] .btn-primary::after,
html[data-variant="terminal"] .btn-ghost::after { content: "]"; color: var(--text-dim); }
html[data-variant="terminal"] .btn-primary:hover,
html[data-variant="terminal"] .btn-ghost:hover {
  transform: none;
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
html[data-variant="terminal"] .btn-icon { border-radius: 0; }
html[data-variant="terminal"] .btn-icon:hover { transform: none; background: var(--accent-soft); }

/* Sections ------------------------------------------------------------ */

/* `❯` is a caret, so it points along the reading direction, not with it —
   it flips in Arabic the way a real RTL prompt would. */
html[data-variant="terminal"] .section-kicker::before { content: "❯ "; color: var(--accent); }
html[data-variant="terminal"][dir="rtl"] .section-kicker::before { content: "❮ "; }
html[data-variant="terminal"] .section-kicker { color: var(--text-muted); text-transform: none; letter-spacing: .04em; }

html[data-variant="terminal"] .section-title::before { content: "# "; color: var(--text-dim); }
html[data-variant="terminal"] .section-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -.01em;
}

/* Cards: framed, never lifted. A terminal has no z-axis. */
html[data-variant="terminal"] .stat-card,
html[data-variant="terminal"] .timeline-card,
html[data-variant="terminal"] .skill-card,
html[data-variant="terminal"] .edu-card,
html[data-variant="terminal"] .work-card,
html[data-variant="terminal"] .contact-card {
  border-radius: 0;
  border-color: var(--border-strong);
  box-shadow: none;
}
html[data-variant="terminal"] .stat-card:hover,
html[data-variant="terminal"] .timeline-card:hover,
html[data-variant="terminal"] .skill-card:hover,
html[data-variant="terminal"] .edu-card:hover,
html[data-variant="terminal"] .work-card:hover,
html[data-variant="terminal"] .contact-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

html[data-variant="terminal"] .stat-number { font-family: var(--font-mono); font-weight: 500; }

/* Timeline: the rail goes dashed and the node becomes a cursor arrow. */
html[data-variant="terminal"] .timeline::before {
  background: none;
  border-inline-start: 1px dashed var(--border-strong);
  width: 0;
}
html[data-variant="terminal"] .timeline-marker {
  background: none; border: none; width: 20px; height: 20px; top: 8px;
}
html[data-variant="terminal"] .timeline-marker::after {
  content: "▸";
  width: auto; height: auto; border-radius: 0; background: none;
  color: var(--accent); font-size: .95rem; line-height: 1;
}
html[data-variant="terminal"][dir="rtl"] .timeline-marker::after { content: "◂"; }
html[data-variant="terminal"] .timeline-card li::before {
  content: "-"; width: auto; height: auto;
  background: none; transform: none; border-radius: 0;
  color: var(--accent); top: 0;
}

/* Tags read as argv tokens rather than pills. */
html[data-variant="terminal"] .tag,
html[data-variant="terminal"] .work-tags span {
  background: none; border-radius: 0; padding: 2px 0;
  border: none; color: var(--accent);
  font-family: var(--font-mono);
}
/* left unswapped for the same reason as the buttons above: bidi mirroring
   already turns the pair around in Arabic */
html[data-variant="terminal"] .tag::before,
html[data-variant="terminal"] .work-tags span::before { content: "["; color: var(--text-dim); }
html[data-variant="terminal"] .tag::after,
html[data-variant="terminal"] .work-tags span::after { content: "]"; color: var(--text-dim); }
html[data-variant="terminal"] .tag:hover { transform: none; border: none; }
html[data-variant="terminal"] .tag-cloud { gap: 4px 12px; }
html[data-variant="terminal"] .work-tags { gap: 4px 10px; }

/* Portfolio ----------------------------------------------------------- */

html[data-variant="terminal"] .work-thumb { border-radius: 0; filter: grayscale(.45) contrast(1.05); }
html[data-variant="terminal"] .work-title { font-family: var(--font-mono); font-weight: 500; }
html[data-variant="terminal"] .work-domain::before { content: "// "; color: var(--text-dim); }
html[data-variant="terminal"] .work-go { border-radius: 0; background: var(--surface); }

/* Terminal runs the desktop spotlight, same structure as Mashrabiya and
   Blueprint: index on one side, one case study on the other. Only the skin
   differs — the index reads as a file listing, so the numbers are line
   numbers, the domain is a trailing comment, and the selected row is marked
   with a prompt caret rather than a colour alone.

   The caret goes on .pf-num rather than the row: .pf-row is a two-column
   grid, and a row-level ::before would land in the grid as a third item and
   push the columns apart. */
html[data-variant="terminal"] .pf-row { border-inline-start-width: 1px; }
html[data-variant="terminal"] .pf-t { font-family: var(--font-mono); font-weight: 500; }
html[data-variant="terminal"] .pf-d::before { content: "// "; color: var(--text-dim); }
html[data-variant="terminal"] .pf-num::after {
  content: " ";
  color: var(--accent);
  white-space: pre;
}
/* `❯` points along the reading direction, like the section kickers. */
html[data-variant="terminal"] .pf-row[aria-selected="true"] .pf-num::after { content: "❯"; }
html[data-variant="terminal"][dir="rtl"] .pf-row[aria-selected="true"] .pf-num::after { content: "❮"; }

/* Education / contact -------------------------------------------------- */

html[data-variant="terminal"] .edu-icon,
html[data-variant="terminal"] .contact-icon { border-radius: 0; background: none; border: 1px solid var(--border-strong); }
html[data-variant="terminal"] .contact-card::before { display: none; }  /* no sheen sweep */
html[data-variant="terminal"] .contact-label { text-transform: lowercase; letter-spacing: 0; }
html[data-variant="terminal"] .contact-label::after { content: ":"; }

html[data-variant="terminal"] .to-top { border-radius: 0; }
html[data-variant="terminal"] .to-top:hover { transform: none; }
html[data-variant="terminal"] .toast { border-radius: 0; font-family: var(--font-mono); }

/* Palette ------------------------------------------------------------- */

html[data-variant="terminal"] .cmdk-panel,
html[data-variant="terminal"] .cmdk-item,
html[data-variant="terminal"] .cmdk-glyph { border-radius: 0; }
html[data-variant="terminal"] .cmdk-input,
html[data-variant="terminal"] .cmdk-label { font-family: var(--font-mono); }
html[data-variant="terminal"] .cmdk-badge { border-radius: 0; }

/* Print ---------------------------------------------------------------- */

/* Paper is paper regardless of the variant on screen. Everything this file
   added that only makes sense lit is withdrawn here, so the shared print
   block in style.css lands on the same document it always produced. */
@media print {
  html[data-variant="terminal"] .hero-name::before,
  html[data-variant="terminal"] .section-title::before,
  html[data-variant="terminal"] .section-kicker::before,
  html[data-variant="terminal"] .nav-link::before,
  html[data-variant="terminal"] .work-domain::before,
  html[data-variant="terminal"] .contact-label::after,
  html[data-variant="terminal"] .btn-primary::before,
  html[data-variant="terminal"] .btn-primary::after,
  html[data-variant="terminal"] .btn-ghost::before,
  html[data-variant="terminal"] .btn-ghost::after,
  html[data-variant="terminal"] .tag::before,
  html[data-variant="terminal"] .tag::after,
  html[data-variant="terminal"] .work-tags span::before,
  html[data-variant="terminal"] .work-tags span::after { content: none; }

  html[data-variant="terminal"] body,
  html[data-variant="terminal"] h1,
  html[data-variant="terminal"] h2,
  html[data-variant="terminal"] h3 { font-family: var(--font-body); }
  html[data-variant="terminal"] .work-thumb { filter: none; }
}