/* 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, plus the graphs' own colours below (fixed in both themes, like the site's other diagrams). */

:root{
  --rs-dot:#e0544f;          /* a data point, before the hidden variable shows */
  --rs-null:#7c8aa8;         /* the "no effect" world */
  --rs-effect:#e0943f;       /* the "real effect" world */
  --rs-alpha:#e0544f;        /* Type I error: a false positive */
  --rs-beta:#4f8fe0;         /* Type II error: a false negative */
  --rs-power:#2f9e6a;        /* 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;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.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}

/* 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{stroke:var(--paper);stroke-width:1}
.rs-trend{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5;opacity:.7}

/* 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,#4f8fe0,#e0544f)}

/* 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}}