/* OANDA Bot Suite — case study page.
   Loads shared design-system.css first; this file layers page-specific
   look on top of those tokens, plus three deliberate identity colors,
   each re-expressed in the design system's three-layer theme pattern so
   they resolve correctly once/if a theme toggle sets [data-theme]:

     --accent    OANDA-style trading green — this page's primary color,
                 replacing the suite-default wine. Carries most of the
                 page: currency-badge codes, the breakeven-curve chart,
                 hover states, the config-table parameter column.
     --accent2   The trading blue this page used to run on entirely
                 before this retheme. Kept as a second, site-scoped
                 identity hue (same shape as IntuiMotion's own
                 --accent2) rather than discarded — it colors the
                 equity-share bar chart and the funnel's middle stage.
     --accent3   The suite's own default wine/burgundy red
                 (design-system.css's un-overridden --accent), pulled
                 back in deliberately as this page's third color. Used
                 for the funnel's final stage and the account's real
                 drawdown backstop below — both are about risk.

   See the entry-gate funnel further down for where all three appear
   together in one diagram. */

:root {
  --accent: #2fd699;
  --accent-strong: #7ce8bd;
  --accent-soft: rgba(47, 214, 153, 0.18);

  /* Second identity hue: the trading blue this page used to run on
     entirely (dark values below match exactly what --accent /
     --accent-strong used to be, verbatim). Site-scoped only, per
     design-system.css's rule that only a site's own style.css may add
     to its color tokens — same shape/precedent as
     sites/intuimotion/public/IntuiMotion/style.css's own --accent2. */
  --accent2: #3987e5;
  --accent2-strong: #86b6ef;
  --accent2-soft: rgba(57, 135, 229, 0.18);

  /* Third identity hue: the suite's own default wine/burgundy accent
     (design-system.css's un-overridden --accent trio), pulled back in
     verbatim as this page's third deliberate color even though
     --accent above overrides it away as the primary. */
  --accent3: #be3747;
  --accent3-strong: #e65a69;
  --accent3-soft: rgba(190, 55, 71, 0.18);

  /* Fixed three-stage diagram scale for the entry-gate funnel: green
     (entry confirmed) -> blue (narrowing) -> red (final risk gate).
     Each stage is the dark-mode base value of its own identity hue
     above (--accent / --accent2 / --accent3). Kept constant across
     themes on purpose (see .gate rules below) rather than remapped
     per-theme, matching how this diagram already worked. */
  --gate-1: #2fd699;
  --gate-2: #3987e5;
  --gate-3: #be3747;
}

@media (prefers-color-scheme: light) {
  :root:where(:not([data-theme])) {
    --accent: #0c7a52;
    --accent-strong: #0a5c3e;
    --accent-soft: rgba(12, 122, 82, 0.10);

    --accent2: #2a78d6;
    --accent2-strong: #1c5cab;
    --accent2-soft: rgba(42, 120, 214, 0.10);

    --accent3: #962c3d;
    --accent3-strong: #772230;
    --accent3-soft: rgba(150, 44, 61, 0.10);
  }
}

:root[data-theme="dark"] {
  --accent: #2fd699;
  --accent-strong: #7ce8bd;
  --accent-soft: rgba(47, 214, 153, 0.18);

  --accent2: #3987e5;
  --accent2-strong: #86b6ef;
  --accent2-soft: rgba(57, 135, 229, 0.18);

  --accent3: #be3747;
  --accent3-strong: #e65a69;
  --accent3-soft: rgba(190, 55, 71, 0.18);
}

:root[data-theme="light"] {
  --accent: #0c7a52;
  --accent-strong: #0a5c3e;
  --accent-soft: rgba(12, 122, 82, 0.10);

  --accent2: #2a78d6;
  --accent2-strong: #1c5cab;
  --accent2-soft: rgba(42, 120, 214, 0.10);

  --accent3: #962c3d;
  --accent3-strong: #772230;
  --accent3-soft: rgba(150, 44, 61, 0.10);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: var(--space-section) 0 var(--space-16);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -18rem;
  left: 50%;
  width: 56rem;
  height: 34rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  margin: 0 0 var(--space-4);
}

.hero h1 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: 600;
  margin: 0 0 var(--space-6);
}

.hero__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-dim);
  max-width: 42rem;
  margin: 0 0 var(--space-8);
}

/* quick facts — structural counts only (bot count, gate count), never
   performance-shaped numbers; this page's whole point is that no trading
   results appear anywhere on it. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat__value {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.callout {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: var(--text-sm);
  max-width: 42rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- sections ---------- */

section {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--border);
}

section h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: 600;
  margin: 0 0 var(--space-5);
  max-width: 32ch;
}

section h3 {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  margin: var(--space-10) 0 var(--space-3);
}

section p {
  margin: 0 0 var(--space-4);
}

.section-intro {
  font-size: var(--text-md);
  color: var(--text-dim);
  max-width: 42rem;
}

/* ---------- currency grid ---------- */

.currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
}

.currency-badge {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* [data-reveal]'s shared transition shorthand is higher specificity
   (.js [data-reveal], 0,2,0) than the plain .currency-badge/.cap/.gate
   rules above (0,1,0) and would otherwise win, making these hover
   transitions run at the slow --duration-reveal reveal easing instead
   of the fast hover timing declared here. Re-declare at (0,3,0) so the
   hover-specific durations actually apply once an element has settled. */
.js .currency-badge[data-reveal] {
  transition: opacity var(--duration-reveal) var(--ease-standard) var(--reveal-delay),
              transform var(--duration-reveal) var(--ease-standard) var(--reveal-delay),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* Hover feedback is deliberately motion-free: a border/glow change
   reads as "interactive" without the translateY this used to carry. */
.currency-badge:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.currency-grid .currency-badge:nth-child(1) { --reveal-delay: 0ms; }
.currency-grid .currency-badge:nth-child(2) { --reveal-delay: 40ms; }
.currency-grid .currency-badge:nth-child(3) { --reveal-delay: 80ms; }
.currency-grid .currency-badge:nth-child(4) { --reveal-delay: 120ms; }
.currency-grid .currency-badge:nth-child(5) { --reveal-delay: 160ms; }
.currency-grid .currency-badge:nth-child(6) { --reveal-delay: 200ms; }
.currency-grid .currency-badge:nth-child(7) { --reveal-delay: 240ms; }

.currency-badge .code {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--accent-strong);
  letter-spacing: var(--tracking-tight);
}

.currency-badge .name {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: 0.2rem;
}

/* ---------- entry-gate funnel ---------- */

.funnel {
  margin: var(--space-6) 0 var(--space-8);
}

.gate {
  position: relative;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

/* Motion-free hover: a ring, not a transform. A non-inset box-shadow
   paints in the band OUTSIDE the element's border-box, i.e. against
   whatever's behind it in the stacking context (the page --bg), not
   against the gate's own gate-1/2/3 fill — so the ring color has to be
   chosen for contrast against --bg in both themes, via the same themed
   --accent-strong token used for text emphasis elsewhere on this page
   (dark: mint green on near-black; light: deep green on near-white).
   This is a single themed ring color for all three gates, not one ring
   per gate's own hue — a fixed-hue ring (e.g. --gate-1's green) would
   fail contrast against a light --bg in light mode, which is exactly
   why this reuses the theme-aware token instead.
   Do not combine this with var(--shadow-sm): in light mode --shadow-sm
   resolves to the bare keyword `none`, and a box-shadow value list
   containing `none` as one of several comma-separated items is invalid
   at computed-value time, which drops the ENTIRE box-shadow declaration
   (not just the invalid part) back to its initial value — silently
   killing the ring, not just the ambient shadow, in light mode only. */
.gate:hover {
  box-shadow: 0 0 0 2px var(--accent-strong);
}

/* Same specificity fix as .currency-badge above: without this, the
   .js [data-reveal] shorthand (0,2,0) beats the plain .gate rule
   (0,1,0) and the hover ring inherits the slow reveal timing. transform
   is included (matching opacity's timing, not left at 0-delay) so the
   scroll-in slide and fade settle together instead of transform
   snapping into place while opacity is still mid-fade. */
.js .gate[data-reveal] {
  transition: opacity var(--duration-reveal) var(--ease-standard) var(--reveal-delay),
              transform var(--duration-reveal) var(--ease-standard) var(--reveal-delay),
              box-shadow var(--duration-base) var(--ease-standard);
}

.gate + .gate { margin-top: var(--space-6); }

.gate:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-6));
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--text-faint);
  opacity: 0.6;
}

.gate-label {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: 0.85;
}

.gate-name {
  margin: 0.2rem 0 0;
  font-weight: 600;
  font-size: var(--text-base);
}

.gate-1 { width: 100%; max-width: 36rem; background: var(--gate-1); color: #0b0b0b; }
.gate-2 { width: 76%;  max-width: 26rem; background: var(--gate-2); color: #ffffff; }
.gate-3 { width: 50%;  max-width: 17rem; background: var(--gate-3); color: #ffffff; }

/* .gate-label's shared 0.85 opacity (below) blends white text toward
   --gate-3's own red fill, landing under 4.5:1 (~4.4:1) — the one
   contrast case this retheme actually changes, since gate-3 used to be
   a dark blue where that same blend still cleared AA. Full opacity on
   just this gate restores ~5.5:1 without touching gate-1/gate-2's
   labels, which are unaffected by the color swap. */
.gate-3 .gate-label { opacity: 1; }

.gate-details {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
}

.gate-detail {
  border-left: 2px solid var(--border-strong);
  padding-left: var(--space-4);
}

.gate-detail .k {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

.gate-detail p { margin: 0; }

/* ---------- chart ---------- */

.chart-block {
  margin: var(--space-6) 0 var(--space-8);
}

.chart-caption {
  font-weight: 600;
  font-size: var(--text-base);
  margin: 0 0 0.2rem;
}

.chart-subcaption {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin: 0 0 var(--space-5);
}

.chart-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-3) var(--space-3);
  overflow-x: auto;
}

.chart-frame svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 30rem;
}

/* This bar chart uses --accent2 (blue) rather than --accent (green) so
   the two SVG charts on this page read as two distinct series at a
   glance instead of two copies of the same color — breakeven win-rate
   below stays on the primary green (.curve-line/.curve-marker). */
.bar-fill {
  fill: var(--accent2);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.bar-fill:hover { opacity: 0.8; }

.tick-text { fill: var(--text-faint); font-size: 11px; }
.value-text { fill: var(--text-dim); font-size: 12px; font-weight: 600; }
.axis-line { stroke: var(--border-strong); stroke-width: 1; }
.grid-line { stroke: var(--border); stroke-width: 1; }
.axis-title { fill: var(--text-faint); font-size: 11px; }

/* ---------- breakeven win-rate curve ---------- */
/* Same .chart-block/.chart-frame shell and tick-text/value-text/grid-line
   tokens as the equity-share bar chart above; only the mark shape (a
   plotted line instead of bars) and these three classes are new. */

.curve-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.curve-marker {
  fill: var(--accent-strong);
  stroke: var(--bg-card);
  stroke-width: 2;
}

.guide-line {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

.table-caption {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-top: var(--space-3);
}

/* ---------- account-wide caps ---------- */

.cap-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-4);
  padding: 0;
}

.cap-grid .cap:nth-child(1) { --reveal-delay: 0ms; }
.cap-grid .cap:nth-child(2) { --reveal-delay: 70ms; }
.cap-grid .cap:nth-child(3) { --reveal-delay: 140ms; }
.cap-grid .cap:nth-child(4) { --reveal-delay: 210ms; }

/* Daily loss limit (3rd of the 4 cap cards in index.html) is the one
   account-wide backstop that's actually about a real loss occurring,
   as opposed to the other three, which are procedural ceilings/guards
   — so it gets the suite's red/risk identity color as a persistent
   left-border flag, not just on hover. Targeted structurally (nth-
   child, matching the --reveal-delay rules directly above) rather than
   with a class, so it stays page-only CSS; if index.html's cap order
   ever changes, this needs to move with the "Daily loss limit" <li>.
   Specificity note: (0,3,0) here beats .cap:hover's border-color
   shorthand at (0,2,0), so this red left edge survives the hover
   state below while the other three sides still pick up the hover
   tint. */
.cap-grid .cap:nth-child(3) {
  border-left: 3px solid var(--accent3);
}

.cap-grid .cap:nth-child(3) h4 {
  color: var(--accent3-strong);
}

.cap {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cap:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.js .cap[data-reveal] {
  transition: opacity var(--duration-reveal) var(--ease-standard) var(--reveal-delay),
              transform var(--duration-reveal) var(--ease-standard) var(--reveal-delay),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cap h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.cap p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

@media (max-width: 34rem) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* ---------- config table ---------- */

.table-wrap {
  overflow-x: auto;
  margin: var(--space-5) 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--text-sm);
}

th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

tbody tr {
  transition: background var(--duration-fast) var(--ease-standard);
}

tbody tr:hover {
  background: var(--bg-raised);
}

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

td.param {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-strong);
  white-space: nowrap;
}

td.default {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-dim);
}

/* ---------- self-hosting: command block ---------- */
/* No precedent for a multi-line code block elsewhere on this page (the
   config table uses td.param instead), so this is new: a code-bg panel
   matching the card idiom used everywhere else (border/radius-md/
   shadow-sm), holding a <pre><code> block. The global `code` rule in
   design-system.css styles every <code> element with its own inline
   background/border/padding, sized for a short one-line snippet; nested
   inside this panel that would draw a second border/background around
   the whole block, so it's neutralized below and the panel supplies the
   only visible container. */

.cmd-block {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.cmd-block pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-dim);
  white-space: pre;
}

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

.cmd-comment { color: var(--text-faint); }

/* ---------- footer disclaimer ---------- */
/* .disclaimer keeps its own class inside .site-footer__notice, per the
   shared footer contract — only color/size come from the shell. */

.disclaimer {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin: 0;
}

@media (max-width: 30rem) {
  .hero h1 { font-size: var(--text-4xl); }
  .gate-2 { width: 84%; }
  .gate-3 { width: 62%; }
  .hero__stats { gap: var(--space-6); }
}