/* The research-methods interactives (psychology/correlation-vs-causation.php, psychology/type1-type2-errors.php).
   The page chrome is the one-screen layout in /css/resource.css. On a laptop or desktop: the graph fills the height
   on the left, the controls and readouts are in a panel on the right; on smaller screens they stack and the page
   scrolls. Theme tokens only: the graphs' own names below point at them. */

:root{
  --rs-dot:var(--viz-5);     /* a data point, before the hidden variable shows */
  --rs-low:var(--viz-1);     /* the hidden variable, low … */
  --rs-high:var(--viz-5);    /* … to high */
  --rs-null:var(--muted);    /* the "no effect" world */
  --rs-effect:var(--viz-2);  /* the "real effect" world */
  --rs-alpha:var(--viz-5);   /* Type I error: a false positive */
  --rs-beta:var(--viz-1);    /* Type II error: a false negative */
  --rs-power:var(--viz-3);   /* power */
}

.rp-main{gap:10px}
.rs-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:12px}
.rs-graph,.rs-side{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}
.panel h2{margin:0 0 6px}
.rs-svg-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.rs-svg-box svg{display:block;width:100%;height:100%;max-height:100%}
.rs-side{gap:12px;overflow:auto}
.rs-cap{flex:none;margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.rs-cap.rs-ask{margin:0}

/* the graphs' text and lines */
.rs-axis{stroke:var(--ink-soft);stroke-width:1.5}
.rs-grid{stroke:var(--line);stroke-width:1}
.rs-title{fill:var(--ink);font:600 15px var(--font-display)}
.rs-label{fill:var(--ink-soft);font:13px var(--font-body)}
.rs-small{fill:var(--muted);font:12px var(--font-body)}
.rs-dot{fill:var(--rs-dot);stroke:var(--paper);stroke-width:1}
.rs-trend{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5;opacity:.7}
/* the two worlds and the errors (Type I and II) */
.te-null{fill:var(--rs-null);fill-opacity:.25;stroke:var(--rs-null);stroke-width:1.6}
.te-effect{fill:var(--rs-effect);fill-opacity:.25;stroke:var(--rs-effect);stroke-width:1.6}
.te-alpha{fill:var(--rs-alpha);fill-opacity:.78}
.te-beta{fill:var(--rs-beta);fill-opacity:.72}
.te-threshold{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5}
.rs-label.te-null-label{fill:var(--rs-null)}
.rs-label.te-effect-label{fill:var(--rs-effect)}

/* readouts */
.rs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rs-stat{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.rs-stat .k{font:600 10.5px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rs-stat .v{font:700 20px/1.2 var(--font-mono);color:var(--ink);margin-top:2px}
.rs-stat.alpha .v{color:var(--rs-alpha)}
.rs-stat.beta .v{color:var(--rs-beta)}
.rs-stat.power .v{color:var(--rs-power)}
.rs-verdict{padding:10px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);font-size:14px;line-height:1.5;color:var(--ink-soft)}
.rs-verdict b{color:var(--ink)}

/* controls */
.rs-field{display:flex;flex-direction:column;gap:4px}
.rs-field label,.rs-group-label{font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;gap:8px}
.rs-field label .num{font-family:var(--font-mono);text-transform:none;letter-spacing:0;color:var(--ink)}
.rs-field input[type=range]{width:100%;accent-color:var(--accent);min-height:32px}
.rs-btns{display:flex;flex-wrap:wrap;gap:6px}
.rs-btns .btn{min-height:40px}
.rs-switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer;background:none;border:1px solid var(--line-strong);border-radius:8px;padding:8px 12px;min-height:44px;text-align:left}
.rs-switch .track{width:44px;height:24px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-strong);position:relative;flex:none;transition:background .18s}
.rs-switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:left .18s,background .18s}
.rs-switch[aria-pressed="true"] .track{background:var(--accent-tint);border-color:var(--accent)}
.rs-switch[aria-pressed="true"] .track::after{left:22px;background:var(--accent)}
.rs-switch:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* the legend */
.rs-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.rs-legend span{display:inline-flex;align-items:center;gap:6px}
.rs-sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.rs-ramp{width:90px;height:10px;border-radius:5px;display:inline-block;background:linear-gradient(90deg,var(--rs-low),var(--rs-high))}
.rs-sw.sw-dot{background:var(--rs-dot)}
.rs-sw.sw-null{background:var(--rs-null)}
.rs-sw.sw-effect{background:var(--rs-effect)}
.rs-sw.sw-alpha{background:var(--rs-alpha)}
.rs-sw.sw-beta{background:var(--rs-beta)}
.rs-sw.sw-trend{border-top:2px dashed var(--ink);height:0;width:16px}

/* the decision table (Type I and II) */
table.rs-table{width:100%;border-collapse:collapse;font-size:13px}
table.rs-table th,table.rs-table td{border:1px solid var(--line);padding:6px 8px;text-align:center}
table.rs-table thead th{background:var(--accent-tint);color:var(--ink-soft);font:600 11px/1.25 var(--font-display);text-transform:uppercase;letter-spacing:.04em}
table.rs-table th[scope=row]{text-align:left;font-weight:600;color:var(--ink-soft);background:var(--panel-2)}
table.rs-table td b{display:block;font:700 15px var(--font-mono)}
table.rs-table td.bad1 b{color:var(--rs-alpha)}
table.rs-table td.bad2 b{color:var(--rs-beta)}
table.rs-table td.ok b{color:var(--rs-power)}

@media (max-width:900px),(max-height:620px){
  .rs-work{grid-template-columns:1fr;flex:none}
  .rs-graph{min-height:0}
  .rs-svg-box{flex:none}
  .rs-svg-box svg{height:auto}
  .rs-side{overflow:visible}
}
@media (max-width:560px){
  .rs-stat .v{font-size:17px}
  .rs-title{font-size:20px}
  .rs-label{font-size:18px}
  .rs-small{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.rs-switch .track,.rs-switch .track::after{transition:none}}