/* ============================================================
   ForexFa — broker compare (/brokers/compare/) + methodology (/methodology/)
   Builds on tokens/components in forexfa.css. Prefixes: fxc- (compare), fxm- (methodology)
   ============================================================ */

/* ---------------------------------------------------------------- compare */
.fxc-head{display:flex;align-items:flex-end;gap:18px;padding:14px var(--fx-gutter) 0;flex-wrap:wrap}
.fxc-head__txt{min-width:0;flex:1}
.fxc-h1{font-size:25px;margin:0}
.fxc-lead{font-size:13px;line-height:1.9;color:var(--fx-text-2);margin-top:6px;max-width:760px}
.fxc-head__end{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
.fxc-cap{font-size:11.5px;color:var(--fx-muted);white-space:nowrap}
.fxc-head__end .fx-btn{font-size:12.5px;padding:8px 16px}
.fxc-share.is-done{color:var(--fx-green-2);border-color:var(--fx-green-border);background:var(--fx-green-bg)}

.fxc-warn{margin:14px var(--fx-gutter) 0;padding:10px 16px;border-radius:12px;background:var(--fx-red-bg);border:1px solid var(--fx-red-border);color:var(--fx-red-text);font-size:12px;line-height:1.9}
.fxc-emptywrap{padding:18px var(--fx-gutter) 34px;max-width:560px}

/* auto verdict (2 brokers) */
.fxc-verdict{margin:18px var(--fx-gutter) 0;padding:18px 22px;border:1px solid var(--fx-tint-border);background:var(--fx-tint-bg);border-radius:16px}
.fxc-verdict__k{font-size:11px;font-weight:700;color:var(--fx-primary);margin-bottom:6px}
.fxc-verdict__p{font-size:14px;line-height:2.1;color:var(--fx-ink)}
.fxc-verdict__foot{font-size:11.5px;color:var(--fx-muted);margin-top:10px;line-height:1.9}

/* tools row */
.fxc-tools{display:flex;align-items:center;gap:16px;padding:18px var(--fx-gutter) 0;flex-wrap:wrap}
.fxc-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.fxc-toggle input{position:absolute;opacity:0;width:0;height:0}
.fxc-toggle__ui{width:34px;height:19px;border-radius:999px;background:var(--fx-border);position:relative;transition:background .15s;flex:none}
.fxc-toggle__ui::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;background:var(--fx-surface);box-shadow:var(--fxc-knob-shadow);transition:transform .15s}
.fxc-toggle input:checked + .fxc-toggle__ui{background:var(--fx-primary)}
.fxc-toggle input:checked + .fxc-toggle__ui::after{transform:translateX(-15px)}
.fxc-toggle input:focus-visible + .fxc-toggle__ui{outline:2px solid var(--fx-primary);outline-offset:2px}
.fxc-toggle__t{font-size:12.5px;font-weight:700}
.fxc-tools__n,.fxc-tools__legend{font-size:11.5px;color:var(--fx-muted)}
.fxc-tools__legend{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px}
.fxc-win-dot{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--fx-green-bg);color:var(--fx-green-2);font-size:10px;font-weight:800}

/* matrix ----------------------------------------------------------------- */
.fxc-wrap{margin:14px var(--fx-gutter) 28px;border:1px solid var(--fx-border);border-radius:16px;background:var(--fx-surface);overflow:visible}
.fxc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;line-height:1.85;table-layout:fixed}
.fxc-table th,.fxc-table td{text-align:right;vertical-align:top}

/* header row */
.fxc-headrow th{position:sticky;top:0;z-index:3;background:var(--fx-surface);border-bottom:1px solid var(--fx-border);padding:16px 16px 14px}
.fxc-corner{width:220px;position:sticky!important;inset-inline-start:0;z-index:5!important;background:var(--fx-fill)!important;font-size:11.5px;color:var(--fx-muted);font-weight:600;border-inline-end:1px solid var(--fx-hair)}
.fxc-col{position:relative;border-inline-start:1px solid var(--fx-hair)}
.fxc-col.is-pick{background:var(--fx-tint-bg)!important}
.fxc-ribbon{position:absolute;top:0;inset-inline-end:14px;background:var(--fx-primary);color:#fff;font-size:9.5px;font-weight:700;padding:3px 10px;border-radius:0 0 8px 8px;line-height:1.6}
.fxc-col__logo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--fx-fill);border:1px solid var(--fx-hair);color:var(--fx-text-2);font-weight:700;font-size:13px;overflow:hidden;margin-bottom:9px}
.fxc-col__logo img{width:40px;height:40px;object-fit:contain}
.fxc-col__name{display:block;font-weight:700;font-size:15px;color:var(--fx-ink);text-align:right}
.fxc-col__name:hover{color:var(--fx-primary)}
.fxc-col__score{display:flex;align-items:baseline;gap:5px;margin-top:3px}
.fxc-col__score b{font-family:var(--fx-font-latin);font-weight:700;font-size:19px;color:var(--fx-primary)}
.fxc-col__score span{font-size:10.5px;color:var(--fx-muted)}
.fxc-col__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.fxc-col__rm{display:inline-block;margin-top:9px;font-size:10.5px;color:var(--fx-faint)}
.fxc-col__rm:hover{color:var(--fx-red)}

/* group heading row */
.fxc-grp th{background:var(--fx-fill);border-top:1px solid var(--fx-border);border-bottom:1px solid var(--fx-hair);padding:9px 16px}
.fxc-grp__in{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;position:sticky;inset-inline-start:16px}
.fxc-grp__t{font-family:var(--fx-font-head);font-weight:800;font-size:14px;color:var(--fx-ink)}
.fxc-grp__s{font-size:11px;color:var(--fx-muted);font-weight:400}

/* body rows */
.fxc-lab{position:sticky;inset-inline-start:0;z-index:2;background:var(--fx-surface);border-inline-end:1px solid var(--fx-hair);border-bottom:1px solid var(--fx-hair);padding:11px 16px;width:220px}
.fxc-lab__t{display:block;font-size:11.5px;color:var(--fx-text-2);font-weight:600;line-height:1.8}
.fxc-lab__n{display:block;font-size:10px;color:var(--fx-faint);margin-top:1px}
.fxc-lab--foot{background:var(--fx-fill);border-bottom:0}
.fxc-cell{border-inline-start:1px solid var(--fx-hair);border-bottom:1px solid var(--fx-hair);padding:11px 16px;position:relative;color:var(--fx-ink)}
.fxc-cell.is-pick{background:var(--fxc-pick-bg)}
.fxc-cell.is-win{background:var(--fx-green-bg)}
.fxc-cell--foot{border-bottom:0;padding:14px 16px}
.fxc-row:last-child .fxc-cell,.fxc-row:last-child .fxc-lab{border-bottom:1px solid var(--fx-hair)}
.fxc-win{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--fx-green);color:#fff;font-size:9.5px;font-weight:800;margin-inline-end:6px;vertical-align:1px}
.fxc-dash{color:var(--fx-faint)}
.fxc-ltr{font-weight:700}
.fxc-cell small,.fxc-kv small{font-size:10.5px;color:var(--fx-muted);font-weight:400}
.fxc-chip{font-size:10.5px;padding:2px 9px}
.fxc-score{font-family:var(--fx-font-latin);font-weight:800;font-size:15px}
.fxc-score--sm{font-size:13.5px}
.fxc-score small{font-size:9.5px;color:var(--fx-muted);font-weight:400}
.fxc-bar{display:block;height:4px;margin-top:6px;max-width:120px}
.fxc-mini{margin:0;padding-inline-start:14px;font-size:11.5px;line-height:1.85;color:var(--fx-text-2)}
.fxc-regs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.fxc-regs li{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11.5px}
.fxc-regname{font-weight:700;color:var(--fx-ink)}
.fxc-footrow .fxc-cell{background:var(--fx-fill)}
.fxc-footrow .fxc-cell.is-pick{background:var(--fx-tint-bg)}
.fxc-cta{display:flex;width:100%;font-size:12px;padding:9px 0;margin-bottom:6px}
.fxc-cta:last-child{margin-bottom:0}

/* only-differences */
.fxc-wrap.is-diff .fxc-row[data-same="1"]{display:none}
.fxc-cards.is-diff .fxc-kv[data-same="1"]{display:none}

/* very small screens: one card per broker ------------------------------- */
.fxc-cards{display:none;padding:0 var(--fx-gutter) 28px;gap:14px;flex-direction:column}
.fxc-card{border:1px solid var(--fx-border);border-radius:16px;background:var(--fx-surface);padding:0 0 14px;overflow:hidden}
.fxc-card.is-pick{border-color:var(--fx-primary)}
.fxc-card__head{position:relative;display:flex;align-items:baseline;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--fx-hair);flex-wrap:wrap}
.fxc-ribbon--card{inset-inline-end:0;border-radius:0 0 0 10px}
.fxc-card__name{font-weight:700;font-size:16px;color:var(--fx-ink)}
.fxc-card__score{margin-inline-start:auto;font-family:var(--fx-font-latin);font-weight:800;font-size:17px;color:var(--fx-primary)}
.fxc-card__score small{font-family:var(--fx-font);font-size:10px;color:var(--fx-muted);font-weight:400}
.fxc-card__grp{background:var(--fx-fill);font-family:var(--fx-font-head);font-weight:800;font-size:12.5px;padding:7px 16px;border-bottom:1px solid var(--fx-hair)}
.fxc-kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 16px;border-bottom:1px dashed var(--fx-hair);font-size:12.5px}
.fxc-kv.is-win{background:var(--fx-green-bg)}
.fxc-kv__k{font-size:11.5px;color:var(--fx-muted);flex:none;max-width:48%}
.fxc-kv__v{text-align:left;min-width:0}
.fxc-card__foot{padding:14px 16px 0;text-align:center}
.fxc-card__rm{display:inline-block;margin-top:8px;font-size:11px;color:var(--fx-faint)}

/* pre-built pairs -------------------------------------------------------- */
.fxc-pairs{padding:6px var(--fx-gutter) 34px}
.fxc-pairs__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.fxc-pair{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--fx-border);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--fx-ink);background:var(--fx-surface);text-align:center;line-height:1.6}
.fxc-pair:hover{border-color:var(--fx-tint-border);background:var(--fx-tint-bg);color:var(--fx-primary-dark)}
.fxc-pair__vs{font-size:10px;color:var(--fx-faint);flex:none}

@media (max-width:1180px){
  .fxc-pairs__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  /* matrix scrolls sideways; the label column stays put */
  .fxc-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .fxc-table{table-layout:auto;min-width:640px}
  .fxc-headrow th{position:static}
  .fxc-corner,.fxc-lab{position:sticky!important;inset-inline-start:0;z-index:2!important}
  .fxc-corner{z-index:4!important}
  .fxc-col{min-width:200px}
  .fxc-pairs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fxc-h1{font-size:21px}
}
@media (max-width:620px){
  .fxc-wrap,.fxc-tools__legend{display:none}
  .fxc-cards{display:flex}
  .fxc-head{align-items:flex-start}
  .fxc-head__end{width:100%}
  .fxc-pairs__grid{grid-template-columns:1fr}
  .fxc-verdict{padding:15px 16px}
  .fxc-verdict__p{font-size:13px}
}

/* ------------------------------------------------------------ methodology */
.fxm-hero{padding:40px var(--fx-gutter) 6px;max-width:900px}
.fxm-hero__chip{font-size:11.5px;padding:5px 14px}
.fxm-hero__h1{font-size:34px;line-height:1.5;margin:14px 0 10px}
.fxm-hero__p{font-size:14.5px;line-height:2.1;color:var(--fx-text-2)}
.fxm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
.fxm-stat{border:1px solid var(--fx-border);border-radius:14px;padding:13px 16px;background:var(--fx-surface)}
.fxm-stat__n{display:block;font-weight:800;font-size:22px;color:var(--fx-primary);line-height:1.4}
.fxm-stat__l{display:block;font-size:11px;color:var(--fx-muted);line-height:1.7;margin-top:2px}

.fxm-sec{padding:30px var(--fx-gutter) 0}
.fxm-sec:last-of-type{padding-bottom:10px}
.fxm-h3{font-family:var(--fx-font-head);font-weight:800;font-size:15px;margin-bottom:10px}
.fxm-p{font-size:13px;line-height:2.1;color:var(--fx-text-2);margin-top:10px}
.fxm-p--sm{font-size:11.5px;line-height:1.95}
.fxm-card{padding:20px 22px}
.fxm-two{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-top:14px}
.fxm-two--tight{grid-template-columns:1fr 1fr}
.fxm-links{margin-top:12px;font-size:12.5px;font-weight:600}
.fxm-note{margin-top:14px;font-size:12px;line-height:2;color:var(--fx-text-2);background:var(--fx-fill);border-radius:12px;padding:12px 16px}
.fxm-note strong{color:var(--fx-ink)}
.fxm-code{font-family:var(--fx-font-mono);font-size:11px;background:var(--fx-fill-2);border-radius:6px;padding:1px 6px;display:inline-block;direction:ltr;unicode-bidi:isolate}

/* weights */
.fxm-weights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.fxm-w{border:1px solid var(--fx-border);border-radius:14px;padding:15px 17px;background:var(--fx-surface)}
.fxm-w__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fxm-w__t{font-size:14px;font-weight:700;margin:0}
.fxm-w__src{font-size:10px;padding:2px 8px}
.fxm-w__pct{margin-inline-start:auto;font-weight:700;font-size:17px;color:var(--fx-primary)}
.fxm-w__bar{display:block;height:5px;margin:10px 0 9px}
.fxm-w__b{font-size:11.5px;line-height:1.95;color:var(--fx-muted)}

/* bands */
.fxm-bands{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fxm-band{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--fx-hair);padding-bottom:8px}
.fxm-band:last-child{border-bottom:0;padding-bottom:0}
.fxm-band__r{font-weight:700;font-size:13px;width:64px;flex:none;color:var(--fx-ink)}

.fxm-steps{margin:0;padding-inline-start:18px;font-size:12.5px;line-height:2.05;color:var(--fx-text-2);display:flex;flex-direction:column;gap:7px}
.fxm-steps strong{color:var(--fx-ink)}

/* tables */
.fxm-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;border:1px solid var(--fx-border);border-radius:14px;background:var(--fx-surface)}
.fxm-table{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.9;min-width:620px}
.fxm-table th{font-size:11px;color:var(--fx-muted);font-weight:600;text-align:right;padding:10px 14px;border-bottom:1px solid var(--fx-border);background:var(--fx-fill);white-space:nowrap}
.fxm-table td{padding:11px 14px;border-bottom:1px solid var(--fx-hair);vertical-align:top;color:var(--fx-text-2)}
.fxm-table tr:last-child td{border-bottom:0}
.fxm-table td strong{color:var(--fx-ink);font-weight:700}
.fxm-table--rules td:first-child{width:210px}
.fxm-badge{font-weight:700;color:var(--fx-primary)}
.fxm-pre{margin-top:14px;font-size:12.5px;line-height:2.05;color:var(--fx-text-2);border:1px solid var(--fx-tint-border);background:var(--fx-tint-bg);border-radius:12px;padding:13px 17px}
.fxm-pre strong{color:var(--fx-ink)}

/* process */
.fxm-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.fxm-step{padding:15px 17px}
.fxm-step__n{font-size:10.5px;color:var(--fx-primary);font-weight:700}
.fxm-step__t{font-size:13.5px;font-weight:700;margin:5px 0 4px}
.fxm-step__b{font-size:11.5px;line-height:1.95;color:var(--fx-text-2)}

/* disclosure */
.fxm-disc{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:20px 26px;margin-top:14px}
.fxm-disc__txt{flex:1;min-width:260px}
.fxm-disc__t{font-family:var(--fx-font-head);font-weight:800;font-size:15px;color:var(--fx-dark-text);margin-bottom:6px}
.fxm-disc__b{font-size:12.5px;line-height:2.05;color:var(--fx-dark-muted)}
.fxm-disc__btn{border:1px solid #3a4150;color:var(--fx-dark-text);font-size:12.5px;padding:10px 20px;flex:none}
.fxm-disc__btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.fxm-prose{padding:26px var(--fx-gutter) 10px;max-width:860px}

@media (max-width:1100px){
  .fxm-weights,.fxm-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fxm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .fxm-two,.fxm-two--tight{grid-template-columns:1fr}
  .fxm-hero__h1{font-size:26px}
  .fxm-hero{padding-top:28px}
}
@media (max-width:620px){
  .fxm-weights,.fxm-steps-grid{grid-template-columns:1fr}
  .fxm-tablewrap{border:0;border-radius:0;overflow:visible}
  .fxm-table{min-width:0;display:block}
  .fxm-table thead{display:none}
  .fxm-table tbody,.fxm-table tr,.fxm-table td{display:block;width:100%}
  .fxm-table tr{border:1px solid var(--fx-hair);border-radius:12px;padding:6px 13px;margin-bottom:9px;background:var(--fx-surface)}
  .fxm-table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px dashed var(--fx-hair);text-align:left}
  .fxm-table td:last-child{border-bottom:0}
  .fxm-table td::before{content:attr(data-l);font-size:11px;color:var(--fx-muted);font-weight:600;flex:none;text-align:right}
  .fxm-table--rules td:first-child{width:auto}
}

/* print / PDF ------------------------------------------------------------ */
@media print{
  .fxc-head__end,.fxc-tools,.fxc-col__rm,.fxc-footrow,.fxc-pairs,.fxc-cards{display:none!important}
  .fxc-wrap{overflow:visible;border-color:#999}
  .fxc-cell.is-win{background:#f0f0f0}
}


/* ==========================================================================
   Dark overrides — local tokens for values that have no global equivalent.
   The light values repeated here are byte-identical to what shipped before;
   only the dark blocks differ. Same pattern as the end of forexfa.css.
   ========================================================================== */
:root{
  /* knob shadow on the "only differences" switch */
  --fxc-knob-shadow:0 1px 3px rgba(15,23,42,.25);
  /* translucent tint of the picked column's body cells */
  --fxc-pick-bg:rgba(238,242,255,.45);
}
:root[data-theme="dark"]{
  --fxc-knob-shadow:0 1px 3px rgba(0,0,0,.6);
  --fxc-pick-bg:rgba(29,42,85,.55);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --fxc-knob-shadow:0 1px 3px rgba(0,0,0,.6);
  --fxc-pick-bg:rgba(29,42,85,.55);
  }
}