/* ==========================================================================
   Theme: Command Prompt, the whole site viewed through an old-school dev
   terminal. Near-black canvas, phosphor-green text, full monospace type,
   square corners, ASCII rules, prompt lines, bracketed commands, and a
   single blinking cursor for motion. Everything else is stripped away.

   Colors are driven from --accent so the alternate palettes (Amber, IBM
   Blue) recolour the entire mode, not just a few highlights.
   ========================================================================== */

[data-theme="terminal"] {
  --bg: #050805;
  --bg-soft: #0a0f0a;
  --surface: #080d08;
  --ink: #d8ffd8;
  --muted: #7a8f7a;
  --accent: #39ff14;
  --accent-ink: #031003;
  --accent-2: #19c34a;
  --line: color-mix(in srgb, var(--accent) 26%, transparent);
  --border-w: 1px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-strong: none;

  --font-body: "IBM Plex Mono", "Noto Sans Thai", "Noto Sans SC", "Sarabun", ui-monospace, monospace;
  --font-display: "IBM Plex Mono", "Noto Sans Thai", "Noto Sans SC", "Sarabun", ui-monospace, monospace;
  --font-mono: "IBM Plex Mono", "Noto Sans Thai", "Noto Sans SC", "Sarabun", ui-monospace, monospace;

  --h-weight: 600;
  --h-tracking: 0;
  --h-transform: none;
  --kicker-font: var(--font-mono);
  --btn-radius: 0px;
  --tk-speed: 70;
}

/* Faint CRT scanlines over the whole page; static, palette-agnostic. */
[data-theme="terminal"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  background-size: 100% 3px;
  background-attachment: fixed;
}

[data-theme="terminal"] ::selection { background: var(--accent); color: var(--accent-ink); }
[data-theme="terminal"] :focus-visible { outline: 1px dashed var(--accent); outline-offset: 2px; }

/* The cursor that powers every blink in the mode. */
@keyframes term-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Kickers as typed commands ---------- */
[data-theme="terminal"] .kicker { color: var(--accent); letter-spacing: 0.1em; }
[data-theme="terminal"] .kicker::before { content: "$ "; color: var(--muted); }

/* ---------- Headings ---------- */
[data-theme="terminal"] .section-title::before { content: "# "; color: var(--accent); }
[data-theme="terminal"] .hero-title em {
  color: var(--accent);
  font-style: normal;
}
[data-theme="terminal"] .hero-title em::before { content: "<"; color: var(--muted); }
[data-theme="terminal"] .hero-title em::after { content: ">"; color: var(--muted); }
[data-theme="terminal"] .why .section-title em { color: var(--accent); font-style: normal; }

/* Blinking cursor parked on a fresh line under the headline. */
[data-theme="terminal"] .hero-title::after {
  content: "\2588";
  display: block;
  margin-top: 0.15em;
  color: var(--accent);
  line-height: 1;
  animation: term-blink 1.05s steps(1) infinite;
}

/* The signature prompt line above the hero copy. */
[data-theme="terminal"] .hero-copy { position: relative; }
[data-theme="terminal"] .hero-copy::before {
  content: "plainpages@web:~$ start website_project";
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  word-break: break-word;
}

/* Hero points become stacked output lines. */
[data-theme="terminal"] .hero-points { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
[data-theme="terminal"] .hp {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
}
[data-theme="terminal"] .hp::before { content: "> "; color: var(--accent); }

/* ---------- Buttons as bracketed commands ---------- */
[data-theme="terminal"] .btn {
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
[data-theme="terminal"] .btn::before { content: "[ "; }
[data-theme="terminal"] .btn::after { content: " ]"; }
[data-theme="terminal"] .btn--primary {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
[data-theme="terminal"] .btn--primary:hover,
[data-theme="terminal"] .btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
[data-theme="terminal"] .btn--ghost { color: var(--accent); background: transparent; }

/* ---------- Header ---------- */
[data-theme="terminal"] .site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
[data-theme="terminal"] .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
[data-theme="terminal"] .brand-name { letter-spacing: -0.02em; }
[data-theme="terminal"] .brand-name::before { content: "~/"; color: var(--accent); }
[data-theme="terminal"] .brand-name i { color: var(--accent); }
[data-theme="terminal"] .lang-btn {
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-mono);
}
[data-theme="terminal"] .lang-btn:hover,
[data-theme="terminal"] .lang-btn[aria-expanded="true"] { border-color: var(--accent); background: transparent; }
[data-theme="terminal"] .lang-menu { border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
[data-theme="terminal"] .lang-option { border-radius: 0; font-family: var(--font-mono); }
[data-theme="terminal"] .lang-option[aria-checked="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
[data-theme="terminal"] .nav-toggle { border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
[data-theme="terminal"] .nav-toggle span { background: var(--accent); }

/* Nav links read like commands; the current one is "selected". */
/* Monospace runs wide; trim the nav slightly so all links clear the language
   selector in the row just above the mobile-menu breakpoint. */
[data-theme="terminal"] .nav-link { font-family: var(--font-mono); border-radius: 0; font-size: 0.76rem; padding-inline: 0.4rem; }
[data-theme="terminal"] .nav-link:hover,
[data-theme="terminal"] .nav-link:focus-visible { color: var(--accent); background: transparent; }
[data-theme="terminal"] .nav-link[aria-current="true"] {
  color: var(--accent-ink);
  background: var(--accent);
}
[data-theme="terminal"] .nav-link[aria-current="true"]::before { content: "> "; }
[data-theme="terminal"] .nav-link[aria-current="true"]::after { display: none; }

/* ---------- Ticker as a data feed ---------- */
[data-theme="terminal"] .ticker {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
[data-theme="terminal"] .tk-item { color: var(--accent); font-size: 0.72rem; }
[data-theme="terminal"] .tk-sep { color: var(--muted); }
[data-theme="terminal"] .tk-sep::before { content: "::"; letter-spacing: 0; }

/* ---------- Sections + ASCII dividers ---------- */
[data-theme="terminal"] .section--alt { background: var(--bg-soft); }
[data-theme="terminal"] .section + .section,
[data-theme="terminal"] .section--alt { border-top: 1px dashed var(--line); }
[data-theme="terminal"] .section-head { padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }

/* ---------- Carousel ---------- */
[data-theme="terminal"] .car-btn {
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--surface);
  color: var(--accent);
}
[data-theme="terminal"] .car-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---------- Design-mode panel ---------- */
[data-theme="terminal"] .mode-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
}
[data-theme="terminal"] .mode-panel::before {
  content: "-- mode_info -------------------------------------------";
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  white-space: nowrap;
}
[data-theme="terminal"] .mp-dot { border-radius: 0; border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
[data-theme="terminal"] .mp-title::before { content: "> "; color: var(--accent); }
[data-theme="terminal"] .mp-label { color: var(--accent); }
[data-theme="terminal"] .mp-label::before { content: "# "; color: var(--muted); }
[data-theme="terminal"] .mp-cols { border-top: 1px dashed var(--line); }
[data-theme="terminal"] .palette-pop { background: var(--surface); border: 1px solid var(--accent); border-radius: 0; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-theme="terminal"] .pp-option { border-radius: 0; font-family: var(--font-mono); }
[data-theme="terminal"] .pp-option:hover { border-color: var(--line); background: color-mix(in srgb, var(--accent) 8%, transparent); }
[data-theme="terminal"] .pp-option[aria-checked="true"] { border-color: var(--accent); }
[data-theme="terminal"] .pp-swatches i { border-radius: 0; }

/* ---------- Services: stripped to a single output column ---------- */
[data-theme="terminal"] .services::before { background: none; }
[data-theme="terminal"] .service-feature {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 22rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="terminal"] .service-feature::before,
[data-theme="terminal"] .service-feature::after { display: none; }
[data-theme="terminal"] .service-feature__visual { display: none; }
[data-theme="terminal"] .service-feature__copy { padding: clamp(1.5rem, 4vw, 2.75rem); }
[data-theme="terminal"] .service-feature__kicker { color: var(--accent); }
[data-theme="terminal"] .service-feature__kicker span {
  border-radius: 0;
  border-color: var(--line);
  background: transparent;
}
[data-theme="terminal"] .service-feature h3::before { content: "> "; color: var(--accent); }
[data-theme="terminal"] .service-tags li {
  border-radius: 0;
  border-color: var(--line);
  background: transparent;
  color: var(--accent);
}
[data-theme="terminal"] .service-tags li::before { content: "["; color: var(--muted); }
[data-theme="terminal"] .service-tags li::after { content: "]"; color: var(--muted); }
[data-theme="terminal"] .services-showcase:focus-within .service-feature {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

[data-theme="terminal"] .service-option {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="terminal"] .service-option::before { display: none; }
[data-theme="terminal"] .service-option:hover,
[data-theme="terminal"] .service-option:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-theme="terminal"] .service-option:focus-visible { outline-color: var(--accent); }
[data-theme="terminal"] .service-option__index { color: var(--accent); }
[data-theme="terminal"] .service-option__index::before { content: "0x"; color: var(--muted); }
[data-theme="terminal"] .service-option__arrow { color: var(--accent); }
[data-theme="terminal"] .service-noscript { border: 1px solid var(--line); border-radius: 0; background: var(--surface); }

/* ---------- Why / cards ---------- */
[data-theme="terminal"] .why-card,
[data-theme="terminal"] .sys-item,
[data-theme="terminal"] .step,
[data-theme="terminal"] .demo-card,
[data-theme="terminal"] .price-card,
[data-theme="terminal"] .form,
[data-theme="terminal"] .win--admin {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
[data-theme="terminal"] .why-num { color: var(--accent); }
[data-theme="terminal"] .why-num::before { content: "["; color: var(--muted); }
[data-theme="terminal"] .why-num::after { content: "]"; color: var(--muted); }
[data-theme="terminal"] .why-card h3::before,
[data-theme="terminal"] .sys-item h3::before { content: "> "; color: var(--accent); }

/* ---------- Systems / admin mock window ---------- */
[data-theme="terminal"] .win--admin { box-shadow: none; }
[data-theme="terminal"] .win-bar {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
}
[data-theme="terminal"] .win-dots i { border-radius: 0; background: var(--accent); }
[data-theme="terminal"] .win-dots i:nth-child(2) { background: var(--accent-2); }
[data-theme="terminal"] .win-dots i:nth-child(3) { background: var(--muted); }
[data-theme="terminal"] .adm-text { font-family: var(--font-mono); font-size: 0.85rem; }
[data-theme="terminal"] .adm-text::before { content: "$ "; color: var(--accent); }
[data-theme="terminal"] .adm-text b { color: var(--accent); }
[data-theme="terminal"] .adm-meta { color: var(--muted); }
[data-theme="terminal"] .adm-dot { border-radius: 0; }
[data-theme="terminal"] .adm-dot--new { background: var(--accent); }
[data-theme="terminal"] .adm-dot--pay { background: var(--accent-2); }
[data-theme="terminal"] .adm-dot--mail,
[data-theme="terminal"] .adm-dot--ok { background: var(--muted); }

/* ---------- Demos: phosphor-tinted previews ---------- */
[data-theme="terminal"] .demo-thumb { border-color: var(--line); background: var(--bg); }
[data-theme="terminal"] .demo-thumb img {
  filter: grayscale(1) brightness(0.82) contrast(1.05) sepia(0.55) hue-rotate(55deg) saturate(1.5);
}
[data-theme="terminal"] .demo-card:hover { border-color: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 16%, transparent); }
[data-theme="terminal"] .demo-card:hover .demo-thumb img { filter: grayscale(1) brightness(0.95) contrast(1.05) sepia(0.6) hue-rotate(55deg) saturate(1.8); }
[data-theme="terminal"] .demo-cat { color: var(--muted); }
[data-theme="terminal"] .demo-name::before { content: "/ "; color: var(--accent); }
[data-theme="terminal"] .demo-status { border-color: var(--line); border-radius: 0; color: var(--muted); }
[data-theme="terminal"] .demo-status--prod { border-color: var(--accent); color: var(--accent); }
[data-theme="terminal"] .demo-preview-ui { font-family: var(--font-mono); color: var(--ink); }
[data-theme="terminal"] .portal-mini { font-family: var(--font-mono); color: var(--ink); }

/* ---------- Process steps ---------- */
[data-theme="terminal"] .step-num {
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--accent);
  background: transparent;
}
[data-theme="terminal"] .step h3::before { content: "> "; color: var(--accent); }

/* ---------- Pricing ---------- */
[data-theme="terminal"] .price-card--featured { border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent); }
[data-theme="terminal"] .price-name::before { content: "## "; color: var(--accent); }
[data-theme="terminal"] .price-pricing {
  gap: 0.28rem;
  padding-block: 0.65rem;
  border-block: 1px dashed var(--line);
}
[data-theme="terminal"] .price-amount,
[data-theme="terminal"] .price-usd,
[data-theme="terminal"] .price-care {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
}
[data-theme="terminal"] .price-amount::before { content: "build_fee: "; color: var(--accent); }
[data-theme="terminal"] .price-usd::before { content: "usd_ref: "; color: var(--accent); }
[data-theme="terminal"] .price-care::before { content: "care_plan: "; color: var(--accent); }
[data-theme="terminal"] .price-badge {
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-ink);
}
[data-theme="terminal"] .price-badge::before { content: "* "; }
[data-theme="terminal"] .price-list li::before { content: "[x] "; color: var(--accent); font-family: var(--font-mono); }
[data-theme="terminal"] .price-note { color: var(--muted); font-family: var(--font-mono); }

/* ---------- Contact / form ---------- */
[data-theme="terminal"] .ci-label { color: var(--accent); }
[data-theme="terminal"] .ci-item a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
[data-theme="terminal"] .ci-item a:hover { color: var(--accent); }
[data-theme="terminal"] .field label { color: var(--muted); font-family: var(--font-mono); }
[data-theme="terminal"] .field label::before { content: "> "; color: var(--accent); }
[data-theme="terminal"] .field input,
[data-theme="terminal"] .field select,
[data-theme="terminal"] .field textarea {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  caret-color: var(--accent);
}
[data-theme="terminal"] .field select option { background: var(--surface); color: var(--ink); }
[data-theme="terminal"] .field input:focus,
[data-theme="terminal"] .field select:focus,
[data-theme="terminal"] .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
[data-theme="terminal"] .form-note { color: var(--muted); font-family: var(--font-mono); }

/* ---------- Footer ---------- */
[data-theme="terminal"] .site-footer { border-top: 1px solid var(--line); }
[data-theme="terminal"] .footer-brand .brand-name i { color: var(--accent); }
[data-theme="terminal"] .footer-nav a { font-family: var(--font-mono); }
[data-theme="terminal"] .footer-nav a:hover { color: var(--accent); }
[data-theme="terminal"] .footer-meta { font-family: var(--font-mono); color: var(--muted); }
[data-theme="terminal"] .footer-meta a:hover { color: var(--accent); }

/* ---------- Motion: a quick text reveal, nothing bouncy ---------- */
[data-theme="terminal"] .reveal {
  transform: translateY(6px);
  transition-duration: 0.28s;
  transition-timing-function: steps(6, end);
}

/* --------------------------------------------------------------------------
   Hero terminal window (the mode stage)
   -------------------------------------------------------------------------- */
[data-theme="terminal"] .ms-surface {
  inset: 3% 2% 5% 4%;
  border: 1px solid var(--accent);
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px),
    var(--surface);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
}
[data-theme="terminal"] .ms-bar {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
}
[data-theme="terminal"] .ms-lights i { border-radius: 0; background: var(--accent); }
[data-theme="terminal"] .ms-lights i:nth-child(2) { background: var(--accent-2); }
[data-theme="terminal"] .ms-lights i:nth-child(3) { background: var(--muted); }
[data-theme="terminal"] .ms-content { grid-template-columns: minmax(0, 1fr); }
[data-theme="terminal"] .ms-copy { align-self: start; max-width: none; gap: 0.5rem; }
[data-theme="terminal"] .ms-mode { color: var(--accent); font-family: var(--font-mono); text-transform: none; letter-spacing: 0.04em; }
[data-theme="terminal"] .ms-title { font-family: var(--font-mono); font-weight: 600; }
[data-theme="terminal"] .ms-title::before { content: "$ "; color: var(--muted); }
[data-theme="terminal"] .ms-note { font-family: var(--font-mono); }
[data-theme="terminal"] .ms-note::after {
  content: " \2588";
  color: var(--accent);
  animation: term-blink 1.05s steps(1) infinite;
}
[data-theme="terminal"] .ms-visual { display: none; }
[data-theme="terminal"] .ms-meter { color: var(--muted); font-family: var(--font-mono); }
[data-theme="terminal"] .ms-meter i { border-radius: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-theme="terminal"] .ms-meter i::after { background: var(--accent); }
[data-theme="terminal"] .ms-card {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
[data-theme="terminal"] .ms-card--stat { background: color-mix(in srgb, var(--accent) 10%, transparent); }
[data-theme="terminal"] .ms-stat { color: var(--accent); font-family: var(--font-mono); }
[data-theme="terminal"] .ms-stat-label { color: var(--muted); }
[data-theme="terminal"] .ms-card--detail span { color: var(--muted); }
[data-theme="terminal"] .ms-card--detail span + span { border-left-color: var(--line); }

/* --------------------------------------------------------------------------
   Self-preview, a mini terminal window inside the carousel card
   -------------------------------------------------------------------------- */
.mode-card[data-mode="terminal"] .mc-prev {
  background: #050805;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  border: 1px solid rgba(57, 255, 20, 0.5);
  border-radius: 0;
}
.mode-card[data-mode="terminal"] .mc-prev::before {
  content: "C:\\PlainPages>";
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  color: #39ff14;
  font: 600 0.62rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.02em;
}
.mode-card[data-mode="terminal"] .mc-prev::after {
  content: "status: ready";
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  color: #7a8f7a;
  font: 400 0.56rem/1 "IBM Plex Mono", monospace;
}
/* Blinking cursor parked right after the prompt line. */
.mode-card[data-mode="terminal"] .mp-c {
  left: 5.7rem; top: 0.48rem;
  width: 0.42rem; height: 0.62rem;
  background: #39ff14;
  animation: term-blink 1.05s steps(1) infinite;
}
.mode-card[data-mode="terminal"] .mp-a,
.mode-card[data-mode="terminal"] .mp-b { display: none; }
.mode-card[data-mode="terminal"] .mc-aa {
  left: 0.55rem; top: 2.1rem;
  color: #39ff14;
  font: 600 0.62rem/1 "IBM Plex Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="terminal"] .hero-title::after,
  [data-theme="terminal"] .ms-note::after,
  .mode-card[data-mode="terminal"] .mp-c {
    animation: none !important;
    opacity: 1 !important;
  }
}