/*
 * Markets & modes (/trading-modes/): the page's own components, loaded after site.css by PA_Seo::open(page_css).
 * Mobile first, kit tokens only. 1 settings card (hero)  2 market ladder  3 sizing gauge  4 profile cards
 * 5 account lanes  6 motion. Amber stays a dot or a lane (KIT 3); drawdown and risk are the calm neutral.
 */

/* the card depth of the kit, for this page's cards */
.pa-set, .pa-rung, .pa-gauge, .pa-lanes { position: relative; overflow: hidden; border-radius: var(--pa-r-3); background: var(--pa-card-bg); border: 1px solid var(--pa-card-line); box-shadow: var(--pa-elev); }
.pa-set::before, .pa-gauge::before, .pa-lanes::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--pa-spectrum); opacity: .7; }
/* card headings in white, not the body grey (brief P5) */
.pa-modes .pa-rule .pa-h3, .pa-lanes .pa-h3 { color: var(--pa-text); }

/* 1 The settings card: the MT5 panel (annotated) beside the gain / max drawdown pair. Phones: the proof column's parts
   join the card's grid (display: contents), so the figures come first, then the whole panel, then the settings line. */
.pa-set { display: grid; gap: 16px; margin-top: 28px; padding: 16px; }
.pa-set__proof { display: contents; }
.pa-set__head { order: 1; }
.pa-set .pa-figpair { order: 2; }
.pa-set__shot { order: 3; display: grid; gap: 12px; margin: 0; min-width: 0; }
.pa-set__rec { order: 4; }
.pa-set .pa-proof__foot { order: 5; padding-top: 12px; }
/* the whole panel of img/mt5-1400.webp (1400 x 588), in its own pixels (--cx --cy --cw --ch), at every width. A
   background, so no box reaches past the card; the numbered boxes use the same pixels. */
.pa-set__crop { --cx: 13; --cy: 19; --cw: 584; --ch: 228; position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); border-radius: var(--pa-r-2); background-color: #000; background-repeat: no-repeat;
	background-size: calc(140000% / var(--cw)) auto; background-position: calc(var(--cx) * 100% / (1400 - var(--cw))) calc(var(--cy) * 100% / (588 - var(--ch))); }
/* Jim, 16 Oct 2026: the EA 2.51 panel shot (img/mt5-panel-251.webp) is the panel itself, 560 x 209: the whole image */
.pa-set__crop--panel { --cx: 0; --cy: 0; --cw: 560; --ch: 209; background-size: 100% 100%; background-position: 0 0; }
.pa-set__box { position: absolute; left: calc((var(--bx) - var(--cx)) * 100% / var(--cw)); top: calc((var(--by) - var(--cy)) * 100% / var(--ch)); width: calc(var(--bw) * 100% / var(--cw)); height: calc(var(--bh) * 100% / var(--ch)); border: 2px solid var(--pa-fx); border-radius: 6px; box-shadow: 0 0 0 3px rgba(60, 211, 238, .14), 0 0 18px rgba(60, 211, 238, .4); }
.pa-set__n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pa-fx); color: var(--pa-ink-0); font: 700 13px/1 var(--pa-font); }
.pa-set__box .pa-set__n { position: absolute; right: 3px; top: 50%; width: 16px; height: 16px; font-size: 11px; transform: translateY(-50%); }
/* phones: the third number sits just outside its box, clear of the words "Cloud Connected" */
.pa-set__box--out .pa-set__n { right: auto; left: calc(100% + 5px); }
/* a number pinned to the box's top-left corner (the 2.51 Risk box holds the base lot on its right) */
.pa-set__crop .pa-set__box--tl .pa-set__n { top: 0; right: auto; left: 0; transform: translate(-68%, -68%); }
/* the key: a 3-up row everywhere; phones show the names only */
.pa-set__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--pa-fs-xs); color: var(--pa-text-3); }
.pa-set__keys li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pa-set__keys strong { display: block; color: var(--pa-text); font-weight: 600; font-size: var(--pa-fs-xs); line-height: 1.25; }
.pa-set__sub { display: none; }
.pa-set__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.pa-set .pa-figpair { --pa-mono: var(--pa-font); }
.pa-set .pa-figpair .pa-stat__value { font-size: min(var(--pa-fs-fig-max, 7.5rem), calc(84cqi / (var(--pa-chars, 14) * .56))); font-weight: 700; }
.pa-set .pa-stat__label { letter-spacing: .08em; }
/* the narrowest phones: keep gain and max drawdown on one line (the "MAX DRAWDOWN" label sets the pair's width) */
@media (max-width: 379px) {
	.pa-set .pa-stat__label { letter-spacing: .04em; }
	.pa-set .pa-figpair .pa-stat__value { font-size: calc(80cqi / (var(--pa-chars, 14) * .56)); }
	.pa-set .pa-figpair .pa-stat + .pa-stat { margin-left: 3cqi; padding-left: 3cqi; }
}
.pa-set__rec { font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
.pa-set__rec span { display: block; margin-bottom: 2px; font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-text-3); }
@media (min-width: 600px) {
	.pa-set { padding: 18px; }
	.pa-set__box .pa-set__n { right: 6px; left: auto; width: 22px; height: 22px; font-size: 13px; }
	.pa-set__keys { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 24px; padding: 0 4px; }
	.pa-set__keys li { gap: 10px; }
	.pa-set__keys strong { font-size: var(--pa-fs-sm); }
	.pa-set__sub { display: block; }
	.pa-set .pa-figpair .pa-stat__value { font-size: min(var(--pa-fs-fig-max, 7.5rem), calc(86cqi / (var(--pa-chars, 14) * .56))); }
}
@media (min-width: 1024px) {
	.pa-set { grid-template-columns: minmax(0, 584px) minmax(300px, 1fr); gap: 36px; padding: 16px 28px 16px 16px; align-items: center; }
	.pa-set--solo { grid-template-columns: minmax(0, 1fr); }
	.pa-set__shot { order: 0; gap: 14px; }
	.pa-set__proof { display: grid; gap: 16px; align-content: center; min-width: 0; padding: 4px 0; }
}

/* 2 The market ladder: Forex wide at the core, Gold and Bitcoin beside each other */
.pa-ladder { display: grid; gap: 16px; }
.pa-rung { --c: var(--pa-fx); display: grid; gap: 22px 40px; padding: 22px 20px; color: var(--pa-text-2); font-size: var(--pa-fs-sm); }
.pa-rung::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--c); opacity: .85; }
.pa-rung--gold { --c: var(--pa-gold); }
.pa-rung--btc { --c: var(--pa-btc); }
.pa-rung__body { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pa-rung__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; grid-column: 1 / -1; margin-bottom: -8px; }
.pa-rung__top .pa-eyebrow { flex: 1 1 100%; min-width: 0; }
.pa-risk { display: flex; align-items: center; gap: 4px; flex: none; font: 650 var(--pa-fs-xs)/1 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-text-3); }
.pa-risk i:first-of-type { margin-left: 6px; }
.pa-risk i { width: 20px; height: 8px; border-radius: 3px; border: 1px solid var(--pa-line-strong); }
.pa-risk i.is-on { background: var(--pa-dd); border-color: var(--pa-dd); }
.pa-rung__h { display: flex; align-items: center; gap: 10px; font-size: var(--pa-fs-h3); color: var(--pa-text); }
.pa-rung__h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.pa-rung__big { font: 700 clamp(2.5rem, 1.8rem + 3vw, 4rem)/1 var(--pa-font); letter-spacing: -.04em; color: var(--pa-text); font-variant-numeric: tabular-nums; }
.pa-rung__big span { margin-left: 12px; font: 500 var(--pa-fs-sm)/1 var(--pa-font); letter-spacing: 0; color: var(--pa-text-3); }
.pa-rung .pa-pairs { align-self: center; }
/* 420 px up the risk meter sits beside the eyebrow; narrower, it drops under it */
@media (min-width: 420px) { .pa-rung__top { flex-wrap: nowrap; } .pa-rung__top .pa-eyebrow { flex-basis: auto; } }
@media (min-width: 900px) {
	.pa-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.pa-rung { padding: 26px 28px; }
	.pa-rung--fx { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* 3 The sizing gauge: bar lengths follow the EA's base size at the same balance (2000 : 1000 : 500 per 0.01 lot).
   Only the Recommended default is lit; the part of Aggressive past Balanced fades into the drawdown neutral (more size
   is more exposure, never the green of "go"). */
.pa-gauge { padding: 18px 18px 8px; }
.pa-gauge__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--pa-line); font: 650 var(--pa-fs-xs)/1.35 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-text); }
.pa-gauge__head span + span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pa-text-3); }
.pa-gauge__rows { margin: 0; padding: 0; list-style: none; }
.pa-gauge__row { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--pa-line); }
.pa-gauge__row:last-child { border-bottom: 0; }
.pa-gauge__row.is-def { margin-inline: -18px; padding-inline: 18px; background: linear-gradient(90deg, rgba(60, 211, 238, .08), rgba(60, 211, 238, .02)); box-shadow: inset 2px 0 0 var(--pa-fx); }
.pa-gauge__who { display: grid; gap: 4px; }
.pa-gauge__tag { font: 650 var(--pa-fs-xs)/1.3 var(--pa-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-lit); }
.pa-gauge__row.is-hi .pa-gauge__tag { color: var(--pa-dd); }
.pa-gauge__name { font-size: var(--pa-fs-h3); color: var(--pa-text); }
.pa-gauge__bar { display: grid; gap: 10px; }
.pa-gauge__lab { font-size: var(--pa-fs-sm); font-weight: 600; color: var(--pa-text); }
.pa-gauge__track { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--pa-ink-0); box-shadow: inset 0 0 0 1px var(--pa-line); }
/* each fill shows its share of one full-width gradient: white to cyan at Balanced's length */
.pa-gauge__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 1) * 100%); border-radius: inherit; background: linear-gradient(90deg, #eef3fa, var(--pa-fx) 50%, var(--pa-fx)) 0 0 / calc(100% / var(--v, 1)) 100% no-repeat; transform-origin: left center; }
.pa-gauge__row.is-def .pa-gauge__fill { box-shadow: 0 0 18px rgba(60, 211, 238, .38); }
.pa-gauge__row.is-hi .pa-gauge__fill { background-image: linear-gradient(90deg, #eef3fa, var(--pa-fx) 50%, var(--pa-dd)); }
.pa-gauge__txt { font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
@media (min-width: 900px) {
	.pa-gauge { padding: 22px 28px 10px; }
	.pa-gauge__row { grid-template-columns: 240px minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: center; padding: 22px 0; }
	.pa-gauge__row.is-def { margin-inline: -28px; padding-inline: 28px; }
}

/* 4 Prop Firm mode and Fixed Lot, the control cards: icon row, and a foot that sits on the card's bottom line */
.pa-two { margin-top: 20px; }
.pa-two__note { margin-top: 16px !important; max-width: 110ch; }
.pa-rule__top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pa-rule__top .pa-eyebrow::before { display: none; }
.pa-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pa-ink-3); box-shadow: inset 0 0 0 1px var(--pa-line-strong); color: var(--pa-fx); }
.pa-ico svg { width: 24px; height: 24px; }
.pa-rule__k .pa-fig { font-family: var(--pa-font); font-size: 1.5rem; font-weight: 700; margin-right: 4px; }
.pa-modes .pa-rule { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-modes .pa-rule .pa-chips { margin-top: 4px; }
.pa-modes .pa-rule > .pa-rule__foot { margin-top: auto; padding-top: 8px; }
@media (max-width: 399px) { .pa-chips { gap: 6px; } .pa-chips .pa-chip { gap: 6px; padding: 0 9px; } }

/* 5 Account lanes: the slots of each plan, one way to use them */
.pa-acct { display: grid; gap: 16px; }
.pa-acct__side { display: grid; gap: 16px; align-content: start; }
.pa-lanes { display: grid; gap: 12px; align-content: start; padding: 22px 20px; color: var(--pa-text-2); font-size: var(--pa-fs-sm); }
.pa-lanes__plans { display: grid; gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.pa-lanes__plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--pa-fs-xs); color: var(--pa-text-3); }
.pa-lanes__plan b { font-size: var(--pa-fs-sm); font-weight: 600; color: var(--pa-text); }
.pa-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.pa-slot { --c: var(--pa-line-strong); position: relative; display: grid; gap: 4px; align-content: start; min-height: 60px; padding: 10px 10px 8px; overflow: hidden; border: 1px solid var(--pa-line); border-radius: 10px; background: var(--pa-ink-1); font-size: var(--pa-fs-xs); color: var(--pa-text-3); }
.pa-slot::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--c), var(--c2, var(--c))); }
.pa-slot b { display: flex; align-items: center; gap: 7px; font-size: var(--pa-fs-sm); font-weight: 600; color: var(--pa-text); white-space: nowrap; }
.pa-slot__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.pa-slot__dot + .pa-slot__dot { margin-left: -4px; }
.pa-slot--mix { grid-column: span 2; }
.pa-slot--any { border-style: dashed; border-color: var(--pa-line-strong); background: transparent; }
.pa-slot--any::before { display: none; }
.pa-slot--any b { font-weight: 500; color: var(--pa-text-2); }
@media (min-width: 600px) { .pa-slots { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
@media (min-width: 900px) {
	.pa-acct { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
	.pa-acct__side { grid-template-rows: auto 1fr; align-content: stretch; }
	.pa-acct__wide { grid-column: 1 / -1; } /* 23 Oct 2026: Weekend Guard runs across under both columns */
	.pa-lanes { padding: 26px 28px; }
}

/* 6 Motion: the gauge bars grow once, when the gauge is revealed (transform only; the kit's failsafe applies) */
@media (prefers-reduced-motion: no-preference) {
	.pa-js .pa-gauge .pa-gauge__fill { transform: scaleX(0); animation: pa-failsafe 0s 3s forwards; }
	.pa-io .pa-gauge:not(.is-in) .pa-gauge__fill { animation: none; }
	.pa-js .pa-gauge.is-in .pa-gauge__fill { transform: none; animation: none; transition: transform 1s var(--pa-ease) calc(.2s + var(--i, 0) * .12s); }
}