/* E-Commerce Fraud page: results figures (split, headline, history, seeds). All rules scoped under body.pc-fr. */

/* palette: dark is the base theme, light is set on html[data-theme="light"] */
body.pc-fr { --fr-bag5:#8fb8e8; }
html[data-theme="light"] body.pc-fr { --fr-bag5:#3b6ea8; }

body.pc-fr .fr-body { position:relative; min-width:0; }
body.pc-fr .fr-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:0 0 14px; }
body.pc-fr .fr-pills { display:flex; flex-wrap:wrap; gap:8px; }
html body.pc-fr .fr-pills button { margin:0; min-height:34px; padding:6px 14px; border-radius:999px; cursor:pointer;
  font:500 12.5px/1.4 'DM Mono',ui-monospace,monospace;
  border:1px solid var(--pc-line) !important; background:transparent !important; color:var(--pc-muted) !important; box-shadow:none !important;
  transition:color .15s,border-color .15s; }
html body.pc-fr .fr-pills button:hover { color:var(--pc-text) !important; border-color:var(--pc-muted) !important; background:transparent !important; }
html body.pc-fr .fr-pills button[aria-pressed="true"] { color:var(--pc-text) !important; border-color:var(--pc-accent) !important; background:var(--pc-chip) !important; }
html body.pc-fr .fr-pills button:focus-visible { outline:2px solid var(--pc-text); outline-offset:2px; }

body.pc-fr .fr-view { min-width:0; }
body.pc-fr .fr-svg { display:block; width:100%; height:auto; overflow:visible; }

/* text inside the charts: sizes are in viewBox units (one unit is one CSS px), never changed in media queries */
body.pc-fr .fr-svg text { font:500 12px 'DM Mono',ui-monospace,monospace; fill:var(--pc-muted); }
body.pc-fr .fr-svg text.t-b { fill:var(--pc-text); }
body.pc-fr .fr-svg text.t-hi { fill:var(--pc-accent); font-weight:600; }
body.pc-fr .fr-svg text.t-tick { fill:var(--pc-muted); }
body.pc-fr .fr-svg text.t-sub { fill:var(--pc-muted); letter-spacing:.06em; text-transform:uppercase; }
body.pc-fr .fr-svg text.t-v { font:600 14px 'DM Sans',system-ui,sans-serif; fill:var(--pc-text);
  paint-order:stroke; stroke:var(--pc-bg); stroke-width:4px; stroke-linejoin:round; }
body.pc-fr .fr-svg text.t-val { fill:var(--pc-text); font-size:12.5px; }
/* row labels in the narrow layout sit over grid lines: halo in the page background */
body.pc-fr .fr-svg text.t-lab { paint-order:stroke; stroke:var(--pc-bg); stroke-width:4px; stroke-linejoin:round; }
body.pc-fr .fr-svg .grid { stroke:var(--pc-line); stroke-width:1; }
body.pc-fr .fr-svg .axis { stroke:var(--pc-muted); stroke-width:1; }
body.pc-fr .fr-svg .fr-zero { stroke:var(--pc-text); stroke-width:1.4; }
body.pc-fr .fr-svg .fr-mean { stroke:var(--pc-muted); stroke-width:1.5; stroke-dasharray:5 4; }
body.pc-fr .fr-svg .fr-track { stroke:var(--pc-line); stroke-width:2; }
body.pc-fr .fr-svg .fr-path { fill:none; stroke:var(--pc-muted); stroke-width:1.5; opacity:.6; }

/* model palette: refit is the accent, bag5 blue, final muted, earlier models and references muted at 60% */
body.pc-fr .fr-svg .fr-bar, body.pc-fr .fr-svg .fr-dot { stroke:none; }
body.pc-fr .fr-svg .m-refit { fill:var(--pc-accent); }
body.pc-fr .fr-svg .m-bag5 { fill:var(--fr-bag5); }
body.pc-fr .fr-svg .m-final { fill:var(--pc-muted); }
body.pc-fr .fr-svg .m-early, body.pc-fr .fr-svg .m-ref { fill:var(--pc-muted); opacity:.6; }
body.pc-fr .fr-svg .m-seed { fill:var(--pc-muted); }
body.pc-fr .fr-svg .fr-dot { stroke:var(--pc-bg); stroke-width:1.5; }
body.pc-fr .fr-svg .fr-whisk { stroke:var(--pc-text); stroke-width:1.8; fill:none; }
body.pc-fr .fr-svg .fr-whisk.m-refit { stroke:var(--pc-accent); }
body.pc-fr .fr-svg .fr-whisk.m-bag5 { stroke:var(--fr-bag5); }
body.pc-fr .fr-svg .fr-whisk.m-final { stroke:var(--pc-muted); }
body.pc-fr .fr-svg .fr-whisk.m-early { stroke:var(--pc-muted); opacity:.6; }

/* split bands */
body.pc-fr .fr-svg .fr-band { fill:var(--pc-muted); }
body.pc-fr .fr-svg .b-train { opacity:.5; }
body.pc-fr .fr-svg .b-valid { opacity:.28; }
body.pc-fr .fr-svg .b-gap { fill:none; stroke:var(--pc-muted); stroke-width:1.5; stroke-dasharray:3 3; }
body.pc-fr .fr-svg .b-test { fill:var(--pc-chip); stroke:var(--pc-accent); stroke-width:2; }
body.pc-fr .fr-svg .b-win { fill:var(--pc-muted); opacity:.4; }
body.pc-fr .fr-svg .b-test-off { fill:none; stroke:var(--pc-muted); stroke-width:1.5; stroke-dasharray:5 4; opacity:.7; }

/* hover and focus backdrops */
body.pc-fr .fr-svg .fr-rowbg, body.pc-fr .fr-svg .fr-hitbg { fill:var(--pc-chip); stroke:none; opacity:0; pointer-events:all; }
body.pc-fr .fr-svg .fr-row:hover .fr-rowbg, body.pc-fr .fr-svg .fr-hit:hover .fr-hitbg { opacity:.7; }
body.pc-fr .fr-svg g[tabindex] { outline:none; }
body.pc-fr .fr-svg g[tabindex]:focus-visible .fr-rowbg, body.pc-fr .fr-svg g[tabindex]:focus-visible .fr-hitbg {
  opacity:1; stroke:var(--pc-text); stroke-width:1.5; }

/* text under the charts */
body.pc-fr .fr-sub { margin:10px 0 0; font:400 13px/1.5 'DM Mono',ui-monospace,monospace; color:var(--pc-muted); }
body.pc-fr .fr-sub:empty { display:none; }
body.pc-fr .fr-facts:empty { display:none; }
body.pc-fr .fr-factlist { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 24px; }
body.pc-fr .fr-factlist-win { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
body.pc-fr .fr-fact { margin:0; padding:0; display:block; font:400 13px/1.55 'DM Mono',ui-monospace,monospace; color:var(--pc-muted); }
body.pc-fr .fr-fact::marker { content:''; }
body.pc-fr .fr-fh { color:var(--pc-text); font-weight:500; margin-right:12px; }
body.pc-fr .fr-fact-test .fr-fh { color:var(--pc-accent); }
body.pc-fr .fr-fv { display:block; color:var(--pc-text); }

/* tooltip: one per figure, no shadow */
body.pc-fr .fr-tip { position:absolute; z-index:5; max-width:300px; pointer-events:none; padding:8px 11px;
  border:1px solid var(--pc-muted); border-radius:6px; background:var(--pc-bg); color:var(--pc-text);
  font:400 13px/1.45 'DM Sans',system-ui,sans-serif; box-shadow:none; }
body.pc-fr .fr-tip[hidden] { display:none; }
body.pc-fr .fr-tip span { display:block; }
body.pc-fr .fr-tip .fr-tip-h { font-weight:600; }
body.pc-fr .fr-tip .fr-tip-l { color:var(--pc-muted); font-family:'DM Mono',ui-monospace,monospace; font-size:12px; }

@media (prefers-reduced-motion:no-preference) {
  body.pc-fr .fr-view .fr-svg { animation:fr-in .2s ease-out; }
  @keyframes fr-in { from { opacity:0; } to { opacity:1; } }
}
@media (prefers-reduced-motion:reduce) {
  html body.pc-fr .fr-pills button { transition:none; }
  body.pc-fr .fr-view .fr-svg { animation:none; }
}