/* Stratlate — shared stylesheet */

:root {
  --ink: #0a0d13;
  --ink-2: #0e131c;
  --ink-3: #121826;
  --panel: #0d1119;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #e8ecf4;
  --text-dim: #9aa3b5;
  --text-faint: #6b7488;
  --signal: #c9f158;
  --pine: #5fb96e;
  --amber: #e8b95a;
  --red: #ef6a6a;
  --hazard: #b48ef0;
  --blue: #6ab0f3;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --heading: "Chakra Petch", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

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

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 13, 19, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--heading);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9rem;
}
.site-nav a { color: var(--text-dim); }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.nav-cta {
  color: var(--signal);
  border: 1px solid rgba(201, 241, 88, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a.nav-cta:hover {
  background: var(--signal);
  color: var(--ink);
}

/* Sign in / signed-in control. Sits in the header nav and inherits its size,
   so it reads as one more nav item rather than a form control. */
.auth-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  white-space: nowrap;
}
.auth-signedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-signedin strong {
  color: var(--text);
  font-weight: 600;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--signal);
  cursor: pointer;
}
.auth-btn:hover { text-decoration: underline; }
.auth-btn-quiet { color: var(--text-dim); }
.auth-btn-quiet:hover { color: var(--text); }

/* ---------- Banner ---------- */

.app-banner {
  background: rgba(232, 185, 90, 0.1);
  border-bottom: 1px solid rgba(232, 185, 90, 0.28);
  color: var(--amber);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 24px;
}
/* The hidden attribute must win over any element's own display value (the
   spinners are display:inline-block, which otherwise beats the browser's
   default [hidden] rule and leaves them spinning forever). */
[hidden] { display: none !important; }

.app-banner[hidden] { display: none; }

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

.hero {
  padding: 88px 0 64px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% -10%, rgba(201, 241, 88, 0.08), transparent),
    radial-gradient(ellipse 45% 35% at 80% 0%, rgba(95, 185, 110, 0.06), transparent);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  margin: 0 auto 18px;
  max-width: 820px;
}
.hero h1 .accent { color: var(--signal); }

.hero p.lede {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
  font-size: 0.8rem;
  color: var(--text-faint);
}
.hero-badges span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  padding: 12px 26px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--signal);
  color: #10130a;
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.3); }

.btn-small {
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 8px;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(16, 19, 10, 0.35);
  border-top-color: #10130a;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Converter ---------- */

.converter-section { padding: 8px 0 72px; }

.converter-shell {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ink-2), var(--panel));
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.converter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}

.direction-group {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.field label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa3b5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 9px 34px 9px 12px;
  cursor: pointer;
}
select:hover { border-color: rgba(255, 255, 255, 0.25); }

.direction-arrow {
  color: var(--pine);
  font-size: 1.2rem;
  padding-bottom: 8px;
  user-select: none;
}

.toolbar-spacer { flex: 1; }

.converter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* The converter is the one place on the site where horizontal room is the
   product: source and output are read side by side, and at 1100px the code
   wraps while the screen still has space to spare. Prose stays at 1100px
   because long measure is hard to read; code does not have that problem. */
.converter-section .container { max-width: 1500px; }

.pane .CodeMirror, .pane textarea { min-height: 380px; }

@media (max-width: 900px) {
  .converter-grid { grid-template-columns: 1fr; }
}

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink);
  overflow: hidden;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  min-height: 40px;
}
.pane-head .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.dot-src { background: var(--signal); }
.dot-out { background: var(--pine); }

.pane-actions { display: flex; gap: 8px; }
.pane-actions button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pane-actions button:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.pane-actions button.copied { color: var(--signal); border-color: rgba(201,241,88,0.5); }

.pane textarea {
  width: 100%;
  min-height: 380px;
  resize: vertical;
  background: var(--ink);
  color: var(--text);
  border: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 3;
}
.pane textarea:focus-visible { outline-offset: -2px; }
.pane textarea::placeholder { color: var(--text-faint); }

/* CodeMirror theming (applies only when CDN loads) */
.pane .CodeMirror {
  height: 380px;
  background: var(--ink);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
}
.pane .CodeMirror-gutters {
  background: var(--ink);
  border-right: 1px solid var(--border);
}
.pane .CodeMirror-linenumber { color: var(--text-faint); }
.pane .CodeMirror-cursor { border-left: 2px solid var(--signal); }
.pane .CodeMirror-selected { background: rgba(201, 241, 88, 0.12); }
.pane .CodeMirror-focused .CodeMirror-selected { background: rgba(201, 241, 88, 0.16); }
.pane .CodeMirror span.cm-keyword { color: #8fd0ff; }
.pane .CodeMirror span.cm-number { color: var(--signal); }
.pane .CodeMirror span.cm-string { color: var(--pine); }
.pane .CodeMirror span.cm-comment { color: var(--text-faint); font-style: italic; }
.pane .CodeMirror span.cm-def,
.pane .CodeMirror span.cm-variable-2 { color: #d8b4fe; }
.pane .CodeMirror span.cm-builtin,
.pane .CodeMirror span.cm-atom { color: var(--amber); }

/* ---------- Diagnostics panel ---------- */

.diagnostics {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink);
  overflow: hidden;
}
.diagnostics-head {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.diagnostics ul {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.82rem;
  max-height: 220px;
  overflow-y: auto;
}
.diagnostics li { padding: 3px 0; overflow-wrap: anywhere; }
.diagnostics li .loc {
  display: inline-block;
  min-width: 70px;
  color: var(--text-faint);
}
.diagnostics li.warn, .lint-section li.warn, .preflight-details li.warn { color: var(--amber); }
.diagnostics li.err, .lint-section li.err, .preflight-details li.err { color: var(--red); }
.diagnostics li.info, .lint-section li.info, .preflight-details li.info { color: var(--text-dim); }
.diagnostics li.ok, .lint-section li.ok, .preflight-details li.ok { color: var(--pine); }
.diagnostics li.hazard, .lint-section li.hazard, .preflight-details li.hazard { color: var(--hazard); }

.sev-badge {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  border: 1px solid;
  padding: 1px 6px;
  margin-right: 8px;
  vertical-align: 1px;
}
.sev-badge.sev-error, .sev-badge.sev-fatal {
  color: var(--red);
  border-color: rgba(239, 106, 106, 0.4);
  background: rgba(239, 106, 106, 0.1);
}
.sev-badge.sev-warn, .sev-badge.sev-warning {
  color: var(--amber);
  border-color: rgba(232, 185, 90, 0.4);
  background: rgba(232, 185, 90, 0.1);
}
.sev-badge.sev-hazard {
  color: var(--hazard);
  border-color: rgba(180, 142, 240, 0.4);
  background: rgba(180, 142, 240, 0.1);
}
.sev-badge.sev-info, .sev-badge.sev-hint {
  color: var(--text-dim);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.diag-code {
  color: var(--text-faint);
  margin-right: 8px;
}

/* ---------- Pre-flight check strip ---------- */

.preflight {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink);
  padding: 10px 14px;
}
.preflight[hidden] { display: none; }
.preflight-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.preflight-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.verdict-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid;
  padding: 2px 10px;
  white-space: nowrap;
}
.verdict-chip.verdict-feasible {
  color: var(--pine);
  border-color: rgba(95, 185, 110, 0.4);
  background: rgba(95, 185, 110, 0.08);
}
.verdict-chip.verdict-pipeline {
  color: var(--blue);
  border-color: rgba(106, 176, 243, 0.4);
  background: rgba(106, 176, 243, 0.08);
}
.verdict-chip.verdict-degraded {
  color: var(--amber);
  border-color: rgba(232, 185, 90, 0.4);
  background: rgba(232, 185, 90, 0.08);
}
.verdict-chip.verdict-blocked {
  color: var(--red);
  border-color: rgba(239, 106, 106, 0.4);
  background: rgba(239, 106, 106, 0.08);
}
.preflight-message {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.preflight-message[hidden] { display: none; }
.preflight-details { margin-top: 8px; }
.preflight-details[hidden] { display: none; }
.preflight-details summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  list-style: none;
}
.preflight-details summary::-webkit-details-marker { display: none; }
.preflight-details summary::before {
  content: "\25B8";
  margin-right: 6px;
  color: var(--text-faint);
}
.preflight-details[open] summary::before { content: "\25BE"; }
.preflight-details ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  max-height: 220px;
  overflow-y: auto;
}
.preflight-details li { padding: 3px 0; overflow-wrap: anywhere; }
.preflight-details li .loc {
  display: inline-block;
  min-width: 70px;
  margin-right: 4px;
  color: var(--text-faint);
}

/* ---------- Lint section (TradingView compatibility check) ---------- */

.lint-section {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink);
  overflow: hidden;
}
.lint-section[hidden] { display: none; }
.lint-section summary {
  cursor: pointer;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  list-style: none;
}
.lint-section summary::-webkit-details-marker { display: none; }
.lint-section summary::before {
  content: "\25B8";
  color: var(--pine);
  margin-right: 8px;
}
.lint-section[open] summary::before { content: "\25BE"; }
.lint-section[open] summary { border-bottom: 1px solid var(--border); }
.lint-section ul {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.82rem;
  max-height: 220px;
  overflow-y: auto;
}
.lint-section li { padding: 3px 0; overflow-wrap: anywhere; }
.lint-section li .loc {
  display: inline-block;
  min-width: 70px;
  color: var(--text-faint);
}

/* ---------- Fidelity chip ---------- */

.fidelity-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--pine);
  border: 1px solid rgba(95, 185, 110, 0.35);
  background: rgba(95, 185, 110, 0.08);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 10px;
  cursor: help;
  white-space: nowrap;
}
.fidelity-chip[hidden] { display: none; }

/* ---------- Measured verification ---------- */

.verification {
  border-top: 1px solid var(--border);
  padding: 9px 14px;
  font-size: 0.82rem;
}
.verification[hidden] { display: none; }
.verification-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}
.verify-chip {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  border-radius: 999px;
  border: 1px solid;
  padding: 2px 9px;
  white-space: nowrap;
}
.verification-headline { color: var(--text); }
.verification-note {
  margin: 5px 0 0;
  font-size: 0.76rem;
  color: var(--text-faint);
  line-height: 1.5;
}
.verification-note:empty { display: none; }
.verification code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--text-dim);
}

.verification.verify-equivalent {
  background: rgba(95, 185, 110, 0.06);
}
.verification.verify-equivalent .verify-chip {
  color: var(--pine);
  border-color: rgba(95, 185, 110, 0.4);
  background: rgba(95, 185, 110, 0.1);
}
.verification.verify-divergent {
  background: rgba(232, 185, 90, 0.06);
}
.verification.verify-divergent .verify-chip {
  color: var(--amber);
  border-color: rgba(232, 185, 90, 0.4);
  background: rgba(232, 185, 90, 0.1);
}
/* Neutral on purpose: "we did not measure this" is not an error, and
   colouring it like one would teach people to read a refusal as a defect. */
.verification.verify-unevaluable .verify-chip {
  color: var(--text-dim);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- Conversion progress ----------
   Four steps, each showing its own result rather than a generic spinner. */
.pipeline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
}
.pipeline .step {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--text-faint);
}
.step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  flex: none;
  align-self: center;
}
.step-name { color: inherit; }
.step-state {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.step.is-running { color: var(--text-dim); }
.step.is-running .step-dot {
  border-color: var(--text-dim);
  background: var(--text-dim);
  animation: agent-breathe 1.8s ease-in-out infinite;
}
.step.is-done { color: var(--text); }
.step.is-done .step-dot { border-color: var(--pine); background: var(--pine); }
.step.is-warn { color: var(--text-dim); }
.step.is-warn .step-dot { border-color: var(--amber); background: var(--amber); }
.step.is-fail { color: var(--text-dim); }
.step.is-fail .step-dot { border-color: var(--danger, #d1584f); background: var(--danger, #d1584f); }
.step.is-skip .step-dot { border-style: dashed; background: none; }
@media (max-width: 640px) {
  .pipeline { gap: 4px 12px; }
}

/* Agentic review: runs after the conversion, so "running" is a normal state,
   not a warning. The chip breathes instead of spinning to stay quiet. */
.verification.verify-running .verify-chip {
  color: var(--text-dim);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  animation: agent-breathe 1.8s ease-in-out infinite;
}
@keyframes agent-breathe {
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .verification.verify-running .verify-chip { animation: none; }
}
/* The review's verdict as a table cell and a heading badge. */
.chip-review {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  white-space: nowrap;
}
.chip-review-ok {
  color: var(--pine);
  border-color: rgba(95, 185, 110, 0.4);
  background: rgba(95, 185, 110, 0.1);
}
.chip-review-running { animation: agent-breathe 1.8s ease-in-out infinite; }

/* What the reviewer could not remove: folded away, because on an EA this list
   is long and is the most useful thing on the page once opened. */
.agent-review-notes { margin-top: 6px; }
.agent-review-notes[hidden] { display: none; }
.agent-review-notes summary {
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--text-dim);
}
.agent-review-notes summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.agent-review-notes ul {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* What the AI review actually changed. Folded away like the notes above:
   on a long script the diff is the evidence, but it is not the headline —
   the measured verdict is. Only changed lines are listed, with a little
   context, because a full side-by-side of a 2,000-line strategy is
   unreadable in a panel this size. */
.agent-review-diff { margin-top: 6px; }
.agent-review-diff[hidden] { display: none; }
.agent-review-diff summary {
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--text-dim);
}
.agent-review-diff summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.agent-review-diff .diff-body {
  margin-top: 6px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.55;
}
.agent-review-diff .diff-row {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-review-diff .diff-add { color: var(--pine); background: rgba(95, 185, 110, 0.08); }
.agent-review-diff .diff-del { color: var(--red); background: rgba(239, 106, 106, 0.08); }
.agent-review-diff .diff-ctx { color: var(--text-faint); }
.agent-review-diff .diff-gap {
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2px 8px;
}

.agent-review-actions {
  margin-top: 8px;
}
.agent-review-actions[hidden] { display: none; }

/* ---------- Extras notice ---------- */

.extras-notice {
  border-top: 1px solid var(--border);
  background: rgba(201, 241, 88, 0.04);
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.extras-notice[hidden] { display: none; }
.extras-notice p { margin: 0 0 8px; }
.extras-notice code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--text);
}
.extras-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.extras-buttons button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.extras-buttons button:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.extras-buttons button.copied { color: var(--signal); border-color: rgba(201,241,88,0.5); }

.spinner-ghost {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--text);
}

/* ---------- Features ---------- */

.features { padding: 40px 0 24px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink-2);
  padding: 24px;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.feature-card p { color: var(--text-dim); font-size: 0.92rem; margin: 0; }
.feature-card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(201, 241, 88, 0.1);
  border: 1px solid rgba(201, 241, 88, 0.25);
  color: var(--signal);
  margin-bottom: 14px;
}

/* ---------- FAQ ---------- */

.faq { padding: 48px 0 72px; }
.faq h2, .features h2, .section-title {
  font-size: 1.6rem;
  margin-bottom: 26px;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink-2);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.98rem;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--signal);
  font-size: 1.2rem;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--text-dim);
  font-size: 0.94rem;
}

/* ---------- Pillar pages ---------- */

.page-main { padding: 64px 0 72px; }
.page-main h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 20px; max-width: 800px; }
.page-main .prose p { color: var(--text-dim); max-width: 760px; }
.page-main h2 { font-size: 1.35rem; margin-top: 44px; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 24px 0;
}
.mapping-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.88rem;
}
.mapping-table th, .mapping-table td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.mapping-table tr:last-child td { border-bottom: 0; }
.mapping-table th {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.02);
}
.mapping-table code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.mapping-table td:first-child code { color: #8fd0ff; }
.mapping-table td:nth-child(2) code { color: var(--pine); }
.mapping-table td:last-child { color: var(--text-dim); }

.cta-block {
  margin-top: 48px;
  border: 1px solid rgba(201, 241, 88, 0.25);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 120% at 50% -20%, rgba(201, 241, 88, 0.08), transparent),
    var(--ink-2);
  padding: 36px;
  text-align: center;
}
.cta-block h2 { margin-top: 0; }
.cta-block p { color: var(--text-dim); max-width: 560px; margin: 0 auto 24px; }

/* ---------- 404 ---------- */

.notfound {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.notfound .code {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 5rem;
  color: var(--signal);
  line-height: 1;
  margin-bottom: 12px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  font-size: 0.85rem;
  color: var(--text-faint);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* The footer carries one item now, so space-between would pin it hard left
     against a wide empty row. Centred reads as deliberate at every width. */
  justify-content: center;
  gap: 12px;
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--text); }
.footer-domains { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .converter-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 40px; }
  .site-nav { gap: 14px; }
  .site-nav .nav-hide-sm { display: none; }
  /* On a phone the address would eat the header; "Sign out" stays, the
     "Signed in as …" label does not. */
  .auth-label { display: none; }
  .converter-toolbar { align-items: stretch; }
  .converter-toolbar .btn-primary,
  .converter-toolbar #validate-btn { width: 100%; }
  .toolbar-spacer { display: none; }
  .direction-group { width: 100%; }
  .direction-group .field { flex: 1; }
  .direction-group select { width: 100%; }
}

/* ---------------------------------------------------------------- pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 8px 0 48px;
  align-items: start;
}

.plan-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The paid plan is the recommendation, so it says so in the design rather
   than relying on the reader to compare three columns of prose. */
.plan-card-featured {
  border-color: var(--signal);
  box-shadow: 0 0 0 1px rgba(201, 241, 88, 0.25);
}

.plan-card h2 {
  font-family: var(--heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.plan-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan-amount {
  font-family: var(--heading);
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--text);
}

.plan-period { color: var(--text-faint); font-size: 0.95rem; }
.plan-note { margin: 0; color: var(--text-dim); font-size: 0.94rem; }

.plan-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.plan-list li {
  padding-left: 22px;
  position: relative;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--pine);
}

.plan-card .btn { width: 100%; justify-content: center; text-align: center; }

.plan-fineprint {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--text-faint);
}

/* ------------------------------------------------- metering & API key */

.usage-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  cursor: help;
  align-self: center;
}
.usage-chip[hidden] { display: none; }

.apikey-row { margin-top: 10px; }

.contribute-row { margin-top: 8px; }
.contribute-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  max-width: 640px;
}
.contribute-consent input { flex: none; margin-top: 2px; }
.contribute-consent:hover { color: var(--text); }

.apikey-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text-dim);
  cursor: pointer;
}
.apikey-toggle:hover { color: var(--text); text-decoration: underline; }
.apikey-toggle svg { flex: none; }

.apikey-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.apikey-panel[hidden] { display: none; }

.apikey-panel input {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  background: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
}
.apikey-panel input::placeholder { color: var(--text-faint); }

.apikey-status {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--text-faint);
}
.apikey-status:empty { display: none; }

.quota-panel {
  margin-top: 14px;
  border: 1px solid rgba(232, 185, 90, 0.45);
  border-radius: 12px;
  background: rgba(232, 185, 90, 0.06);
  padding: 16px 18px;
}
.quota-panel[hidden] { display: none; }

.quota-head {
  font-family: var(--heading);
  font-size: 1.05rem;
  color: var(--amber);
  margin-bottom: 6px;
}

.quota-message {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 0.94rem;
  max-width: 640px;
}

.quota-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Static note shown on pricing.html when live plan data can't be loaded. */
.pricing-note {
  margin: -8px 0 20px;
  color: var(--text-faint);
  font-size: 0.88rem;
}
.pricing-note[hidden] { display: none; }

/* ---- Terms gate + legal pages ---- */
.terms-row { margin-top: 12px; }
.terms-consent { color: var(--text); }
.terms-consent a { color: var(--signal); }

.output-disclaimer {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.output-disclaimer a { color: var(--text-dim); text-decoration: underline; }

.legal { padding-bottom: 72px; max-width: 820px; }
.legal .legal-meta { color: var(--text-dim); font-size: 0.86rem; margin-bottom: 28px; }
.legal h2 { font-size: 1.15rem; margin: 30px 0 10px; }
.legal p, .legal li { color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; }
.legal p strong { color: var(--text); }
.legal ul { padding-left: 22px; margin: 8px 0 14px; }
.legal li { margin-bottom: 6px; }

/* ---- Compile feedback (anonymous yes/no under the output pane) ---- */
.feedback-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.feedback-row[hidden] { display: none; }
.feedback-status { color: var(--signal); }

/* ---- Finishing guide: per-warning "how to finish" block ---- */
.diag-hint { margin: 6px 0 2px; font-size: 0.82rem; }
.diag-hint summary { cursor: pointer; color: var(--signal); font-weight: 600; }
.diag-hint p { margin: 6px 0; color: var(--text-dim); }
.diag-hint pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--ink-2);
  font-size: 0.78rem;
  overflow-x: auto;
  white-space: pre;
}

/* ---- Risk disclosure under the output ---- */
.risk-note { margin: 8px 0 0; font-size: 0.82rem; }
.risk-note summary { cursor: pointer; color: var(--text-dim); }
.risk-note summary:hover { color: var(--text); }
.risk-note p { margin: 8px 0; color: var(--text-dim); line-height: 1.55; }
.risk-note strong { color: var(--text); }

/* ---- Quality page tables ---- */
.q-table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 0.92rem; }
.q-table th, .q-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.q-table th { font-weight: 500; color: var(--text-dim); width: 62%; }
.q-table td { color: var(--text); }
.q-note { color: var(--text-dim); font-size: 0.9rem; }

/* ---- Powered-by mark ---- */
/*
 * The credit was a 16px mark at 0.85 opacity on near-black: at that size and
 * contrast it read as a smudge rather than as anybody's logo, which serves
 * neither us nor them. Bigger, fully opaque, and on a legible label.
 */
.powered-by { color: var(--text-dim); }
.powered-by a { display: inline-flex; align-items: center; gap: 6px; }
.powered-by img { border-radius: 4px; flex: none; }
.powered-by a:hover img { filter: brightness(1.15); }

.footer-inner { flex-direction: column; gap: 10px; text-align: center; }
/*
 * Trademark attribution and non-affiliation. This is doing legal work, not
 * decoration: the site names MetaTrader, MQL and Pine Script throughout — in
 * page titles, in two of its domain names — and had nowhere saying whose marks
 * those are or that we are independent of both companies.
 */
.footer-legal {
  margin: 0; max-width: 640px; color: var(--text-faint);
  font-size: 0.72rem; line-height: 1.6;
}

/* ---- Admin: release-audit table (noindex page, owner only) ---- */
.admin-status { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text-dim); }
.admin-status.warn { border-color: rgba(232, 185, 90, 0.4); color: var(--amber); }
.admin-status.error { border-color: rgba(239, 106, 106, 0.4); color: var(--red); }

.admin-table { width: 100%; border-collapse: collapse; margin: 8px 0 28px;
  font-size: 0.94rem; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border); vertical-align: baseline; }
.admin-table thead th { color: var(--text-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.admin-table code { font-family: var(--mono); }
.admin-table .muted { color: var(--text-faint); font-size: 0.86em; }
.admin-table .verdict-pass { color: var(--pine); }
.admin-table .verdict-fail { color: var(--red); }
.admin-table .run-detail td { color: var(--text-dim); font-size: 0.86rem;
  padding-top: 0; border-bottom: 1px solid var(--border-strong); }
.chip-live { display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: rgba(201, 241, 88, 0.14); color: var(--signal);
  font-size: 0.72rem; letter-spacing: 0.03em; }

/* ---- Admin: the first screen ----
 * Tiles carry ONE number each and name what it is under it, because an admin
 * panel is read at a glance and a figure whose meaning needs a second look is
 * a figure that gets misread. Tone is carried by a left rule and the label,
 * never by colour alone: "good" and "warn" must survive a greyscale print and
 * a colour-blind reader.
 */
.state-tiles { display: grid; gap: 12px; margin: 10px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.state-tile { background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 14px 16px; }
.state-tile.state-good { border-left-color: var(--pine); }
.state-tile.state-warn { border-left-color: var(--amber); }
.state-tile.state-bad { border-left-color: var(--red); }
.state-value { font-size: 1.7rem; line-height: 1.15; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.state-value code { font-family: var(--mono); font-size: 0.72em; }
.state-label { margin-top: 4px; color: var(--text-dim); font-size: 0.88rem; }
.state-note { margin-top: 6px; color: var(--text-faint); font-size: 0.8rem; line-height: 1.45; }

.state-alerts { list-style: none; margin: 10px 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.state-alert { padding: 10px 14px; border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: 8px;
  background: var(--panel); color: var(--text-dim); font-size: 0.92rem; }
.state-alert.state-warn { border-left-color: var(--amber); }
.state-alert.state-bad { border-left-color: var(--red); }
.state-ok { color: var(--pine); }
.admin-table .state-notes { font-size: 0.82rem; padding-top: 0; line-height: 1.5; }

/* ---- Pricing: a plan you cannot buy yet says so ---- */
/*
 * The Pro card is dimmed and slightly desaturated rather than hidden: the
 * price is real information a visitor is entitled to see while deciding, but
 * presenting it as an equal, orderable option when there is no checkout would
 * be selling something that does not exist. It stays fully readable — this is
 * de-emphasis, not a blur that makes the text unreadable — and it comes back
 * to full strength on hover or keyboard focus for anyone who wants to read it.
 */
.plan-card-soon { position: relative; opacity: 0.55; filter: saturate(0.55); transition: opacity .18s ease, filter .18s ease; }
.plan-card-soon:hover,
.plan-card-soon:focus-within { opacity: 1; filter: none; }
.plan-ribbon { display: inline-block; margin-bottom: 10px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--ink-3); color: var(--text-dim);
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .plan-card-soon { transition: none; } }

/* ---- Account: allowance meter ---- */
.usage-line { font-size: 1.05rem; margin-bottom: 8px; }
.meter { height: 8px; border-radius: 999px; background: var(--ink-3);
  border: 1px solid var(--border); overflow: hidden; max-width: 360px; }
.meter > span { display: block; height: 100%; background: var(--signal); }
/* Nothing left: the track alone, and a muted one, so an empty bar cannot be
   mistaken for a full bar that simply failed to paint. */
.meter.is-empty { background: rgba(255,255,255,0.06); }

/* ---- Account menu ---- */
.account-menu { position: relative; display: inline-flex; }
.account-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.account-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px;
  padding: 6px; border: 1px solid var(--border-strong); border-radius: 10px;
  display: flex; flex-direction: column;
  /* Sits ABOVE page cards, and reads as a surface rather than a hole. It
     overlapped the Enterprise card on the pricing page: the card showed
     through, because a faint shadow over a near-black panel gives the eye no
     edge to separate the two. A lighter ground than the page, a real border
     and a shadow deep enough to cast do that separating. */
  background: #161c28;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72), 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.account-dropdown a,
.account-dropdown button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0;
  border-radius: 7px; background: none; color: var(--text); font: inherit;
  font-size: 0.9rem; cursor: pointer; text-decoration: none;
}
.account-dropdown a:hover, .account-dropdown button:hover,
.account-dropdown a:focus-visible, .account-dropdown button:focus-visible {
  background: var(--ink-3); text-decoration: none; outline: none;
}
.account-dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

/* ---- Admin: one conversion, in full ---- */
.conversion-detail {
  margin-top: 14px; padding: 14px; max-height: 460px; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--ink-2);
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; color: var(--text-dim);
}

.copy-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.copy-bar[hidden] { display: none; }
.copy-bar + .conversion-detail { margin-top: 8px; }
.copy-bar .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.copy-status { font-size: 0.8rem; }

/* ---- Account: one conversion, in full ---- */
.note-list { list-style: none; padding: 0; margin: 8px 0 18px; }
.note-list li { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.note-sev { display: inline-block; min-width: 62px; font-size: 0.7rem; letter-spacing: 0.05em; }
.note-error { color: var(--red); }
.note-warn, .note-warning { color: var(--amber); }
.note-info, .note-cosmetic { color: var(--text-faint); }

/* ---- Why Convert is unavailable, said in the page rather than on hover ---- */
.signin-hint { margin: 10px 0 0; color: var(--text-dim); font-size: 0.88rem; }
.linklike { border: 0; background: none; padding: 0; font: inherit;
  color: var(--signal); cursor: pointer; text-decoration: underline; }
.linklike:hover { color: var(--text); }

/* ---- Account control: identify the account without printing the address ----
 *
 * The address used to sit in the nav in accent green. Two problems: a header is
 * in every screenshot and screen-share, and traders record theirs constantly;
 * and it competed with Convert for the one accent colour on the page. Initials
 * in a neutral disc identify the account to its owner and to nobody else, and
 * the accent now belongs to the primary action alone.
 */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--ink-3); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}
.account-trigger { color: var(--text-dim); }
.account-trigger:hover { color: var(--text); }
.account-who {
  margin: 2px 4px 6px; padding: 0 6px 8px; border-bottom: 1px solid var(--border);
  color: var(--text-faint); font-size: 0.78rem; word-break: break-all; cursor: default;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Convert is the only accent-coloured control in the header. */
.auth-btn { color: var(--text-dim); }
.auth-btn:hover { color: var(--text); }

/* Two lines, not three with a widow — the browser balances the break. */
#hero-title { text-wrap: balance; }

/* ---- Glossary: a term that carries its own explanation ---- */
.glossary { text-decoration: underline dotted var(--text-faint); text-underline-offset: 3px;
  cursor: help; }

/* ---- A conversion that spent no allowance says so ---- */
.chip-demo { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--ink-3); border: 1px solid var(--border); color: var(--text-faint);
  font-size: 0.68rem; letter-spacing: 0.03em; cursor: help; }

/* ---- After the demo: the offer, where the reader already is ---- */
.demo-cta {
  margin: 14px 0 0; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(201, 241, 88, 0.28); background: rgba(201, 241, 88, 0.05);
}
.demo-cta p { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }
.demo-cta strong { color: var(--text); }
.demo-cta-actions { margin-top: 12px !important; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; }

/* ---- What changed in this version of the terms ---- */
.legal-change {
  margin: 0 0 26px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid rgba(232, 185, 90, 0.3); background: rgba(232, 185, 90, 0.05);
  color: var(--text-dim); font-size: 0.9rem; line-height: 1.65;
}
.legal-change strong { color: var(--amber); }


/* Signed in: the page opens on the converter. The pitch, the feature cards and
   the FAQ exist to persuade a visitor; a user already persuaded gets the tool.
   Set on <html> before first paint by the inline script in index.html and kept
   in step by auth-header.js on sign-out. */
.signed-in .hero .lede,
.signed-in .hero .hero-badges,
.signed-in .hero .btn-primary,
.signed-in .features,
.signed-in .faq,
.signed-in .site-nav a[href="#faq"] { display: none; }
.signed-in .hero { padding-bottom: 8px; }
.signed-in .hero h1 { font-size: 1.6rem; margin-bottom: 0; }

/* Admin release detail */
#release-detail h4 { margin: 1.2rem 0 .3rem; }
#release-detail details { margin: .4rem 0 .8rem; }
#release-detail summary { cursor: pointer; }
.detail-list { margin: .4rem 0 0 1.1rem; padding: 0; }
.detail-list li { margin: .35rem 0; }

/* ---- Contact form ---- */
/* One centred column, so the form sits under the centred hero instead of
   hugging the left edge with dead space beside it. */
.contact-form { max-width: 520px; margin: 0 auto 24px; display: grid; gap: 20px; }
.contact-col { max-width: 520px; margin: 0 auto; }

.contact-form .field { display: grid; gap: 6px; }

/* Full column width and the site's own surface, rather than the browser's
   ~180px grey default sitting on a dark brand page. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid #2a3346; background: var(--panel); color: var(--text);
  font: inherit;
}
.contact-form textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none; border-color: var(--signal);
}
.contact-form select { appearance: none; cursor: pointer; }

/* Helper text belongs to the field above it, tight against it, so it cannot be
   mistaken for the label of the field below. */
.contact-form .field .q-note { margin: 0; font-size: 0.75rem; color: var(--text-dim); }

/* The counter is an edge case, not a permanent fixture: it stays out of the
   way until the limit is actually in sight. */
.contact-count { margin: 0; text-align: right; font-size: 0.7rem; color: var(--text-faint); }
.contact-count[hidden] { display: none; }

.contact-form button[type="submit"] { border-radius: 8px; }

/* The honeypot is hidden INLINE in the markup as well, so a stale or blocked
   stylesheet cannot turn it into a visible field that real people fill in. */
.contact-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* A successful submission. .warn and .error already exist above; without this
   the "ok" class rendered as unstyled default text. */
.admin-status.ok { border-color: rgba(201, 241, 88, 0.4); color: var(--signal); }

/* Conversion critiques: readable long reviews and source snippets. */
.conversion-critique { margin: 1rem 0; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.conversion-critique summary, .saved-critiques summary { cursor: pointer; font-weight: 600; }
.conversion-critique form > label { display: block; margin: .8rem 0; }
.conversion-critique textarea { display: block; box-sizing: border-box; width: 100%; margin-top: .4rem; padding: .7rem; resize: vertical; font: inherit; color: inherit; background: var(--ink); border: 1px solid var(--border); border-radius: 6px; }
.conversion-critique input[type="file"] { display: block; margin-top: .4rem; max-width: 100%; }
.critique-status { min-height: 1.5em; }
.critique-content { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow-y: auto; padding: .7rem; }
.saved-critiques details { margin: .6rem 0; }

/* ---- System → Releases (admin) ----
 * One summary line per engine before its history, the gate's own decision as a
 * pill, and tables that scroll inside themselves on a phone. */
.hero .eyebrow { margin: 0 0 6px; color: var(--text-faint); font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
.releases h2 { margin-top: 40px; }
.releases h2 .h2-sub { display: block; margin-top: 4px; font-family: var(--body);
  font-size: 0.82rem; font-weight: 400; color: var(--text-faint); letter-spacing: 0; }
.release-summary { margin: 8px 0 14px; color: var(--text-dim); line-height: 1.6; }
.release-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.release-table td, .release-table th { white-space: nowrap; }
.release-table td:nth-child(5) { white-space: normal; min-width: 180px; }
.release-table strong { font-variant-numeric: tabular-nums; }
.release-table .up { color: var(--pine); font-size: 0.86em; }
.release-table .down { color: var(--red); font-size: 0.86em; }
.release-table tr.blocked-row td { color: var(--text-faint); }
.gate-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem;
  letter-spacing: 0.02em; border: 1px solid transparent; }
.gate-pass { color: var(--pine); background: rgba(95, 185, 110, 0.12); }
.gate-blocked { color: var(--red); background: rgba(239, 106, 106, 0.12); }
.gate-none { color: var(--text-faint); border-color: var(--border); }
.run-files summary, .release-details summary { cursor: pointer; color: var(--text-dim); }
.run-files summary:hover, .release-details summary:hover { color: var(--text); }
.release-details { margin: 8px 0 18px; }
.show-all { margin: -16px 0 24px; background: none; border: 1px solid var(--border-strong);
  color: var(--text-dim); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; font: inherit;
  font-size: 0.86rem; }
.show-all:hover, .show-all:focus-visible { color: var(--text); border-color: var(--signal); }

/* An imported Pine library, pasted beside the script (shown when the source imports one). */
.library-box { margin-top: 8px; border-top: 1px solid var(--border, #2a2f3a); padding-top: 6px; }
.library-box summary { cursor: pointer; font-size: 0.9em; color: var(--text-muted, #9aa3b2); }
.library-box .library-note { font-size: 0.85em; color: var(--text-muted, #9aa3b2); margin: 6px 0; }
.library-box textarea { min-height: 140px; }

/* Conversion versions in the admin panel: a re-run beside the original. */
.versions-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.versions-panel[hidden] { display: none; }
.versions-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.versions-head h4 { margin: 0; font-family: var(--heading); font-size: 0.95rem; }
.versions-list { margin-top: 10px; overflow-x: auto; }
.version-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.versions-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.versions-compare[hidden] { display: none; }
.versions-compare h5 { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-dim); }
.versions-compare pre { max-height: 480px; overflow: auto; margin: 0; padding: 10px; background: var(--ink-2);
  border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 0.78rem; white-space: pre; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; border: 1px solid var(--border-strong); }
.chip-better { color: var(--pine); border-color: var(--pine); }
.chip-worse { color: var(--red); border-color: var(--red); }
.chip-same, .chip-unchanged { color: var(--text-dim); }
.chip-unmeasured { color: var(--amber); border-color: var(--amber); }
.improved-notice { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--pine); border-radius: var(--radius); color: var(--text); }
.chip-improved { color: var(--pine); border-color: var(--pine); }