/* trading api — paper terminal theme.
   V1's stylesheet, cut down to what the landing page uses: the tokens,
   primitives and landing rules. The sections bring their own CSS
   (static/sections). No preprocessor, no build step. */

:root {
  color-scheme: light;
  --bg: #F5F4F0;
  --fg: #262622;
  --muted: #83827B;
  --border: #E4E2DB;
  --accent: #176B4A;          /* green — chart line, active states */
  --up: #3D8B5F;
  --down: #A23232;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* syntax highlighting for code blocks */
  --tk-str: #3D8B5F;
  --tk-key: #2F6F9F;
  --tk-num: #B0692B;
  --tk-flag: #176B4A;
  --tk-env: #8B5CF6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font: 15px/1.6 "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
code, .mono { font-family: var(--mono); }
::selection { background: rgba(23,107,74,.20); }

h1, h2, p { margin-top: 0; }
h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; }

/* ---------- buttons ---------- */
button {
  border: 0; border-radius: 8px; padding: .65rem .9rem;
  font: 600 14px "Inter", system-ui, sans-serif;
  color: #fff; background: var(--fg); cursor: pointer;
}
button:hover { background: var(--accent); }
button:disabled { cursor: wait; opacity: .65; }
button.secondary {
  color: var(--fg); background: #fff; border: 1px solid var(--border);
}
button.secondary:hover { border-color: var(--muted); background: #fff; }

/* ---------- forms ---------- */
label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: 13.5px; }
input {
  width: 100%;
  border: 1px solid var(--border); border-radius: 8px;
  padding: .65rem .75rem; background: #fff; color: var(--fg);
  font: 500 14px var(--mono);
}
/* checkboxes/radios keep their natural size: at width:100% a nowrap label's
   content (box + text) overflows its card and widens the whole page, which
   makes mobile browsers zoom the page out to fit */
input[type="checkbox"], input[type="radio"] { width: auto; }
input:focus { outline: none; border-color: var(--accent); }
input:disabled { opacity: .4; }
/* iOS zooms the page into a focused field whose text is under 16px, at
   any width; touch devices get 16px fields, over the sections' own sizes. */
@media (pointer: coarse) {
  .landing input, .landing select, .landing textarea { font-size: 16px !important; }
}
/* No double-tap zoom: a quick second tap on a tab or button stays a tap. */
.landing { touch-action: manipulation; }
form > button { margin-top: .8rem; }

.fieldrow { display: flex; gap: 10px; }
.fieldrow input { flex: 1; }
.fieldrow button { margin: 0; white-space: nowrap; }

/* ---------- shared bits ---------- */
.muted { color: var(--muted); }
.status, .error, .success { margin: .8rem 0 0; }
.status { color: var(--muted); }
.error { color: var(--down); }
.success { color: var(--up); }
.eyebrow {
  color: var(--accent); font: 600 11.5px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem;
}
.logo { font: 600 15px var(--mono); letter-spacing: -.01em; }
.logo b { color: var(--accent); font-weight: 600; }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(38,38,34,.04), 0 12px 40px rgba(38,38,34,.06);
}

/* ============================================================
   Landing page
   ============================================================ */

body.landing { padding-bottom: 64px; }

/* nav */
.landing nav {
  display: flex; align-items: center;
  padding: 0 0 22px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.landing nav .logo {
  font: 600 15.5px var(--mono); letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
/* The mark, a sparkline. With lg-go it draws itself, then its dot pops and
   pings once; on the page's load, and again on a click (sections/logo.js). */
.lg-mark {
  width: 30px; height: 22px; margin-top: -2px; flex: none; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.lg-mark * { transform-box: fill-box; transform-origin: 50% 50%; }
.lg-line { stroke: var(--accent); stroke-width: 3.8; stroke-dasharray: 1 2; }
.lg-dot, .lg-ping { fill: var(--accent); }
.lg-ping { opacity: 0; }
.lg-go .lg-line { animation: lg-draw 700ms cubic-bezier(.6,0,.2,1) 150ms both; }
.lg-go .lg-dot { animation: lg-pop 700ms cubic-bezier(.3,1.8,.5,1) 750ms both; }
.lg-go .lg-ping { animation: lg-ping 1000ms ease-out 800ms forwards; }
@keyframes lg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lg-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes lg-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lg-go .lg-mark * { animation: none; } }
.landing nav .spacer { flex: 1; }
.landing nav a { color: var(--muted); text-decoration: none; font-size: 14px; margin-left: 26px; }
.landing nav a:hover { color: var(--fg); }
.landing nav a.cta {
  color: #fff; background: var(--fg); border-radius: 8px;
  padding: 8px 16px; font-weight: 500;
}
.landing nav a.cta:hover { background: var(--accent); }
.landing nav a.docs {
  color: var(--fg); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 15px; font-weight: 500;
}
.landing nav a.docs:hover { border-color: var(--fg); }
.landing nav a.docs + a.cta { margin-left: 10px; }
@media (max-width: 640px) {
  .landing nav a { margin-left: 16px; }
}

.kicker { font: 500 12.5px var(--mono); color: var(--accent); letter-spacing: .02em; }
.landing h1 {
  font-size: clamp(36px, 5.6vw, 54px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 16px;
}
/* live values flash when the sim updates them */
.up   { color: var(--up); }
.down { color: var(--down); }
@keyframes ta-flash { 0% { background: rgba(23,107,74,.20); } 100% { background: transparent; } }
.flash { animation: ta-flash .7s ease-out; border-radius: 4px; }

/* sections */
.landing section { margin-top: 96px; scroll-margin-top: 24px; }
.landing h2 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 8px; }
.sec-sub { color: var(--muted); margin-bottom: 30px; max-width: 56ch; }

/* sign-in */
.signin-card { max-width: 560px; }
.signin-card form + form { margin-top: 1rem; }

/* agent tabs */
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 12px 0; margin-bottom: 16px; }
.tab {
  border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; font: 500 13px var(--mono); padding: 6px 14px; color: var(--muted);
}
.tab:hover { color: var(--fg); background: rgba(38,38,34,.05); }
.tab.tab-active { background: rgba(23,107,74,.12); color: var(--accent); }

.code {
  display: block; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; font: 400 12px/1.75 var(--mono);
  white-space: pre; overflow-x: auto;
}

/* syntax tokens (hand-highlighted in the templates) */
.tk-cmd  { color: var(--fg); font-weight: 500; }
.tk-flag { color: var(--tk-flag); }
.tk-url  { color: var(--tk-key); }
.tk-str  { color: var(--tk-str); }
.tk-key  { color: var(--tk-key); }
.tk-num  { color: var(--tk-num); }
.tk-env  { color: var(--tk-env); }
.tk-kw   { color: var(--tk-env); }
.tk-punc { color: var(--fg); }
.tk-com  { color: var(--muted); font-style: italic; }