/* tools.html — Forex Trading Calculators (hand-built: templates/pages/tools.html).
js/calculators.js works by id and adds .active to #ps-result / #pv-result / #rr-result. */
:root.page-tools body .tl-top {
position: relative; overflow: hidden; padding: 56px 0 72px;
background: linear-gradient(180deg, #fff, var(--paper)); border-bottom: 1px solid var(--rule);
}
:root.page-tools body .tl-top::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(rgba(7,24,39,.045) 1px, transparent 1px) 0 0 / 100% 64px;
}
:root.page-tools body .tl-top .wrap { position: relative; }
:root.page-tools body .tl-title { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 18px 0 18px; }
:root.page-tools body .tl-title em { font-style: italic; color: var(--blue); }
:root.page-tools body .tl-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
:root.page-tools body .tl-jump a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule);
border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--navy);
transition: background .2s, color .2s, border-color .2s;
}
:root.page-tools body .tl-jump a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* calculator panels */
:root.page-tools body .tl-main-sec { padding: 72px 0 96px; }
:root.page-tools body .tl-calc {
background: #fff; border: 1px solid var(--rule); margin-bottom: 40px; scroll-margin-top: 96px;
box-shadow: 0 30px 50px -40px rgba(7,24,39,.45);
}
:root.page-tools body .tl-calc-head { display: flex; gap: 22px; align-items: center; padding: 30px 36px 26px; border-bottom: 1px solid var(--rule); }
:root.page-tools body .tl-n { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1; color: var(--blue); }
:root.page-tools body .tl-calc-head h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 0 0 4px; }
:root.page-tools body .tl-calc-head p { margin: 0; color: var(--ink-3); font-size: 16px; }
:root.page-tools body .tl-calc-body { display: grid; grid-template-columns: 1.15fr 1fr; }
:root.page-tools body .tl-form { padding: 32px 36px 36px; }
:root.page-tools body .tl-field { margin-bottom: 18px; }
:root.page-tools body .tl-field label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
:root.page-tools body .tl-form :is(input, select) { min-height: 48px; font-variant-numeric: tabular-nums; }
:root.page-tools body .tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
:root.page-tools body .tl-go { width: 100%; min-height: 52px; margin-top: 8px; }
/* results: a quiet panel until a calculation runs, then navy */
:root.page-tools body .tl-out { background: var(--cloud); border-left: 1px solid var(--rule); padding: 32px 36px; display: flex; flex-direction: column; transition: background .4s var(--ease); }
:root.page-tools body .tl-out-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
:root.page-tools body .tl-result { flex: 1; display: flex; flex-direction: column; justify-content: center; }
:root.page-tools body .tl-res-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
:root.page-tools body .tl-res-row:last-child { border-bottom: 0; }
:root.page-tools body .tl-res-label { font-size: 14.5px; color: var(--ink-2); }
:root.page-tools body .tl-res-value { font-size: 18px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
:root.page-tools body .tl-res-value.tl-main { font-family: var(--sans); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-3); }
:root.page-tools body .tl-out:has(.tl-result.active) { background: var(--navy); }
:root.page-tools body .tl-out:has(.tl-result.active) .tl-out-label { color: var(--blue-light); }
:root.page-tools body .tl-result.active .tl-res-row { border-bottom-color: rgba(255,255,255,.12); }
:root.page-tools body .tl-result.active .tl-res-label { color: #C7D6E2; }
:root.page-tools body .tl-result.active .tl-res-value { color: #fff; }
:root.page-tools body .tl-result.active .tl-res-value.tl-main { color: var(--blue-light); }
/* the script colours a poor risk/reward ratio inline (#ff6b6b); keep it readable on navy */
:root.page-tools body .tl-result.active #rr-ratio[style*="255, 107, 107"] { color: #FF9A8A !important; }
:root.page-tools body .tl-result.active #rr-ratio[style*="47, 128, 237"] { color: var(--blue-light) !important; }
/* how to use */
:root.page-tools body .tl-how { padding: 26px 36px 30px; border-top: 1px solid var(--rule); }
:root.page-tools body .tl-how h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-text); margin: 0 0 14px; }
:root.page-tools body .tl-how ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
:root.page-tools body .tl-how li { counter-increment: s; position: relative; padding-top: 30px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
:root.page-tools body .tl-how li::before {
content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
:root.page-tools body .tl-note { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid #C0503A; padding: 20px 24px; }
:root.page-tools body .tl-note p { margin: 0; font-size: 14.5px; }
/* cta */
:root.page-tools body section.cta h2 { font-size: clamp(30px, 3.4vw, 44px); }
:root.page-tools body section.cta .btn-group { margin-top: 26px; }
:root.page-tools body .tl-risk { font-size: 13px; margin: 28px 0 0; max-width: 52em; color: #9FB0C2 !important; }
:root.page-tools body .tl-risk a { color: #fff; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
:root.page-tools body .tl-out { transition: none; }
}
@media (max-width: 960px) {
:root.page-tools body .tl-calc-body { grid-template-columns: 1fr; }
:root.page-tools body .tl-out { border-left: 0; border-top: 1px solid var(--rule); }
:root.page-tools body .tl-how ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
:root.page-tools body .wrap { padding: 0 16px; }
:root.page-tools body .tl-top { padding: 36px 0 48px; }
:root.page-tools body .tl-main-sec { padding: 40px 0 64px; }
:root.page-tools body .tl-calc-head { padding: 22px 20px 20px; gap: 16px; align-items: flex-start; }
:root.page-tools body .tl-n { font-size: 34px; }
:root.page-tools body .tl-form, :root.page-tools body .tl-out { padding: 24px 20px; }
:root.page-tools body .tl-how { padding: 22px 20px 24px; }
:root.page-tools body .tl-how ol { grid-template-columns: 1fr; gap: 12px; }
:root.page-tools body .tl-how li { padding: 1px 0 0 34px; }
:root.page-tools body .tl-res-value.tl-main { font-size: 26px; }
:root.page-tools body section.cta .container { padding: 0 16px; }
}
@media (max-width: 420px) {
:root.page-tools body .tl-row { grid-template-columns: 1fr; gap: 0; }
}