/* ============================================================
   RangePilot design tokens.

   Values are read off the approved landing canvas, so any new page
   built with these sits next to index.html without drifting. Where
   the written style guide and the canvas disagree, the canvas wins
   here and the difference is listed in web/README.md.

   index.html carries the canvas's own inline styles and needs almost
   nothing from this file; it exists so the next page does not have to
   re-derive the system by hand.
   ============================================================ */
:root{
  /* surfaces */
  --rp-midnight:#071526;      /* page ground */
  --rp-deep:#0a1d33;          /* banded section ground */
  --rp-panel:#0d2238;         /* cards and product preview */
  --rp-raised:#143444;        /* nested controls, hover surfaces */

  /* ink */
  --rp-ink:#f5ead6;           /* warm white, primary text on dark */
  --rp-dim:#b9c9d9;           /* supporting copy */
  --rp-mute:#a9bccf;          /* nav links, quiet labels */
  --rp-faint:#7c93a8;         /* mono eyebrows, axis labels */

  /* signal, one job each */
  --rp-teal:#25cfe8;          /* the range, the product, primary CTA */
  --rp-teal-soft:#7fe6f4;     /* link hover */
  --rp-mint:#3fe0a8;          /* live, positive, net flat */
  --rp-amber:#ffc247;         /* fees earned */
  --rp-coral:#ff6f52;         /* the short leg, loss, out of range */

  /* lines */
  --rp-line:rgba(245,234,214,.14);
  --rp-hair:rgba(245,234,214,.07);

  /* type */
  --rp-display:'Unbounded',system-ui,sans-serif;
  --rp-body:'Space Grotesk',system-ui,sans-serif;
  --rp-mono:'JetBrains Mono',ui-monospace,monospace;

  /* shape */
  --rp-r-sm:12px;
  --rp-r-md:16px;
  --rp-r-lg:22px;
  --rp-r-pill:999px;
  --rp-wrap:1320px;
  --rp-gutter:clamp(16px,3vw,40px);
}

/* ---- primitives for pages beyond the landing ---------------- */
.rp-wrap{max-width:var(--rp-wrap);margin:0 auto;padding:0 var(--rp-gutter)}
.rp-eyebrow{font-family:var(--rp-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rp-faint)}
.rp-eyebrow b{color:var(--rp-teal);font-weight:500}
.rp-h1{font-family:var(--rp-display);font-weight:900;font-size:clamp(34px,5vw,70px);
  line-height:.98;letter-spacing:-.03em;margin:0;text-wrap:balance}
.rp-h2{font-family:var(--rp-display);font-weight:900;font-size:clamp(28px,3.4vw,46px);
  line-height:1;letter-spacing:-.03em;margin:0}
.rp-h3{font-family:var(--rp-display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin:0}
.rp-body{font-size:16px;line-height:1.55;color:var(--rp-dim)}
.rp-num{font-family:var(--rp-mono);font-weight:700;letter-spacing:-.02em}
.rp-label{font-family:var(--rp-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rp-faint)}

.rp-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;
  border:0;border-radius:14px;background:var(--rp-teal);color:var(--rp-midnight);
  font-family:var(--rp-body);font-weight:700;font-size:16px;white-space:nowrap;cursor:pointer;
  transition:transform .18s,box-shadow .18s}
.rp-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,207,232,.35);color:var(--rp-midnight)}
.rp-btn--ghost{background:transparent;color:var(--rp-ink);border:1.5px solid var(--rp-line)}
.rp-btn--ghost:hover{border-color:var(--rp-teal);color:var(--rp-teal);box-shadow:none}
.rp-btn--sm{height:42px;padding:0 20px;font-size:14px;border-radius:var(--rp-r-sm)}

.rp-card{border:1.5px solid var(--rp-line);border-radius:var(--rp-r-lg);
  background:rgba(13,34,56,.6);padding:22px}
.rp-panel{border:1.5px solid var(--rp-line);border-radius:var(--rp-r-lg);
  background:var(--rp-panel);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.rp-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--rp-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;
  border-radius:var(--rp-r-pill);padding:4px 10px}

/* status colours, always paired with a sign or a word, never colour alone */
.rp-live{color:var(--rp-mint)}
.rp-beta{color:var(--rp-teal)}
.rp-next{color:var(--rp-faint)}
.rp-pos{color:var(--rp-mint)}
.rp-neg{color:var(--rp-coral)}
.rp-fee{color:var(--rp-amber)}

/* ============================================================
   Landing (index.html) — mobile. Inline canvas styles win unless
   we override them here. App pages use app.css instead.
   ============================================================ */
html{-webkit-text-size-adjust:100%}

@media (max-width: 860px) {
  header:not(.app-top) {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    align-items: center !important;
  }
  header:not(.app-top) > a img {
    height: 30px !important;
    max-width: min(170px, 52vw);
  }
  header:not(.app-top) > nav {
    order: 3;
    width: 100%;
    gap: 8px !important;
    margin-left: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  header:not(.app-top) > nav::-webkit-scrollbar { display: none; }
  header:not(.app-top) > nav a {
    flex: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
  }
  header:not(.app-top) > div {
    margin-left: auto !important;
    gap: 8px !important;
  }
  header:not(.app-top) > div > span {
    display: none !important;
  }
  header:not(.app-top) > div > a {
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  /* flying otter parks in the corner; hide empty layout slots */
  [data-slot="hero"],
  [data-slot="lose"],
  [data-slot="hedge"],
  [data-slot="stack"] {
    display: none !important;
  }
  #hedge > div > div:first-child {
    grid-template-columns: 1fr !important;
  }

  /* hero instrument no longer needs gutter for the otter */
  #top [style*="padding-right:clamp(110px"] {
    padding-right: 0 !important;
    padding-top: 12px !important;
  }
  /* pills hang off the left edge and cause overflow */
  #top [style*="left:-30px"],
  #top [style*="left:-18px"],
  #top [style*="left:36%"] {
    display: none !important;
  }

  #lose [style*="clamp(96px"] {
    font-size: clamp(64px, 22vw, 96px) !important;
  }
}

@media (max-width: 640px) {
  #top {
    padding-top: 108px !important;
    min-height: auto !important;
  }
  #top [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #top a[href="terminal.html"][style*="height:54px"],
  #top a[href="#hedge"],
  #close a[href="terminal.html"] {
    width: 100%;
    justify-content: center !important;
    min-height: 48px;
  }
  #close {
    padding-bottom: 140px !important; /* parked otter */
  }
  #stack [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  footer:not(.app-top) > div {
    flex-direction: column !important;
  }
}

@media (max-width: 430px) {
  header:not(.app-top) > a img {
    height: 24px !important;
  }
  #top [style*="letter-spacing:.12em"][style*="uppercase"] {
    max-width: 100%;
    white-space: normal;
    line-height: 1.4;
  }
}