/*
 * terminal-service.css
 * Scoped under .ts-page to avoid clobbering blog CSS variables.
 * Declarations of --text-dim etc inside .ts-page override the blog's
 * inherited values for all children — no global pollution.
 */

.ts-page {
  /* Terminal colour palette — shadows blog vars within this scope */
  --text-dim: #3e3e56;
  --text-mid: #777799;
  --text-hi:  #e8e8f2;

  background: #080810;
  color: #e8e8f2;
  font-family: 'Space Grotesk', 'JetBrains Mono', sans-serif;
  min-height: 60vh;
  position: relative;
}

/* Subtle grid texture — only inside the terminal page, not the whole site */
.ts-page::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.ts-page .ts-hero {
  position: relative; z-index: 1;
  text-align: center;
  padding: 52px 24px 44px;
}

.ts-page .ts-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 22px;
}
.ts-page .ts-eyebrow span {
  display: inline-block; width: 28px; height: 1px; background: currentColor;
}

.ts-page .ts-hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.08;
  background: linear-gradient(140deg, #fff 0%, #aaaac8 55%, #6666aa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 14px;
}

.ts-page .ts-hero p {
  font-size: .93rem; color: var(--text-mid); max-width: 400px;
  margin: 0 auto 36px; line-height: 1.65; font-weight: 300;
}

/* OS Switcher tabs */
.ts-page .os-tabs {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 4px; gap: 2px;
}

.ts-page .os-tab {
  padding: 8px 22px; border-radius: 9px; border: none;
  background: transparent; color: var(--text-dim);
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s ease;
  display: flex; align-items: center; gap: 7px;
}
.ts-page .os-tab:hover  { color: var(--text-mid); }
.ts-page .os-tab.active { background: rgba(255,255,255,0.08); color: var(--text-hi); }

/* ── Stage (terminal wrapper area) ───────────────────────────── */
.ts-page .ts-stage {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  padding: 0 20px 64px;
}

.ts-page .term-wrap {
  display: none; flex-direction: column; align-items: center;
  width: 100%; max-width: 800px;
  animation: ts-fadeUp .3s ease both;
}
.ts-page .term-wrap.visible { display: flex; }

@keyframes ts-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ts-page .term-glow {
  width: 65%; height: 18px; border-radius: 50%;
  filter: blur(16px); margin-top: 6px; opacity: .35;
}

.ts-page .term-caption {
  margin-top: 14px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
}

/* ── Shared terminal internals ────────────────────────────────── */
.ts-page .shell-output {
  min-height: 380px; max-height: 520px;
  overflow-y: auto; padding: 10px 14px 4px;
  scroll-behavior: smooth;
}
.ts-page .shell-output::-webkit-scrollbar { width: 5px; }
.ts-page .shell-output::-webkit-scrollbar-track { background: transparent; }
.ts-page .shell-output::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

.ts-page .out-line { display: flex; flex-wrap: wrap; min-height: 1.55em; }

.ts-page .input-row {
  display: flex; align-items: center;
  padding: 4px 14px 10px; gap: 0;
}
.ts-page .prompt-display { flex-shrink: 0; white-space: nowrap; }
.ts-page .cmd-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: inherit; font: inherit; caret-color: currentColor;
  padding: 0; margin: 0; min-width: 0;
}

/* ASCII art block — uses <pre> to bypass .out-line's display:flex which
   collapses leading spaces and destroys alignment. white-space:pre is the
   whole trick; letter-spacing:0 prevents subtle browser kerning gaps. */
.ts-page .out-art {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  white-space: pre;
  letter-spacing: 0;
  margin: 0;
  padding: 4px 14px 2px;
}
.ts-page .out-art span { display: inline; white-space: inherit; }

/* ── macOS Terminal ───────────────────────────────────────────── */
.ts-page .mac-shell {
  width: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.55), 0 20px 60px rgba(0,0,0,.45);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.58;
  background: #1e1e1e; color: #abb2bf;
}

.ts-page .mac-titlebar {
  display: flex; align-items: center; height: 38px; padding: 0 12px;
  background: linear-gradient(180deg, #424242 0%, #363636 100%);
  position: relative; -webkit-user-select: none; user-select: none;
}
.ts-page .mac-titlebar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: #1a1a1a;
}

.ts-page .traffic-lights { display: flex; gap: 8px; align-items: center; }
.ts-page .tl {
  width: 12px; height: 12px; border-radius: 50%;
  position: relative; cursor: default; flex-shrink: 0;
}
.ts-page .tl::after {
  content: ''; position: absolute; top: 2px; left: 2.5px;
  width: 5px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.32);
}
.ts-page .tl-close { background: #ff5f57; box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 0 0 1px rgba(255,95,87,.3); }
.ts-page .tl-min   { background: #febc2e; box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 0 0 1px rgba(254,188,46,.3); }
.ts-page .tl-max   { background: #28c840; box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 0 0 1px rgba(40,200,64,.3); }

.ts-page .mac-wintitle {
  flex: 1; text-align: center;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 500; color: #bbb;
}
.ts-page .mac-spacer { width: 56px; }

.ts-page .mac-tabbar {
  display: flex; align-items: center;
  background: #2d2d2d; border-bottom: 1px solid #1c1c1c;
  padding: 0 10px; height: 30px; gap: 3px;
}
.ts-page .mac-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 0 11px; height: 24px; border-radius: 6px;
  font-family: -apple-system, sans-serif; font-size: 11.5px; color: #777; cursor: default;
}
.ts-page .mac-tab.active { background: #1e1e1e; color: #ccc; }
.ts-page .mac-tab-plus { color: #555; font-size: 15px; padding: 0 6px; cursor: default; }

.ts-page .mac-shell .shell-output { background: #1e1e1e; }
.ts-page .mac-shell .input-row    { background: #1e1e1e; color: #abb2bf; }
.ts-page .mac-shell .cmd-input    { color: #e8e8e8; }

/* macOS One Dark colours */
.ts-page .mc-user  { color: #53c28b; font-weight: 500; }
.ts-page .mc-at    { color: #888; }
.ts-page .mc-host  { color: #61afef; font-weight: 500; }
.ts-page .mc-path  { color: #e5c07b; }
.ts-page .mc-git   { color: #c678dd; }
.ts-page .mc-sym   { color: #ccc; }
.ts-page .mc-kw    { color: #61afef; }
.ts-page .mc-flag  { color: #e06c75; }
.ts-page .mc-str   { color: #98c379; }
.ts-page .mc-dir   { color: #61afef; font-weight: 600; }
.ts-page .mc-exec  { color: #98c379; font-weight: 600; }
.ts-page .mc-link  { color: #56b6c2; }
.ts-page .mc-dim   { color: #5c6370; }
.ts-page .mc-warn  { color: #e5c07b; }
.ts-page .mc-err   { color: #e06c75; }
.ts-page .mc-info  { color: #abb2bf; }
.ts-page .mc-ok    { color: #98c379; }

/* ── Windows Terminal ─────────────────────────────────────────── */
.ts-page .win-shell {
  width: 100%; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 6px 28px rgba(0,0,0,.6), 0 22px 64px rgba(0,0,0,.4);
  font-family: 'Cascadia Code', monospace; font-size: 13px; line-height: 1.52;
  background: #0d0d0d; color: #ccc;
}

.ts-page .win-titlebar {
  display: flex; align-items: stretch;
  height: 36px; background: #1c1c1c; -webkit-user-select: none; user-select: none;
}
.ts-page .win-tabs-area {
  display: flex; align-items: stretch; flex: 1;
  padding: 4px 4px 0; gap: 2px; overflow: hidden;
}
.ts-page .win-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; border-radius: 6px 6px 0 0;
  font-family: 'Cascadia Code', monospace; font-size: 12px;
  color: #777; cursor: default; white-space: nowrap; background: transparent;
}
.ts-page .win-tab.active { background: #0d0d0d; color: #bbb; }
.ts-page .win-tab svg { flex-shrink: 0; }
.ts-page .win-tab-close {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; font-size: 11px; color: #555; margin-left: 2px;
}
.ts-page .win-tab-plus {
  display: flex; align-items: center; justify-content: center;
  width: 28px; color: #444; font-size: 17px; cursor: default;
  align-self: center; margin: 0 2px; border-radius: 4px;
}
.ts-page .win-caption { display: flex; align-items: stretch; }
.ts-page .win-cbtn {
  width: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #666; cursor: default; background: transparent;
}

.ts-page .win-shell .shell-output { background: #0d0d0d; color: #ccc; }
.ts-page .win-shell .input-row    { background: #0d0d0d; color: #ccc; }
.ts-page .win-shell .cmd-input    { color: #f0f0f0; }

/* PowerShell colours */
.ts-page .wc-path   { color: #3a96dd; font-weight: 500; }
.ts-page .wc-gt     { color: #ccc; }
.ts-page .wc-str    { color: #13a10e; }
.ts-page .wc-head   { color: #3a96dd; text-decoration: underline; }
.ts-page .wc-div    { color: #444; }
.ts-page .wc-val    { color: #f0f0f0; }
.ts-page .wc-warn   { color: #c19c00; }
.ts-page .wc-err    { color: #c50f1f; }
.ts-page .wc-ok     { color: #13a10e; }
.ts-page .wc-info   { color: #ccc; }
.ts-page .wc-dim    { color: #555; }
.ts-page .wc-param  { color: #3a96dd; }

/* ── Ubuntu / GNOME Terminal ──────────────────────────────────── */
.ts-page .ubuntu-shell {
  width: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 28px rgba(0,0,0,.55), 0 22px 64px rgba(0,0,0,.38);
  font-family: 'Ubuntu Mono', monospace; font-size: 13.5px; line-height: 1.52;
  background: #1a1a1a; color: #d3d7cf;
}

.ts-page .gnome-headerbar {
  display: flex; align-items: center; height: 46px; padding: 0 12px 0 16px;
  background: #2b2b2b; border-bottom: 1px solid #1a1a1a; -webkit-user-select: none; user-select: none;
}
.ts-page .gnome-hamburger { display: flex; flex-direction: column; gap: 3px; cursor: default; padding: 4px; }
.ts-page .gnome-hamburger span { display: block; width: 16px; height: 2px; background: #777; border-radius: 1px; }
.ts-page .gnome-title {
  flex: 1; text-align: center;
  font-family: 'Ubuntu', sans-serif; font-size: 13px; font-weight: 500; color: #ccc;
}
.ts-page .gnome-btns { display: flex; gap: 8px; align-items: center; }
.ts-page .gnome-btn {
  width: 14px; height: 14px; border-radius: 50%;
  cursor: default; background: #555; border: 1px solid rgba(0,0,0,.3);
}
.ts-page .gnome-tabbar {
  display: flex; align-items: stretch;
  background: #2b2b2b; border-bottom: 1px solid #1c1c1c;
  padding: 0 12px; height: 34px; gap: 2px;
}
.ts-page .gnome-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px; font-family: 'Ubuntu', sans-serif; font-size: 11.5px;
  color: #777; cursor: default;
  border-bottom: 2px solid transparent; position: relative; top: 1px;
}
.ts-page .gnome-tab.active { color: #E95420; border-bottom-color: #E95420; }
.ts-page .gnome-tab-plus { display: flex; align-items: center; padding: 0 8px; font-size: 17px; color: #555; cursor: default; }

.ts-page .ubuntu-shell .shell-output { background: #1a1a1a; color: #d3d7cf; }
.ts-page .ubuntu-shell .input-row    { background: #1a1a1a; color: #d3d7cf; }
.ts-page .ubuntu-shell .cmd-input    { color: #d3d7cf; }

/* Tango Dark colours */
.ts-page .uc-user  { color: #4e9a06; font-weight: 700; }
.ts-page .uc-host  { color: #4e9a06; font-weight: 700; }
.ts-page .uc-colon { color: #d3d7cf; }
.ts-page .uc-path  { color: #729fcf; font-weight: 700; }
.ts-page .uc-dollar{ color: #d3d7cf; }
.ts-page .uc-dir   { color: #729fcf; font-weight: 700; }
.ts-page .uc-exec  { color: #4e9a06; font-weight: 700; }
.ts-page .uc-link  { color: #06989a; }
.ts-page .uc-warn  { color: #c4a000; }
.ts-page .uc-err   { color: #cc0000; }
.ts-page .uc-ok    { color: #4e9a06; }
.ts-page .uc-info  { color: #d3d7cf; }
.ts-page .uc-dim   { color: #555753; }
.ts-page .uc-hi    { color: #c4a000; }
.ts-page .uc-str   { color: #06989a; }

/* ── Comparison cards ─────────────────────────────────────────── */
.ts-page .ts-comparison {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  padding: 0 24px 72px;
}
.ts-page .ts-comp-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 20px 22px; width: 215px;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.ts-page .ts-comp-card:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.ts-page .ts-comp-icon { font-size: 21px; margin-bottom: 9px; }
.ts-page .ts-comp-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text-hi); }
.ts-page .ts-comp-card p  { font-size: 11.5px; color: var(--text-dim); line-height: 1.55; }
.ts-page .ts-tag {
  display: inline-block; margin-top: 9px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; font-weight: 500;
}
.ts-page .ts-tag-mac   { background: rgba(255,95,87,.13);  color: #ff5f57; }
.ts-page .ts-tag-win   { background: rgba(58,150,221,.13); color: #3a96dd; }
.ts-page .ts-tag-linux { background: rgba(233,84,32,.13);  color: #E95420; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 580px) {
  .ts-page .mac-shell,
  .ts-page .win-shell,
  .ts-page .ubuntu-shell { font-size: 11.5px; }
  .ts-page .ts-hero h1 { font-size: 1.8rem; }
  .ts-page .ts-comparison { gap: 12px; }
  .ts-page .ts-comp-card { width: 100%; max-width: 320px; }
}