/*
 * agent-intelligence.ai — Landing Page Styles
 *
 * DECISION: Font hosting
 * Using system font stack only (ui-monospace chain). No external font requests.
 * Rationale: fastest load, stays under 100KB budget, renders monospace on all OSes.
 * Upgrade path: self-host JetBrains Mono WOFF2 (latin subset ~30KB) if visual consistency
 * across OSes becomes a priority. Add @font-face block here pointing to /fonts/JetBrainsMono.woff2.
 *
 * Font stack: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro',
 *             Menlo, Consolas, 'DejaVu Sans Mono', monospace
 */

/* ---------------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-bg:           #0a0a0a;   /* near-black page background */
  --color-surface:      #111111;   /* slightly lighter panel surface */
  --color-border:       #2a2a2a;   /* subtle border / divider */
  --color-green:        #4ade80;   /* green accent — prompts, logo, success */
  --color-amber:        #f59e0b;   /* amber accent — agent names, warnings */
  --color-grey:         #9ca3af;   /* grey secondary — output text, descriptors */
  --color-white:        #e5e7eb;   /* near-white — primary body text */
  --color-blue:         #60a5fa;   /* blue — URLs, links */
  --color-red:          #f87171;   /* red — errors, close dot */
  --color-yellow:       #fbbf24;   /* yellow — minimise dot */

  /* Typography */
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro',
               Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size-base:   14px;
  --font-size-sm:     12px;
  --font-size-lg:     16px;
  --font-size-xl:     20px;
  --line-height-base: 1.6;   /* ~22.4px — keeps monospace grid alignment */
  --line-height-tight: 1.4;
}

/* ---------------------------------------------------------------------------
 * Accessibility utility
 * ------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Reset & base
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: var(--font-size-base);
}

body {
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-mono);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Page layout — task-003
 * Three-row grid: header (auto) / main (1fr) / footer (auto)
 * Guarantees all content fits within a 1440×900 viewport with no scroll.
 * ------------------------------------------------------------------------- */

#app {
  height: 100%;
  max-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* --- Header --- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.logo,
.logo:hover,
.logo:visited,
.logo:focus,
.logo:active {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-green);
  letter-spacing: 0;   /* monospace grid — no reflow artifacts */
  user-select: none;
  white-space: pre;    /* preserve bracket character spacing exactly */
  text-decoration: none !important;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  color: var(--color-grey);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-green);  /* accent color on hover — terminal aesthetic */
}

.nav-link:focus-visible {
  color: var(--color-green);
  outline: 1px solid var(--color-green);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-color: var(--color-green);
}

.nav-cta {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: var(--color-green);
  color: var(--color-green);
  outline: none;
}

.nav-cta:focus-visible {
  outline: 1px solid var(--color-green);
  outline-offset: 2px;
}

/* --- Main content — two-column grid: hero (left) + terminal (right) --- */

.site-main {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
  padding: 2rem;
  overflow: hidden;
  min-height: 0; /* allow grid children to shrink */
}

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

.hero-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  min-height: 0;
}

.hero-content {
  flex-shrink: 0;
}

/* Box-drawing framed hero block */
.hero-box {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-white);
  white-space: pre;
  letter-spacing: 0;  /* prevent monospace grid drift */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  font-weight: normal;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0, "kern" 0;
  text-rendering: optimizeSpeed;
}

.box-border {
  color: var(--color-green);
}

.hero-title-text {
  color: var(--color-white);
  font-weight: bold;
}

.hero-tagline-text {
  color: var(--color-green);
}

.hero-sub-text {
  color: var(--color-grey);
}

.feature-strip {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  overflow: hidden;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.6rem;
}

.feature-label {
  font-size: var(--font-size-sm);
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-prefix {
  color: var(--color-green);
}

.feature-desc {
  font-size: var(--font-size-sm);
  color: var(--color-grey);
  line-height: var(--line-height-tight);
}

.cta-area {
  flex-shrink: 0;
  /* task-010/011 will populate this */
}

/* --- Terminal section --- */

.terminal-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.terminal-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  min-height: 0;
}

.terminal-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-close    { background-color: var(--color-red); }
.dot-minimise { background-color: var(--color-yellow); }
.dot-maximise { background-color: var(--color-green); }

.terminal-title {
  margin-left: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-grey);
}

.terminal-content {
  flex: 1;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  min-height: 0;
  font-size: var(--font-size-sm);
}

/* Typewriter blinking cursor */
.t-cursor {
  color: var(--color-green);
  animation: t-blink 1s step-end infinite;
  user-select: none;
}

@keyframes t-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Terminal line type colors — used by animation engine (task-008) */
.t-url          { color: var(--color-blue); }
.t-agent        { color: var(--color-amber); }
.t-comment      { color: var(--color-grey); opacity: 0.7; }
.t-toml-header  { color: var(--color-grey); }
.t-toml-key     { color: var(--color-amber); }
.t-bat-bar      { color: var(--color-green); opacity: 0.6; }
.t-success      { color: var(--color-green); }

/* Copy button on terminal prompt lines (landing page) */
.t-copy-btn {
  background: none; border: none;
  color: var(--color-grey); cursor: pointer;
  padding: 0 0.3rem; font: inherit; font-size: var(--font-size-sm); line-height: 1;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
  vertical-align: middle; margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.terminal-line:hover .t-copy-btn { opacity: 0.7; }
.t-copy-btn:hover, .t-copy-btn.copied { color: var(--color-green); opacity: 1 !important; }

/* Linkified command keyword on prompt lines */
.t-cmd-link {
  color: inherit; text-decoration: underline;
  text-decoration-color: rgba(74, 222, 128, 0.35);
  text-underline-offset: 2px; transition: text-decoration-color 0.15s;
}
.t-cmd-link:hover { text-decoration-color: var(--color-green); }

/* Install command block in landing page CTA area */
.install-block {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm); margin-top: 1rem;
}
.install-block code {
  flex: 1; color: var(--color-green); background: none; padding: 0; font: inherit;
}
.install-block-copy {
  background: none; border: none; color: var(--color-grey); cursor: pointer;
  padding: 0; font: inherit; font-size: var(--font-size-sm);
  transition: color 0.15s; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.install-block-copy:hover, .install-block-copy.copied { color: var(--color-green); }

/* install-block is clickable */
.install-block { cursor: pointer; }
.install-block:hover .install-block-copy { color: var(--color-green); }

/* Copy-all-steps button in terminal chrome */
.terminal-copy-all {
  margin-left: auto;
  background: none; border: 1px solid transparent; border-radius: 2px;
  color: var(--color-grey); cursor: pointer;
  padding: 0.1rem 0.4rem;
  font: inherit; font-size: 11px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.terminal-copy-all:hover,
.terminal-copy-all.copied {
  color: var(--color-green);
  border-color: var(--color-border);
}

.terminal-line {
  display: flex;
  align-items: baseline;
  line-height: var(--line-height-tight);
  white-space: pre;
}

.t-prompt {
  color: var(--color-green);
}

.t-output {
  color: var(--color-grey);
}

/* --- Footer --- */

.site-footer {
  padding: 0.5rem 2rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-grey);
}

/* ---------------------------------------------------------------------------
 * Prism.js syntax highlighting — token colors matching design tokens
 * Loaded via CDN on docs pages. Override Prism defaults (light bg, shadows).
 * ------------------------------------------------------------------------- */

code[class*="language-"],
pre[class*="language-"]  { background: transparent; text-shadow: none; border-radius: 0; }

.token.property,
.token.tag               { color: var(--color-amber); }
.token.string            { color: var(--color-green); }
.token.number            { color: var(--color-blue); }
.token.boolean           { color: var(--color-blue); }
.token.null.keyword      { color: var(--color-blue); }
.token.keyword           { color: var(--color-blue); }
.token.builtin           { color: var(--color-blue); }
.token.punctuation       { color: var(--color-grey); }
.token.operator          { color: var(--color-grey); }
.token.comment,
.token.block-comment     { color: var(--color-grey); opacity: 0.6; font-style: italic; }
.token.function          { color: var(--color-amber); }
.token.class-name        { color: var(--color-white); font-weight: bold; }
.token.decorator         { color: var(--color-amber); }
.token.namespace         { color: var(--color-grey); }

/* ---------------------------------------------------------------------------
 * Graceful degradation for narrower viewports
 * Stack hero above terminal on viewports < 1024px wide.
 * ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  body {
    overflow: auto; /* allow scroll on small screens */
  }

  #app {
    max-height: none;
    overflow: visible;
  }

  .site-main {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .terminal-section {
    min-height: 320px;
  }
}