/* PipChef dish pages: live results, drawn from the Strategy Tester data.
   Tokens follow the figma-designer two-layer idea: brand values live in site.css
   (:root) and in each dish's own palette, set on <main data-dish> as
   --buy / --sell (fills) and --buy-ink / --sell-ink (text-safe tones).
   Spacing, radius, type and motion come from the landing-page-design system. */

.d-main {
  --buy: #2E8BFF; --sell: #F2A916; --buy-ink: #1E6FD9; --sell-ink: #101C30;
  --chart-bg: #101C30; --chart-grid: #1E2C45; --chart-text: #8FA0BC;
  --chart-up: #40AAFF; --chart-down: #FFC125;
  --c-main: var(--buy);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ hero */
.d-hero { padding-top: 168px; padding-bottom: var(--s-700); overflow: hidden; }
.d-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-600); align-items: center; margin-top: var(--s-400); }
@media (max-width: 960px) { .d-hero-grid { grid-template-columns: 1fr; } }
.d-hero-copy { display: grid; gap: var(--s-300); max-width: 680px; }
.d-logo { width: min(100%, 440px); height: auto; }
.d-logo svg { width: 100%; height: auto; }
.d-chips { display: flex; flex-wrap: wrap; gap: var(--s-75); list-style: none; margin: 0; padding: 0; }
.d-chips li {
  display: inline-flex; align-items: center; gap: var(--s-75);
  padding: var(--s-50) var(--s-100); border-radius: var(--r-full); background: var(--surface);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2);
}
.d-chips svg { width: 16px; height: 16px; color: var(--teal-ink); }
.d-cover { position: relative; aspect-ratio: 4 / 3; }
.d-cover svg { width: 100%; height: 100%; }
.d-cover .cg line { stroke: var(--line); stroke-width: 1; }
.d-cover .cv-buy { fill: var(--buy); }
.d-cover .cv-sell { fill: var(--sell); }

/* logo build-on (logo-animation skill): the two coins meet, the candle I's
   rise, then the letters arrive. One technique, about 1.4 s. */
@keyframes coin-a { from { opacity: 0; transform: translate(-18px, -18px); } to { opacity: 1; transform: none; } }
@keyframes coin-b { from { opacity: 0; transform: translate(18px, 18px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes candle-in { from { opacity: 0; transform: translateY(12px) scaleY(0.2); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .js .d-logo .lg-a { animation: coin-a 600ms var(--curve) both; }
  .js .d-logo .lg-b { animation: coin-b 600ms var(--curve) 120ms both; }
  .js .d-logo .lg-word { animation: appear 500ms var(--curve) 450ms both; }
  .js .d-logo .lg-i { transform-box: fill-box; transform-origin: 50% 100%; animation: rise 500ms var(--curve) 700ms both; }
  .js .d-cover .cv { transform-box: fill-box; transform-origin: 50% 100%; animation: candle-in 600ms var(--curve) both; animation-delay: calc(300ms + var(--i) * 70ms); }
}

/* ------------------------------------------------------------ section heads */
.d-sec { padding-block: var(--s-800); }
.d-sec-head { display: grid; gap: var(--s-200); max-width: 680px; margin-bottom: var(--s-500); }
.d-sec-row { display: flex; flex-wrap: wrap; gap: var(--s-300); align-items: end; justify-content: space-between; margin-bottom: var(--s-400); }
.d-sec-row .d-sec-head { margin-bottom: 0; }
.d-note { color: var(--ink-3); margin-top: var(--s-200); max-width: 760px; }

/* ------------------------------------------------------------ segmented control */
.seg {
  position: relative; display: inline-flex; padding: var(--s-50); gap: 0;
  border-radius: var(--r-xl); background: var(--surface-3);
}
.seg button {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  padding: var(--s-75) var(--s-100); border-radius: var(--r-lg);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2);
  transition: color var(--t-color) var(--curve);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg-thumb {
  position: absolute; z-index: 0; top: var(--s-50); left: 0; height: calc(100% - 2 * var(--s-50));
  border-radius: var(--r-lg); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-move) var(--curve), width var(--t-move) var(--curve);
}
.no-js .seg-thumb { display: none; }
.no-js .seg button[aria-pressed="true"] { background: var(--surface-2); }
.seg-group { display: flex; flex-wrap: wrap; gap: var(--s-100); align-items: center; }
.seg-dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; margin-right: var(--s-75); vertical-align: 1px; }

/* ------------------------------------------------------------ dashboard */
.board { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-3xl); padding: var(--s-200); display: grid; gap: var(--s-200); }
@media (min-width: 761px) { .board { padding: var(--s-300); gap: var(--s-300); } }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-200); }
@media (max-width: 1040px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--surface-2); border-radius: var(--r-2xl); padding: var(--s-200); display: grid; gap: var(--s-50); align-content: start; }
.kpi-label { display: flex; align-items: center; gap: var(--s-75); color: var(--ink-3); }
.kpi-label i { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c, var(--accent)); flex: none; }
.kpi-value { color: var(--ink); }
.kpi-sub { color: var(--ink-3); }

.board-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-200); }
@media (min-width: 761px) { .board-grid { gap: var(--s-300); } }
@media (max-width: 960px) { .board-grid { grid-template-columns: 1fr; } }
.panel-card { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-2xl); padding: var(--s-300); display: grid; gap: var(--s-200); align-content: start; }
@media (max-width: 520px) { .panel-card { padding: var(--s-200); } }
.card-head { display: flex; flex-wrap: wrap; gap: var(--s-200); justify-content: space-between; align-items: start; }
.card-head > div { display: grid; gap: var(--s-50); flex: 1 1 260px; min-width: 0; }
.card-head > .readout { flex: 0 0 auto; margin-left: auto; text-align: right; min-width: 160px; }
.readout .r-label { color: var(--ink-3); }
.readout .r-value { color: var(--ink); }
@media (max-width: 520px) { .readout { text-align: left; } }

.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-100); }
@media (max-width: 640px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.strip > div { background: var(--surface-3); border-radius: var(--r-lg); padding: var(--s-100); display: grid; gap: var(--s-25); }
.strip span:first-child { color: var(--ink-3); }

.side { display: grid; gap: var(--s-200); align-content: start; }
@media (min-width: 761px) { .side { gap: var(--s-300); } }
.bars { display: grid; gap: var(--s-200); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-75) var(--s-200); align-items: center; }
.bar-track { grid-column: 1 / -1; height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: var(--r-full); background: var(--c);
  transform-origin: 0 50%; transform: scaleX(var(--v, 0));
  transition: transform 800ms var(--curve);
}
.wins { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-100); }
.wins > div { background: var(--surface-3); border-radius: var(--r-lg); padding: var(--s-100); display: grid; gap: var(--s-25); }
.wins span:first-child { color: var(--ink-3); }

/* ------------------------------------------------------------ line charts */
.lc { position: relative; width: 100%; outline: none; touch-action: pan-y; }
.lc:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: var(--r-lg); }
.lc svg { display: block; width: 100%; overflow: visible; }
.lc text { font-family: "Manrope", system-ui, sans-serif; font-size: 12px; fill: var(--ink-3); }
.lc .lc-grid line { stroke: var(--line); stroke-width: 1; }
.lc .lc-ticks { transition: opacity var(--t-color) var(--curve); }
.lc .lc-ticks.out { opacity: 0; }
.lc .lc-line {
  fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms var(--curve);
}
.lc .lc-line.dashed { stroke-width: 2; }
.lc.drawn .lc-line { stroke-dashoffset: 0; }
.lc .lc-area { opacity: 0; transition: opacity 700ms var(--curve) 700ms; }
.lc.drawn .lc-area { opacity: 0.1; }
.lc .lc-late { opacity: 0; transition: opacity 400ms var(--curve) 1300ms; }
.lc.drawn .lc-late { opacity: 1; }
.lc .lc-tag rect { rx: 6px; }
.lc .lc-tag text { font-size: 12px; font-weight: 600; fill: #FFFFFF; }
.lc .lc-end-label { font-size: 12px; font-weight: 600; }
.lc .lc-band-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.lc .lc-sep { stroke-width: 1.5; stroke-dasharray: 4 4; }
.lc .lc-hair { stroke: var(--ink-2); stroke-width: 1; opacity: 0; transition: opacity 200ms var(--curve); }
.lc .lc-dot { stroke: var(--surface-2); stroke-width: 2; opacity: 0; transition: opacity 200ms var(--curve); }
.lc.scrubbing .lc-hair, .lc.scrubbing .lc-dot { opacity: 1; }
.lc .lc-hit { fill: transparent; cursor: crosshair; }

/* ------------------------------------------------------------ portion / pair comparison */
.cmp { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-300); }
@media (max-width: 960px) { .cmp { grid-template-columns: 1fr; } }
.cmp-cards { display: grid; gap: var(--s-200); align-content: start; }
.cmp-card { background: var(--surface); border-radius: var(--r-2xl); padding: var(--s-300); display: grid; grid-template-columns: auto 1fr; gap: var(--s-50) var(--s-300); align-items: center; }
.cmp-card .who { grid-row: 1 / span 3; display: flex; align-items: center; gap: var(--s-75); color: var(--ink); }
.cmp-card .who i { width: 12px; height: 12px; border-radius: var(--r-full); background: var(--c); }
.cmp-card .lab { color: var(--ink-3); }
.cmp-card .val { color: var(--ink); }
.cmp-card .end { color: var(--ink-3); }

/* ------------------------------------------------------------ walk forward */
.wf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-200); }
@media (max-width: 860px) { .wf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lc .band-history { fill: rgba(255, 255, 255, 0.03); }
.lc .band-tuning { fill: rgba(242, 169, 22, 0.10); }
.lc .band-oos { fill: rgba(46, 139, 255, 0.12); }
.lc .lab-history { fill: var(--ink-3); }
.lc .lab-tuning { fill: var(--accent-2); }
.lc .lab-oos { fill: var(--accent); }
.lc .sep-tuning { stroke: var(--accent-2); }
.lc .sep-oos { stroke: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .js .lc .lc-band { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--curve); }
  .js .lc.drawn .lc-band { transform: none; }
  .js .lc .lc-band:nth-child(2) { transition-delay: 150ms; }
  .js .lc .lc-band:nth-child(3) { transition-delay: 300ms; }
}

/* ------------------------------------------------------------ on your chart (faux MT5) */
.scene { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-300); align-items: center; }
@media (max-width: 960px) { .scene { grid-template-columns: 1fr; } }
.mt5 { border-radius: var(--r-2xl); overflow: hidden; background: var(--chart-bg); box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px -24px rgba(0, 0, 0, 0.8); }
.mt5-bar { display: flex; align-items: center; gap: var(--s-75); padding: var(--s-100) var(--s-200); background: rgba(255, 255, 255, 0.04); color: var(--chart-text); }
.mt5-bar i { width: 10px; height: 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.12); }
.mt5-bar .sym { margin-left: var(--s-100); color: #E8EDF5; }
.mt5-bar .tf { margin-left: auto; }
.mt5-stage { position: relative; aspect-ratio: 16 / 9; }
.mt5-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 400ms var(--curve); }
.mt5-stage svg[aria-hidden="true"] { opacity: 0; }
.mt5 .g line { stroke: var(--chart-grid); stroke-width: 1; }
.mt5 .up { fill: var(--chart-up); }
.mt5 .dn { fill: var(--chart-down); }
.mt5 .zone-buy { fill: var(--zone-buy, var(--chart-up)); fill-opacity: 0.16; }
.mt5 .zone-sell { fill: var(--zone-sell, var(--chart-down)); fill-opacity: 0.16; }
.mt5 .edge-buy { fill: var(--zone-buy, var(--chart-up)); }
.mt5 .edge-sell { fill: var(--zone-sell, var(--chart-down)); }
.mt5 .cap rect { rx: 6px; }
.mt5 .cap text { font: 700 13px/16px "Manrope", sans-serif; letter-spacing: 0.08em; }
.mt5 .sl line { stroke: #E8EDF5; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.7; }
.mt5 .sl text { font: 500 12px/16px "Manrope", sans-serif; fill: var(--chart-text); }
.mt5 .axis text { font: 500 11px/16px "Manrope", sans-serif; fill: var(--chart-text); }
@media (prefers-reduced-motion: no-preference) {
  .js .mt5 .play .k { transform-box: fill-box; transform-origin: 50% 100%; animation: candle-in 500ms var(--curve) both; animation-delay: calc(var(--i) * 40ms); }
  .js .mt5 .play .zone, .js .mt5 .play .edge { transform-box: fill-box; transform-origin: 0 50%; animation: grow-x 700ms var(--curve) both; animation-delay: 1100ms; }
  .js .mt5 .play .cap, .js .mt5 .play .sl { animation: appear 400ms var(--curve) both; animation-delay: 1500ms; }
}
@keyframes grow-x { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

.kitchen { background: var(--chart-bg); box-shadow: inset 0 0 0 1px var(--line); color: #E8EDF5; border-radius: var(--r-2xl); padding: var(--s-200); display: grid; gap: var(--s-100); }
.kitchen-head { display: flex; align-items: center; gap: var(--s-75); }
.kitchen-head img { width: 24px; height: 24px; }
.k-row { display: flex; justify-content: space-between; gap: var(--s-200); }
.k-row span:first-child { color: var(--chart-text); }
.swap { position: relative; display: inline-grid; text-align: right; }
.swap > span { grid-area: 1 / 1; transition: opacity var(--t-color) var(--curve), transform var(--t-color) var(--curve); }
.swap > span[aria-hidden="true"] { opacity: 0; transform: translateY(6px); }
.k-dish-buy { color: var(--chart-up); }
.k-dish-sell { color: var(--chart-down); }
.scene-side { display: grid; gap: var(--s-300); align-content: start; }
.scene-copy { display: grid; gap: var(--s-100); }

/* ------------------------------------------------------------ in the box */
.box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-300); }
@media (max-width: 860px) { .box { grid-template-columns: 1fr; } }
.rule-list { display: grid; gap: var(--s-100); list-style: none; margin: 0; padding: 0; }
.rule-list li { display: flex; align-items: center; gap: var(--s-200); background: var(--surface); border-radius: var(--r-2xl); padding: var(--s-200) var(--s-300); color: var(--ink); }
.rule-list .ri { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--surface-2); display: grid; place-items: center; flex: none; }
.rule-list .ri svg { width: 24px; height: 24px; color: var(--teal-ink); }
.settings { background: var(--surface); border-radius: var(--r-3xl); padding: var(--s-300); display: grid; gap: var(--s-100); align-content: start; }
.setting { background: var(--surface-2); border-radius: var(--r-xl); padding: var(--s-200); display: flex; justify-content: space-between; align-items: center; gap: var(--s-200); }
.setting > div { display: grid; gap: var(--s-25); }
.setting .muted { color: var(--ink-3); }
.setting .v { color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lc .lc-line { transition: none; stroke-dashoffset: 0; }
  .lc .lc-area { transition: none; opacity: 0.1; }
  .lc .lc-late { transition: none; opacity: 1; }
  .bar-fill { transition: none; }
  .seg-thumb { transition: none; }
  .mt5-stage svg { transition: opacity 150ms var(--curve); }
  .swap > span { transition: opacity 150ms var(--curve); transform: none !important; }
}