/* The guided bot setup (/bots/new, radar/bot_flow.py; drawn by radar/web/bot-flow.js). Concept A "Steps" (owner's pick, 2026-10-03): Choose -> Amount -> Review, and Customize (every setting by Entry / Exit / Risk / Timing beside a live check). Drawn in the workspace design (owner, 2026-10-06: the GPT-built workspace, docs/design/workspace-source, its configuration wizard): one wizard panel on the page (its header with the title and the close button, the numbered steps, the body, the footer with Back and the one light primary), form fields as the design's inputs, the right column as its "At a glance" summary box, its callouts and error lines. The page sits in a .ws wrapper (radar/bot_flow.py) for the design's tokens and fonts; every rule here is under #bf (or #sheet for the pickers), so it wins over the design's element rules and the Terminal's markup inside keeps working. The Terminal's own layout (#term) stays in the page for its data and is hidden here. */ html.tm-flow body { background: var(--rv-bg); overflow-y: auto; } html.tm-flow #term, html.tm-flow #cbar, html.tm-flow #fbar { display: none !important; } /* the design's tokens for this page (dark; the light theme below) */ /* (audit p18 item 11: the site's palette, no blue-grey: every surface, line and box a token of radar/web/rv-tokens.css) */ .bf-ws { --bf-modal: var(--rv-panel); --bf-mline: var(--rv-line-2); --bf-box: var(--rv-panel); --bf-bline: var(--rv-line-2); --bf-input: var(--rv-bg); --bf-sel: var(--rv-pill); --bf-hover: var(--rv-pill); --bf-on: var(--rv-pill); --bf-stepon: var(--rv-pill); --bf-stepline: var(--rv-line-3); --bf-dim: var(--rv-text-3); --bf-warnbg: var(--rv-panel); --bf-warnline: var(--rv-line-2); --bf-warntx: var(--rv-text-2); --bf-infobg: var(--rv-panel); --bf-infoline: var(--rv-line-2); --bf-infotx: var(--rv-text-2); --bf-pad: 34px; --bf-foot: 72px; --bf-tabs: 0px; display: block; min-height: calc(100vh - var(--rv-header-h, 64px)); padding: 30px var(--bf-pad) 40px; background: var(--bg); } [data-theme="light"] .bf-ws { --bf-modal: #ffffff; --bf-mline: #d5d9de; --bf-box: #f3f4f6; --bf-bline: #dfe2e6; --bf-input: #ffffff; --bf-sel: #e4e6e9; --bf-hover: #f0f1f3; --bf-on: #ffffff; --bf-stepon: #e4e6e9; --bf-stepline: #9aa1a9; --bf-dim: #80868d; --bf-warnbg: #f7f3ea; --bf-warnline: #e3d8c2; --bf-warntx: #6f5a2c; --bf-infobg: #eef2f6; --bf-infoline: #d3dbe4; --bf-infotx: #3c4a58; } #bf { color: var(--text); font: 400 13px/1.5 var(--font); letter-spacing: 0; margin: 0; background: var(--bf-modal); border: 1px solid var(--bf-mline); border-radius: 14px; box-shadow: var(--shadow); } #bf *, #bf *::before, #bf *::after { box-sizing: border-box; } #bf :where(button, input, select) { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; } #bf p { margin: 0; } #bf a { color: inherit; text-decoration: none; } #bf .num { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; } #bf .up { color: var(--green); } #bf .dn { color: var(--red); } #bf .mut { color: var(--muted); } #bf .dim { color: var(--bf-dim); } #bf svg.i { display: inline-block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #bf .sk { border-radius: 4px; } /* the wizard: the header (crumb, title, line; the close button), the numbered steps, the body, the footer */ #bf .bf-w { margin: 0; padding: 0; } #bf .bf-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 23px 25px; border-bottom: 1px solid var(--border); } #bf .bf-mh > div { min-width: 0; } #bf .bf-crumb { margin: 0 0 4px; font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; } #bf h1 { margin: 0; font: 650 20px/1.25 var(--font); letter-spacing: -.4px; color: var(--text); } #bf .bf-sub { margin: 5px 0 0; font-size: 11px; line-height: 17px; color: var(--muted); max-width: 820px; } #bf .bf-pick { margin: 0 0 10px; } #bf .bf-x { flex: none; width: 33px; height: 33px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--muted); } #bf .bf-x:hover { background: var(--panel2); color: var(--text); border-color: var(--border); } #bf .bf-x svg.i { width: 18px; height: 18px; } #bf .bf-top { margin: 0; padding: 18px 25px 0; border: 0; } #bf .bf-tw { display: flex; align-items: center; } #bf .bf-steps { display: flex; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; } #bf .bf-steps li { display: flex; flex: 1; min-width: 0; } #bf .bf-steps:not(:has(li:nth-child(3))) { gap: 40px; } #bf .bf-steps:not(:has(li:nth-child(3))) li { flex: none; } /* two steps (the Signal bot): side by side, never one in mid-panel */ #bf .bf-steps button { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 10px; line-height: 16px; text-align: left; cursor: default; white-space: nowrap; } #bf .bf-steps button:not(:disabled) { cursor: pointer; } #bf .bf-steps button:disabled { opacity: 1; } #bf .bf-steps b { flex: none; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-weight: 500; font-size: 10px; } #bf .bf-steps .t { overflow: hidden; text-overflow: ellipsis; } #bf .bf-steps .done { color: var(--soft); } #bf .bf-steps .done b { border-color: var(--bf-stepline); } #bf .bf-steps button:not(:disabled):hover { color: var(--text); } #bf .bf-steps .on { color: var(--accent); } #bf .bf-steps .on b { background: var(--bf-stepon); border-color: var(--bf-stepline); } #bf .bf-mb { padding: 25px; } /* words */ #bf .bf-lbl { display: block; margin: 0 0 7px; font-size: 11px; line-height: 16px; color: var(--soft); } #bf .bf-note { margin: 10px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); } #bf .bf-banner { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 12px; border: 1px solid var(--bf-infoline); border-radius: 6px; background: var(--bf-infobg); font-size: 11px; line-height: 1.7; color: var(--bf-infotx); } #bf .bf-banner b { color: var(--text); font-weight: 600; } #bf .bf-banner .bf-lnk { margin-left: auto; flex: none; } #bf .bf-lnk { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 400; cursor: pointer; text-decoration: none; white-space: nowrap; } #bf .bf-lnk:hover { color: var(--text); text-decoration: none; } #bf .bf-lnk svg.i { width: 13px; height: 13px; } #bf .bf-lnk.acc { color: var(--accent); } /* step 1: the types as the library's rows (icon, name, line) in one bordered list; the market and the exchange in the summary box on the right */ #bf .bf-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 0; align-items: start; } #bf .bf-types { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--panel); } #bf .bf-typ { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; margin: 0; min-height: 58px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text); text-align: left; cursor: pointer; } #bf .bf-typ:last-child { border-bottom: 0; } #bf .bf-typ:focus-visible, #bf .bf-amtf .mx:focus-visible { outline-offset: -2px; } /* inside the list's clipped frame */ #bf .bf-typ:hover { background: var(--bf-hover); } #bf .bf-typ.on { background: var(--panel2); } #bf .bf-typ.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } #bf .bf-typ .ic { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--bf-modal); color: var(--soft); } #bf .bf-typ.on .ic { border-color: var(--bf-stepline); color: var(--text); } #bf .bf-typ .ic svg { width: 16px; height: 16px; color: inherit; } #bf .bf-typ .nm { display: block; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--text); } #bf .bf-typ .ln { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; color: var(--muted); } #bf .bf-typ .rk { font-style: normal; color: var(--amber); } #bf .bf-typ .ck { color: var(--text); visibility: hidden; } #bf .bf-typ.on .ck { visibility: visible; } #bf .bf-typ .ck svg.i { width: 15px; height: 15px; stroke-width: 1.9; } #bf .bf-grp { display: flex; align-items: center; gap: 8px; height: 38px; margin: 14px 0 6px; padding: 0 2px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--soft); } #bf .bf-grp:first-child { margin-top: 0; } #bf .bf-more { margin-top: 14px; } #bf .bf-side { display: grid; gap: 0; padding: 19px; border: 1px solid var(--bf-bline); border-radius: 8px; background: var(--bf-box); } #bf .bf-side > .bf-lbl ~ .bf-lbl { margin-top: 18px; } #bf .bf-sel { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); color: var(--text); text-align: left; cursor: pointer; } #bf .bf-sel:hover { border-color: var(--bf-stepline); } #bf .bf-sel.st, #bf .bf-sel.st:hover { cursor: default; border-color: var(--border); } #bf .bf-sel .lg { width: 24px; height: 24px; display: grid; place-items: center; } #bf .bf-sel .lg img, #bf .bf-sel .lg svg { width: 24px; height: 24px; border-radius: 50%; } #bf .bf-sel .a { display: block; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bf .bf-sel .b { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bf .bf-sel .r .b { white-space: nowrap; } #bf .bf-sel > span:nth-child(2) .b { white-space: normal; overflow: visible; text-overflow: clip; } /* the pair and the fee line wrap in a narrow box, never cut (1024-1280px) */ #bf .bf-sel .r { text-align: right; } #bf .bf-sel .r .a { font-weight: 500; font-variant-numeric: tabular-nums; } #bf .bf-sel > svg.i { color: var(--muted); } #bf .bf-mood { margin: 14px 0 0; font-size: 11px; line-height: 1.7; color: var(--muted); } /* step 2: the amount (the design's input), then the plans as three cards */ #bf .bf-amt { margin: 0; max-width: 520px; } #bf .bf-amt + .bf-ph, #bf .bf-amt + .bf-ed { margin-top: 24px; } #bf .bf-amtf { display: flex; align-items: center; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); } #bf .bf-amtf:focus-within { border-color: #acb4c0; } #bf .bf-amtf input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text); font: 500 17px/24px var(--font); font-variant-numeric: tabular-nums; } #bf .bf-amtf input::placeholder { color: var(--bf-dim); } #bf .bf-amtf .u { margin-left: 12px; font-size: 11px; color: var(--muted); } #bf .bf-amtf .mx { margin-left: 14px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: none; color: var(--soft); font-size: 10px; cursor: pointer; } #bf .bf-amtf .mx:hover { color: var(--text); background: var(--panel2); } #bf .bf-amth { display: flex; justify-content: space-between; gap: 16px; margin-top: 7px; font-size: 10px; line-height: 16px; color: var(--muted); } #bf .bf-amth b { color: var(--soft); font-weight: 500; } #bf .bf-amth .bad b { color: var(--red); } #bf .bf-amtf.bad { border-color: var(--red); } /* an amount that cannot work (0, negative, above the most a bot may use): said under the field, in every step (GPT audit M01) */ #bf .bf-aerr { display: block; margin: 8px 0 0; font-size: 11px; line-height: 16px; color: var(--red); } #bf .bf-aerr:empty { display: none; } #bf .bf-r .h .bf-aerr { margin-top: 4px; } /* a setting that works but costs more than it earns (a grid's gap under twice its round trip's fee): said, never blocking */ #bf .bf-awarn { display: block; margin: 4px 0 0; font-size: 11px; line-height: 16px; color: var(--bf-warntx); } #bf .bf-in.bad, #bf .bf-in.bad:focus-within { border-color: var(--red); } #bf .bf-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 24px 0 12px; } /* the plans' heading with the backtest period beside it (owner, 2026-10-09: 7D / 30D / 90D / 1Y) */ #bf .bf-ph2 { align-items: center; margin: 12px 0 8px; } #bf .bf-ph2 .hh { display: flex; align-items: baseline; gap: 12px; min-width: 0; } #bf .bf-ph2 .hh .n { text-align: left; } #bf .bf-ph2 { flex-wrap: wrap; row-gap: 8px; } #bf .bf-ph2 .ctl { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } #bf .bf-ph2 .bf-days { flex: none; margin-left: 0; } #bf .bf-ph2 .bf-days button { padding: 2px 9px; } @media (max-width: 1239px) { #bf .bf-ph2 .bf-days button { padding: 2px 7px; } #bf .bf-ph2 .ctl { gap: 6px; } #bf .bf-ph2 .hh { gap: 8px; } } #bf .bf-hzhint { margin: -4px 0 8px; font-size: 11px; line-height: 16px; color: var(--muted); } #bf .bf-hzhint:empty { display: none; } #bf .bf-hzhint .bf-lnk { font-size: inherit; } #bf .bf-days button:disabled { opacity: .45; cursor: default; } #bf .bf-days button:disabled:hover { color: var(--muted); } #bf .bf-rough { margin: -4px 0 8px; } /* the days the bot worked of the period, right under the figure (owner, 2026-10-10: "Ran 11 of 30 days — stopped when the price left the range"), in the text colour; the run or the time the test ends; a test that could not run */ #bf .bf-ran { margin: 4px 0 0; font-size: 12px; line-height: 17px; font-weight: 500; color: var(--text); } #bf .bf-vs { margin: 2px 0 0; font-size: 11px; line-height: 17px; color: var(--muted); } #bf .bf-vs b { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--soft); } #bf .bf-vs b.up { color: var(--green); } #bf .bf-vs b.dn { color: var(--red); } #bf .bf-bt.ld .bf-ran, #bf .bf-bt.ld .bf-vs { opacity: .45; } #bf .bf-asof { margin-top: 2px; color: var(--bf-dim); } #bf .bf-bterr { margin-top: 8px; color: var(--soft); } #bf .bf-bterr .bf-lnk { font-size: inherit; } #bf .bf-rrn { margin: -2px 0 8px; font-size: 10px; line-height: 15px; color: var(--muted); } /* step 2's Direction (owner, 2026-10-09): under the amount, beside it where the panel is wide; every direction the type runs as one segmented control, each with its Balanced backtest and one plain line; a type that sets its own says how. The plan cards a little tighter so that the three keep their whole height on a 1360x860 screen as before */ #bf .bf-amtrow ~ .bf-plans .bf-plan, #bf .bf-ph2 + .bf-plans .bf-plan { padding: 15px 17px; } #bf .bf-ph2 + .bf-plans .bf-plan .ln { margin: 4px 0 10px; } #bf .bf-amtrow { display: grid; grid-template-columns: minmax(0, 520px); gap: 18px; } #bf .bf-amtrow .bf-amt { max-width: none; } #bf .bf-dwhy.bf-alb { display: none; } /* beside each other on a wider screen, in shared rows (the labels, the two controls, the lines under them), so the field and the choice keep one top edge and one height however the reason line or a choice's words wrap */ @media (min-width: 861px) { #bf .bf-amtrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; } #bf .bf-amtrow .bf-amtc, #bf .bf-amtrow .bf-amt, #bf .bf-amtrow .bf-dir { display: contents; } #bf .bf-dwhy.bf-alb { display: flex; } #bf .bf-amtrow .bf-dwhy { grid-row: 1; align-self: end; } #bf .bf-amtrow .bf-alb { grid-column: 1; } #bf .bf-amtrow .bf-dir .bf-dwhy { grid-column: 2; } #bf .bf-amtrow .bf-amtf { grid-column: 1; grid-row: 2; height: auto; min-height: 46px; } #bf .bf-amtrow .bf-dseg, #bf .bf-amtrow .bf-dfix { grid-column: 2; grid-row: 2; } #bf .bf-amtrow .bf-amth { grid-column: 1; grid-row: 3; } #bf .bf-amtrow .bf-dcap { grid-column: 2; grid-row: 3; } #bf .bf-amtrow .bf-amt .bf-aerr { grid-column: 1; grid-row: 4; } } @media (min-width: 861px) and (max-width: 1239px) { #bf .bf-amtrow { gap: 0 20px; } #bf .bf-dseg button { padding: 4px 7px; } } #bf .bf-dir { min-width: 0; } #bf .bf-dwhy { display: flex; align-items: baseline; gap: 10px; min-height: 16px; margin: 0 0 7px; font-size: 11px; line-height: 16px; color: var(--muted); } #bf .bf-dwhy .k { flex: none; font-weight: 600; color: var(--soft); } #bf .bf-dwhy .w { min-width: 0; } #bf .bf-dseg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; min-height: 46px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); } #bf .bf-dseg button { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 4px 9px; border: 0; border-radius: 3px; background: none; color: var(--muted); text-align: left; cursor: pointer; } #bf .bf-dseg .dt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 15px; } #bf .bf-dseg .dt b { font-weight: 600; color: var(--soft); white-space: nowrap; } #bf .bf-dseg .dt .num { font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--muted); } #bf .bf-dseg .dl { font-size: 10px; line-height: 13px; overflow-wrap: anywhere; } #bf .bf-dseg button:hover .dt b, #bf .bf-dseg button.on .dt b { color: var(--text); } #bf .bf-dseg button.on { background: var(--bf-sel); color: var(--soft); } #bf .bf-dseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #bf .bf-dcap { margin: 7px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); } #bf .bf-dfix { display: flex; align-items: center; min-height: 46px; margin: 0; font-size: 11px; line-height: 16px; color: var(--soft); } /* the review: the direction first in what it will do */ #bf .bf-dsum { margin: 0 0 8px; font-size: 12px; line-height: 18px; color: var(--soft); } #bf .bf-dsum > span { color: var(--muted); margin-right: 4px; } #bf .bf-dsum b { font-weight: 600; color: var(--text); } #bf .bf-ph .h { font: 650 15px/1.3 var(--font); } #bf .bf-ph .n { font-size: 11px; line-height: 16px; color: var(--muted); text-align: right; } #bf .bf-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #bf .bf-plan { position: relative; display: flex; flex-direction: column; width: 100%; padding: 17px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; } #bf .bf-plan:hover { border-color: var(--bf-stepline); } #bf .bf-plan.on { border-color: var(--bf-stepline); background: var(--bf-box); } #bf .bf-plan .nm { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 650; color: var(--soft); } #bf .bf-plan.on .nm { color: var(--text); } #bf .bf-plan .rec { padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 9px; line-height: 14px; font-weight: 500; color: var(--muted); } #bf .bf-plan .rd { margin-left: auto; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid var(--bf-stepline); } #bf .bf-plan.on .rd { border: 4px solid var(--accent); } #bf .bf-plan .ln { display: block; flex: 1 0 auto; min-height: 34px; margin: 6px 0 12px; font-size: 11px; line-height: 17px; color: var(--muted); } #bf .bf-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 11px; line-height: 17px; } #bf .bf-kv > span:first-child { color: var(--muted); white-space: nowrap; } #bf .bf-kv > span:last-child { min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bf .bf-plan .kvs { display: block; margin-bottom: 10px; } #bf .bf-plan .bt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; } #bf .bf-plan .bt > span:first-child { color: var(--muted); } #bf .bf-plan .bt b, #bf .bf-plan .kvs b { font-size: 13px; font-weight: 600; } #bf .bf-plan .kvl { display: none; } /* a plan's risk beside its return (owner's review 2026-10-08): the test's worst drop and the loss at its stop */ #bf .bf-plan .bt2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; font-size: 11px; } #bf .bf-plan .bt2 > span:first-child { color: var(--muted); } #bf .bf-plan .bt2 b { font-size: 12px; font-weight: 600; } /* the amount brings a count down from the plan's own: said on the card, with the amount that keeps them all */ #bf .bf-plan .cn { display: block; margin: -4px 0 10px; font-size: 10px; line-height: 15px; color: var(--bf-warntx); } #bf .bf-plan .cn[hidden] { display: none; } #bf .bf-basis, #bf .bf-simn { margin: 12px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); } #bf .bf-simn + .bf-basis { margin-top: 2px; } #bf .bf-rules { display: grid; gap: 4px; font-size: 11px; line-height: 17px; } #bf .bf-rules span { display: block; } #bf .bf-ed { margin-top: 24px; max-width: 520px; display: grid; gap: 8px; } /* step 3: the chart and the backtest on the left; the risk, the guard and what it will do in the summary box on the right */ #bf .bf-rv { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 0; align-items: start; } #bf .bf-rv > div:last-child { padding: 19px; border: 1px solid var(--bf-bline); border-radius: 8px; background: var(--bf-box); min-width: 0; } #bf .bf-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; min-height: 30px; margin: 0 0 10px; font-size: 11px; line-height: 16px; color: var(--muted); } #bf .bf-cap b { flex: none; white-space: nowrap; color: var(--soft); font-weight: 600; } /* never broken in two (プレビュー) */ #bf .bf-chart { position: relative; width: 100%; aspect-ratio: 664 / 240; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); overflow: hidden; } #bf .bf-chart svg { display: block; width: 100%; height: 100%; overflow: visible; } #bf .bf-chart .sk { position: absolute; inset: 0; border-radius: 0; } /* the Terminal's chart (radar/web/chart-adapter.js) inside the box: drag, zoom and the crosshair are the chart's own */ #bf .bf-chart .bf-kc { position: absolute; inset: 0; cursor: crosshair; } /* the chart's legend (bot-flow.js stlH): the overlays the bot's own rule draws, each a quiet text toggle with its colour as a short line (a small triangle for marks), the backtest's fills, and the chart the bot reads; one line over the chart, wrapping on a phone */ #bf .bf-stl { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: -6px 2px 4px; font-size: 11px; line-height: 16px; color: var(--muted); } #bf .bf-stl:empty { display: none; } #bf .bf-sti { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--soft); font-size: 11px; cursor: pointer; } #bf .bf-sti i { display: inline-block; width: 10px; height: 2px; border-radius: 1px; } #bf .bf-sti svg.m { width: 10px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; } #bf .bf-sti.off svg.m { opacity: .35; } #bf .bf-sti i.d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } #bf .bf-sti.off { color: var(--bf-dim); text-decoration: line-through; text-decoration-color: var(--border); } #bf .bf-sti.off i { opacity: .35; } #bf .bf-sti[data-stl="trades"]::before, #bf .bf-sti[data-cfit]::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--bf-stepline); border-radius: 3px; box-sizing: border-box; } #bf .bf-sti[data-stl="trades"][aria-pressed="true"]::before, #bf .bf-sti[data-cfit][aria-pressed="true"]::before { background: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 2px var(--bf-modal); } #bf .bf-sti[data-cfit][aria-pressed="false"]:not(:hover) { color: var(--muted); } /* "All lines": the scale on every line of the bot */ #bf .bf-sti[data-stl="trades"].off { text-decoration: none; color: var(--muted); } #bf .bf-sti:hover { color: var(--text); } #bf .bf-sti:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } #bf .bf-stt { color: var(--bf-dim); } #bf .bf-days button.bt { position: relative; } #bf .bf-days button.bt::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateX(-50%); opacity: .8; } #bf .bf-stg { color: var(--accent); } /* Market neutral's spread (radar/web/bot-chart.js spreadH): the z-score at the chart's size, its levels named at the right, the scale and three dates in HTML so they keep their size */ #bf .bf-zc { display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-rows: auto 18px; margin-top: 8px; } #bf .bf-zp { position: relative; height: clamp(150px, 100vh - 560px, 260px); border: 1px solid var(--border); border-radius: 9px 0 0 9px; border-right: 0; background: var(--panel); overflow: hidden; } #bf .bf-zp svg { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); display: block; overflow: visible; } #bf .bf-zp path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; } #bf .bf-zp .z0 { stroke: var(--border); } #bf .bf-zp .ze { stroke: var(--accent); stroke-dasharray: 4 3; opacity: .7; } #bf .bf-zp .zx { stroke: var(--bf-dim); stroke-dasharray: 1 3; } #bf .bf-zp .zs { stroke: var(--red); stroke-dasharray: 6 3; opacity: .6; } #bf .bf-zp .zl { stroke: var(--text); stroke-width: 1.25; stroke-linejoin: round; opacity: .85; } #bf .bf-zl { position: absolute; inset: 8px 0; pointer-events: none; } #bf .bf-zl span { position: absolute; right: 8px; transform: translateY(-100%); padding-bottom: 1px; font-size: 10px; line-height: 13px; white-space: nowrap; } #bf .bf-zl .ze { color: var(--accent); } #bf .bf-zl .zx { color: var(--bf-dim); } #bf .bf-zl .zs { color: var(--red); } #bf .bf-zn { position: absolute; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); transform: translateY(-50%); } #bf .bf-zy { position: relative; border: 1px solid var(--border); border-left: 0; border-radius: 0 9px 9px 0; background: var(--panel); } #bf .bf-zyi { position: absolute; inset: 8px 0; } #bf .bf-zy span { position: absolute; left: 6px; transform: translateY(-50%); font-size: 10px; line-height: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } #bf .bf-zx { position: relative; grid-column: 1; } #bf .bf-zx span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap; } #bf .bf-zx span:first-child { transform: none; } #bf .bf-zx span:last-child { transform: translateX(-100%); } #bf svg.bfc text { font: 400 10px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; } #bf svg.bfc .lbl rect { fill: var(--bf-input); } #bf svg.bfc .lbl text { fill: var(--text); font-size: 10px; font-weight: 500; } #bf svg.bfc .now rect { fill: var(--text); } #bf svg.bfc .now text { fill: var(--bg); font-weight: 600; } #bf svg.bfc .ax line { stroke: var(--border); } #bf .bf-bt { margin-top: 14px; padding: 4px 17px 17px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); } #bf .bf-bth { display: flex; align-items: center; gap: 10px; height: 44px; } #bf .bf-bth .t { font: 650 14px/1.3 var(--font); } #bf .bf-sim { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--bf-infoline); border-radius: 5px; background: var(--bf-infobg); font-size: 10px; line-height: 14px; font-weight: 500; color: var(--bf-infotx); } #bf .bf-days { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); } #bf .bf-days button { padding: 4px 9px; border: 0; border-radius: 3px; background: none; font-size: 10px; line-height: 14px; color: var(--muted); cursor: pointer; } #bf .bf-days button:hover { color: var(--text); } #bf .bf-days button.on { color: var(--text); background: var(--bf-sel); } #bf .bf-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; } #bf .bf-big b { font: 650 26px/32px var(--font); letter-spacing: -.8px; font-variant-numeric: tabular-nums; } #bf .bf-big .bfp { font-size: 13px; line-height: 18px; font-weight: 600; } #bf .bf-big .bfo { font-size: 11px; color: var(--muted); } #bf .bf-big .bf-btsh { margin-left: auto; align-self: center; } /* Share backtest: quiet, on the result's own line */ #bf .bf-parts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; font-size: 11px; line-height: 18px; color: var(--muted); } #bf .bf-parts b { font-weight: 500; font-size: 12px; color: var(--soft); margin-left: 4px; } #bf .bf-parts b.up { color: var(--green); } #bf .bf-parts b.dn { color: var(--red); } #bf .bf-parts .hold { margin-left: auto; } #bf .bf-bt.ld .bf-big, #bf .bf-bt.ld .bf-parts { opacity: .45; } #bf .bf-bt .err { margin: 8px 0 0; font-size: 11px; line-height: 17px; color: var(--red); } #bf .bf-bt .sk { display: block; height: 31px; margin-top: 6px; width: 50%; } #bf .bf-do h3 { margin: 0 0 12px; font: 650 15px/1.3 var(--font); color: var(--text); } #bf .bf-sent { margin: 0 0 12px; font-size: 12px; line-height: 1.65; color: var(--soft); } #bf .bf-sent b { color: var(--text); font-weight: 600; } #bf .bf-ol { margin: 0; padding: 0; list-style: none; counter-reset: bf; display: grid; gap: 8px; } #bf .bf-ol li { position: relative; padding-left: 26px; font-size: 11px; line-height: 17px; counter-increment: bf; color: var(--soft); } #bf .bf-ol li::before { content: counter(bf); position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 9px; line-height: 1; color: var(--muted); } #bf .bf-risk { margin: 0; border-top: 0; } #bf .bf-risk:empty { display: none; } #bf .bf-rv .bf-do { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } #bf .bf-rv .bf-do:first-child { margin-top: 0; padding-top: 0; border-top: 0; } #bf .bf-rv .bf-risk:empty + [data-fv=guard] > .bf-guard:first-child { margin-top: 0; padding-top: 0; border-top: 0; } #bf .bf-ask + .bf-risk { margin-top: 18px; } #bf .bf-rr { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 31px; padding: 7px 0; font-size: 11px; line-height: 17px; border-bottom: 0; } #bf .bf-rr > span:first-child { color: var(--muted); white-space: nowrap; } #bf .bf-rr > span:last-child { text-align: right; min-width: 0; } #bf .bf-rr b { font-weight: 600; } #bf .bf-rr .s { color: var(--muted); margin-left: 6px; font-size: 10px; } #bf .bf-rr .lq { white-space: nowrap; } #bf .bf-rr.two > span:last-child { display: grid; justify-items: end; } /* a neutral grid: its long and short liquidation, one per line */ #bf .bf-rr .lq .lqs { margin-right: 6px; font-size: 11px; color: var(--muted); } /* each side named: Long / Short (audit 2026-10-10 #11) */ #bf .bf-rnote { margin: 8px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); } /* what the risk figures are measured on */ /* the guard: the design's callouts (the safe line quiet, a warning amber, a block in red), each with its fix */ #bf .bf-guard { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 0 10px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.7; color: var(--soft); } #bf .bf-guard::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); transform: translateY(-1px); } #bf .bf-guard.warn::before { background: var(--amber); } #bf .bf-guard.block::before { background: var(--red); } #bf .bf-guard.wait::before, #bf .bf-guard.na::before { background: var(--muted); } #bf .bf-guard.block { color: var(--red); } #bf .bf-guard.warn { padding: 12px; border: 1px solid var(--bf-warnline); border-radius: 6px; background: var(--bf-warnbg); color: var(--bf-warntx); } #bf .bf-guard .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } #bf .bf-chip, #bf .bf-blk .sb { display: inline-flex; align-items: center; flex: none; height: auto; padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--bf-hover); box-shadow: none; color: var(--text); font-size: 11px; font-weight: 550; cursor: pointer; text-decoration: none; } #bf .bf-chip:hover, #bf .bf-blk .sb:hover { background: var(--bf-sel); text-decoration: none; } #bf .bf-blk { display: grid; gap: 8px; margin-top: 12px; } #bf .bf-blk:empty { display: none; } #bf .bf-blk .tb-b { display: flex; align-items: baseline; flex-wrap: wrap; min-height: 0; padding: 0; background: none; font-size: 11px; line-height: 1.7; color: var(--red); gap: 6px 10px; } #bf .bf-blk .tb-b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } #bf .bf-warn { margin-top: 12px; padding: 12px; border: 1px solid var(--bf-warnline); border-radius: 6px; background: var(--bf-warnbg); font-size: 11px; line-height: 1.7; color: var(--bf-warntx); } #bf .bf-cz { margin-top: 16px; } #bf .bf-kvr { display: grid; } #bf .bf-pairs { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } #bf .bf-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; width: 100%; margin: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text); text-align: left; cursor: pointer; position: relative; } #bf .bf-pair:last-child { border-bottom: 0; } #bf .bf-pair:hover { background: var(--bf-hover); } #bf .bf-pair.on { background: var(--panel2); } #bf .bf-pair.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } #bf .bf-pair b { font-size: 12px; line-height: 18px; font-weight: 600; } #bf .bf-pair .a { font-size: 12px; line-height: 18px; text-align: right; } #bf .bf-pair .l { grid-column: 1 / 3; font-size: 10px; line-height: 15px; color: var(--muted); } #bf .bf-pair.off b, #bf .bf-pair.off .a { color: var(--muted); } #bf .bf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } #bf .bf-list li { position: relative; padding-left: 18px; font-size: 12px; line-height: 18px; color: var(--soft); } #bf .bf-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); } /* Customize in the review's two columns (owner, 2026-10-07: the chart was too small to set anything by): the review's chart with its timeframes on the left, the backtest and the checks under it; the settings on the right under a row of section tabs, every setting as a form row (what it is, one plain line, the control). On a wide window each column scrolls on its own between the steps and the footer */ #bf .bf-rv.bf-czr > .bf-czf { padding: 0; border: 0; border-radius: 0; background: none; } #bf .bf-czl, #bf .bf-czf { min-width: 0; } #bf .bf-czc { display: flex; flex-direction: column; min-width: 0; } #bf .bf-czl .bf-pspr { min-width: 0; } /* the chart's caption on one line, its words cut before the timeframes wrap (a ~1000px window's narrow column) */ #bf .bf-czc .bf-cap { flex-wrap: nowrap; } #bf .bf-czc .bf-capt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bf .bf-czc .bf-tfs { flex: none; } #bf .bf-czk { margin-top: 14px; padding: 4px 17px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); } #bf .bf-czk > .bf-rr + .bf-rr { border-top: 1px solid var(--border); } #bf .bf-czk [data-fv]:empty { display: none; } #bf .bf-czk .bf-guard:first-child, #bf .bf-czk .bf-risk:first-child { margin-top: 0; } /* the section tabs: the caption's height on the left, so the first card's top meets the chart's */ #bf .bf-nav { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin: 0 0 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; background: var(--bf-modal); } #bf .bf-nav::-webkit-scrollbar { display: none; } #bf .bf-nav a { flex: none; display: block; padding: 6px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 12px; line-height: 16px; color: var(--muted); text-decoration: none; white-space: nowrap; } #bf .bf-nav a:hover { color: var(--text); text-decoration: none; } #bf .bf-nav a.on { color: var(--text); border-bottom-color: var(--text); } #bf .bf-nav .bf-lnk { flex: none; margin: 0 0 0 auto; padding: 0 0 7px 12px; font-size: 11px; line-height: 16px; white-space: nowrap; color: var(--muted); } #bf .bf-nav .bf-lnk:hover { color: var(--text); } #bf .bf-rst svg.i { display: none; width: 15px; height: 15px; } @media (max-width: 1180px) { /* a narrow settings column: the reset is its icon, so the tabs keep the row */ #bf .bf-nav .bf-rst { display: inline-grid; place-items: center; padding: 0 2px 7px 12px; } #bf .bf-rst .t { display: none; } #bf .bf-rst svg.i { display: block; } } /* longer words (German, Japanese) on a wide screen: the same icon once the row is full (bot-flow.js fit) */ #bf .bf-nav.ic .bf-rst { display: inline-grid; place-items: center; padding: 0 2px 7px 12px; } #bf .bf-nav.ic .bf-rst .t { display: none; } #bf .bf-nav.ic .bf-rst svg.i { display: block; } #bf .bf-nav.tight a { padding: 6px 6px; font-size: 11px; } /* and still too long: the tabs a little closer */ #bf .bf-nav.tighter { gap: 0; } #bf .bf-nav.tighter a { padding: 6px 3px; } #bf .bf-nav.tighter .bf-rst { padding-left: 4px; } #bf .bf-czs > .bf-aerr:empty { display: none; } #bf .bf-czs > .bf-aerr { margin: 0 0 12px; } #bf .bf-g { margin-bottom: 22px; padding: 0 17px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); scroll-margin-top: 16px; } #bf .bf-g:last-child { margin-bottom: 0; } #bf .bf-g h2 { display: flex; align-items: flex-end; height: 42px; margin: 0; font: 650 14px/1.3 var(--font); letter-spacing: -.2px; } #bf .bf-g .gl { margin: 4px 0 0; padding-bottom: 12px; font-size: 10px; line-height: 16px; color: var(--muted); border-bottom: 1px solid var(--border); } #bf .bf-r { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px 28px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); } #bf .bf-g .bf-r:last-child { border-bottom: 0; } #bf .bf-r .k { display: block; font-size: 12px; line-height: 17px; font-weight: 550; color: var(--text); } #bf .bf-r .h { display: block; margin-top: 3px; font-size: 10px; line-height: 15px; color: var(--muted); overflow-wrap: anywhere; } #bf .bf-r .h .ro { color: var(--text); } #bf .ro.num { white-space: nowrap; } /* a value never breaks inside itself ("84,444", "+0.19%–0.23%") */ #bf .bf-r .h .ro:empty { display: none; } #bf .bf-r.wide { grid-template-columns: minmax(0, 1fr); } #bf .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; } /* a switch alone: the label keeps the row's width (no wrap in a narrow column) */ #bf .bf-r .full { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; } #bf .bf-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } #bf .bf-in { display: flex; align-items: center; flex: 1; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); } #bf .bf-in:focus-within { border-color: #acb4c0; } #bf .bf-in input, #bf .bf-in select { flex: 1; min-width: 0; width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text); font: 400 12px/18px var(--font); font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none; } #bf .bf-in select { cursor: pointer; } #bf .bf-in select option { background: var(--bf-input); color: var(--text); } #bf .bf-in input::placeholder { color: var(--bf-dim); } #bf .bf-in .u { flex: none; margin-left: 8px; font-size: 10px; color: var(--muted); } #bf .bf-in > svg.i { color: var(--muted); margin-left: 8px; pointer-events: none; width: 12px; height: 12px; } #bf button.bf-in { justify-content: space-between; cursor: pointer; font: 400 12px/18px var(--font); color: var(--text); } #bf button.bf-in:hover { border-color: var(--bf-stepline); } #bf .bf-in.ro { background: none; border-color: transparent; padding-right: 0; justify-content: flex-end; color: var(--soft); } #bf .bf-rg { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 0; width: 100%; } #bf .bf-rg .dash { text-align: center; color: var(--muted); } #bf .bf-seg { display: flex; flex: 1; min-width: 0; height: 38px; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); } /* every choice keeps its whole word (BOT-13, audit 2026-10-07: "Margin" was cut to "Marg..." in a 220px control): equal widths while they fit, a word never narrower than itself; a choice list longer than its row wraps onto a second line */ #bf .bf-seg { flex-wrap: wrap; height: auto; min-height: 38px; } #bf .bf-seg button { flex: 1 1 0; min-width: max-content; min-height: 30px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 11px; white-space: nowrap; cursor: pointer; } #bf .bf-seg button:hover { color: var(--text); } #bf .bf-seg.bf-purp { height: auto; } #bf .bf-seg.bf-purp button { min-height: 30px; padding: 6px 8px; white-space: normal; line-height: 1.35; } #bf .bf-seg button.on { background: var(--bf-sel); color: var(--text); font-weight: 600; } #bf .bf-sw { position: relative; flex: none; display: inline-block; width: 32px; height: 18px; margin: 0; cursor: pointer; } #bf .bf-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } #bf .bf-sw i { position: absolute; inset: 0; border-radius: 9px; background: var(--bf-input); border: 1px solid var(--border); pointer-events: none; transition: background .12s; } #bf .bf-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .12s; } #bf .bf-sw input:checked + i { background: var(--accent); border-color: var(--accent); } #bf .bf-sw input:checked + i::after { transform: translateX(14px); background: var(--bf-on); } #bf .bf-sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } #bf .bf-ctl .bf-sw + .bf-in, #bf .bf-ctl .bf-in + .bf-sw { flex: none; } #bf .bf-ctl .bf-in.sm { flex: 0 0 120px; } /* the editors that need the row's width (conditions, rules, a basket): the Terminal's own markup, on the design's scale */ #bf .full { display: grid; gap: 8px; min-width: 0; } #bf .full .cnd, #bf .full .rcard { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 8px; background: var(--bf-modal); } #bf .full .g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } #bf .full .inp { display: flex; align-items: center; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); padding: 0 0 0 10px; min-width: 0; } #bf .full .inp .pre { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; } #bf .full .inp input, #bf .full .inp select { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text); text-align: right; padding: 0 10px; font: 400 12px var(--font); appearance: none; -webkit-appearance: none; } #bf .full .inp .u { padding-right: 10px; font-size: 10px; color: var(--muted); } #bf .full .inp > svg.i { margin-right: 10px; width: 12px; height: 12px; color: var(--muted); } #bf .full .seg { display: flex; height: 34px; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); } #bf .full .seg { flex-wrap: wrap; height: auto; min-height: 34px; } #bf .full .seg button { flex: 1 1 0; min-width: max-content; min-height: 26px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; } #bf .full .seg button.on { background: var(--bf-sel); color: var(--text); font-weight: 600; } #bf .full .cnd-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } #bf .full .xb { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); color: var(--muted); display: grid; place-items: center; cursor: pointer; } #bf .full .cnd-and, #bf .full .rc-k { font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .04em; color: var(--muted); } #bf .full .rc-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } #bf .full .tb-lnk { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font-size: 11px; cursor: pointer; } #bf .full .tb-lnk:hover { color: var(--text); } #bf .full .crow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 34px; gap: 8px; align-items: center; } #bf .full .crow .inp input[data-up] { text-align: left; padding-left: 0; } @media (max-width: 420px) { #bf .full .crow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; } } /* a 320px phone: the coin keeps its ticker ("BTC", not "B...") */ #bf .full .crow.chd { font-size: 11px; color: var(--muted); } #bf .full .crow.chd span:nth-child(2) { text-align: right; padding-right: 14px; } #bf .full .tb-al { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } #bf .full .tb-al b.dn { color: var(--red); } #bf .full .tb-al > span { display: inline-flex; align-items: center; gap: 12px; } /* a coin field (a basket row, the second coin): a button that opens the market list, the logo and name with a chevron */ #bf .full .cpk, #bf .bf-ctl .cpk { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); color: var(--text); font: 600 12px var(--font); text-align: left; cursor: pointer; } #bf .bf-ctl .cpk { flex: 1; width: auto; height: 38px; padding: 0 11px; } #bf .full .cpk:hover, #bf .bf-ctl .cpk:hover { border-color: var(--muted); } #bf .full .cpk b, #bf .bf-ctl .cpk b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } #bf .full .cpk.ph b, #bf .bf-ctl .cpk.ph b { color: var(--muted); font-weight: 400; } #bf .full .cpk svg.i, #bf .bf-ctl .cpk svg.i { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; color: var(--muted); } #bf .full .xb[disabled] { opacity: .35; cursor: default; } /* an indicator bot's signal names its side; a Both bot's short signal (the long one's mirror) is read-only under it */ #bf .full .cnd-sig { font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } #bf .full .cnd-mir { margin: 0; padding: 9px 12px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; line-height: 18px; color: var(--muted); } #bf .bf-czf .bf-r { grid-template-columns: minmax(0, 1fr); gap: 9px; } #bf .bf-czf .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; } #bf .bf-czf .bf-ctl { justify-content: flex-start; } #bf .bf-czf .bf-ctl .bf-sw:only-child { margin-left: auto; } #bf .full .dys { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } #bf .full .dys button { height: 32px; border: 1px solid var(--border); border-radius: 5px; background: var(--bf-input); color: var(--muted); font-size: 11px; cursor: pointer; } #bf .full .dys button.on { background: var(--bf-sel); color: var(--text); } /* the footer: Back (the design's ghost button) or the summary on the left, quiet text actions, the one light primary; it stays at the bottom of the window while the wizard is longer than it */ #bf .bf-foot { position: sticky; z-index: 40; bottom: 0; background: var(--bf-modal); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; } #bf .bf-fw { display: flex; align-items: center; gap: 20px; min-height: var(--bf-foot); max-width: none; margin: 0; padding: 0 25px; } /* Start with the reason it is off right above it (one line, quiet; nothing while it is on) */ #bf .bf-gow { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; min-width: 0; max-width: 60%; } #bf .bf-offwhy { font-size: 11px; line-height: 15px; color: var(--bf-warntx); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #bf .bf-offwhy:empty { display: none; } #bf .bf-fw .what { margin-right: auto; min-width: 0; font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bf .bf-fw .what b { color: var(--text); font-weight: 600; } #bf .bf-fw .fee { margin: 0 auto 0 0; max-width: none; text-wrap: balance; min-width: 0; font-size: 10px; line-height: 15px; color: var(--muted); } #bf .bf-fw .bf-back + .fee { margin-left: 0; } #bf .bf-fw .bf-sec { font-size: 12px; color: var(--soft); } #bf .bf-fw .bf-sec:hover { color: var(--text); } #bf .bf-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--bf-hover); color: var(--text); font-size: 12px; font-weight: 550; cursor: pointer; white-space: nowrap; } #bf .bf-back:hover { background: var(--bf-sel); } #bf .bf-back svg.i { width: 13px; height: 13px; } #bf .bf-back.ml { margin-right: auto; } #bf .bf-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: auto; min-width: 0; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: var(--bf-on); font: 700 12px/18px var(--font); letter-spacing: 0; cursor: pointer; text-decoration: none; white-space: nowrap; } #bf .bf-go .ar { font-weight: 400; } #bf .bf-go:hover:not(:disabled) { background: var(--text); border-color: var(--text); text-decoration: none; color: var(--bf-on); } #bf .bf-go:disabled { opacity: .5; cursor: not-allowed; } /* the coin and exchange pickers (the Terminal's sheet, outside #bf) */ #sheet.sheet.bfs { width: min(440px, 100vw); } #sheet .bfs-q { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1px solid var(--rv-line2); border-radius: 6px; background: var(--rv-panel2); color: var(--rv-dim); } #sheet .bfs-q input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--rv-text); font: 400 12px var(--rv-font); } #sheet .bfs-l { display: grid; max-height: min(480px, 60vh); overflow-y: auto; margin-top: 8px; } #sheet .bfs-r { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 6px; border: 0; border-bottom: 1px solid var(--rv-line2); border-radius: 0; background: none; color: var(--rv-text); text-align: left; cursor: pointer; font: inherit; } #sheet .bfs-r:hover, #sheet .bfs-r.on { background: color-mix(in srgb, var(--rv-text) 5%, transparent); } #sheet .bfs-r .lg img, #sheet .bfs-r .lg svg { width: 20px; height: 20px; border-radius: 50%; display: block; } #sheet .bfs-r b { display: block; font-size: 12px; line-height: 17px; font-weight: 600; } #sheet .bfs-r small { display: block; font-size: 11px; line-height: 16px; color: var(--rv-dim); } #sheet .bfs-r .r { text-align: right; font-size: 12px; line-height: 17px; } #sheet .bfs-r.na { opacity: .45; cursor: default; } /* the ~1000px laptop: the same steps, a little tighter */ @media (max-width: 1180px) { .bf-ws { --bf-pad: 24px; } #bf .bf-rv { grid-template-columns: minmax(0, 1fr) 300px; } #bf .bf-rv .bf-chart { aspect-ratio: 16 / 9; } /* the chart column is narrow here: the preview keeps its height */ } /* a short window (the page scrolls, bot-flow.css below): the chart column stays in view beside the settings, the tabs stay over them */ @media (min-width: 861px) { #bf .bf-czl { position: sticky; top: 12px; align-self: start; } #bf .bf-czf .bf-nav { position: sticky; top: 0; z-index: 3; } } @media (max-width: 1040px) { #bf .bf-plan { padding: 15px; } #bf .bf-r { grid-template-columns: minmax(0, 1fr) 196px; gap: 8px 20px; } } /* a narrower or shorter window (QA audit 2026-10-08: at 1000x700 the plans' backtests sat below the fold): each card in its compact form, the labelled values and the backtest with its risk on two short lines */ @media (min-width: 861px) and (max-width: 1040px), (min-width: 861px) and (max-height: 760px) { #bf .bf-plan .ln { min-height: 0; margin: 4px 0 8px; } #bf .bf-plan .kvs, #bf .bf-plan .bt, #bf .bf-plan .bt2 { display: none; } #bf .bf-plan .kvl { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; line-height: 17px; color: var(--muted); } #bf .bf-plan .kvl > span { white-space: nowrap; } #bf .bf-plan .kvl b { font-weight: 600; font-size: 12px; color: var(--text); } #bf .bf-plan .kvl2 { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); } #bf .bf-plan .cn { margin: 6px 0 0; } } /* a phone: the wizard over the full width (no frame), one question per screen, the primary fixed at the screen's bottom edge (the workspace shell has no bottom tab bar: round-2 QA 2026-10-07 found the footer floating 56px above it) */ @media (max-width: 860px) { .bf-ws { --bf-pad: 0px; --bf-foot: 64px; --bf-tabs: 0px; padding: 0; min-height: 0; } #bf { border: 0; border-radius: 0; box-shadow: none; padding-bottom: calc(var(--bf-foot) + env(safe-area-inset-bottom)); } #bf .bf-mh { padding: 19px var(--rv-edge, 16px) 17px; } #bf h1 { font-size: 19px; } #bf .bf-top { padding: 15px var(--rv-edge, 16px) 0; } #bf .bf-steps b { width: 20px; height: 20px; font-size: 9px; } #bf .bf-steps button { font-size: 9px; gap: 5px; } /* a phone's stepper: one circle per screen (Type, Market, Amount, Plan, Review); the current screen's name beside its circle takes the free room, the others are their numbers (their names stay for screen readers) */ #bf .bf-steps.bf-sph { gap: 8px; } #bf .bf-steps.bf-sph li { flex: none; } #bf .bf-steps.bf-sph li:has(> .on) { flex: 1 1 auto; } #bf .bf-steps.bf-sph button:not(.on) .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #bf .bf-mb { padding: 19px var(--rv-edge, 16px) 24px; } #bf .bf-chart, #bf .bf-rv .bf-chart { aspect-ratio: 350 / 220; } #bf .bf-cols { display: block; } #bf .bf-ph { margin: 0 0 12px; display: grid; gap: 4px; align-items: start; } #bf .bf-ph .n { text-align: left; } #bf .bf-amt + .bf-ph { margin-top: 20px; } #bf .bf-ph.sub { margin-top: 4px; } #bf .bf-ph2 .hh { display: block; } #bf .bf-ph2 .ctl { margin-left: 0; justify-content: flex-start; } #bf .bf-ph2 .bf-days { flex-wrap: wrap; } /* [F 2026-10-10 phone steps] the amount and the plans share one screen now: the Plan heading over its line, apart from the direction above */ #bf .bf-ph2 .hh { display: flex; flex-direction: column; gap: 2px; } #bf .bf-ph2:not(.sub) { margin-top: 20px; } #bf .bf-ph.lim { margin-top: 28px; } /* a private copy's limits under its amount, on the same screen */ #bf .bf-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; } #bf .bf-plan .ln { min-height: 0; margin: 4px 0 8px; } #bf .bf-plan .kvs, #bf .bf-plan .bt, #bf .bf-plan .bt2 { display: none; } /* labelled values and the backtest with its risk, each pair kept whole, wrapping as the width needs */ #bf .bf-plan .kvl.kvlv, #bf .bf-plan .kvl.kvl2 { flex-wrap: wrap; justify-content: flex-start; gap: 2px 14px; } #bf .bf-plan .kvl > span, #bf .bf-plan .kvl > span:first-child { min-width: 0; overflow: visible; white-space: nowrap; } #bf .bf-plan .kvl2 { margin-top: 4px; } #bf .bf-plan .cn { margin: 6px 0 0; } #bf .bf-plan .kvl { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 17px; color: var(--muted); } #bf .bf-plan .kvl > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bf .bf-plan .kvl b { font-weight: 600; font-size: 12px; color: var(--text); } #bf .bf-rv { display: block; } #bf .bf-rv > * + * { margin-top: 20px; } #bf .bf-big b { font-size: 22px; line-height: 28px; } #bf .bf-parts .hold { margin-left: 0; } /* Customize on a phone: the chart (with its timeframes) first, then the settings under their tabs, then the backtest */ #bf .bf-czr { display: flex; flex-direction: column; align-items: stretch; gap: 20px; } #bf .bf-czr > .bf-czl, #bf .bf-czr > .bf-czf { display: contents; } #bf .bf-czr > * + * { margin-top: 0; } #bf .bf-czc { order: 0; } #bf .bf-czf .bf-nav { order: 1; margin: 0 0 -10px; } #bf .bf-czs { order: 2; } #bf .bf-czl .bf-bt { order: 3; margin-top: 0; } #bf .bf-czk { order: 4; margin-top: -6px; } #bf .bf-czf .bf-nav { position: sticky; top: 0; z-index: 3; } #bf .bf-g { scroll-margin-top: 46px; } /* a tab tapped: its section's heading lands under the sticky tabs, not behind them */ #bf .bf-r { grid-template-columns: minmax(0, 1fr); gap: 10px; } #bf .bf-ctl { justify-content: flex-start; } #bf .bf-ctl .bf-sw:only-child { margin-left: auto; } #bf .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; } #bf .bf-typ { min-height: 52px; padding: 6px 14px; } /* six types and Continue fit one phone screen (390 x 844) */ #bf .bf-foot { position: fixed; left: 0; right: 0; bottom: var(--bf-tabs); border-radius: 0; padding-bottom: env(safe-area-inset-bottom); } #bf .bf-fw { gap: 12px; padding: 0 var(--rv-edge, 16px); } #bf .bf-fw .what, #bf .bf-fw .fee, #bf .bf-fw .bf-sec { display: none; } #bf .bf-go { flex: 1; min-width: 0; height: 42px; } #bf .bf-gow { flex: 1; max-width: none; align-items: stretch; } #bf .bf-offwhy { text-align: center; } #bf .bf-back { width: 42px; height: 42px; padding: 0; flex: none; } #bf .bf-back span { display: none; } #bf .bf-back.ml { margin-right: 0; } #bf .bf-fee2 { display: block; margin: 16px 0 0; font-size: 10px; line-height: 15px; color: var(--muted); } #sheet.sheet.bfs { width: auto; } } @media (min-width: 861px) { #bf .bf-fee2, #bf .bf-ponly { display: none; } } /* the Points starter quests on the review (bot-flow.js questsH): one quiet checklist, three short columns */ #bf .bf-qs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } #bf .bf-qh { display: inline-block; font: 600 12px/16px var(--font); color: var(--text); text-decoration: none; } #bf .bf-qh:hover { text-decoration: underline; } #bf .bf-ql { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; } #bf .bf-ql li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: center; min-width: 0; font-size: 12px; line-height: 16px; color: var(--text); } #bf .bf-ql i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--border); } #bf .bf-ql li.ok i { background: var(--text); box-shadow: none; } #bf .bf-ql svg { width: 10px; height: 10px; fill: none; stroke: var(--bg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #bf .bf-ql span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bf .bf-ql b { grid-column: 2; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bf .bf-qn { margin: 8px 0 0; font-size: 11px; line-height: 15px; color: var(--muted); } /* 761-860px: the shell keeps its 76px icon sidebar (radar/theme.py SHELL), so the fixed footer starts beside it, never over its bottom icons (audit 2026-10-07, B) */ @media (min-width: 761px) and (max-width: 860px) { #bf .bf-foot { left: 76px; } } /* a touch screen: the fields' text at 16px, so iOS does not zoom the page on focus (the amount is 17px already), and a switch's tap area 44px tall around its 32 x 18 drawing (audit 2026-10-07, C and D); the desktop look is unchanged */ @media (pointer: coarse) { #bf .bf-in input, #bf .bf-in select, #bf .full input:not([type=checkbox]):not([type=radio]), #bf .full select, #sheet .bfs-q input { font-size: 16px; } #bf .bf-sw input { inset: -13px -6px; width: auto; height: auto; } } @media (max-width: 860px) { #bf .bf-donly { display: none !important; } } #bf .bf-cols.bf-one { display: block; } #bf .bf-ask { margin: 0 0 4px; max-width: none; } #bf input:focus, #bf select:focus, #bf input:focus-visible { outline: none; } #bf button:focus-visible, #bf a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (min-width: 861px) { html.tm-flow .toasts { bottom: 24px; } } /* the backtest's assumptions and limits, under every result */ #bf .bf-asm { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.6; color: var(--muted); } #bf .bf-asm summary { cursor: pointer; color: var(--soft); list-style: none; display: inline-flex; align-items: center; gap: 6px; } #bf .bf-asm summary::-webkit-details-marker { display: none; } #bf .bf-asm summary::after { content: "+"; color: var(--muted); } #bf .bf-asm[open] summary::after { content: "\2013"; } #bf .bf-asm ul { margin: 8px 0 0; padding: 0 0 0 16px; display: grid; gap: 4px; } /* the panel before connecting a wallet (outside #bf, inside the .ws wrapper) */ .bf-ws #bf-cp .drawer-section { margin: 0; } .bf-ws #bf-cp .drawer-section + .drawer-section { margin-top: 18px; } .bf-ws #bf-cp .drawer-section p { font-size: 12px; line-height: 1.6; color: var(--muted); } .bf-ws #bf-cp .drawer-section p + p { margin-top: 4px; } .bf-ws #bf-cp .modal-header svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } #bf .bf-chart { touch-action: pan-y; cursor: grab; user-select: none; } #bf .bf-chart.drag { cursor: grabbing; } /* a wider screen: the panel fits the window (radar/web/bot-flow.js fit sets --bf-maxh); the header, the steps and the footer stay, the body between them scrolls inside the panel, so nothing hides under the footer (QA 2026-10-06). A short window (a laptop's 560-700px) keeps the page's own scroll instead: an inner box of 200-odd pixels cut its sections mid-field (owner, 2026-10-07, as in the Backtest lab); the footer then sticks to the window's bottom edge */ /* Customize's chart is the tool the settings are read from (owner, 2026-10-07: "too small to set anything by"): never the short strip of its width's aspect ratio on a laptop's short window */ @media (min-width: 861px) { #bf .bf-czl .bf-chart { aspect-ratio: auto; height: clamp(280px, 100vh - 290px, 560px); } } @media (min-width: 861px) and (min-height: 701px) { html.tm-flow .bf-ws { min-height: 0; } #bf { display: flex; flex-direction: column; max-height: var(--bf-maxh, none); } #bf .bf-w { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #bf .bf-mh, #bf .bf-top { flex: none; } /* the steps row ends on a hairline, so the body scrolls cleanly under it instead of meeting the step labels (owner, 2026-10-07) */ #bf .bf-top { padding-bottom: 16px; border-bottom: 1px solid var(--border); } #bf .bf-mb { padding-top: 20px; } #bf .bf-mb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #bf .bf-foot { position: static; flex: none; } /* Customize: the body does not scroll, its two columns do (the chart grows into the room the column has) */ #bf[data-step="custom"] .bf-mb { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; } #bf[data-step="custom"] .bf-mb > :not(.bf-czr) { flex: none; } #bf .bf-czr { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; } #bf .bf-czl { position: static; align-self: stretch; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; scrollbar-width: thin; } #bf .bf-czc { flex: 1 0 auto; } #bf .bf-czl .bf-chart { flex: 1 0 clamp(300px, 100vh - 500px, 600px); height: auto; aspect-ratio: auto; max-height: 620px; } /* the chart fills the column's view; the backtest under it in the column's scroll */ #bf .bf-czf { display: flex; flex-direction: column; min-height: 0; } #bf .bf-czf .bf-nav { position: static; flex: none; } #bf .bf-czs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; scrollbar-width: thin; } } /* a field Customize cannot use, in its editor's own box too (as the amount field) */ #bf .full .inp.bad { border-color: var(--red); } #bf .bf-stop { color: var(--soft); } /* a multi-coin bot's coin tabs over the chart (terminal.html .rv-ctabs), the basket's value against just holding */ #bf .bf-ctabs { margin: 0 0 10px; } #bf .bf-ctabs button { font-size: 11px; line-height: 16px; } #bf .bf-bkc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } #bf .bf-bkc svg.tb-eq { display: block; width: 100%; height: 64px; overflow: visible; } #bf .bf-bkc .tb-bkt { display: none; } /* Phase 6: the quiet "Switch to ..." beside "built for another market" (and the Market-hours grid's offer) reads as the line's own size, never wrapped inside its words */ #bf .bf-mood .bf-lnk { font-size: inherit; line-height: inherit; white-space: nowrap; } /* Phase 6: a phone's or a tablet's live backtest bar, on top of the fixed footer (bot-flow.js sbarH): the page's bottom padding takes it in, so it never covers the primary button or the last field; hidden while the full result is on the screen, and on a desktop (the result sits beside the settings there) */ #bf .bf-sbar { display: none; } @media (max-width: 860px) { #bf.bf-hasbar { padding-bottom: calc(var(--bf-foot) + 40px + env(safe-area-inset-bottom)); } #bf .bf-sbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 17px; border-bottom: 1px solid var(--border); } #bf .bf-sbar.seen { display: none; } #bf .bf-sbar .l { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; line-height: 16px; color: var(--muted); } #bf .bf-sbar .l .bf-sim { flex: none; } #bf .bf-sbar .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bf .bf-sbar .v { display: flex; align-items: baseline; gap: 8px; flex: none; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } } /* Phase 6: a backtest part with a short explanation (its title): its words dotted, as a term to hover */ #bf .bf-parts [title] > .k { text-decoration: underline dotted; text-decoration-color: var(--bf-dim); text-underline-offset: 3px; cursor: help; } /* a setup opened with its own result (/bots/top): that result, one quiet line above the preview (owner, 2026-10-10) */ #bf .bf-sub.bf-orig { margin: 0 0 var(--rv-sp-3); font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } /* The three-column bot builder at /bots/new (owner, 2026-10-10, IA v2; radar/web/bot-builder.js). Settings | chart | live backtest, one viewport high on a computer (each column scrolls inside), and the bottom bar with the balance, the amount, the orders unfolded and Create & start. Colours, type, spacing and radii only from radar/web/rv-tokens.css. */ html.tm-build { --bb-bar: 97px; --bb-head: 126px; } /* measured: the title block and the bar (polish 2026-10-10: the grid ends at the bar) */ @media (min-width: 761px) and (max-width: 1180px) { html.tm-build { --bb-bar: 103px; } } html.tm-build .bf-ws { min-height: 0; padding: 0; background: var(--rv-bg); } html.tm-build #bf { max-width: none; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font: 400 14px/1.5 var(--rv-font-text); color: var(--rv-text); } html.tm-build #bf[data-step="custom"] .bf-top { display: none; } html.tm-build #bf[data-step="custom"] .bf-mh { max-width: none; padding: var(--rv-sp-5) var(--rv-gutter) var(--rv-sp-3); border: 0; } html.tm-build #bf[data-step="custom"] .bf-mh h1 { font: 600 var(--rv-type-title)/1.15 var(--rv-font-title); letter-spacing: var(--rv-ls-tight); } html.tm-build #bf[data-step="custom"] .bf-mb { padding: 0; max-width: none; overflow: visible; } html.tm-build #bf[data-step="custom"] .bf-foot { display: none; } #bf .bb-grid { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(280px, 330px); gap: 0; /* the chart gets the room (polish 2026-10-10) */ height: calc(100vh - var(--rv-header-h, 77px) - var(--rv-lb-h, 0px) - var(--bb-head) - var(--bb-bar)); min-height: 280px; /* a short window (1360 x 650): the panels scroll inside, nothing under the bar (owner, 2026-10-10 F2) */ border-top: 1px solid var(--rv-line); } #bf .bb-grid > * { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* the three columns' header rows (owner's alignment check 2026-10-10): the left section tabs, the chart's head and the right tabs are one height (44px) with their hairline at one y, each hairline as wide as its column's content */ #bf .bb-grid { --bb-hrow: 44px; } #bf .rv-tabs.bb-tabs, #bf .bb-stabs, #bf .bb-pane { height: calc(var(--bb-hrow) + 1px); box-sizing: border-box; margin: 0; gap: var(--rv-sp-4); border-bottom: 1px solid var(--rv-line); overflow-x: auto; overflow-y: hidden; } #bf .rv-tabs > .on::after { bottom: 0; } #bf .rv-tabs > button { height: var(--bb-hrow); padding: 0; border: 0; background: none; font: 500 13px var(--rv-font-text); color: var(--rv-text-3); } #bf .rv-tabs > button:hover { color: var(--rv-text-2); } #bf .rv-tabs > button.on { color: var(--rv-text); } /* the keyboard's focus inside the tab (never an outline cut by the row: the "vertical lines" beside Public setups) */ #bf .rv-tabs > :is(a, button):focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; border-radius: var(--rv-r-sm); } #bf .rv-tabs > button.bad::before { content: ""; position: absolute; top: 12px; right: -7px; width: 5px; height: 5px; border-radius: var(--rv-r-pill); background: var(--rv-down); } /* left: the settings; the tabs inside the column's scroller (sticky), so the tab row and the settings share one width */ #bf .bb-set { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--rv-line); padding: 0; } #bf .bb-set .bf-czs { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--rv-sp-5) var(--rv-sp-4) 0; scrollbar-width: thin; } #bf .bb-sh { position: sticky; top: 0; z-index: 2; display: block; padding: 0; border: 0; background: var(--rv-bg); } #bf .bb-sh .bb-tabs { min-width: 0; gap: var(--rv-sp-3); } /* five tabs (Advanced on) in a narrow column: closer, then smaller, never past the column (bot-flow.js fit adds the classes) */ #bf .bb-sh .bb-tabs.tight { gap: var(--rv-sp-2); } #bf .bb-sh .bb-tabs.tighter > button { font-size: 12px; } /* a read-only value (the spacing, a price range) wraps inside the column instead of pushing it wider (owner, 16:40 UTC) */ #bf .bb-set .ro.num { white-space: normal; overflow-wrap: anywhere; } #bf .bb-set .bf-in.ro { height: auto; min-height: var(--rv-h-md); justify-content: flex-start; text-align: left; } #bf .bb-set .bf-r > * { min-width: 0; } #bf .bb-card { padding-top: var(--rv-sp-4); } #bf .bb-adv { display: inline-flex; align-items: center; gap: var(--rv-sp-2); height: 32px; font-size: 12px; color: var(--rv-text-3); white-space: nowrap; } #bf .bb-set .bf-g { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } #bf .bb-set .bf-g[hidden] { display: none; } #bf .bb-set .bf-r { grid-template-columns: minmax(0, 1fr); gap: var(--rv-sp-2); padding: var(--rv-sp-3) 0; border-bottom: 1px solid var(--rv-line); } #bf .bb-set .bf-g > .bf-r:last-child { border-bottom: 0; } #bf .bb-set .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; } #bf .bb-set .bf-r .k { font-size: 14px; font-weight: 500; color: var(--rv-text); } #bf .bb-set .bf-r .h { font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } #bf .bb-set .bf-ctl { justify-content: flex-start; } #bf .bb-set .bf-in { height: var(--rv-h-md); border-color: var(--rv-line-2); border-radius: var(--rv-r-sm); background: var(--rv-bg); } #bf .bb-set .bf-in:focus-within { border-color: var(--rv-focus); } #bf .bb-set .bf-in input, #bf .bb-set .bf-in select { font-size: 14px; } /* every figure in the builder in Geist Mono (N2): the number fields and their units; words stay Geist */ #bf .bb-set .bf-in input[inputmode="decimal"], #bf .bb-set .bf-in .u, #bf .bb-set .bf-in .lim { font: 400 14px var(--rv-font-fig); font-variant-numeric: tabular-nums; } #bf .bb-set .bf-in .u, #bf .bb-set .bf-in .lim { font-size: 12px; } #bf .bb-set .bf-seg { border-radius: var(--rv-r-pill); } /* middle: the chart, as tall as the column; its head is the row the tabs beside it share */ #bf .bb-chart { display: flex; flex-direction: column; padding: 0 var(--rv-sp-5) var(--rv-sp-4); overflow: hidden; } #bf .bb-chead { flex: none; display: flex; align-items: center; height: calc(var(--bb-hrow) + 1px); box-sizing: border-box; border-bottom: 1px solid var(--rv-line); } #bf .bb-chart .bf-cap { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--rv-sp-2); margin: 0; font-size: 13px; color: var(--rv-text-3); } #bf .bb-chart .bf-cap b { color: var(--rv-text); font-weight: 500; } #bf .bb-chart .bf-capt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; } /* a hint that does not fit is left out, never cut (bot-builder.js fullTips) */ #bf .bb-chart .bf-capt.bb-nofit { visibility: hidden; } #bf .bb-cbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: var(--rv-sp-3); } #bf .bb-chart .bf-chart { flex: 1 1 auto; min-height: 120px; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; } /* right: the live backtest and the checks, or the public setups */ #bf .bb-side { border-left: 1px solid var(--rv-line); padding: 0 var(--rv-sp-5) var(--rv-sp-8); scrollbar-gutter: stable; } #bf .bb-stabs { margin-bottom: var(--rv-sp-4); } #bf .bb-side .bf-bt { margin: 0; padding: 0; border: 0; background: none; } #bf .bb-side .bf-czk { margin-top: var(--rv-sp-4); padding-top: var(--rv-sp-4); border-top: 1px solid var(--rv-line); } #bf .bb-sbt[hidden], :is(#bf, .bb-pubsheet) .bb-pub[hidden] { display: none; } /* the title row's two choices: the coin and the bot type, as pills */ #bf .bb-picks { display: inline-flex; align-items: center; gap: var(--rv-sp-2); flex-wrap: wrap; } #bf .bb-pick { height: var(--rv-h-sm); gap: 6px; padding: 0 10px 0 12px; color: var(--rv-text); border-color: var(--rv-line-2); font-size: 13px; } #bf .bb-pick:hover { border-color: var(--rv-line-3); } #bf .bb-pci { display: inline-flex; width: 18px; height: 18px; margin-left: -4px; } #bf .bb-pci:empty { display: none; } #bf .bb-pci > * { width: 18px; height: 18px; } #bf .bb-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--rv-text-3); } #bf .bb-venue { margin-left: var(--rv-sp-1); font-size: 13px; color: var(--rv-text-3); } #bf .bb-fixed { font-size: 13px; color: var(--rv-text-2); } /* the public setups for this type and coin */ :is(#bf, .bb-pubsheet) .bb-pub { font-size: 13px; } /* the phone's sheet: its head, and the setup's own button resets (the sheet sits outside #bf) */ .bb-pubsheet .rv-sheet { max-height: 86vh; } .bb-pubsheet .bb-psh { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: 0 0 var(--rv-sp-3); } .bb-pubsheet .bb-psh h2 { margin: 0; } .bb-pubsheet :is(button, a) { font: inherit; } .bb-pubsheet .bb-pr { font: inherit; } :is(#bf, .bb-pubsheet) .bb-sort { gap: var(--rv-sp-2); } :is(#bf, .bb-pubsheet) .bb-sort .rv-pill { color: var(--rv-text-2); } :is(#bf, .bb-pubsheet) .bb-sort .rv-pill[aria-pressed="true"] { color: var(--rv-text); } :is(#bf, .bb-pubsheet) .bb-pubn { margin: var(--rv-sp-3) 0 0; color: var(--rv-text-3); font-size: 12px; line-height: 1.5; } :is(#bf, .bb-pubsheet) .bb-prh { display: flex; justify-content: space-between; gap: var(--rv-sp-3); margin: var(--rv-sp-3) 0 0; padding-bottom: var(--rv-sp-2); border-bottom: 1px solid var(--rv-line); font-size: var(--rv-fs-label); letter-spacing: var(--rv-ls-label); text-transform: uppercase; color: var(--rv-text-3); } :is(#bf, .bb-pubsheet) .bb-prh span:last-child { text-align: right; } :is(#bf, .bb-pubsheet) .bb-publ { list-style: none; margin: 0; padding: 0; } :is(#bf, .bb-pubsheet) .bb-publ li { border-bottom: 1px solid var(--rv-line); } :is(#bf, .bb-pubsheet) .bb-pr { display: flex; justify-content: space-between; gap: var(--rv-sp-3); width: 100%; padding: var(--rv-sp-3) 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--rv-text); } :is(#bf, .bb-pubsheet) .bb-pr:hover .bb-pra b { text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } :is(#bf, .bb-pubsheet) .bb-pr[aria-busy="true"] { opacity: .5; cursor: progress; } :is(#bf, .bb-pubsheet) .bb-pr:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; border-radius: var(--rv-r-sm); } :is(#bf, .bb-pubsheet) .bb-pra, :is(#bf, .bb-pubsheet) .bb-prb { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :is(#bf, .bb-pubsheet) .bb-prb { flex: none; align-items: flex-end; } :is(#bf, .bb-pubsheet) .bb-pra b { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; } :is(#bf, .bb-pubsheet) .bb-prb b { font-weight: 500; font-size: 14px; } :is(#bf, .bb-pubsheet) .bb-pra small, :is(#bf, .bb-pubsheet) .bb-prb small { font-size: 12px; color: var(--rv-text-3); overflow-wrap: anywhere; } /* a preset not tested yet: not loadable, its result slot says "Testing…" in the quiet grey */ :is(#bf, .bb-pubsheet) .bb-prt { cursor: default; } :is(#bf, .bb-pubsheet) .bb-prt:hover .bb-pra b { text-decoration: none; } :is(#bf, .bb-pubsheet) .bb-prt .bb-prb b { font-weight: 400; font-size: 12px; color: var(--rv-text-3); } :is(#bf, .bb-pubsheet) .bb-pubs { margin: var(--rv-sp-3) 0 0; font-size: 12px; color: var(--rv-text-3); } :is(#bf, .bb-pubsheet) .bb-pubf { margin: var(--rv-sp-2) 0 0; font-size: 12px; } :is(#bf, .bb-pubsheet) .bb-pubf .rv-btn.quiet { font-size: 12px; text-decoration: underline; text-decoration-color: var(--rv-line-2); text-underline-offset: 3px; } :is(#bf, .bb-pubsheet) .bb-undo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-3); margin: 0 0 var(--rv-sp-3); padding: 0 0 var(--rv-sp-3); border-bottom: 1px solid var(--rv-line); font-size: 12px; color: var(--rv-text-2); } :is(#bf, .bb-pubsheet) .bb-undo .rv-btn.quiet { flex: none; font-size: 13px; color: var(--rv-text); text-decoration: underline; text-underline-offset: 3px; } #bf .bb-allow.rv-btn.quiet { font-size: 12px; color: var(--rv-text); text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; white-space: normal; text-align: right; line-height: 15px; } /* the bottom bar */ /* ~1000px: the backtest column narrows, the chart keeps the room */ @media (max-width: 1180px) { #bf .bb-grid { grid-template-columns: minmax(260px, 290px) minmax(0, 1fr) minmax(240px, 270px); } } /* a tablet: the settings and the chart side by side, the backtest under them; the page scrolls */ @media (max-width: 980px) { #bf .bb-grid { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr); height: auto; } #bf .bb-grid > * { overflow: visible; } #bf .bb-set { overflow: visible; } #bf .bb-chart .bf-chart { height: 340px; flex: none; } #bf .bb-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rv-line); } } /* a phone: one column (settings, chart, backtest); the bar keeps the amount, the orders in one scrolling line and the button */ @media (max-width: 760px) { #bf .bb-grid { grid-template-columns: minmax(0, 1fr); border-top: 0; } #bf .bb-set { border-right: 0; } #bf .bb-set .bf-czs { padding: var(--rv-sp-4) var(--rv-gutter) var(--rv-sp-6); } #bf .bb-chart { padding: var(--rv-sp-4) var(--rv-gutter); border-top: 1px solid var(--rv-line); } #bf .bb-chart .bf-chart { height: 260px; } #bf .bb-side { padding: 0 var(--rv-gutter) var(--rv-sp-6); } } /* the setup's own resets (#bf :where(button) inherits the colour) outweigh a class: the bar's buttons keep theirs */ #bf .bb-advrow { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: 0 0 var(--rv-sp-4); font-size: 13px; color: var(--rv-text-3); } #bf .bb-side .bf-bth { flex-wrap: wrap; row-gap: var(--rv-sp-2); } /* the builder sits in the page's width, its left edge on the logo's (the bar's inner row, --rv-max and --rv-gutter) */ html.tm-build #bf[data-step="custom"] { max-width: var(--rv-max); margin: 0 auto; padding: 0 var(--rv-gutter); box-sizing: border-box; } html.tm-build #bf[data-step="custom"] .bf-mh { padding-left: 0; padding-right: 0; } @media (max-width: 760px) { html.tm-build #bf[data-step="custom"] { padding: 0; } html.tm-build #bf[data-step="custom"] .bf-mh { padding: var(--rv-sp-4) var(--rv-gutter) var(--rv-sp-2); } #bf .bb-set .bf-czs { padding-left: var(--rv-gutter); } } #bf .bb-sh .bf-nav, #bf .bb-sh .bb-tabs { background: none; box-shadow: none; position: static; } #bf .bb-sh .bf-nav { align-items: stretch; } #bf .bb-dragpx { flex: none; font-size: 13px; color: var(--rv-text); } #bf .bb-dragpx:empty { display: none; } @media (max-width: 640px) { #bf .bb-chart .bf-capt { display: none; } } @media (min-width: 761px) { #bf .rv-bld-sum-toggle { display: none; } } /* the bottom bar above 760px (balance, this bot, the orders unfolded, Create & start); phones: radar/web/rv-phone.css (.rv-bld-bar) */ @media (min-width: 761px) { #bf .bb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--rv-bg); border-top: 1px solid var(--rv-line-2); } #bf .bb-bw { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--rv-sp-6); min-height: var(--bb-bar); padding: var(--rv-sp-3) var(--rv-gutter); box-sizing: border-box; } #bf .bb-money { display: flex; gap: var(--rv-sp-6); } #bf .bb-money > div { display: flex; flex-direction: column; } #bf .bb-k { font-size: 12px; color: var(--rv-text-3); } #bf .bb-money b { font: 600 17px/1.3 var(--rv-font-text); white-space: nowrap; } #bf .bb-money small { font-size: 12px; font-weight: 400; color: var(--rv-text-3); } #bf .bb-sum { display: flex; flex-direction: column; gap: var(--rv-sp-1); min-width: 0; max-height: calc(var(--bb-bar) - 2 * var(--rv-sp-3) - 1px); overflow: auto; scrollbar-width: thin; padding-left: var(--rv-sp-6); border-left: 1px solid var(--rv-line); } #bf .bb-sr { display: flex; align-items: baseline; gap: var(--rv-sp-4); white-space: nowrap; } #bf .bb-sl { flex: none; width: 96px; font-size: 12px; color: var(--rv-text-3); } #bf .bb-o { display: inline-flex; align-items: baseline; gap: var(--rv-sp-2); font-size: 13px; } #bf .bb-o b { font-weight: 500; color: var(--rv-text); } #bf .bb-o small { font-size: 12px; color: var(--rv-text-3); } #bf .bb-o.up b { color: var(--rv-up); } #bf .bb-o.dn b { color: var(--rv-down); } #bf .bb-none { font-size: 13px; color: var(--rv-text-3); } #bf .bb-go { display: flex; align-items: center; gap: var(--rv-sp-3); } #bf .bb-go .bf-offwhy { max-width: 180px; font-size: 12px; color: var(--rv-text-3); text-align: right; } #bf .bb-go .bf-offwhy:empty { display: none; } html.tm-build body { padding-bottom: var(--bb-bar); } #bf .bb-go .rv-btn { color: var(--rv-text); font: 500 14px/1 var(--rv-font-text); } #bf .bb-go .rv-btn.primary { color: var(--rv-bg); font-weight: 600; } #bf .bb-go .rv-btn.lg { font-size: 15px; } #bf .bb-sr { flex-wrap: wrap; row-gap: 2px; white-space: normal; } #bf .bb-o { white-space: nowrap; } #bf .bb-bw { max-width: var(--rv-max); margin: 0 auto; } #bf .bb-sl { width: 96px; } } @media (min-width: 761px) and (max-width: 1180px) { #bf .bb-sl { width: 80px; } /* the balance and this bot's amount one over the other: the orders get the room */ #bf .bb-money { flex-direction: column; gap: var(--rv-sp-1); } #bf .bb-money > div { flex-direction: row; align-items: baseline; gap: var(--rv-sp-2); } #bf .bb-money b { font-size: 15px; } } /* the entries' row stays one line: what does not fit is "+k more" (bot-builder.js fitRows) */ @media (min-width: 761px) { #bf .bb-sr[data-fit] { flex-wrap: nowrap; overflow: hidden; } #bf .bb-sum { gap: 2px; } #bf .bb-sr { flex: none; line-height: 18px; } } #bf .bb-o[hidden] { display: none; } #bf .bb-more { flex: none; font-size: 12px; color: var(--rv-text-2); white-space: nowrap; cursor: default; } /* the setup's resets (#bf :where(button) inherits the colour) outweigh a class: every width keeps the buttons' own */ #bf .rv-btn { color: var(--rv-text); } #bf .rv-btn.primary { color: var(--rv-bg); } #bf .bb-kind { color: var(--rv-text-2); text-decoration: underline; text-decoration-color: var(--rv-line-2); text-underline-offset: 3px; } #bf .bb-kind:hover { color: var(--rv-text); } /* the stepped setup (phones, a bot's own settings, the Signal bot) on the site's palette (owner, 2026-10-10 final check item 6: one background): bot-flow.css's own colours mapped onto rv-tokens.css; on a phone the setup is the page */ html.tm-flow .bf-ws { --bf-modal: var(--rv-panel); --bf-mline: var(--rv-line-2); --bf-box: var(--rv-pill); --bf-bline: var(--rv-line-2); --bf-input: var(--rv-bg); --bf-sel: var(--rv-pill); --bf-hover: var(--rv-pill); --bf-on: var(--rv-pill); --bf-stepon: var(--rv-pill); --bf-stepline: var(--rv-line-3); --bf-dim: var(--rv-text-3); background: var(--rv-bg); } @media (max-width: 760px) { html.tm-flow .bf-ws { --bf-modal: var(--rv-bg); } html.tm-flow #bf { border-color: transparent; box-shadow: none; } } /* the backtest head in the narrower side column: its period buttons may take a second line, never over the note */ #bf .bb-side .bf-bth { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: var(--rv-sp-2); } /* 981-1180px: two columns, settings | chart; the backtest shares the left column through the Settings / Backtest switch, so the chart keeps its width (owner's live check 2026-10-10: at least 420px at 1000) */ #bf .bb-pane { display: none; } @media (min-width: 981px) and (max-width: 1180px) { #bf .bb-grid { grid-template-columns: minmax(280px, 310px) minmax(0, 1fr); } #bf .bb-grid > .bb-side { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid var(--rv-line); padding-left: 0; } #bf .bb-grid[data-pane="set"] > .bb-side, #bf .bb-grid[data-pane="side"] > .bb-set { display: none; } /* one row of three text tabs heads the left column (the chart's head beside it), the section tabs under it */ #bf .bb-pane { display: flex; position: sticky; top: 0; z-index: 3; background: var(--rv-bg); } #bf .bb-set .bb-sh { top: calc(var(--bb-hrow) + 1px); } #bf .bb-side .bb-stabs { display: none; } #bf .bb-side .bb-pane { margin-bottom: var(--rv-sp-4); } } /* the bar's reason never cut: it wraps under its own width */ @media (min-width: 761px) { #bf .bb-go .bf-offwhy { white-space: normal; overflow: visible; text-overflow: clip; max-width: 200px; line-height: 15px; } } /* a laptop at ~1000px: the bar's labels on one line, its reason narrower, so the orders keep their rows */ @media (min-width: 761px) and (max-width: 1180px) { #bf .bb-sl { width: auto; min-width: 72px; white-space: nowrap; } #bf .bb-go .bf-offwhy { max-width: 150px; font-size: 11px; } #bf .bb-bw { gap: var(--rv-sp-4); } } /* the plans under the amount: Safe · Balanced · Aggressive (Custom once a value is changed by hand), each with its own backtest after fees (owner, 2026-10-10 16:30 UTC) */ #bf .bb-plr .bf-ctl { display: block; } #bf .bb-pls { display: flex; gap: var(--rv-sp-1); padding: 3px; border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-md); } #bf .bb-pl { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 44px; padding: 0 var(--rv-sp-1); border: 1px solid transparent; border-radius: var(--rv-r-sm); background: none; color: var(--rv-text-3); cursor: pointer; } #bf .bb-pl b { font: 500 13px/1.1 var(--rv-font-text); white-space: nowrap; overflow: hidden; max-width: 100%; } #bf .bb-pl small { font-size: 11px; line-height: 1.1; color: var(--rv-text-3); white-space: nowrap; } #bf .bb-pl small .up { color: var(--rv-up); } #bf .bb-pl small .dn { color: var(--rv-down); } #bf .bb-pl small .mut { color: var(--rv-text-3); } #bf .bb-pl:hover { color: var(--rv-text-2); } #bf .bb-pl.on { background: var(--rv-pill); border-color: var(--rv-line-on); color: var(--rv-text); } #bf .bb-pl.cus { cursor: default; } /* four pills (Custom beside the three plans after a hand edit or a loaded setup) in a 290-330px column: each takes its own width first, so "Aggressive" is never cut (b4 screenshots, 1360 and 1000px) */ #bf .bb-pls:has(> .bb-pl.cus) > .bb-pl { flex: 1 1 auto; } #bf .bb-pl:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; } #bf .bb-pll { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } #bf .bb-next { font-size: 13px; } #bf .bb-next[hidden] { display: inline-flex !important; visibility: hidden; } #bf .bb-cfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: var(--rv-sp-2) 0 0; } #bf .bb-cfoot .bb-advrow { margin: 0 0 0 auto; } /* one foot in one place on every tab (owner's live check P5, 2026-10-12): on a computer the card fills the settings column and its foot (Next or Check and start, then Advanced) sits at the column's bottom, held there while a long tab scrolls; a short tab no longer lifts it to the middle of the column */ @media (min-width: 761px) { #bf .bb-set .bf-czs { display: flex; flex-direction: column; } #bf .bb-set .bf-czs > * { flex-shrink: 0; } /* the pane and section tabs keep their height (a flex column shrinks) */ #bf .bb-set .bb-card { flex: 1 0 auto; display: flex; flex-direction: column; } #bf .bb-set .bb-cfoot { margin-top: auto; position: sticky; bottom: 0; z-index: 2; padding: var(--rv-sp-3) 0 0; background: var(--rv-bg); border-top: 1px solid var(--rv-line); } } /* the direction's reason under Direction, and a tab's line when its every setting is off: one quiet line each */ #bf .bb-dirwhy, #bf .bb-offline { margin: 0; padding: var(--rv-sp-2) 0 var(--rv-sp-3); font-size: 12px; line-height: 1.5; color: var(--rv-text-3); border-bottom: 1px solid var(--rv-line); } #bf .bb-offline { border-bottom: 0; } #bf .bb-undoc { font-size: 13px; text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } /* the coin picker: under the Coin choice on a computer, the whole screen on a phone (bot-builder.js coinPicker) */ .bb-cpw { position: fixed; inset: 0; z-index: 140; background: var(--rv-scrim); } .bb-cpw[hidden] { display: none; } .bb-cpd { position: absolute; width: min(760px, calc(100vw - 32px)); display: flex; flex-direction: column; max-height: 70vh; box-sizing: border-box; padding: var(--rv-sp-4) var(--rv-sp-4) var(--rv-sp-2); background: var(--rv-panel); border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-panel); box-shadow: var(--rv-shadow); color: var(--rv-text); font: 400 14px/1.4 var(--rv-font-text); } .bb-cpw :is(button, input) { font: inherit; } .bb-cph { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: 0 0 var(--rv-sp-3); } .bb-cph h2 { margin: 0; font: 600 17px/1.3 var(--rv-font-title); letter-spacing: -.01em; } .bb-cpq { display: flex; align-items: center; gap: var(--rv-sp-2); height: var(--rv-h-md); padding: 0 var(--rv-sp-4); border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-pill); background: var(--rv-bg); } .bb-cpq:focus-within { border-color: var(--rv-focus); } .bb-cpq svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--rv-text-3); stroke-width: 1.8; stroke-linecap: round; } .bb-cpq input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--rv-text); font-size: 14px; } .bb-cpq input::-webkit-search-cancel-button { display: none; } .bb-cpts { margin: var(--rv-sp-2) 0 0; flex: none; } .bb-cpts > button { height: 40px; font-size: 13px; } .bb-cpli { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* the minimum's column holds the builder's own format, "Min 1,234.56 USDC" (b4 D2) */ .bb-cpr { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr) 104px 72px 60px 116px 82px; gap: var(--rv-sp-2); align-items: center; min-height: 48px; padding: 0 var(--rv-sp-2); border-radius: var(--rv-r-sm); cursor: pointer; } .bb-cpr.bb-cphd { min-height: 32px; cursor: default; font-size: var(--rv-fs-label); letter-spacing: var(--rv-ls-label); text-transform: uppercase; color: var(--rv-text-3); border-bottom: 1px solid var(--rv-line); border-radius: 0; } .bb-cpr:not(.bb-cphd):hover, .bb-cpr.act { background: var(--rv-pill); } .bb-cpr.low { opacity: .5; } .bb-cpr.low .bb-cpm { color: var(--rv-text-2); } .bb-cps { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--rv-text-3); display: inline-grid; place-items: center; } .bb-cps svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .bb-cps.on { color: var(--rv-text); } .bb-cps.on svg { fill: currentColor; } .bb-cpl { display: inline-flex; width: 24px; height: 24px; } .bb-cpn { display: flex; flex-direction: column; min-width: 0; } .bb-cpn b, .bb-cpn small { overflow-wrap: anywhere; line-height: 1.3; } .bb-cpn b { font-weight: 500; font-size: 14px; } .bb-cpn small { font-size: 12px; color: var(--rv-text-3); } .bb-cpp { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .bb-cpp b { font-weight: 500; font-size: 13px; } .bb-cpp small { font-size: 12px; } .bb-cpv, .bb-cpx, .bb-cpm { text-align: right; font-size: 13px; color: var(--rv-text-2); white-space: nowrap; } .bb-cpt { font-size: 12px; color: var(--rv-text-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .bb-cphd .bb-cpp, .bb-cphd .bb-cpv, .bb-cphd .bb-cpx, .bb-cphd .bb-cpm { display: block; text-align: right; color: var(--rv-text-3); font-size: var(--rv-fs-label); white-space: nowrap; line-height: 1.3; } /* the headings one line each (owner, 2026-10-10 batch-1 review) */ .bb-cphd > span { line-height: 1.3; } .bb-cpr.bb-cphd { padding-top: var(--rv-sp-1); padding-bottom: var(--rv-sp-1); } .bb-tr { width: 10px; height: 0; flex: none; border-top: 1.5px solid var(--rv-text-3); } .bb-tr.up { transform: rotate(-30deg); } .bb-tr.down { transform: rotate(30deg); } .bb-cpg { margin: var(--rv-sp-3) var(--rv-sp-2) var(--rv-sp-1); font-size: var(--rv-fs-label); letter-spacing: var(--rv-ls-label); text-transform: uppercase; color: var(--rv-text-3); } .bb-cpe { margin: var(--rv-sp-6) var(--rv-sp-2); color: var(--rv-text-3); font-size: 13px; } @media (max-width: 760px) { .bb-cpw { background: var(--rv-bg); } .bb-cpd { inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; padding: var(--rv-sp-4) var(--rv-gutter) env(safe-area-inset-bottom); box-shadow: none; } .bb-cpr { grid-template-columns: 22px 26px minmax(0, 1fr) 84px 88px; } /* the minimum alone: a dimmed row says "Min" (cpMinTxt) */ .bb-cpv, .bb-cpx, .bb-cpt { display: none !important; } html.bb-cp-open body { overflow: hidden; } } /* the crumb's way back: the page the person came from (bot-flow.js crumbH) */ #bf .bf-crb { color: var(--rv-text-2); text-decoration: underline; text-decoration-color: var(--rv-line-2); text-underline-offset: 3px; } #bf .bf-crb:hover { color: var(--rv-text); } /* "+ New bot"'s type list opened from the builder's Type choice: the type shown is marked */ .ws .rv-pk[aria-current] { background: var(--rv-pill); } /* every tab one short card that fits the column without scrolling (owner, 2026-10-10 16:30 UTC): on a computer a row is its name and its field on one line, its plain reason under them in one line; the whole reason while the field is in use */ @media (min-width: 761px) { #bf .bb-set .bf-r:not(.wide):not(.bb-plr) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rv-sp-3); row-gap: 2px; align-items: center; padding: 6px 0 var(--rv-sp-2); } #bf .bb-set .bf-r:not(.wide):not(.bb-plr) > div:first-child { display: contents; } #bf .bb-set .bf-r:not(.wide):not(.bb-plr) .k { grid-column: 1; grid-row: 1; } #bf .bb-set .bf-r:not(.wide):not(.bb-plr) > .bf-ctl { grid-column: 2; grid-row: 1; justify-content: flex-end; min-width: 0; } #bf .bb-set .bf-r:not(.wide):not(.bb-plr) > div:first-child > :not(.k), #bf .bb-set .bf-r:not(.wide):not(.bb-plr) > .full { grid-column: 1 / -1; } #bf .bb-set .bf-r:not(.wide):not(.bb-plr) .bf-ctl > .bf-in { width: 150px; } #bf .bb-set .bf-r:not(.wide):not(.bb-plr) .bf-ctl > .bf-in.sm { width: 110px; } #bf .bb-set .bf-r .h { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; } #bf .bb-set .bf-r:focus-within .h, #bf .bb-set .bf-r[data-row="amount"] .h { -webkit-line-clamp: unset; } #bf .bb-set .bf-r .bf-seg button { padding: 0 var(--rv-sp-3); } #bf .bb-set .bb-plr { padding: var(--rv-sp-2) 0; } #bf .bb-pll { margin-top: var(--rv-sp-1); } #bf .bb-pl { height: 40px; } } /* an amount over the free balance: the reason and its two ways out, under the amount (owner, 2026-10-10 F1) */ #bf .bb-over { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-sp-2); margin: 0 0 var(--rv-sp-2); font-size: 12px; color: var(--rv-down); } #bf .bb-over:empty { display: none; } #bf .bb-over > span { flex: 1 1 100%; } #bf .bb-over .rv-btn.sm { height: 28px; font-size: 12px; } #bf .bb-orig { margin: 0 0 var(--rv-sp-2); font-size: 12px; color: var(--rv-text-3); } #bf .bb-start { display: block; max-width: 230px; font-size: 11px; line-height: 15px; color: var(--rv-text-3); white-space: normal; } #bf .bb-start:empty { display: none; } @media (min-width: 761px) and (max-width: 1180px) { #bf .bb-money { max-width: 240px; } #bf .bb-money > div.rv-bld-amt { flex-wrap: wrap; } #bf .bb-start { flex: 1 1 100%; white-space: nowrap; overflow: hidden; } #bf .bb-start.bb-nofit { display: none; } } /* D1 (owner's live check 2026-10-10): each tab's card as short as the reference: a row is its name and its field, the plain reason shows under it while the field is in use (and on the name's hover); a read-out (the price a % lands on) stays. Every number field writes its allowed range beside its unit; the leverage its coin's limit. */ #bf .bf-in .lim { flex: none; margin-left: var(--rv-sp-2); font-size: 11px; line-height: 1; color: var(--rv-text-3); white-space: nowrap; } #bf button.bf-in .lim { margin-left: auto; margin-right: var(--rv-sp-1); } #bf button.bf-in > .num:first-child { flex: 1; text-align: left; } @media (min-width: 761px) { #bf .bb-set .bf-r:not(.wide):not(.bb-plr) { padding: var(--rv-sp-2) 0; } #bf .bb-set .bf-r:not(:focus-within):not([data-row="amount"]) > div:first-child > .h:not(:has(> .ro:not(:empty))) { display: none; } #bf .bb-set .bf-r:not(:focus-within) .h .hl { display: none; } #bf .bb-set .bf-r .k[title] { cursor: help; } /* a grid's price range: its two fields keep their width beside the name (the row's field column is as wide as its field) */ #bf .bb-set .bf-r:not(.wide) .bf-ctl > .bf-rg { width: 150px; } /* the left edge of every other field */ #bf .bb-set .bf-r:not(.wide) .bf-rg .bf-in { padding: 0 var(--rv-sp-2); } #bf .bb-card { padding-top: var(--rv-sp-3); } } /* the bar's quiet actions: Order summary, Backtest, Create only (one primary: Create & start) */ #bf .bb-q { display: inline-flex; align-items: center; gap: var(--rv-sp-4); } #bf .bb-q .rv-btn.quiet { font-size: 13px; white-space: nowrap; } /* ~1000px: the three stacked in a narrow column, so the orders keep their room */ @media (min-width: 761px) and (max-width: 1180px) { #bf .bb-q { flex-direction: column; align-items: flex-start; gap: 2px; } #bf .bb-q .rv-btn.quiet { font-size: 12px; line-height: 18px; } #bf .bb-go .bf-offwhy { max-width: 120px; } } /* the order summary sheet */ .bb-sumsheet .rv-sheet { max-width: 640px; max-height: 86vh; } .bb-sumsheet .bb-psh { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: 0 0 var(--rv-sp-2); } .bb-sumsheet .bb-psh h2 { margin: 0; } .bb-sumsheet :is(button, a) { font: inherit; } .bb-sumsheet .bb-sn { margin: 0 0 var(--rv-sp-3); font-size: 13px; color: var(--rv-text-3); } .bb-sumsheet .bb-st { font-size: 13px; margin: 0 0 var(--rv-sp-3); } .bb-sumsheet .bb-st :is(th, td) { padding: var(--rv-sp-2) var(--rv-sp-3) var(--rv-sp-2) 0; } .bb-sumsheet .bb-sx { margin: 0; padding: var(--rv-sp-2) 0 0; border-top: 1px solid var(--rv-line); } .bb-sumsheet .bb-sx > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-3); padding: var(--rv-sp-2) 0; } .bb-sumsheet .bb-sx dt { font-size: 13px; color: var(--rv-text-3); } .bb-sumsheet .bb-sx dd { margin: 0; display: flex; align-items: baseline; gap: var(--rv-sp-2); text-align: right; } .bb-sumsheet .bb-sx dd b { font-weight: 500; font-size: 14px; } .bb-sumsheet .bb-sx dd small { font-size: 12px; color: var(--rv-text-3); } .bb-sumsheet .bb-none { color: var(--rv-text-3); font-size: 13px; } /* D3: the Public setups' balance switch and each row's mini chart (its 7-day test's line, monochrome) */ :is(#bf, .bb-pubsheet) .bb-fitsw { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: var(--rv-sp-3) 0 0; font-size: 12px; color: var(--rv-text-2); cursor: pointer; } .bb-pubsheet .bf-sw { position: relative; flex: none; display: inline-block; width: 32px; height: 18px; margin: 0; cursor: pointer; } .bb-pubsheet .bf-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .bb-pubsheet .bf-sw i { position: absolute; inset: 0; border-radius: var(--rv-r-pill); background: var(--rv-bg); border: 1px solid var(--rv-line-2); pointer-events: none; } .bb-pubsheet .bf-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--rv-text-3); } .bb-pubsheet .bf-sw input:checked + i { background: var(--rv-text); border-color: var(--rv-text); } .bb-pubsheet .bf-sw input:checked + i::after { transform: translateX(14px); background: var(--rv-bg); } :is(#bf, .bb-pubsheet) .bb-pr { align-items: center; } :is(#bf, .bb-pubsheet) .bb-pra { flex: 1 1 auto; } :is(#bf, .bb-pubsheet) .bb-prc { flex: none; width: 56px; height: 20px; color: var(--rv-text-2); } :is(#bf, .bb-pubsheet) .bb-prc svg { display: block; width: 100%; height: 100%; overflow: visible; } :is(#bf, .bb-pubsheet) .bb-prc .z { stroke: var(--rv-line-2); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; } /* the Signal bot in the builder (G2, only while its webhooks are open): the form, then what it does */ #bf .bb-sigw { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 360px); gap: var(--rv-sp-8); align-items: start; margin-top: var(--rv-sp-4); } #bf .bb-sigc .bf-r:first-child { padding-top: 0; } #bf .bb-sigi h3 { margin: 0 0 var(--rv-sp-2); font: 500 var(--rv-fs-xs)/1.4 var(--rv-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--rv-text-3); } #bf .bb-sigi .bf-list { margin: var(--rv-sp-4) 0; } #bf .bb-sgf { display: flex; justify-content: flex-end; margin-top: var(--rv-sp-4); } #bf .bb-sgn { margin: 0 0 var(--rv-sp-3); font-size: 13px; color: var(--rv-text-2); } #bf .bb-sgu code { display: block; margin-top: var(--rv-sp-1); font-size: 12px; overflow-wrap: anywhere; color: var(--rv-text); } @media (max-width: 1180px) { #bf .bb-sigw { grid-template-columns: minmax(0, 1fr); } } /* G5 (owner's live check 2026-10-10): no text in the builder ends in "…". A reason longer than its two lines: the (i) beside the setting's name holds the whole sentence (hover, focus or tap: bot-builder.js fullTips) */ #bf .bb-fulli { display: inline-block; width: 14px; height: 14px; margin-left: var(--rv-sp-1); padding: 0; border: 0; vertical-align: -2px; cursor: help; background: currentColor; color: var(--rv-text-3); -webkit-mask: var(--rv-i-info) center / 14px no-repeat; mask: var(--rv-i-info) center / 14px no-repeat; } #bf .bb-fulli:hover, #bf .bb-fulli:focus-visible { color: var(--rv-text); } #bf .bb-set .bf-r.bb-open .h { -webkit-line-clamp: unset; } /* ---- the Backtest lab (/bots/lab): this builder in its compare mode (radar/web/bot-lab.js; owner's live check 2026-10-10 22:50 UTC, G4: one builder). The Bots sub-navigation over it, and in the bar the versions side by side (one row each: its grey, its letter and settings, result after fees, worst drop, days run, trades, fees, Use this) with Add to compare as the one primary. bot-lab.js sets the grid's room (--bb-labh) under the head and over the bar. */ .bb-labnav { padding: var(--rv-sp-10) var(--rv-gutter) 0; } /* the shell's content top (rv-shell.css main: 40px), as every Bots page */ /* a phone: the sub-navigation where every Bots page has it (the content's 24px top, its row as theirs); the section tabs scroll edge to edge, their first tab on the 16px edge (rv-phone.css) */ @media (max-width: 760px) { .bb-labnav { padding: var(--rv-sp-6) var(--rv-gutter) 0; } html.tm-lab #bf .bb-sh .rv-bld-tabs { margin-left: calc(-1 * var(--rv-gutter)); margin-right: calc(-1 * var(--rv-gutter)); } } html.tm-lab #bf[data-step="custom"] .bf-mh { padding-top: 0; } /* the sub-navigation's own gap above the title, as on every Bots page */ /* the sub-navigation is the way out: no crumb, no close */ html.tm-lab #bf .bf-crumb, html.tm-lab #bf .bf-x { display: none; } @media (min-width: 981px) { html.tm-lab #bf .bb-grid { height: var(--bb-labh, calc(100vh - var(--rv-header-h, 77px) - var(--bb-head) - 52px - var(--bb-bar))); } } #bf .bb-lmain { min-width: 0; } #bf .bb-lh { display: flex; align-items: baseline; gap: var(--rv-sp-3); min-width: 0; margin: 0 0 var(--rv-sp-1); font-size: 12px; line-height: 18px; color: var(--rv-text-3); } #bf .bb-lh b { flex: none; font-size: 13px; font-weight: 600; color: var(--rv-text); } #bf .bb-lh span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bf .bb-lnone { margin: 0; font-size: 13px; line-height: 20px; color: var(--rv-text-3); } #bf .bb-lwrap { min-width: 0; } #bf .bb-lt { table-layout: fixed; font-size: 13px; } #bf .bb-lt th { padding: var(--rv-sp-1) var(--rv-sp-4) var(--rv-sp-1) 0; font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bf .bb-lt td { height: 30px; padding: 2px var(--rv-sp-4) 2px 0; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bf .bb-lt :is(th, td):nth-child(2) { width: 96px; } #bf .bb-lt :is(th, td):nth-child(3) { width: 104px; } #bf .bb-lt :is(th, td):nth-child(4) { width: 124px; } #bf .bb-lt :is(th, td):nth-child(5) { width: 72px; } #bf .bb-lt :is(th, td):nth-child(6) { width: 88px; } #bf .bb-lt :is(th, td):last-child { width: 128px; } #bf .bb-lt td b { font-weight: 500; } #bf .bb-lt tr.fl td { background: var(--rv-pill); } #bf .bb-lv { display: table-cell; } #bf .bb-lv > * { vertical-align: middle; } #bf .bb-lsw { display: inline-block; width: 18px; height: 0; margin-right: var(--rv-sp-2); border-top: 2px dashed var(--rv-cmp-a); } #bf .bb-lsw.v-b { border-top-color: var(--rv-cmp-b); } #bf .bb-lsw.v-c { border-top-color: var(--rv-cmp-c); } #bf .bb-lsw.v-d { border-top-color: var(--rv-cmp-d); } #bf .bb-lv b { margin-right: var(--rv-sp-2); font-weight: 600; } #bf .bb-ld { color: var(--rv-text-2); } #bf .bb-lact { display: table-cell; } #bf .bb-lact .rv-btn.quiet.sm { height: 26px; padding: 0 var(--rv-sp-2); border: 0; font-size: 13px; text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } #bf .bb-lact .bb-lx { width: 26px; padding: 0; text-decoration: none; color: var(--rv-text-3); font-size: 16px; } #bf .bb-lact .bb-lx:hover { color: var(--rv-text); } #bf .bb-lsk { display: inline-block; width: 48px; height: 12px; vertical-align: middle; } @media (min-width: 761px) { #bf .bb-lbw { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } #bf .bb-lbar .bb-go .bf-offwhy { max-width: 220px; } } @media (min-width: 761px) and (max-width: 1180px) { #bf .bb-lt :is(th, td):nth-child(2) { width: 72px; } #bf .bb-lt :is(th, td):nth-child(3) { width: 92px; } #bf .bb-lt :is(th, td):nth-child(4) { width: 108px; } #bf .bb-lt :is(th, td):nth-child(5) { width: 56px; } #bf .bb-lt :is(th, td):nth-child(6) { width: 72px; } #bf .bb-lt :is(th, td):last-child { width: 108px; } #bf .bb-lbar .bb-go { flex-direction: column; align-items: flex-end; gap: var(--rv-sp-1); } #bf .bb-lbar .bb-go .bf-offwhy { max-width: 160px; } } /* a phone: the comparison under the backtest, each version a short block of label and figure lines */ @media (max-width: 760px) { html.tm-lab #rv-builder .rv-bld-chart { height: auto; } /* the chart's head, tabs and 260px chart all in its own box (nothing over the backtest's tabs) */ #bf .bb-lbar { padding: var(--rv-sp-4) var(--rv-gutter) var(--rv-sp-6); border-top: 1px solid var(--rv-line); } #bf .bb-lbw { display: flex; flex-direction: column; gap: var(--rv-sp-4); } #bf .bb-lh { flex-wrap: wrap; } #bf .bb-lh span { white-space: normal; } #bf .bb-lt, #bf .bb-lt tbody, #bf .bb-lt tr { display: block; width: 100%; } #bf .bb-lt thead { display: none; } #bf .bb-lt tr { padding: var(--rv-sp-3) 0; border-bottom: 1px solid var(--rv-line); } #bf .bb-lt td { display: flex; justify-content: space-between; gap: var(--rv-sp-3); width: auto !important; height: auto; padding: 2px 0; border: 0; white-space: normal; } #bf .bb-lt td[data-l]::before { content: attr(data-l); color: var(--rv-text-3); font-size: 12px; } #bf .bb-lt td.bb-lv { display: block; } #bf .bb-lt td.bb-lact { justify-content: flex-start; } #bf .bb-lbar .bb-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-sp-3); } #bf .bb-lbar .bb-go .rv-btn.primary { flex: 1 1 100%; } } /* audit p18 item 23: the foot covers the column down to its edge (the scroller's bottom padding left a strip where a field showed under it), and a field reached by Tab scrolls clear of it; on a window as short as the MacBook's the General tab shows its key fields (amount, plan, direction, leverage) on the first view: the plan's one line folds into its buttons' tooltip, the rows a little tighter (the direction's reason kept whole) */ @media (min-width: 761px) { #bf .bb-set .bf-czs { scroll-padding-bottom: 88px; } #bf .bb-set .bb-cfoot { bottom: calc(-1 * var(--rv-sp-4)); padding-bottom: var(--rv-sp-4); margin-bottom: calc(-1 * var(--rv-sp-4)); } } @media (min-width: 761px) and (max-width: 1180px), (min-width: 761px) and (max-height: 860px) { #bf .bb-set .bb-pll { display: none; } #bf .bb-set .bb-dirwhy { padding: var(--rv-sp-1) 0 6px; } #bf .bb-set .bf-g > .bf-r.bf-r.bf-r { padding-top: 6px; padding-bottom: 6px; } } /* audit p18 item 24: the bar's three secondary actions (Order summary, Backtest, Create only; one group, .bb-q) on one row at every computer width; "Backtest" goes while its panel is on screen (1181px and wider, the side column on the Live backtest tab), where it did nothing */ @media (min-width: 761px) and (max-width: 1180px) { #bf .bb-q { flex-direction: row; align-items: center; gap: var(--rv-sp-3); } #bf .bb-q .rv-btn.quiet { font-size: 12px; line-height: 18px; } } @media (min-width: 1181px) { #bf:has(.bb-side > .bb-sbt:not([hidden])) .bb-q .bb-btb { display: none; } } /* Simple mode of the bot setup (bundle S, owner 2026-10-12; radar/web/bot-simple.js): one panel with three plain questions beside the chart, one viewport high on a computer (the panel scrolls inside), the bar at the bottom with More and the one primary. Colours, type, spacing and radii only from radar/web/rv-tokens.css. */ html.tm-build { --bs-head: 92px; --bs-bar: 73px; } /* the [Simple | Advanced] switch: in Simple's header and beside the close of every other layout */ #bf .bs-sw { flex: none; display: inline-flex; align-items: center; gap: 2px; height: var(--rv-h-sm); padding: 2px; margin-left: auto; box-sizing: border-box; border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-pill); } #bf .bs-sw > button { height: 26px; padding: 0 var(--rv-sp-3); border: 0; border-radius: var(--rv-r-pill); background: none; color: var(--rv-text-3); font: 500 13px/1 var(--rv-font-text); cursor: pointer; white-space: nowrap; } #bf .bs-sw > button:hover { color: var(--rv-text); } #bf .bs-sw > button.on { background: var(--rv-pill); color: var(--rv-text); } #bf .bs-sw > button:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; } #bf .bf-mh > .bs-sw { align-self: center; margin-right: var(--rv-sp-3); } html.tm-build #bf[data-step="custom"] .bf-mh > .bs-sw { align-self: flex-start; margin-top: 22px; } /* the layout: the panel | the chart, one viewport high above the bar */ #bf.bs-on { --bs-pw: 460px; } #bf.bs-on .bs-mh { align-items: flex-start; } #bf.bs-on .bs-mh h1 { margin: 0; font: 600 var(--rv-type-title, 26px)/1.15 var(--rv-font-title); letter-spacing: var(--rv-ls-tight, 0); } #bf .bs-grid { display: grid; grid-template-columns: minmax(340px, var(--bs-pw)) minmax(0, 1fr); border-top: 1px solid var(--rv-line); height: calc(100vh - var(--rv-header-h, 77px) - var(--rv-lb-h, 0px) - var(--bs-head) - var(--bs-bar)); min-height: 300px; } #bf .bs-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--rv-sp-4) var(--rv-sp-6) var(--rv-sp-6) 0; border-right: 1px solid var(--rv-line); } #bf .bs-body { flex: 1 0 auto; } #bf .bs-chart { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--rv-sp-4) 0 var(--rv-sp-4) var(--rv-sp-6); } #bf .bs-ch { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-4); flex-wrap: wrap; margin: 0 0 var(--rv-sp-3); } #bf .bs-cap { margin: 0; font-size: 13px; color: var(--rv-text-3); } #bf .bs-cap b { color: var(--rv-text); font-weight: 500; } #bf .bs-legend { display: flex; gap: var(--rv-sp-4); margin: 0; font-size: 12px; color: var(--rv-text-2); } #bf .bs-lg { display: inline-flex; align-items: center; gap: 6px; } #bf .bs-lg i { display: inline-block; width: 16px; height: 0; border-top: 2px dashed; } #bf .bs-lg i.d { border-top-style: dotted; } #bf .bs-cbody { flex: 1 1 auto; min-height: 160px; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; } /* the progress over the steps: Back, "Step n of 3", three hairline segments */ #bf .bs-prog { display: flex; flex-direction: column; gap: var(--rv-sp-2); margin: 0 0 var(--rv-sp-2); } #bf .bs-pt { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); min-height: 20px; } #bf .bs-back { flex: none; font-size: 13px; } #bf .bs-pl { font-size: 12px; color: var(--rv-text-3); } #bf .bs-bar3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } #bf .bs-bar3 i { display: block; height: 2px; border-radius: var(--rv-r-pill); background: var(--rv-line-2); } #bf .bs-bar3 i.on { background: var(--rv-text); } /* the questions and their answers: rows on hairlines, a dot for the one chosen; colour only on figures */ #bf .bs-qh { margin: var(--rv-sp-5) 0 var(--rv-sp-3); font: 600 var(--rv-fs-h2)/1.25 var(--rv-font-title); color: var(--rv-text); } #bf .bs-qh:focus { outline: none; } #bf .bs-lbl { display: flex; align-items: center; gap: 6px; margin: var(--rv-sp-4) 0 var(--rv-sp-2); font-size: 12px; color: var(--rv-text-3); } #bf .bs-coins { display: flex; flex-wrap: wrap; gap: var(--rv-sp-2); } #bf .bs-coin { display: inline-flex; align-items: center; gap: var(--rv-sp-2); height: var(--rv-h-md); padding: 0 var(--rv-sp-4) 0 var(--rv-sp-2); border: 1px solid var(--rv-line); border-radius: var(--rv-r-pill); background: none; color: var(--rv-text-2); font: 500 14px/1 var(--rv-font-text); cursor: pointer; } #bf .bs-coin > :first-child:not(span) { flex: none; } #bf .bs-coin:hover { border-color: var(--rv-line-2); color: var(--rv-text); } #bf .bs-coin.on { background: var(--rv-pill); border-color: var(--rv-line-on); color: var(--rv-text); } #bf .bs-coin.bs-more { padding-left: var(--rv-sp-3); } #bf .bs-coin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } #bf .bs-answers { display: flex; flex-direction: column; border-top: 1px solid var(--rv-line); } #bf .bs-ans { display: flex; align-items: flex-start; gap: var(--rv-sp-3); width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rv-line); background: none; color: var(--rv-text-2); text-align: left; font: inherit; cursor: pointer; } #bf .bs-ans:hover { color: var(--rv-text); } #bf .bs-ans:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: -2px; border-radius: var(--rv-r-sm); } #bf .bs-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; box-sizing: border-box; border: 1px solid var(--rv-line-3); border-radius: var(--rv-r-pill); } #bf .bs-ans.on .bs-dot { border: 5px solid var(--rv-text); } #bf .bs-at { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #bf .bs-a1 .bs-at { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-3); } #bf .bs-a1 .bs-at > small { text-align: right; } #bf .bs-at > b { font: 500 15px/1.35 var(--rv-font-text); color: inherit; } #bf .bs-ans.on .bs-at > b { color: var(--rv-text); } #bf .bs-at > small { font-size: 12px; line-height: 1.45; color: var(--rv-text-3); } #bf .bs-rec { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--rv-text-3); } #bf .bs-why { margin: var(--rv-sp-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } #bf .bs-why:empty { display: none; } /* the bot the answer picks: its name, its level, what it does and what can go wrong */ #bf .bs-bot { margin-top: var(--rv-sp-5); padding-top: var(--rv-sp-4); border-top: 1px solid var(--rv-line); } #bf .bs-both { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-3); } #bf .bs-k { font-size: 12px; color: var(--rv-text-3); } #bf .bs-change { font-size: 13px; text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } #bf .bs-botn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: var(--rv-sp-1) 0 0; font-size: 16px; } #bf .bs-botn b { font-weight: 600; color: var(--rv-text); } #bf .bs-dir { color: var(--rv-text-2); } #bf .bs-lvl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--rv-text-2); } #bf .bs-lvl i { position: relative; display: inline-block; width: 13px; height: 10px; background: linear-gradient(var(--rv-text-2), var(--rv-text-2)) 0 100% / 3px 4px no-repeat, linear-gradient(var(--rv-line-3), var(--rv-line-3)) 5px 100% / 3px 7px no-repeat, linear-gradient(var(--rv-line-3), var(--rv-line-3)) 10px 100% / 3px 10px no-repeat; } #bf .bs-lvl.some i { background: linear-gradient(var(--rv-text-2), var(--rv-text-2)) 0 100% / 3px 4px no-repeat, linear-gradient(var(--rv-text-2), var(--rv-text-2)) 5px 100% / 3px 7px no-repeat, linear-gradient(var(--rv-line-3), var(--rv-line-3)) 10px 100% / 3px 10px no-repeat; } #bf .bs-lvl.advanced i { background: linear-gradient(var(--rv-text-2), var(--rv-text-2)) 0 100% / 3px 4px no-repeat, linear-gradient(var(--rv-text-2), var(--rv-text-2)) 5px 100% / 3px 7px no-repeat, linear-gradient(var(--rv-text-2), var(--rv-text-2)) 10px 100% / 3px 10px no-repeat; } #bf .bs-botl { margin: var(--rv-sp-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--rv-text-2); } #bf .bs-wrong { margin: var(--rv-sp-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--rv-text-2); } #bf .bs-wrong > span:first-child { color: var(--rv-text-3); } #bf .bs-wrong > span:first-child::after { content: ":"; } /* step 2: the amount, the share buttons, the temperaments' plain figures */ #bf .bs-amtr { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-sp-3); } #bf .bs-amt { width: 200px; height: var(--rv-h-lg); border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-sm); background: var(--rv-bg); } #bf .bs-amt:focus-within { border-color: var(--rv-focus); } #bf .bs-amt input { font: 500 18px/1 var(--rv-font-text); } #bf .bs-quick { display: flex; gap: var(--rv-sp-2); } #bf .bs-note { margin: var(--rv-sp-2) 0 0; font-size: 12px; color: var(--rv-text-3); } #bf .bs-note b { font-weight: 500; color: var(--rv-text-2); } #bf .bs-err { margin: var(--rv-sp-1) 0 0; font-size: 12px; line-height: 1.5; color: var(--rv-down); } #bf .bs-err:empty { display: none; } #bf .bs-tf { display: flex; flex-direction: column; gap: 2px; margin-top: var(--rv-sp-1); font-size: 12px; color: var(--rv-text-3); } #bf .bs-tf b { font-weight: 500; color: var(--rv-text-2); } #bf .bs-tf b.rv-down { color: var(--rv-down); } #bf .bs-tfn { color: var(--rv-text-3); } #bf .bs-sim, #bf .bs-past { margin: var(--rv-sp-2) 0 0; font-size: 11px; line-height: 1.5; color: var(--rv-text-3); } #bf .bs-lev { margin: var(--rv-sp-4) 0 0; padding-top: var(--rv-sp-3); border-top: 1px solid var(--rv-line); font-size: 13px; line-height: 1.5; color: var(--rv-text-2); } #bf .bs-tolink { font-size: 13px; text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } /* step 3: the plan in sentences with Edit, the backtest in words with its facts, the fees in four parts */ #bf .bs-sum { margin: 0; border-top: 1px solid var(--rv-line); } #bf .bs-sumi { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--rv-sp-3); padding: var(--rv-sp-3) 0; border-bottom: 1px solid var(--rv-line); } #bf .bs-sumi dt { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 20px; color: var(--rv-text-3); } #bf .bs-sumi dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--rv-text); } #bf .bs-sumi dd small { color: var(--rv-text-3); font-size: 12px; } #bf .bs-ed { align-self: start; } #bf .bs-edit { font-size: 12px; text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } #bf .bs-nothing { margin: var(--rv-sp-3) 0 0; font-size: 13px; color: var(--rv-text-2); } #bf .bs-risk { display: flex; align-items: flex-start; gap: var(--rv-sp-2); margin: var(--rv-sp-3) 0 0; font-size: 13px; line-height: 1.5; color: var(--rv-text-2); cursor: pointer; } #bf .bs-risk input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--rv-text); } #bf .bs-wl { margin: var(--rv-sp-3) 0 0; font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } #bf .bs-wl p { margin: 0; } #bf .bs-wl ol { margin: var(--rv-sp-1) 0 0; padding-left: 18px; } #bf .bs-sec { margin-top: var(--rv-sp-5); } #bf .bs-sec h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--rv-sp-2); font: 600 14px/1.3 var(--rv-font-text); color: var(--rv-text); } #bf .bs-btw { margin: 0 0 var(--rv-sp-2); font-size: 13px; line-height: 1.55; color: var(--rv-text-2); } #bf .bs-btw b { font-weight: 600; } #bf .bs-btn { margin: 0 0 var(--rv-sp-2); font-size: 12px; color: var(--rv-text-3); } #bf .bs-facts, .bs-facts { margin: 0; border-top: 1px solid var(--rv-line); font-size: 12px; } #bf .bs-facts > div, .bs-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-sp-3); padding: 6px 0; border-bottom: 1px solid var(--rv-line); } #bf .bs-facts dt, .bs-facts dt { flex: none; color: var(--rv-text-3); } #bf .bs-facts dd, .bs-facts dd { margin: 0; min-width: 0; text-align: right; color: var(--rv-text); } #bf .bs-facts dd small, .bs-facts dd small { display: block; color: var(--rv-text-3); font-size: 11px; line-height: 1.45; } #bf .bs-help { margin: var(--rv-sp-6) 0 0; font-size: 12px; color: var(--rv-text-3); } #bf .bs-help .rv-btn.quiet { font-size: 12px; text-decoration: underline; text-decoration-color: var(--rv-line-3); text-underline-offset: 3px; } /* the (?) beside a word, its popover and the glossary sheet */ .bs-q, #bf .bs-q { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; margin: 0 0 0 2px; vertical-align: 1px; border: 1px solid var(--rv-line-3); border-radius: var(--rv-r-pill); background: none; color: var(--rv-text-3); font: 600 10px/1 var(--rv-font-text); cursor: pointer; } .bs-q:hover, #bf .bs-q:hover, .bs-q[aria-expanded="true"] { color: var(--rv-text); border-color: var(--rv-text-3); } .bs-q:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; } .bs-tip { position: absolute; z-index: 120; box-sizing: border-box; padding: var(--rv-sp-3) var(--rv-sp-4); border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-md); background: var(--rv-panel); color: var(--rv-text-2); font: 400 13px/1.5 var(--rv-font-text); } .bs-tip[hidden] { display: none; } .bs-tip b { display: block; color: var(--rv-text); font-weight: 600; } .bs-tip p { margin: var(--rv-sp-1) 0 0; } .bs-tip .bs-tipr { color: var(--rv-text); } .bs-tip .bs-tipall { margin-top: var(--rv-sp-2); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .bs-gsheet .rv-sheet { max-height: 86vh; overflow-y: auto; } .bs-gsheet .bs-gh { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin: 0 0 var(--rv-sp-3); } .bs-gsheet .bs-gh h2 { margin: 0; } .bs-gsheet .bs-gl { margin: 0; border-top: 1px solid var(--rv-line); } .bs-gsheet .bs-gl > div { padding: var(--rv-sp-3) 0; border-bottom: 1px solid var(--rv-line); } .bs-gsheet .bs-gl dt { font: 600 14px/1.4 var(--rv-font-text); color: var(--rv-text); } .bs-gsheet .bs-gl dd { margin: var(--rv-sp-1) 0 0; font-size: 13px; line-height: 1.55; color: var(--rv-text-2); } .bs-gsheet .bs-gl dd span { display: block; margin-top: 2px; color: var(--rv-text-3); } .bs-gsheet .bs-gf { margin: var(--rv-sp-3) 0 0; font-size: 13px; } /* the More menu of the bottom bar (Simple and Advanced) */ .rv-more { position: relative; flex: none; } .rv-more-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rv-more-menu { position: absolute; right: 0; bottom: calc(100% + var(--rv-sp-2)); z-index: 60; display: flex; flex-direction: column; min-width: 200px; padding: var(--rv-sp-1); border: 1px solid var(--rv-line-2); border-radius: var(--rv-r-md); background: var(--rv-panel); } .rv-more-menu[hidden] { display: none; } #bf .rv-more-menu > button, .rv-more-menu > button, #bf .rv-more-menu > .rv-btn.quiet { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 36px; padding: 0 var(--rv-sp-3); border: 0; border-radius: var(--rv-r-sm); background: none; color: var(--rv-text); font: 400 14px/1 var(--rv-font-text); text-align: left; cursor: pointer; white-space: nowrap; } #bf .rv-more-menu > button:hover:not(:disabled), #bf .rv-more-menu > button:focus-visible { background: var(--rv-pill); outline: none; } #bf .rv-more-menu > button:disabled { opacity: .4; cursor: not-allowed; } /* the bar above 760px; phones: radar/web/rv-phone.css (.rv-bld-bar) */ @media (min-width: 761px) { #bf .bs-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--rv-bg); border-top: 1px solid var(--rv-line-2); } #bf .bs-bw { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-6); min-height: calc(var(--bs-bar) - 1px); max-width: var(--rv-max); margin: 0 auto; padding: var(--rv-sp-3) var(--rv-gutter); box-sizing: border-box; } #bf .bs-money { font-size: 13px; color: var(--rv-text-3); white-space: nowrap; } #bf .bs-money b { margin-left: var(--rv-sp-1); font: 600 17px/1.3 var(--rv-font-text); color: var(--rv-text); } #bf .bs-money small { font-size: 12px; color: var(--rv-text-3); } #bf .bs-go { display: flex; align-items: center; gap: var(--rv-sp-3); min-width: 0; } #bf .bs-offwhy { max-width: 300px; font-size: 12px; line-height: 15px; color: var(--rv-text-3); text-align: right; } #bf .bs-offwhy:empty { display: none; } html.bs-simple body { padding-bottom: var(--bs-bar); } } #bf .bs-go .rv-btn { color: var(--rv-text); } #bf .bs-go .rv-btn.primary { color: var(--rv-bg); } #bf .bs-go .rv-btn.primary:disabled { opacity: .4; } /* ~1000px: a narrower panel, the chart keeps its room */ @media (min-width: 761px) and (max-width: 1180px) { #bf.bs-on { --bs-pw: 400px; } #bf .bs-sumi { grid-template-columns: 100px minmax(0, 1fr) auto; } #bf .bs-offwhy { max-width: 200px; } } /* a tablet: the chart under the panel, the page scrolls */ @media (min-width: 761px) and (max-width: 980px) { #bf .bs-grid { grid-template-columns: minmax(0, 1fr); height: auto; } #bf .bs-panel { overflow: visible; border-right: 0; padding-right: 0; } #bf .bs-chart { padding: var(--rv-sp-4) 0; border-top: 1px solid var(--rv-line); } #bf .bs-cbody { height: 320px; flex: none; } } /* a phone: one column (the header, the steps, the chart), the bar fixed over the tabs */ @media (max-width: 760px) { #bf.bs-on { padding: 0; } #bf.bs-on .bs-mh { padding: var(--rv-sp-4) var(--rv-gutter) var(--rv-sp-3); border: 0; } #bf.bs-on .bs-mh h1 { font-size: 22px; } #bf.bs-on .bf-crumb { display: none; } #bf .bs-grid { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; } #bf .bs-panel { overflow: visible; border-right: 0; padding: var(--rv-sp-4) var(--rv-gutter) var(--rv-sp-4); } #bf .bs-chart { padding: var(--rv-sp-4) var(--rv-gutter); border-top: 1px solid var(--rv-line); } #bf .bs-cbody { height: 240px; flex: none; } #bf .bs-sumi { grid-template-columns: minmax(0, 1fr) auto; } #bf .bs-sumi dt { grid-column: 1 / -1; } #bf .bs-amt { width: 100%; } #bf .bs-bar .bs-bw { display: flex; align-items: center; gap: var(--rv-sp-3); } #bf .bs-money { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--rv-text-3); } #bf .bs-money b { color: var(--rv-text); font-weight: 600; } #bf .bs-money .bs-bal { display: none; } #bf .bs-go { display: flex; align-items: center; gap: var(--rv-sp-2); flex: none; } #bf .bs-offwhy { display: none; } #bf .bs-go .rv-btn.lg { height: var(--rv-h-md); padding: 0 18px; font-size: 14px; } #bf .bs-go .rv-more-b { height: var(--rv-h-md); padding: 0 var(--rv-sp-3); } #bf .bs-lvl { margin-left: 0; } #bf .bs-a1 .bs-at { flex-direction: column; align-items: flex-start; gap: 2px; } #bf .bs-a1 .bs-at > small { text-align: left; } } /* the landing's hero ("/", radar/build_home.py): Simple's steps inside the hero's room, the switch over them, the bar at the panel's foot (never fixed over the sections below) */ #bf .bs-home { --bs-pw: 440px; } html.tm-home.bs-simple body { padding-bottom: 0; } #bf .bs-hrow { display: flex; justify-content: flex-end; margin: 0 0 var(--rv-sp-3); } #bf .bs-home .bs-grid { height: clamp(380px, calc(100vh - 330px), 560px); border-top: 1px solid var(--rv-line); } #bf .bs-home .bs-bar { position: static; border-top: 1px solid var(--rv-line); background: none; } #bf .bs-home .bs-bw { max-width: none; padding: var(--rv-sp-3) 0; } @media (min-width: 761px) and (max-width: 1180px) { #bf .bs-home { --bs-pw: 380px; } } @media (max-width: 980px) { #bf .bs-home .bs-grid { height: auto; } } @media (max-width: 760px) { #bf .bs-home .bs-panel { padding-left: 0; padding-right: 0; } #bf .bs-home .bs-chart { padding-left: 0; padding-right: 0; } #bf .bs-home .bs-bar { position: static !important; padding: var(--rv-sp-3) 0; } } /* Build: the bot setup at /bots/new as "Bots you can read" (N2, radar/web/bot-write.js). The header (title, type pills, the describe field), then two columns: the sentence card (or the pro view) on the left, the chart, the range of past starts and the start card on the right. One window high from 761px wide (each column scrolls inside); one column on a phone. Colours, type, radii and shadows only from radar/web/rv-tokens.css. */ html.bw-write .bf-ws { min-height: 0; padding: 0; background: var(--rv-bg); } html.bw-write #bf, html.bw-write.tm-build #bf[data-step="custom"] { max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font: 400 14px/1.5 var(--rv-font-text); color: var(--rv-text); } #bf .bw { display: flex; flex-direction: column; gap: var(--rv-sp-4); box-sizing: border-box; padding: var(--rv-sp-5) var(--rv-edge) var(--rv-sp-4); } /* --bw-bar: the start bar's room at the window's bottom (a laptop, a phone); none from 1240px, where Start is in its card */ #bf .bw { --bw-bar: 0px; } @media (max-width: 1239px) { #bf .bw { --bw-bar: 68px; } } @media (min-width: 761px) { #bf .bw { height: calc(100vh - var(--rv-header-h, 65px) - var(--rv-lb-h, 0px) - var(--bw-bar)); min-height: 520px; } } /* the shared pills' colours over the page's own button reset (#bf button { color: inherit }) */ #bf .bw .rv-pill { color: var(--rv-text-2); } #bf .bw .rv-pill:hover { color: var(--rv-text); } /* a chosen pill is a choice, not an action: a soft fill and an outline (the page's one solid button is Start) */ #bf .bw .rv-pill:is(.on, [aria-pressed="true"]) { color: var(--rv-text); background: var(--rv-surface-2); border-color: var(--rv-text-3); font-weight: 600; } #bf .bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the header: the page's title and the type pills on one row; the describe field and its examples under it */ #bf .bw-head { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rv-sp-3) var(--rv-sp-5); } #bf .bw-eyebrow { margin: 0; font-size: 13px; color: var(--rv-text-3); } @media (max-height: 820px) and (min-width: 761px) { #bf .bw-eyebrow { display: none; } } #bf .bw-head h1 { margin: 2px 0 0; font: 600 clamp(28px, 2.6vw, 38px)/1.1 var(--rv-font-title); letter-spacing: -.035em; color: var(--rv-text); } #bf .bw-types { gap: 6px; } #bf .bw-types .rv-pill { height: 38px; padding: 0 16px; font-size: 14px; } #bf .bw-ask { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-sp-2) var(--rv-sp-3); } #bf .bw-q { flex: 0 1 520px; min-width: 280px; display: flex; align-items: center; gap: var(--rv-sp-2); height: 48px; padding: 0 5px 0 16px; border: 1px solid var(--rv-line); border-radius: var(--rv-r-pill); background: var(--rv-surface); box-sizing: border-box; } #bf .bw-q:focus-within { border-color: var(--rv-acc); box-shadow: 0 0 0 3px var(--rv-acc-soft); } #bf .bw-q svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--rv-acc); stroke-width: 2; } #bf .bw-q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--rv-text); font: 400 15px var(--rv-font-text); } #bf .bw-q input::placeholder { color: var(--rv-text-3); } #bf .bw-q .rv-btn { height: 38px; padding: 0 18px; } #bf .bw-q .bw-qgo { color: var(--rv-text); } #bf .bw-exs { flex: 1 1 360px; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; font-size: 13px; color: var(--rv-text-3); white-space: nowrap; } #bf .bw-exs::-webkit-scrollbar { display: none; } #bf .bw-exs > span { flex: none; margin-right: 2px; } #bf .bw-exs .rv-pill { flex: none; } /* the reading said back: over the page under the field, never moving the cards */ #bf .bw-ask { position: relative; } #bf .bw-read { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; width: min(640px, 100%); box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--rv-sp-2); padding: 10px 6px 10px 14px; background: var(--rv-surface); border: 1px solid var(--rv-line-strong); border-radius: var(--rv-r-card-sm); box-shadow: var(--rv-shadow); } #bf .bw-read[hidden] { display: none; } #bf .bw-read p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--rv-text); } #bf .bw-readx { flex: none; width: 28px; height: 28px; padding: 0; font-size: 18px; line-height: 1; color: var(--rv-text-3); } #bf .bf-banner { flex: none; margin: 0; } /* the two columns */ /* three columns from 1240px: the sentence | the chart over the range | the start card (Start always in view); below that the chart, the range and the start card share the right column's scroll */ #bf .bw-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(360px, 410px) minmax(0, 1fr); gap: var(--rv-sp-5); } #bf .bw-left, #bf .bw-mid, #bf .bw-side { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* the cards fill their column (one bottom edge); a panel with more below shows a fade at its edge (bot-write.js cues) */ #bf .bw-left > .bw-card, #bf .bw-side > .bw-card { min-height: 100%; } /* (a fade drawn over the panel's foot, not a mask: a mask would hold the start bar, which is fixed to the window, inside it) */ #bf .bw-more::after { content: ""; position: sticky; z-index: 2; bottom: 0; display: block; flex: none; height: 44px; margin-top: -44px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--rv-bg)); } #bf .bw-right { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 310px); gap: var(--rv-sp-5); } #bf .bw-mid { display: flex; flex-direction: column; gap: var(--rv-sp-4); } #bf .bw-card { background: var(--rv-surface); border: 1px solid var(--rv-line); border-radius: var(--rv-r-panel); box-shadow: var(--rv-card-shadow); padding: var(--rv-sp-5) 22px; box-sizing: border-box; } #bf .bw-ch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rv-sp-2) var(--rv-sp-3); min-height: 32px; } #bf .bw-ch .rv-sec-title { white-space: nowrap; } #bf .bw-coins { display: flex; flex-wrap: wrap; gap: 4px; } #bf .bw-coins .rv-pill { height: 30px; padding: 0 10px; font: 500 12px/1 var(--rv-font-fig); } #bf .bw-coins .bw-cs { width: 30px; padding: 0; justify-content: center; } #bf .bw-coins .bw-cs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } /* the sentence: every underlined word is a control (the accent underline), its knob below */ #bf .bw-s { margin: var(--rv-sp-4) 0 0; font: 500 clamp(19px, 1.65vw, 23px)/1.6 var(--rv-font-text); letter-spacing: -.015em; color: var(--rv-text); } #bf .bw-w { display: inline; font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; border-radius: 4px; padding: 0 2px; margin: 0 -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline; text-decoration-color: var(--rv-acc); text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; } #bf .bw-w:hover, #bf .bw-w.on { background: var(--rv-acc-soft); } #bf .bw-w:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; } #bf .bw-sx { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--rv-text-2); } #bf .bw-knobs { margin-top: var(--rv-sp-4); border-top: 1px solid var(--rv-line-soft); } #bf .bw-k { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--rv-sp-3); padding: 8px 0; border-bottom: 1px solid var(--rv-line-soft); } /* the knob in use: a mark in the card's margin (the label never moves) */ #bf .bw-k.on::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--rv-acc); } #bf .bw-kt { display: flex; align-items: center; gap: 4px; min-width: 0; } #bf .bw-kl { min-width: 0; padding: 0; border: 0; background: none; text-align: left; font: 500 15px/1.3 var(--rv-font-text); color: var(--rv-text); cursor: pointer; } #bf .bw-kc { display: flex; align-items: center; gap: 4px; } #bf .bw-kb { width: 44px; height: 44px; flex: none; border: 1px solid var(--rv-line); border-radius: 12px; background: transparent; color: var(--rv-text); font: 500 18px/1 var(--rv-font-text); cursor: pointer; } #bf .bw-kb:hover:not(:disabled) { border-color: var(--rv-line-strong); } #bf .bw-kb:disabled { opacity: .35; cursor: default; } #bf .bw-kv { display: flex; align-items: center; justify-content: center; gap: 3px; width: 128px; height: 44px; } #bf .bw-kv input { width: 84px; min-width: 0; padding: 4px 0; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 transparent; outline: 0; background: none; text-align: right; color: var(--rv-text); font: 500 15px var(--rv-font-fig); font-variant-numeric: tabular-nums; } #bf .bw-kv input:focus { box-shadow: inset 0 -1px 0 var(--rv-acc); } #bf .bw-kv input::placeholder { color: var(--rv-text-3); font: 400 14px var(--rv-font-text); } #bf .bw-kv .u { min-width: 0; color: var(--rv-text-3); font: 400 13px var(--rv-font-fig); white-space: nowrap; } #bf .bw-kv .u:empty { display: none; } #bf .bw-seg > button { height: 36px; } #bf .bw-kh { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--rv-text-2); } #bf .bw-kh[hidden] { display: none; } /* the live check */ #bf .bw-check > p { display: flex; align-items: flex-start; gap: 10px; margin: var(--rv-sp-3) 0 0; font-size: 14px; line-height: 1.5; } #bf .bw-check > p > span:first-child { flex: none; width: 14px; font-weight: 700; } #bf .bw-ok { color: var(--rv-text-2); } #bf .bw-ok > span:first-child { color: var(--rv-text-3); } #bf .bw-is.bad { color: var(--rv-down); } #bf .bw-is.warn { color: var(--rv-warn); } #bf .bw-fix { margin-left: 6px; height: 28px; vertical-align: middle; color: var(--rv-text); } #bf .bw-left .bf-blk:empty { display: none; } #bf .bw-left .bf-blk { margin-top: var(--rv-sp-3); } #bf .bw-ch .bw-pro { padding: 6px 0; font-size: 13px; font-weight: 500; color: var(--rv-text); } #bf .bw-coins { margin-top: var(--rv-sp-2); } #bf .bw-pnote { flex-basis: 100%; } #bf .bw-lfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rv-sp-2) var(--rv-sp-4); } #bf .bw-tostart { display: none; margin-top: var(--rv-sp-4); padding: 6px 0; font-size: 14px; } @media (max-width: 1239px) { #bf .bw-tostart { display: inline-flex; } } /* the pro view: the order list, then every setting (the builder's own editor, Advanced on) */ #bf .bw-pnote { display: block; font-size: 13px; color: var(--rv-text-3); } #bf .bw-orders { margin-top: var(--rv-sp-3); border-top: 1px solid var(--rv-line-soft); } #bf .bw-orders > summary { padding: 10px 0; font-weight: 500; cursor: pointer; } #bf .bw-orders [data-fw="orders"] { max-width: 100%; overflow-x: auto; } /* a phone: the table scrolls inside, never the page */ #bf .bw-orders .bb-st { font-size: 13px; } #bf .bw-orders .bb-st { width: 100%; min-width: max-content; table-layout: auto; } #bf .bw-orders .bb-st th { white-space: nowrap; font: 500 11px/1.3 var(--rv-font-text); letter-spacing: .02em; } #bf .bw-orders .bb-st td { white-space: nowrap; } #bf .bw-orders .bb-st tr.bb-st-now td[colspan] { white-space: normal; min-width: 0; } #bf .bw-orders .bb-st td, #bf .bw-orders .bb-st th { padding-top: 8px; padding-bottom: 8px; } #bf .bw-orders .bb-sn { margin: 0 0 6px; font-size: 12px; color: var(--rv-text-3); } #bf .bw-orders .bb-sx { display: grid; gap: 4px; margin: 10px 0; } #bf .bw-orders .bb-sx div { display: flex; justify-content: space-between; gap: 12px; } #bf .bw-orders .bb-sx dd { margin: 0; display: flex; gap: 8px; align-items: baseline; } #bf .bw-pcard .bb-set { border: 0; overflow: visible; } #bf .bw-pcard .bb-set .bf-czs { overflow: visible; padding: 0; } #bf .bw-pcard .bb-pane { display: none; } #bf .bw-pcard .bb-sh { background: var(--rv-surface); } #bf .bw-pcard .bb-advrow { display: none; } /* the chart: the plan's lines on the coin's real candles */ #bf .bw-chart { flex: 1 0 250px; min-height: 250px; display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--rv-sp-3); } #bf .bw-chart .bw-ch { flex-wrap: nowrap; } #bf .bw-chart .bw-ch .rv-sec-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #bf .bw-chart .bf-days { flex: none; margin-left: 0; } #bf .bw-chart .bf-stl { margin: 6px 0 0; } #bf .bw-chart .bf-chart { flex: 1 1 auto; min-height: 160px; margin-top: var(--rv-sp-3); height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; } #bf .bw-range { flex: none; } #bf .bw-tabs { gap: var(--rv-sp-4); border-bottom: 0; } #bf .bw-tabs > button { height: 32px; font-size: 13px; } #bf .bw-rsub { margin: 2px 0 0; font-size: 12px; color: var(--rv-text-3); } #bf .bw-hist { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin-top: var(--rv-sp-3); } #bf .bw-hist i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--rv-text); } #bf .bw-hist i.neg { background: var(--rv-down); opacity: .5; } #bf .bw-hist i.nil { background: var(--rv-line); } #bf .bw-hist.bw-sk i { height: 30%; background: var(--rv-surface-2); } #bf .bw-figs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rv-sp-3) var(--rv-sp-4); margin: var(--rv-sp-4) 0 0; } #bf .bw-figs dt { display: flex; align-items: center; gap: 2px; min-height: 20px; font-size: 12px; white-space: nowrap; color: var(--rv-text-3); } #bf .bw-figs dd { margin: 2px 0 0; display: flex; flex-direction: column; } #bf .bw-figs dd b { font-size: 20px; font-weight: 500; letter-spacing: -.02em; } #bf .bw-figs dd small { font-size: 12px; color: var(--rv-text-3); } #bf .bw-rn { margin: var(--rv-sp-3) 0 0; font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } #bf .bw-bt { margin-top: var(--rv-sp-3); } #bf .bw-bt .bf-bt { border: 0; padding: 0; background: none; } #bf .bw-runw { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } #bf .bw-runw b { font-weight: 600; font-size: 15px; } #bf .bw-runw span { font-size: 13px; color: var(--rv-text-3); } #bf .bw-runs { display: flex; gap: 6px; } #bf .bw-run { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left; border: 2px solid var(--rv-line); border-radius: 16px; background: transparent; color: var(--rv-text); cursor: pointer; font: 400 14px/1.4 var(--rv-font-text); } #bf .bw-run.on { border-color: var(--rv-text); background: var(--rv-surface-2); } #bf .bw-run b { font-size: 15px; font-weight: 600; } #bf .bw-run span { font-size: 12px; color: var(--rv-text-3); } #bf .bw-facts { margin: var(--rv-sp-3) 0 0; } #bf .bw-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-3); padding: 8px 0; border-bottom: 1px solid var(--rv-line-soft); font-size: 13px; } #bf .bw-facts dt { flex: none; display: flex; align-items: center; gap: 2px; color: var(--rv-text-2); } #bf .bw-facts dd { margin: 0; min-width: 0; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 6px; } #bf .bw-facts dd small { flex-basis: 100%; font-size: 12px; color: var(--rv-text-3); } /* the loss's notes (gaps, the worst past start, cross margin): one quiet paragraph under the row, read left to right */ #bf .bw-facts > div:has(.bw-ln) { flex-wrap: wrap; } #bf .bw-facts > div:has(.bw-ln) > dd { display: contents; } #bf .bw-facts > div:has(.bw-ln) > dd > b { margin-left: auto; } #bf .bw-facts .bw-ln { order: 3; flex-basis: 100%; margin-top: 2px; text-align: left; line-height: 1.45; } #bf .bw-facts .bw-ln > span { display: block; } #bf .bw-chg { font-size: 13px; } #bf .bw-start .bb-over:empty { display: none; } #bf .bw-start .bb-over { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--rv-sp-3); font-size: 13px; color: var(--rv-down); } /* the action: Start with its reason under it in the card (from 1240px); at the window's bottom as a bar on a laptop and a phone, with the loss at the stop beside it */ #bf .bw-act { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: var(--rv-sp-4); } #bf .bw-actt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: center; font-size: 12px; line-height: 1.45; } #bf .bw-actl { display: none; margin: 0; } #bf .bw-act .bf-offwhy { color: var(--rv-text-2); } #bf .bw-act .bf-offwhy:empty { display: none; } #bf .bw-act .bf-offwhy .bb-allow { font-size: 12px; text-decoration: underline; } #bf .bw-fine { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--rv-text-3); } #bf .bw-fine .bf-offwhy { color: var(--rv-text-2); } #bf .bw-fine .bf-offwhy:empty { display: none; } #bf .bw-fine .bf-offwhy .bb-allow { font-size: 12px; text-decoration: underline; } #bf .bw-sfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin-top: var(--rv-sp-3); padding-top: var(--rv-sp-3); border-top: 1px solid var(--rv-line-soft); font-size: 12px; color: var(--rv-text-3); } #bf .bw-sfoot .rv-more-b { height: 32px; } /* a laptop (~1000px): the range and the start card one under the other; the chart keeps a fixed height */ @media (max-width: 1239px) { #bf .bw-act { position: fixed; z-index: 53; left: 0; right: 0; bottom: var(--rv-tabbar-h, 0px); margin: 0; height: var(--bw-bar); box-sizing: border-box; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--rv-sp-4); padding: 0 var(--rv-edge); background: var(--rv-surface); border-top: 1px solid var(--rv-line); box-shadow: var(--rv-card-shadow); } #bf .bw-act .bw-go { flex: none; height: 46px; min-width: 200px; } #bf .bw-actt { text-align: left; } #bf .bw-actl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--rv-text-2); font-size: 13px; } #bf .bw-actl b { font-size: 15px; font-weight: 600; } #bf .bw-grid { grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); gap: var(--rv-sp-4); } #bf .bw-right { display: flex; flex-direction: column; gap: var(--rv-sp-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } #bf .bw-mid, #bf .bw-side { overflow: visible; flex: none; } #bf .bw-chart { flex: none; height: 330px; } } @media (max-width: 1180px) { #bf .bw-q { flex: 1 1 100%; } #bf .bw-exs { flex-basis: 100%; } } /* a phone: one column, the page scrolls; the phone tabs keep their room */ @media (max-width: 760px) { #bf .bw { gap: var(--rv-sp-3); padding: var(--rv-sp-4) var(--rv-edge) 0; } #bf .bw-head { align-items: flex-start; } #bf .bw { --bw-bar: 64px; padding-bottom: calc(var(--rv-tabbar-h, 0px) + var(--bw-bar) + var(--rv-sp-4)); } #bf .bw-types { flex-wrap: wrap; max-width: 100%; } #bf .bw-exs { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 6px; } #bf .bw-act .bw-go { min-width: 0; padding: 0 18px; } #bf .bw-chart .bw-ch { flex-wrap: wrap; } #bf .bw-chart .bw-ch .rv-sec-title { white-space: normal; overflow: visible; } #bf .bw-figs { display: grid; grid-template-columns: 1fr 1fr; } #bf .bw-figs dt { white-space: normal; } #bf .bw-left > .bw-card, #bf .bw-side > .bw-card { min-height: 0; } #bf .bw-k.on::before { left: -10px; } #bf .bw-types .rv-pill { flex: none; height: 36px; padding: 0 14px; font-size: 13px; } #bf .bw-q { min-width: 0; } #bf .bw-grid { display: flex; flex-direction: column; gap: var(--rv-sp-3); } #bf .bw-left, #bf .bw-right, #bf .bw-mid, #bf .bw-side { overflow: visible; } #bf .bw-card { padding: var(--rv-sp-4); border-radius: var(--rv-r-card-sm); } #bf .bw-s { font-size: 19px; } #bf .bw-kv { width: 116px; } #bf .bw-kv input { width: 78px; } #bf .bw-chart { height: 300px; } #bf .bw-pcard .bb-sh { position: static; } /* the page scrolls here: the section tabs never sit over the cards below */ }