/* Calculator-page-specific styles — loaded only on Calculator entries,
   on top of the active theme's site-wide style.css (header/footer/tokens
   are expected to already exist there). */

.breadcrumb{ font-size:12px; color:var(--ink-faint); padding:14px 0 0; }
.breadcrumb a:hover{ color:var(--ink-muted); }
.calc-page-head.compact{ display:flex; align-items:baseline; gap:12px; padding:8px 0 16px; }
.calc-page-head.compact h1{ font-size:26px; }
.eyebrow-inline{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-soft); padding:3px 9px; border-radius:5px; }

.byline-photo{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* One consolidated trust card (2026-09-21, "arrange it like
   omnicalculator, one small section for all of this") — author/dates,
   the helpfulness vote, and the share/embed/cite/report/Google row,
   previously three separate blocks (one right here, two much further
   down the page after the FAQ), now one bordered unit. */
.trust-card{ border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin:20px 0 32px; background:var(--surface); max-width:480px; }
.trust-card-header{ display:flex; align-items:flex-start; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.trust-card-author{ font-size:13px; color:var(--ink); padding-top:2px; }
.trust-card-author b{ color:var(--ink); font-weight:600; }
.trust-card-meta{ margin-top:4px; font-size:12px; color:var(--ink-faint); }
.trust-card-meta a{ color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px; }
.trust-card-meta a:hover{ color:var(--accent-strong); }
.trust-card-helpful{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.trust-card-helpful .helpful-count{ font-weight:500; color:var(--ink-muted); }
.trust-card-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-bottom:14px; }
.trust-icon-group{ display:flex; gap:8px; }
.icon-btn.labeled{ width:auto; padding:0 12px; }
.icon-btn:disabled{ opacity:.45; cursor:default; }
.icon-btn:disabled:hover{ color:var(--ink-muted); border-color:var(--border); }

/* the terminal panel: fixed dark, regardless of site theme — matches the
   MT4/MT5 platform traders already use (validated in forum research) */
.terminal{ background:var(--t-bg,#0B0E13); border:1px solid var(--t-line,#242D39); border-radius:16px; overflow:hidden; color:var(--t-ink,#E7EAEE); font-family:var(--font-body); box-shadow:var(--shadow-2); max-width:100%; }
.term-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--t-line,#242D39); background:var(--t-raised,#12171F); }
.term-instrument{ font-family:var(--font-mono); font-weight:600; font-size:14px; display:flex; align-items:center; gap:10px; }
.term-instrument .dot{ width:7px; height:7px; border-radius:50%; background:var(--t-up,#2FBE79); box-shadow:0 0 0 3px color-mix(in srgb,var(--t-up,#2FBE79) 20%,transparent); }
.term-body{ display:grid; grid-template-columns:1.6fr 1fr; }
@media (max-width:820px){ .term-body{ grid-template-columns:1fr; } }
/* Pure-arithmetic calculators with no price/instrument concept (Win Rate,
   Risk of Ruin, Drawdown, Rebate) skip the chart panel entirely — a
   single centered column reads better than a half-empty grid track. */
.term-body.ticket-only{ grid-template-columns:1fr; justify-items:center; }
.term-body.ticket-only .ticket{ width:100%; max-width:480px; }
/* Grid/flex children default to min-width:auto — refusing to shrink
   below their own content's natural width even when their track is
   sized smaller. Without this, the ticket's rows (SELL/BUY, paired
   fields) can render wider than the single mobile column and get
   silently clipped by .terminal's overflow:hidden, with no way to
   scroll to the cut-off part. */
.chart-and-bars, .ticket{ min-width:0; }
/* No fixed height on desktop (2026-09-22 fix) — the grid's default
   stretch alignment already makes this column match the ticket
   column's real height, which grew once the ticket gained two more
   rows; a hardcoded height here left that extra stretched space blank
   underneath a chart still rendered at its old fixed size in JS. Only
   the stacked mobile layout (below) needs an explicit height, since
   there's no taller sibling row for it to stretch to match there. */
.chart-and-bars{ position:relative; border-right:1px solid var(--t-line,#242D39); }
@media (max-width:820px){ .chart-and-bars{ height:320px; border-right:none; border-bottom:1px solid var(--t-line,#242D39); } }
#chart-container{ width:100%; height:100%; }

.tf-selector{ position:absolute; top:8px; left:8px; z-index:6; display:flex; gap:3px; background:color-mix(in srgb,var(--t-bg,#0B0E13) 70%,transparent); border:1px solid var(--t-line,#242D39); border-radius:7px; padding:3px; }
.tf-btn{ border:none; background:none; color:var(--t-muted,#8894A3); font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:4px 7px; border-radius:5px; }
.tf-btn:hover{ color:var(--t-ink,#E7EAEE); background:var(--t-field,#1A212B); }
.tf-btn.active{ background:var(--t-accent,#3FB6AC); color:var(--t-accent-ink,#06110F); }

/* Real vertical lines on the chart itself, drawn at the exact
   price-axis Y-coordinate of SL/Entry/TP (via priceToCoordinate) —
   red segment from SL to Entry, green segment from Entry to TP, each
   labeled with the live $ amount. Positioned with plain absolute CSS
   over the chart canvas since Lightweight Charts has no native
   "vertical bracket" drawing primitive. */
.rr-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; }
/* left is set dynamically in JS from the chart's real plot width, not a
   fixed % — a fixed % can land inside the library's own price-axis
   label gutter and get visually lost there. */
.rr-line{ position:absolute; width:3px; display:none; z-index:5; }
.rr-line.risk{ background:var(--t-down,#E5544A); }
.rr-line.reward{ background:var(--t-up,#2FBE79); }
.rr-line-value{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  white-space:nowrap; padding:2px 6px; border-radius:4px;
}
.rr-line.risk .rr-line-value{ color:var(--t-down,#E5544A); background:color-mix(in srgb,var(--t-down,#E5544A) 16%,transparent); }
.rr-line.reward .rr-line-value{ color:var(--t-up,#2FBE79); background:color-mix(in srgb,var(--t-up,#2FBE79) 16%,transparent); }

/* draggable price-line hint on the chart itself */
#chart-container{ cursor:default; }
#chart-container.draggable-hover{ cursor:ns-resize; }
#chart-container.dragging{ cursor:ns-resize; }

.ticket-error{
  background:color-mix(in srgb,var(--t-down,#E5544A) 14%,transparent); border:1px solid var(--t-down,#E5544A); color:var(--t-down,#E5544A);
  border-radius:8px; padding:9px 12px; font-size:12.5px; font-weight:600;
}
.tfield input.input-error, .tfield select.input-error{ border-color:var(--t-down,#E5544A); background:color-mix(in srgb,var(--t-down,#E5544A) 08%,transparent); }

.ticket{ padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.ticket .dir-row{ display:flex; gap:8px; min-width:0; }

/* Dark-ticket override for the shared "Search any symbol" widget
   (symbol-switcher.css) — that stylesheet uses the light theme's own
   --surface/--ink tokens so it matches the page it's dropped into
   elsewhere (calculator pages' page-level chrome, the home page), but the
   ticket itself is always dark regardless of site theme, and doesn't
   define those tokens as dark. Moved inside the ticket 2026-09-30 (user
   report: needs to be part of the widget itself, above SELL/BUY, so it
   travels with the ticket when just the ticket/chart is what gets
   embedded elsewhere — see TODO.md Phase 4 embed requirements) — same
   IDs/JS, just restyled for this dark context instead of the light one. */
.ticket .calc-switcher{ margin:0 0 4px; max-width:none; }
.ticket .calc-switcher-box input{ background:var(--t-field,#1A212B); border:1px solid var(--t-line,#242D39); color:var(--t-ink,#E7EAEE); font-size:13px; }
.ticket .calc-switcher-box input::placeholder{ color:var(--t-muted,#8894A3); font-size:11.5px; }
.ticket .calc-switcher-results{ background:var(--t-raised,#161C24); border:1px solid var(--t-line,#242D39); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.ticket .calc-switcher-result{ border-bottom:1px solid var(--t-line,#242D39); color:var(--t-ink,#E7EAEE); }
.ticket .calc-switcher-result:hover{ background:var(--t-field,#1A212B); }
.ticket .calc-switcher-result .sym{ color:var(--t-accent,#3FB6AC); }
.ticket .calc-switcher-msg{ color:var(--t-muted,#8894A3); }
.dir-btn{ flex:1; min-width:0; padding:9px 11px; border-radius:8px; text-align:center; border:1px solid var(--t-line,#242D39); background:var(--t-field,#1A212B); color:var(--t-muted,#8894A3); display:flex; flex-direction:column; align-items:center; gap:4px; }
.dir-btn-label{ font-weight:700; font-size:13.5px; letter-spacing:.02em; }
.dir-btn-price{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--t-muted,#8894A3); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-btn .price-val{ font-weight:700; }
.dir-btn.sell .price-val{ color:var(--t-down-text,#F06A60); }
.dir-btn.active.sell .dir-btn-label{ color:var(--t-down-text,#F06A60); }
.dir-btn.buy .price-val{ color:var(--t-up,#2FBE79); }
.dir-btn.active.sell{ background:color-mix(in srgb,var(--t-down,#E5544A) 18%,transparent); border-color:var(--t-down,#E5544A); color:var(--t-down,#E5544A); }
.dir-btn.active.buy{ background:color-mix(in srgb,var(--t-up,#2FBE79) 18%,transparent); border-color:var(--t-up,#2FBE79); color:var(--t-up,#2FBE79); }
.tfield{ display:flex; flex-direction:column; gap:5px; }
.tfield label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--t-muted,#8894A3); display:flex; align-items:center; justify-content:space-between; }
/* The label text was wrapping onto a second line on narrow screens
   (2026-09-26, reported: paired fields like "Stop loss (points)"/"Take
   profit (points)" wrapping under the (i) icon, even though the two
   fields themselves stayed correctly side-by-side) — a flex child has no
   default min-width:0, so text-overflow/nowrap never engaged; keep it on
   one line and ellipsis only in the genuinely-too-narrow case instead. */
.tfield label > span:not(.field-info):not(.field-info-group){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* Groups two field-info icons together (e.g. "what is this" + "why is it
   blank") so justify-content:space-between on the label treats them as one
   trailing unit instead of spreading them apart — must stay excluded from
   the overflow:hidden rule above, which would otherwise clip the icons'
   own hover tooltips since it establishes the containing block they sit in. */
.field-info-group{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.tfield input{ background:var(--t-field,#1A212B); border:1px solid var(--t-line,#242D39); border-radius:7px; padding:9px 10px; color:var(--t-ink,#E7EAEE); font-family:var(--font-mono); font-size:13.5px; font-weight:700; width:100%; }
.tfield input[readonly]{ color:var(--t-accent,#3FB6AC); background:var(--t-raised,#161C24); cursor:default; }
/* Placeholders (e.g. "Check MT4/MT5 Specification") are prose, not a typed
   value — the bold 13.5px mono value styling above made long placeholders
   overflow/clip instead of reading as a full instruction. */
.tfield input::placeholder{ font-family:var(--font-body); font-size:11px; font-weight:500; font-style:italic; color:#5B6672; }
.tfield select{ background:var(--t-field,#1A212B); border:1px solid var(--t-line,#242D39); border-radius:7px; padding:9px 10px; color:var(--t-ink,#E7EAEE); font-family:var(--font-body); font-size:13px; width:100%; }
.field-note{ font-size:11px; color:var(--t-muted,#8894A3); font-style:italic; }

/* Risk field's value+mode pairing (%, or a fixed account-currency
   amount) — the value side keeps its normal .num-input steppers, the
   mode select sits alongside it at a fixed, compact width. */
.compound-input{ display:flex; gap:6px; }
.compound-input .num-input{ flex:1; min-width:0; }
.compound-input select{ width:60px; flex:none; padding:9px 4px; text-align:center; }

/* SL/TP absolute-price vs pip/point-distance toggle — sits as its own
   thin right-aligned row directly above the Stop loss / Take profit
   pair so both fields keep matching single-line labels instead of one
   of them wrapping under an inline link (2026-09-22). */
.dist-mode-row{ display:flex; justify-content:flex-end; margin-top:-4px; }
.dist-mode-link{ font-size:11px; color:var(--t-accent,#3FB6AC); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.dist-mode-link:hover{ color:var(--t-ink,#E7EAEE); }

/* up/down steppers for the numeric fields — nudge the value by a small,
   field-appropriate increment instead of requiring the user to retype it. */
.num-input{ position:relative; }
.num-input input{ padding-right:34px; }
.num-steppers{ position:absolute; top:1px; right:1px; bottom:1px; width:30px; display:flex; flex-direction:column; border-left:1px solid var(--t-line,#242D39); }
.num-step-btn{ flex:1 1 50%; border:none; background:transparent; color:var(--t-muted,#8894A3); font-size:10px; line-height:1; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
.num-step-btn:first-child{ border-bottom:1px solid var(--t-line,#242D39); border-top-right-radius:6px; }
.num-step-btn:last-child{ border-bottom-right-radius:6px; }
.num-step-btn:hover{ color:var(--t-accent,#3FB6AC); background:color-mix(in srgb,var(--t-accent,#3FB6AC) 12%,transparent); }
/* On mobile the field itself is taller than desktop already via touch
   padding elsewhere, so make room for a genuinely tappable stepper
   instead of the ~9.5px-tall halves this was before (2026-09-20 fix,
   reported as too small to tap accurately). */
@media (max-width:600px){
  .num-input input{ padding-right:42px; }
  .num-steppers{ width:38px; }
  .num-step-btn{ font-size:13px; }
  /* Reclaims enough width for longer paired labels ("Account balance
     ($)", "Stop loss (points)") to actually fit on one line at real
     phone widths, rather than relying on ellipsis truncation alone. */
  .tfield label{ font-size:9.5px; letter-spacing:.03em; }
}

/* small "i" affordance next to each field label — hover/focus-triggered,
   custom-positioned (not the native title attribute) so long explanations
   render inside the ticket instead of clipping off the browser viewport. */
.field-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; border-radius:50%; border:1px solid var(--t-muted,#8894A3);
  color:var(--t-muted,#8894A3); font-size:9px; font-style:italic; font-family:var(--font-body);
  text-transform:none; cursor:help; position:relative; flex-shrink:0;
}
.field-info:hover, .field-info:focus{ color:var(--t-ink,#E7EAEE); border-color:var(--t-ink,#E7EAEE); outline:none; }
/* Warning variant — used for the "contract size not confirmed yet" note,
   which used to be a permanent block of text under the field (pushed the
   whole ticket taller); now just an amber icon carrying the same
   explanation in its tooltip, same pattern as every other .field-info. */
.field-info.warn{ font-style:normal; font-weight:700; border-color:#D9A441; color:#D9A441; }
.field-info.warn:hover, .field-info.warn:focus{ color:#F0C674; border-color:#F0C674; }
.field-info:hover::after, .field-info:focus::after{
  content:attr(data-tip);
  box-sizing:border-box;
  position:absolute; bottom:calc(100% + 7px); right:0;
  width:200px; max-width:60vw; transform:translateX(var(--tip-shift,0px));
  background:var(--t-field,#1A212B); border:1px solid var(--t-line,#242D39); border-radius:7px;
  padding:9px 11px; font-size:11px; font-weight:400; line-height:1.45;
  font-family:var(--font-body); font-style:normal;
  color:var(--t-ink,#E7EAEE); text-transform:none; letter-spacing:normal; white-space:normal;
  box-shadow:0 6px 18px rgba(0,0,0,.4); z-index:20;
}
/* near the top of the panel, opening upward would clip above the terminal —
   open this one downward instead. */
.field-info.below:hover::after, .field-info.below:focus::after{ bottom:auto; top:calc(100% + 7px); }
.entry-live-checkbox{ display:flex; align-items:center; gap:5px; text-transform:none; letter-spacing:normal; font-weight:500; }
.entry-live-checkbox.standalone{ font-family:var(--font-body); }
.entry-live-checkbox input[type="checkbox"]{ width:13px; height:13px; accent-color:var(--t-accent,#3FB6AC); margin:0; }
.entry-live-checkbox label{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--t-muted,#8894A3); cursor:pointer; }
.tfield-row{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.tfield-row .tfield{ flex:1 1 140px; min-width:0; }
.lots-readout{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--t-raised,#12171F); border:1px solid var(--t-line,#242D39); border-radius:8px; padding:10px 14px;
}
.lots-readout-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--t-muted,#8894A3); display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:7em; line-height:1.25; }
.lots-readout-value{ font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--t-accent,#3FB6AC); white-space:nowrap; flex:0 0 auto; margin-left:10px; }
/* "Units (trade size)" secondary readout (2026-09-26) — always computable
   without a confirmed contract size, unlike Suggested Lots above it, so
   it's styled a step quieter to read as supporting info, not the primary
   answer. */
.lots-readout.secondary{ padding:8px 14px; background:transparent; border-style:dashed; }
.lots-readout.secondary .lots-readout-value{ font-size:14px; color:var(--t-muted,#8894A3); }
.tfield-row[hidden], .tfield[hidden]{ display:none; }
.pp-levels{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pp-lvl{ display:flex; flex-direction:column; gap:2px; background:var(--t-raised,#12171F); border:1px solid var(--t-line,#242D39); border-radius:8px; padding:7px 10px; min-width:0; }
.pp-lvl span{ font-size:10px; letter-spacing:.06em; color:var(--t-muted,#8894A3); font-weight:600; }
.pp-lvl b{ font-family:var(--font-mono); font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.pp-lvl.res b{ color:var(--t-down,#E5544A); }
.pp-lvl.sup b{ color:var(--t-up,#2FBE79); }
.ticket .calc-btn{ background:var(--t-accent,#3FB6AC); color:var(--t-accent-ink,#06110F); font-weight:700; border-radius:8px; padding:11px; font-size:13.5px; border:none; margin-top:2px; }
.status-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--t-line,#242D39); border-top:1px solid var(--t-line,#242D39); }
@media (max-width:820px){ .status-strip{ grid-template-columns:repeat(3,1fr); }
  /* the last cell takes the rest of its row, so no empty grey square is left */
  .status-strip:not(.cols-3):not(.cols-4) > .status-cell:nth-child(5):last-child{ grid-column:span 2; }
  .status-strip:not(.cols-3):not(.cols-4) > .status-cell:nth-child(4):last-child{ grid-column:span 3; } }
.status-cell{ background:var(--t-raised,#12171F); padding:13px 16px; min-width:0; }
.status-cell .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--t-muted,#8894A3); margin-bottom:4px; line-height:1.25; overflow-wrap:break-word; }
.status-cell .v{ font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--t-ink,#E7EAEE); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-cell .v.accent{ color:var(--t-accent,#3FB6AC); }

.content-block{ padding:26px 0; border-bottom:1px solid var(--border); }
.content-block:last-of-type{ border-bottom:none; }
.content-block h2, .content-block h3{ font-size:19px; margin-bottom:10px; }
.content-block p{ color:var(--ink-muted); max-width:70ch; }
/* A formula/calculation set apart from prose as its own standalone block —
   deliberately NOT a bullet list (bullets are for enumerations; a formula
   is one calculation read top-to-bottom) and NOT buried inline in a
   sentence. Each "= ..." continuation line sits on its own row so the
   math is the thing that visually stands out. 2026-10-01. */
.formula-block{ background:var(--surface-2); border-left:3px solid var(--t-accent,#3FB6AC); border-radius:8px; padding:14px 18px; margin:16px 0; max-width:70ch; }
.formula-line{ font-family:var(--font-mono); font-size:14.5px; color:var(--ink); line-height:1.7; white-space:pre-wrap; }
.formula-line:not(:first-child){ padding-left:1.5em; color:var(--ink-muted); }
.formula-gap{ height:10px; }
.formula-gap + .formula-line{ padding-left:0; color:var(--ink); }
.content-list{ color:var(--ink-muted); max-width:70ch; margin:12px 0; padding-left:22px; }
.content-list li{ margin-bottom:6px; }
.worked-example{ background:var(--surface-2); border-radius:11px; padding:16px 18px; margin-top:14px; font-size:14px; }
.worked-example .wl{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--border-strong); }
.worked-example .wl:last-child{ border-bottom:none; font-weight:600; }
/* .worked-example's own colors (--surface-2 etc.) are page-level light-
   theme tokens, meant for the written-content area below the ticket —
   using the same class for Fibonacci's level list INSIDE the
   always-dark .ticket (2026-10-01) needs the same real-hex dark override
   already established for .calc-switcher, or it renders near-invisible
   light-on-light text. */
.ticket .worked-example{ background:var(--t-field,#1A212B); }
.ticket .worked-example .wl{ border-bottom-color:var(--t-line,#242D39); color:var(--t-ink,#E7EAEE); }
.ticket .worked-example .wl span:first-child{ color:var(--t-muted,#8894A3); }
.ticket .worked-example .wl:last-child{ color:var(--t-accent,#3FB6AC); }
.callout{ display:flex; gap:12px; background:#F6E9D2; border:1px solid rgba(184,121,31,.35); border-radius:11px; padding:16px 18px; margin-top:16px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .callout{ background:rgba(217,162,75,.15); } }
:root[data-theme="dark"] .callout{ background:rgba(217,162,75,.15); }
.callout .ci{ font-size:17px; }
.callout strong{ display:block; margin-bottom:3px; font-size:13.5px; }
.callout p{ margin:0; font-size:13px; color:var(--ink-muted); }

.faq-item{ border-bottom:1px solid var(--border); }
.faq-item summary{ padding:16px 4px; font-weight:600; font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-mono); color:var(--ink-faint); font-size:18px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding:0 4px 18px; color:var(--ink-muted); max-width:68ch; }

.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; font-weight:600; font-size:14.5px; }

.embed-cta{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:22px 26px; margin:36px 0; }
.cta-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.cta-head h2, .cta-head h3{ font-size:16.5px; }

/* Table of contents + helpfulness widget (2026-09-20) — supporting
   content added around the calculator to close the omnicalculator.com/
   getknowtrading.com benchmark gaps in TODO.md Phase 3; the calculator
   terminal itself above is untouched. */
.calc-toc{ border:1px solid var(--border); border-radius:10px; padding:14px 18px 16px; margin-bottom:26px; background:var(--surface); max-width:360px; }
.calc-toc-heading{ display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:8px; }
.calc-toc ol{ margin:0; padding-left:20px; }
.calc-toc li{ margin-bottom:6px; font-size:13.5px; }
.calc-toc li:last-child{ margin-bottom:0; }
.calc-toc a{ color:var(--ink-muted); text-decoration:none; }
.calc-toc a:hover{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }

.helpful-label{ font-size:13.5px; font-weight:600; color:var(--ink); }
.helpful-count{ font-size:12.5px; color:var(--ink-muted); }

/* Trust-block icon row + Google preferred-source button (2026-09-21) */
.icon-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink-muted); cursor:pointer; text-decoration:none; }
.icon-btn:hover{ color:var(--accent-strong); border-color:var(--accent-strong); }
.icon-btn svg{ width:16px; height:16px; }
.google-preferred-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
.google-preferred-btn:hover{ border-color:var(--border-strong); }

/* Phase 4 additions (2026-09-25) — the 7 non-Lot-Size calculator types
   (templates/parts/ticket-*.php + assets/calc-*.js) reuse every class
   above unchanged (.terminal/.ticket/.tfield/.status-strip/etc.) but a
   few of them need status-strip layouts other than the original fixed
   5-column one, semantic up/down coloring on a status/readout value
   (Margin's leverage, P&L's result, Compounding's growth are the first
   places this project has needed green/red on something other than a
   dir-btn or an rr-line), and Pivot Points' method switcher (a new
   control, since Pivot Points didn't exist before — styled from the
   same tf-btn/dir-btn visual language rather than inventing a new one). */
.status-strip.cols-3{ grid-template-columns:repeat(3,1fr); }
.status-strip.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .status-strip.cols-3, .status-strip.cols-4{ grid-template-columns:repeat(2,1fr); } .status-strip.cols-3 > .status-cell:last-child:nth-child(odd), .status-strip.cols-4 > .status-cell:last-child:nth-child(odd){ grid-column:1 / -1; } }
.status-cell .v.up{ color:var(--t-up,#2FBE79); }
.status-cell .v.down{ color:var(--t-down,#E5544A); }
.lots-readout-value.up{ color:var(--t-up,#2FBE79); }
.lots-readout-value.down{ color:var(--t-down,#E5544A); }

.method-tabs{ display:flex; gap:6px; }
.method-tab{ flex:1; padding:8px; border-radius:7px; border:1px solid var(--t-line,#242D39); background:var(--t-field,#1A212B); color:var(--t-muted,#8894A3); font-size:11px; font-weight:600; cursor:pointer; text-align:center; font-family:var(--font-body); }
.method-tab.active{ background:color-mix(in srgb,var(--t-accent,#3FB6AC) 18%,transparent); border-color:var(--t-accent,#3FB6AC); color:var(--t-accent,#3FB6AC); }


/* ---- Small-window fitting (2026-10-05, reported: clipped placeholders and
   numbers, large numbers wrapping, timeframe buttons over the price axis) ---- */

/* Paired fields stack as soon as the ticket itself is narrow — measured on
   the ticket, not the window, because the ticket is only ~30% of a tablet-
   width window but the full width of a phone. */
.ticket{ container-type:inline-size; }

/* Output labels wrap instead of ellipsing; numbers stay on one line and are
   shrunk to fit by calc-fit.js (never wrapped onto a second row). */
.status-cell .v, .lots-readout-value, .pp-lvl b{ white-space:nowrap; }
.pp-lvl b{ overflow-wrap:normal; }
@media (max-width:600px){
  .status-cell{ padding:11px 11px; }
  .lots-readout{ padding:10px 12px; }
}
@media (max-width:480px){
  .status-strip{ grid-template-columns:repeat(2,1fr); }
  .status-strip > .status-cell:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Timeframe buttons stay clear of the price axis on the right. */
.tf-selector{ max-width:calc(100% - 96px); overflow-x:auto; scrollbar-width:none; }
.tf-selector::-webkit-scrollbar{ display:none; }
.tf-btn{ flex:0 0 auto; }
@media (max-width:480px){
  .tf-selector{ gap:1px; top:6px; left:6px; padding:2px; max-width:calc(100% - 66px); }
  .tf-btn{ padding:4px 5px; font-size:10px; }
}
@media (max-width:380px){
  .tf-btn{ padding:4px 3.5px; font-size:9.5px; }
}
.chart-note{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; max-width:80%; text-align:center; font-size:12px; color:var(--t-muted,#8894A3); background:color-mix(in srgb,var(--t-bg,#0B0E13) 85%,transparent); border:1px solid var(--t-line,#242D39); border-radius:7px; padding:8px 12px; pointer-events:none; }

/* Trust-card icons carry a visible caption so nobody has to guess. */
.trust-card-actions{ align-items:flex-start; }
.trust-icon-group{ display:flex; gap:6px; align-items:flex-start; }
.icon-btn[data-label]{ width:auto; min-width:54px; height:auto; flex-direction:column; gap:4px; padding:7px 8px 6px; }
.icon-btn[data-label]::after{ content:attr(data-label); font-family:var(--font-body); font-size:10.5px; line-height:1.1; font-weight:500; white-space:nowrap; }
.icon-btn.labeled[data-label]{ padding:7px 8px 6px; }

/* Contract-size help: popover with steps + a picture of the MT4/MT5
   Specification window, opened by hover, tap, or keyboard focus. */
.help-link{ align-self:flex-start; background:none; border:none; padding:2px 0; color:var(--t-accent,#3FB6AC); font-family:var(--font-body); font-size:11.5px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.help-link:hover, .help-link:focus-visible{ color:var(--t-ink,#E7EAEE); }
.cfx-pop{ position:fixed; z-index:9999; width:min(340px, calc(100vw - 24px)); background:var(--t-raised,#12171F); color:var(--t-ink,#E7EAEE); border:1px solid var(--t-accent,#3FB6AC); border-radius:10px; padding:14px 14px 12px; font-family:var(--font-body); font-size:12.5px; line-height:1.5; box-shadow:0 12px 32px rgba(0,0,0,.5); text-transform:none; letter-spacing:normal; font-style:normal; font-weight:400; }
.cfx-pop[hidden]{ display:none; }
.cfx-pop h4{ margin:0 22px 8px 0; font-size:13.5px; font-weight:700; color:var(--t-ink,#E7EAEE); }
.cfx-pop ol{ margin:0 0 10px; padding-left:18px; }
.cfx-pop li{ margin-bottom:3px; }
.cfx-pop svg{ display:block; width:100%; height:auto; margin:0 0 10px; border-radius:6px; }
.cfx-pop .cfx-pop-why{ color:var(--t-muted,#8894A3); font-size:11.5px; margin:0; border-top:1px solid var(--t-line,#242D39); padding-top:8px; }
.cfx-pop-close{ position:absolute; top:6px; right:8px; width:26px; height:26px; border:none; background:none; color:var(--t-muted,#8894A3); font-size:18px; line-height:1; cursor:pointer; border-radius:6px; }
.cfx-pop-close:hover{ color:var(--t-ink,#E7EAEE); background:var(--t-field,#1A212B); }
.field-info[data-help]{ width:16px; height:16px; font-size:10px; cursor:pointer; }
.field-info[data-help]::before{ content:''; position:absolute; inset:-9px; }
.field-info[data-help]:hover::after, .field-info[data-help]:focus::after{ display:none; }
.method-tabs{ flex-wrap:wrap; }
.method-tab{ flex:1 1 auto; min-width:0; }

/* Anonymous comment box inside the helpful card (2026-10-05) */
.trust-feedback{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line, rgba(128,128,128,.25)); display:flex; flex-direction:column; gap:8px; }
.trust-feedback[hidden]{ display:none; }
.trust-feedback-label{ font-size:13px; font-weight:600; color:var(--ink); }
.trust-feedback textarea{ width:100%; box-sizing:border-box; min-height:72px; resize:vertical; padding:8px 10px; font:inherit; font-size:14px; color:var(--ink); background:var(--bg, transparent); border:1px solid var(--line, rgba(128,128,128,.4)); border-radius:6px; }
.trust-feedback textarea:focus{ outline:2px solid var(--t-accent,#3FB6AC); outline-offset:1px; }
.trust-feedback-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.trust-feedback-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.trust-feedback-send{ padding:7px 16px; font:inherit; font-size:13px; font-weight:600; color:#fff; background:#1f7a72; border:0; border-radius:6px; cursor:pointer; }
.trust-feedback-send:disabled{ opacity:.6; cursor:default; }
.trust-feedback-note{ font-size:12.5px; color:var(--ink-muted); }
.trust-feedback-thanks{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); }

/* Popup shown when someone tries to edit the entry while Live price is on (2026-10-05) */
.cfx-live-notice{ width:min(300px, calc(100vw - 16px)); padding:12px 14px; }
.cfx-live-notice p{ margin:0 0 10px; }
.cfx-live-notice .cfx-live-off{ padding:7px 14px; font:inherit; font-size:12.5px; font-weight:700; color:var(--t-accent-ink,#06110F); background:var(--t-accent,#3FB6AC); border:0; border-radius:6px; cursor:pointer; }
.cfx-live-notice .cfx-live-off:hover{ background:#5BCBC1; }
.terminal:has(.term-body.no-chart){ max-width:560px; margin-inline:auto; }

.lots-readout-value.needs-contract{ cursor:pointer; user-select:none; -webkit-user-select:none; }
.lots-readout-label .field-info.warn[hidden]{ display:none; }

/* Deriv ticket: validation list + long readouts */
.ticket-error[hidden]{ display:none; }
.ticket-error ul{ margin:6px 0 0 18px; padding:0; font-weight:500; }
.deriv-terminal .lots-readout-value{ white-space:normal; text-align:right; }
.deriv-terminal select{ width:100%; }

/* ---- Compact ticket (2026-10-06, user request: two fields per row where they
   fit, less vertical height, chart column a bit narrower) ---- */
.term-body{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
@media (max-width:820px){ .term-body{ grid-template-columns:1fr; } }
.term-top{ padding:9px 16px; }
.ticket{ padding:14px; gap:9px; }
.tfield{ gap:4px; }
.tfield input, .tfield select{ padding:7px 9px; }
.num-input input{ padding-right:34px; }
.dir-btn{ flex-direction:row; justify-content:center; gap:8px; padding:6px 10px; }
.dir-btn-label{ font-size:13px; }
.ticket .calc-btn{ padding:9px; margin-top:0; }
.lots-readout{ padding:7px 12px; }
.lots-readout.secondary{ padding:6px 12px; }
.lots-readout-value{ font-size:16px; }
.readouts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.readouts .lots-readout{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; margin:0; min-width:0; }
.readouts .lots-readout-label{ min-width:0; flex:0 0 auto; font-size:10.5px; }
.readouts .lots-readout-value{ margin-left:0; }
.status-cell{ padding:9px 14px; }
.ticket-error{ padding:7px 10px; }
.tfield-row.entry-row .dist-cell{ justify-content:flex-start; align-self:flex-start; padding-top:19px; }
.dist-cell .dist-mode-link{ display:flex; align-items:center; height:32px; line-height:1.25; }
@container (max-width:300px){
  .tfield-row{ flex-direction:column; gap:9px; }
  .tfield-row .tfield{ flex:none; width:100%; }
  .readouts{ grid-template-columns:1fr; }
  .tfield-row.entry-row .dist-cell{ padding-top:0; }
  .dist-cell .dist-mode-link{ height:auto; }
}

.terminal:has(.term-body.no-chart) .term-body.ticket-only .ticket{ max-width:none; }

/* Calculate feedback: confirm the click even when results are already live */
.calc-btn.is-done{ filter:brightness(1.08); }
@keyframes cfxFlash{ 0%{ box-shadow:0 0 0 2px var(--accent, #3bb3a5); } 100%{ box-shadow:0 0 0 2px transparent; } }
.cfx-flash{ animation:cfxFlash .9s ease-out; }
@media (prefers-reduced-motion:reduce){ .cfx-flash{ animation:none; } }

/* Compounding breakdown table (2026-10-07) */
.cmp-breakdown{ border-top:1px solid var(--t-line,#242D39); padding:14px 16px 12px; }
.cmp-breakdown-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; color:var(--t-ink,#E7EAEE); }
.cmp-by{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--t-muted,#8894A3); text-transform:uppercase; letter-spacing:.06em; }
.cmp-by select{ width:auto; }
.cmp-table-wrap{ max-height:420px; overflow:auto; border:1px solid var(--t-line,#242D39); border-radius:8px; }
.cmp-table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.cmp-table th{ position:sticky; top:0; background:var(--t-raised,#12171F); color:var(--t-muted,#8894A3); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; text-align:right; padding:8px 12px; white-space:nowrap; }
.cmp-table td{ text-align:right; padding:7px 12px; border-top:1px solid var(--t-line,#242D39); color:var(--t-ink,#E7EAEE); white-space:nowrap; }
.cmp-table th:first-child, .cmp-table td:first-child{ text-align:left; }
.cmp-table td:last-child{ font-weight:700; }
.cmp-note{ margin:8px 0 0; font-size:12px; color:var(--t-muted,#8894A3); }
.cmp-note:empty{ display:none; }