/* common.css — shared foundation for exe.dev pages */

/* ================================================================
   CSS Custom Properties
   ================================================================ */
:root {
  /* Colors — hierarchy: bg (page) → surface (cards) → subtle (inset) → muted (code) */
  --color-bg:           #fafafa;
  --color-surface:      #fff;
  --color-bg-subtle:    #f8f8f8;
  --color-bg-muted:     #f3f4f6;
  --color-bg-overlay:   rgba(0, 0, 0, 0.5);

  --color-text:         #111;
  --color-text-secondary: #666;
  --color-text-muted:   #999;

  --color-border:       #e5e5e5;
  --color-border-subtle: #f0f0f0;
  --color-border-input: #e0e0e0;

  --color-link:         #0066cc;
  --color-link-hover:   #004499;

  --color-success:      #16a34a;
  --color-success-light: #f0fdf4;
  --color-success-border: #86efac;
  --color-danger:       #dc2626;
  --color-danger-light: #fef2f2;
  --color-danger-border: #fca5a5;

  /* Typography */
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --font-system:
    system-ui, -apple-system, sans-serif;

  --leading:            1.6;
  --text-base:          16px;
  --text-sm:            14px;
  --text-xs:            13px;
  --text-xxs:           12px;

  /* Spacing */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #111;
    --color-surface:      #1f1f1f;
    --color-bg-subtle:    #2a2a2a;
    --color-bg-muted:     #2a2a2a;
    --color-bg-overlay:   rgba(0, 0, 0, 0.7);

    --color-text:         #f3f4f6;
    --color-text-secondary: #9ca3af;
    --color-text-muted:   #6b7280;

    --color-border:       #333;
    --color-border-subtle: #333;
    --color-border-input: #333;

    --color-link:         #60a5fa;
    --color-link-hover:   #93c5fd;

    --color-success:      #86efac;
    --color-success-light: #052e16;
    --color-success-border: #166534;
    --color-danger:       #f87171;
    --color-danger-light: #450a0a;
    --color-danger-border: #991b1b;
  }
}

/* Explicit theme overrides for manual theme toggle (terminal, etc.) */
[data-theme="light"] {
  --color-bg:           #fafafa;
  --color-surface:      #fff;
  --color-bg-subtle:    #f8f8f8;
  --color-bg-muted:     #f3f4f6;
  --color-text:         #111;
  --color-text-secondary: #666;
  --color-text-muted:   #999;
  --color-border:       #e5e5e5;
  --color-border-subtle: #f0f0f0;
  --color-border-input: #e0e0e0;
  --color-link:         #0066cc;
  --color-link-hover:   #004499;
}

[data-theme="dark"] {
  --color-bg:           #111;
  --color-surface:      #1f1f1f;
  --color-bg-subtle:    #2a2a2a;
  --color-bg-muted:     #2a2a2a;
  --color-text:         #f3f4f6;
  --color-text-secondary: #9ca3af;
  --color-text-muted:   #6b7280;
  --color-border:       #333;
  --color-border-subtle: #333;
  --color-border-input: #333;
  --color-link:         #60a5fa;
  --color-link-hover:   #93c5fd;
}

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

/* ================================================================
   Base
   ================================================================ */
body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ================================================================
   Links
   ================================================================ */
a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ================================================================
   Inline code
   ================================================================ */
code {
  background: var(--color-bg-muted);
  color: var(--color-text);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

pre {
  background: var(--color-bg-muted);
  padding: 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ================================================================
   Buttons
   ================================================================ */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-xs);
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
  color: var(--color-text);
  text-decoration: none;
}

.btn-small {
  padding: 4px 8px;
  font-size: var(--text-xxs);
}

.btn-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger);
  color: white;
}

@media (prefers-color-scheme: dark) {
  .btn:hover {
    border-color: #444;
  }
}

/* ================================================================
   Cards
   ================================================================ */
.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  padding: 20px;
}

/* ================================================================
   Section titles (uppercase label style)
   ================================================================ */
.section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================================================================
   Tables (shared base)
   ================================================================ */
table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text);
}

table tr:last-child td {
  border-bottom: none;
}

table a {
  color: var(--color-link);
  text-decoration: none;
}

table a:hover {
  text-decoration: underline;
}


/* ================================================================
   Form inputs (shared)
   ================================================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
  padding: 8px 12px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-xs);
  background: var(--color-surface);
  color: var(--color-text);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-muted);
  }
}

/* ================================================================
   Status messages
   ================================================================ */
.msg-error {
  color: var(--color-danger);
  font-size: var(--text-xs);
}

.msg-success {
  color: var(--color-success);
  font-size: var(--text-xs);
}

/* ================================================================
   Utility
   ================================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ================================================================
   Top bar (shared via topbar.js)
   Matches the home page nav exactly.
   ================================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  /* Shrink below content rather than pushing the bar wider: the action
     buttons must win the space. Deliberately NOT overflow:hidden — that would
     clip the "uses" menu, which hangs below the bar. nav-collapse.js hides
     links until the group fits instead. */
  min-width: 0;
}

.topbar-logo {
  display: flex;
  align-self: center;
}

.topbar-logo img {
  width: 1.5rem;
  height: 1.5rem;
}

.topbar-logo-text {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text, #111);
  text-decoration: none;
}

.topbar-link {
  font-size: 0.85rem;
  color: #6b7280;
  text-decoration: none;
}

.topbar-link:hover {
  color: #111;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.topbar-right a {
  color: #6b7280;
  text-decoration: none;
}

.topbar-right a:hover {
  color: #111;
  text-decoration: none;
}

.topbar-login {
  padding: 0.4rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  transition: all 0.15s;
}

.topbar-login:hover {
  border-color: #111;
  color: #111;
}

.topbar-login-short {
  display: none;
}

/* "Get a Demo": filled, so it reads as the emphasized sibling of the
   outlined Login button. Mirrors .nav-demo on the home page. */
.topbar-demo {
  padding: 0.4rem 1rem;
  border: 1px solid #111;
  border-radius: 0.375rem;
  background: #111;
  white-space: nowrap;
  transition: all 0.15s;
}

.topbar-right a.topbar-demo,
.topbar-right a.topbar-demo:hover {
  color: #fff;
}

.topbar-demo:hover {
  background: #374151;
  border-color: #374151;
}

.topbar-demo-short {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .topbar-logo-text {
    color: #f3f4f6;
  }
  .topbar-link {
    color: #9ca3af;
  }
  .topbar-link:hover {
    color: #f3f4f6;
  }
  .topbar-right,
  .topbar-right a {
    color: #9ca3af;
  }
  .topbar-right a:hover {
    color: #f3f4f6;
  }
  .topbar-login {
    border-color: #4b5563;
  }
  .topbar-login:hover {
    border-color: #f3f4f6;
    color: #f3f4f6;
  }
  .topbar-demo {
    background: #f3f4f6;
    border-color: #f3f4f6;
  }
  .topbar-right a.topbar-demo,
  .topbar-right a.topbar-demo:hover {
    color: #111;
  }
  .topbar-demo:hover {
    background: #fff;
    border-color: #fff;
  }
}

@media (max-width: 600px) {
  .topbar {
    padding: 0.75rem 1rem;
  }

  .topbar-left {
    gap: 0.5rem;
  }

  .topbar-logo-text {
    font-size: 0.8rem;
    margin-right: 0.5rem;
  }

  .topbar-link {
    font-size: 0.75rem;
  }

  .topbar-right {
    gap: 0.4rem;
    font-size: 0.75rem;
  }

  .topbar-login {
    padding: 0.3rem 0.6rem;
  }

  .topbar-demo {
    padding: 0.3rem 0.6rem;
  }

  .topbar-login-full {
    display: none;
  }

  .topbar-login-short {
    display: inline;
  }

  .topbar-demo-full {
    display: none;
  }

  .topbar-demo-short {
    display: inline;
  }

  /* Two action buttons plus five nav links do not fit a phone; the links
     collapse instead of wrapping. nav-collapse.js decides which ones go by
     measuring — page font sizes vary too much for a breakpoint alone. */
}

/* Overflow-driven collapse, applied by nav-collapse.js after it measures the
   bar: blog goes first, then docs, then the wordmark, so whenever there is room
   the links are shown. The action buttons in topbar-right never collapse. The
   media queries below make roughly the same cuts for visitors without JS, and
   for the moment before nav-collapse.js runs. */
.topbar[data-hide-blog] .topbar-link-blog,
.topbar[data-hide-docs] .topbar-link-docs,
.topbar[data-hide-wordmark] .topbar-logo-text {
  display: none;
}

@media (max-width: 600px) {
  .topbar-link-blog {
    display: none;
  }
}

@media (max-width: 420px) {
  .topbar-link-docs {
    display: none;
  }
}

@media (max-width: 380px) {
  .topbar-logo-text {
    display: none;
  }
}

/* ================================================================
   Footer (shared via footer.js)
   ================================================================ */
footer {
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 40px;
}

footer a {
  color: var(--color-text-muted);
}

footer a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  footer {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}

/* ================================================================
   "uses" nav dropdown (shared via topbar.js)
   Mirrors the home page nav dropdown.
   ================================================================ */
.topbar .nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.topbar .nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /* Inherit family/weight/line-height; font-size comes from the
     .topbar-link class on the button so it matches sibling links
     (including the smaller mobile size). */
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.topbar .nav-dropdown-caret {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.18s ease;
}

.topbar .nav-dropdown:hover .nav-dropdown-caret,
.topbar .nav-dropdown:focus-within .nav-dropdown-caret,
.topbar .nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.topbar .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 18rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}

/* Invisible hover bridge to prevent flicker between trigger and menu. */
.topbar .nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.topbar .nav-dropdown:hover .nav-dropdown-menu,
.topbar .nav-dropdown:focus-within .nav-dropdown-menu,
.topbar .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.topbar .nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.topbar .nav-dropdown-item:hover,
.topbar .nav-dropdown-item:focus-visible {
  background: #f3f4f6;
  outline: none;
}

.topbar .nav-dropdown-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
}

.topbar .nav-dropdown-desc {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .topbar .nav-dropdown-menu {
    background: #1a1a1a;
    border-color: #2a2a2a;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
  }
  .topbar .nav-dropdown-item:hover,
  .topbar .nav-dropdown-item:focus-visible {
    background: #2a2a2a;
  }
  .topbar .nav-dropdown-title {
    color: #f3f4f6;
  }
  .topbar .nav-dropdown-desc {
    color: #9ca3af;
  }
}

/* The 18rem menu is wider than a small phone once the trigger's own left
   offset is added, so anchor it to the bar (which spans the viewport) rather
   than the trigger, and let it use the bar's gutters. Without this it
   stretches the page wider than the viewport even while hidden. Must come
   after the base .topbar .nav-dropdown-menu rules above to win. */
@media (max-width: 600px) {
  .topbar {
    position: relative;
  }

  .topbar .nav-dropdown {
    position: static;
  }

  .topbar .nav-dropdown-menu {
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }

  .topbar .nav-dropdown::after {
    display: none;
  }
}