/* Method Studio: a compact question → method → evidence notebook. */
body.research-ui .inference-lab.method-studio {
  --ms-blue:#326f9f; --ms-purple:#8b7bbb; --ms-ink:#243f5d;
  position:relative; width:100%; max-width:570px; min-width:0; justify-self:end;
  padding:14px 19px 12px; box-sizing:border-box; border:1px solid #c9d8ec;
  border-radius:22px; color:var(--ms-ink); isolation:isolate; overflow:hidden;
  background:linear-gradient(140deg,#ffffffeb,#f3f7ffe8 70%,#eeeaf9e8);
  box-shadow:inset 0 1px #fff,0 17px 48px -29px #41629355;
}
body.research-ui .inference-lab.method-studio::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(135deg,#dceafb22,transparent 65%,#e1d9f73d); }
.method-studio .ms-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px; }
body.research-ui .method-studio h2 { display:flex; align-items:center; gap:8px; margin:0; font:550 10px/1.4 var(--mono); letter-spacing:1.1px; color:#506b8a; }
.method-studio .ms-mark { display:grid; place-items:center; width:25px; height:25px; border:1px solid #cedbee; border-radius:8px; color:#5978a7; background:#ffffff9e; font:20px/1 Georgia,serif; }
.method-studio .ms-tour { display:flex; align-items:center; gap:10px; }
.method-studio .ms-scene-count { color:#647897; font:9px/1.2 var(--mono); white-space:nowrap; }
.method-studio .ms-play { display:flex; align-items:center; justify-content:center; gap:5px; min-width:55px; min-height:26px; padding:3px 6px; border:1px solid #cedaeb; border-radius:8px; color:#506a8c; background:#ffffff91; font:11px/1 var(--sans); cursor:pointer; }
.method-studio .ms-play > :first-child { color:#4e75a5; font-size:12px; }
.method-studio .ms-play:hover { border-color:#a9bedb; background:#fff; }
.method-studio .ms-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-top:7px; padding:2px; border:1px solid #d3dff0; border-radius:10px; background:#e9eff94f; }
.method-studio .ms-tabs button { min-width:0; min-height:26px; padding:4px; border:1px solid transparent; border-radius:7px; color:#5d708c; background:transparent; font:550 11px/1.3 var(--sans); cursor:pointer; transition:background .2s,border-color .2s,color .2s; white-space:nowrap; }
.method-studio .ms-tabs button[aria-pressed=true] { color:#294e79; background:#fffffff2; border-color:#cbd8ee; box-shadow:0 2px 4px #324f7510; }
.method-studio .ms-tabs button:hover { color:#254e7c; background:#ffffffa8; }
.method-studio .ms-play:disabled,.method-studio .ms-tabs button:disabled { cursor:default; opacity:1; }
.method-studio .ms-scene[hidden] { display:none; }
.method-studio .ms-question { margin:10px 2px 0; }
body.research-ui .method-studio h3 { margin:0; color:#26435e; font:550 21px/1.22 var(--sans); letter-spacing:-.65px; }
.method-studio .ms-method { display:inline-flex; align-items:center; gap:8px; margin-top:3px; color:#496a98; font:500 11px/1.4 var(--sans); text-decoration:none; text-underline-offset:3px; }
.method-studio .ms-method > span { color:#8693b8; font-size:15px; line-height:1; }
.method-studio .ms-method:hover { color:#285792; text-decoration:underline; }
.method-studio .ms-figure { margin:7px -3px 0; padding:0; }
.method-studio .ms-chart { display:block; width:100%; height:154px; overflow:visible; }
.method-studio .ms-grid { fill:none; stroke:#d9e3f0; stroke-width:.75; }
.method-studio .ms-svg-label { fill:#59718e; font:14px var(--sans); }
.method-studio .ms-curve { fill:none; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }
.method-studio .ms-treated { stroke:var(--ms-blue); }
.method-studio .ms-comparison { stroke:var(--ms-purple); }
.method-studio .ms-counterfactual { stroke:#8197b5; stroke-width:1.8; stroke-dasharray:5 5; }
.method-studio .ms-point { fill:#fcfdff; stroke-width:1.6; }
.method-studio .ms-treated-point { stroke:var(--ms-blue); }
.method-studio .ms-boundary { fill:none; stroke:#acb7ce; stroke-width:1; stroke-dasharray:3 5; }
.method-studio .ms-effect-area { fill:#9ebddc; opacity:.17; }
.method-studio .ms-bracket { fill:none; stroke:#5b799f; stroke-width:1.4; }
.method-studio .ms-local-window { fill:#cfdcec; opacity:.2; }
.method-studio .ms-observation { opacity:.56; }
.method-studio .ms-left-point { fill:#9689c4; }
.method-studio .ms-right-point { fill:#5486b5; }
.method-studio .ms-cutoff-point { fill:#fff; stroke:#547599; stroke-width:1.5; }
.method-studio .ms-zero { fill:none; stroke:#9fb0c9; stroke-width:1; stroke-dasharray:4 4; }
.method-studio .ms-heterogeneity-area { fill:#a9c0e9; opacity:.18; }
.method-studio .ms-feature-guide { fill:none; stroke:#b1b8d7; stroke-width:1; stroke-dasharray:3 4; }
.method-studio .ms-effect-point { fill:#fff; stroke:#667ba9; stroke-width:2; }
.method-studio .ms-legend { display:flex; align-items:center; justify-content:center; gap:15px; min-height:14px; margin-top:0; color:#62758e; font:10px/1.4 var(--sans); }
.method-studio .ms-legend > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.method-studio .ms-legend i { display:inline-block; width:15px; height:0; border-top:2px solid #8c9fb8; }
.method-studio .ms-legend .ms-key-treated { border-color:var(--ms-blue); }
.method-studio .ms-legend .ms-key-comparison { border-color:var(--ms-purple); }
.method-studio .ms-legend .ms-key-dashed { border-top-style:dashed; border-color:#8197b5; }
.method-studio .ms-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; margin:8px 0 0; padding:8px 0 0; border-top:1px solid #d5dfed; }
.method-studio .ms-path li { display:flex; align-items:center; gap:7px; min-width:0; color:#476485; font:550 10px/1.4 var(--sans); }
.method-studio .ms-path-number { display:grid; place-items:center; flex:none; width:20px; height:20px; border:1px solid #d2ddee; border-radius:7px; background:#ffffff9c; color:#8995b1; font:9px/1 var(--mono); }
.method-studio .ms-note { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:8px; color:#63758d; font:9px/1.4 var(--sans); }
.method-studio .ms-illustrative { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.method-studio .ms-illustrative i { width:5px; height:5px; border:1px solid #92a0bd; border-radius:50%; }
.method-studio .ms-note > :last-child { text-align:right; }
.method-studio :is(a,button):focus-visible { outline:2px solid #8299cf; outline-offset:3px; }
@media(max-width:480px) {
  body.research-ui .inference-lab.method-studio { max-width:100%; padding:11px 12px 10px; border-radius:17px; }
  .method-studio .ms-head { min-height:25px; }
  body.research-ui .method-studio h2 { gap:6px; font-size:9px; letter-spacing:.5px; }
  .method-studio .ms-mark { width:21px; height:21px; border-radius:6px; font-size:17px; }
  .method-studio .ms-tour { gap:6px; }
  .method-studio .ms-scene-count { font-size:8px; }
  .method-studio .ms-play { min-width:47px; min-height:27px; font-size:10px; padding:3px 4px; gap:3px; }
  .method-studio .ms-tabs { margin-top:6px; padding:2px; gap:2px; border-radius:8px; }
  .method-studio .ms-tabs button { min-height:28px; padding:5px 3px; border-radius:5px; font-size:10px; }
  .method-studio .ms-question { margin-top:9px; min-height:40px; }
  body.research-ui .method-studio h3 { font-size:17px; line-height:1.2; letter-spacing:-.4px; }
  .method-studio .ms-method { margin-top:3px; font-size:10px; gap:5px; }
  .method-studio .ms-method > span { font-size:12px; }
  .method-studio .ms-figure { margin-top:5px; }
  .method-studio .ms-chart { height:125px; }
  .method-studio .ms-svg-label { font-size:16px; }
  .method-studio .ms-legend { gap:10px; min-height:12px; margin-top:0; font-size:9px; }
  .method-studio .ms-legend > span { gap:4px; }
  .method-studio .ms-legend i { width:12px; }
  .method-studio .ms-path { gap:7px; margin-top:8px; padding-top:8px; }
  .method-studio .ms-path li { gap:5px; min-height:26px; font-size:9px; }
  .method-studio .ms-path-number { width:18px; height:18px; border-radius:5px; font-size:8px; }
  .method-studio .ms-note { gap:9px; min-height:12px; margin-top:8px; font-size:8px; line-height:1.5; }
  .method-studio .ms-note > :last-child { white-space:nowrap; }
}
@media(max-width:359px) {
  .method-studio .ms-chart { height:111px; }
  body.research-ui .method-studio h3 { font-size:16px; }
  .method-studio .ms-note { font-size:8px; }
  .method-studio .ms-scene-count { display:none; }
  .method-studio .ms-path li { gap:4px; font-size:8.5px; }
}
@media(prefers-reduced-motion:reduce) {
  .method-studio *, .method-studio *::before { animation:none!important; transition:none!important; }
}

/* Coordinated views make the statistical reasoning visible as it unfolds. */
body.research-ui .inference-lab.method-studio { max-width:620px; padding:15px 20px 13px; }
.method-studio .ms-question { min-height:54px; }
.method-studio .ms-method-row { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.method-studio .ms-equation { color:#7881a5; font:italic 13px/1.4 var(--serif); white-space:nowrap; }
.method-studio .ms-views { position:relative; }
.method-studio .ms-chart { height:168px; }
.method-studio .ms-time-cursor { stroke:#82a6c5; stroke-width:1.1; stroke-dasharray:3 4; fill:none; }
.method-studio .ms-live-point { fill:#fff; stroke:#467cad; stroke-width:2.5; filter:drop-shadow(0 0 3px #7b9cc655); }
.method-studio .ms-window-edges { fill:none; stroke:#8f9fc4; stroke-width:1; stroke-dasharray:3 4; }
.method-studio .ms-feature-bands rect { fill:#afc5e6; opacity:.06; }
.method-studio .ms-feature-bands rect:nth-child(even) { fill:#a18cc8; opacity:.11; }
.method-studio .ms-diagnostic { margin:9px 0 0; padding:8px 10px 6px; border:1px solid #cedced; border-top-color:#fff; border-radius:12px; background:linear-gradient(120deg,#ffffffa6,#edf3fb8c 65%,#eeebfa7a); box-shadow:inset 0 1px #fff; }
.method-studio .ms-diagnostic figcaption { display:flex; justify-content:space-between; align-items:center; color:#536d90; font:550 10px/1.3 var(--sans); }
.method-studio .ms-linked-mark { color:#8a82a9; font:italic 12px/1 var(--serif); }
.method-studio .ms-diagnostic-chart { display:block; width:100%; height:70px; overflow:visible; }
.method-studio .ms-diagnostic-chart .ms-svg-label { font-size:14px; }
.method-studio .ms-mini-line { fill:none; stroke:#6c85b2; stroke-width:1.5; }
.method-studio .ms-mini-stem { fill:none; stroke:#b2bfd6; stroke-width:1; }
.method-studio .ms-mini-point { fill:#fff; stroke:#6686b1; stroke-width:1.5; }
.method-studio .ms-metric { fill:#446d9d; font:500 31px/1 var(--mono); letter-spacing:-1.5px; }
.method-studio .ms-tree-path { fill:none; stroke:#b8c7dc; stroke-width:1.5; }
.method-studio .ms-tree-path.is-active { stroke:#777fc0; stroke-width:2.4; }
.method-studio .ms-tree-leaf { fill:#eef2f9; stroke:#b9c9dd; stroke-width:1; }
.method-studio .ms-tree-leaf.is-active { fill:#c5cceb; stroke:#8b8ec0; }
.method-studio .ms-effect-bin { fill:#aec3df; opacity:.7; }
.method-studio .ms-effect-bin.is-active { fill:#847ec3; opacity:1; }
.method-studio .ms-phase-status { display:flex; align-items:center; gap:6px; min-height:18px; margin-top:6px; color:#576f90; font:10px/1.4 var(--sans); }
.method-studio .ms-phase-dot { width:5px; height:5px; border-radius:50%; background:#8098bf; box-shadow:0 0 0 3px #dce6f580; }
.method-studio .ms-phase-track { flex:1; max-width:92px; height:2px; margin-left:auto; overflow:hidden; border-radius:3px; background:#dce3f0; }
.method-studio .ms-phase-track i { display:block; height:100%; background:linear-gradient(90deg,#79a4cf,#9b8bc4); transform-origin:left; }
.method-studio .ms-path { margin-top:5px; padding-top:8px; }
.method-studio .ms-path li { transition:color .2s; }
.method-studio .ms-path-number { transition:background .2s,border-color .2s,color .2s; }
.method-studio .ms-path .is-current { color:#2d5685; }
.method-studio .ms-path .is-current .ms-path-number { background:#e0eafb; color:#476f9e; border-color:#b1c6e2; box-shadow:0 0 0 3px #ecf1fa; }
.method-studio .ms-path .is-complete .ms-path-number { background:#edf1fa; color:#6988ae; }
.method-studio[data-playing=false] * { transition:none; }
@media(max-width:480px) {
  body.research-ui .inference-lab.method-studio { padding:11px 12px 10px; }
  .method-studio .ms-question { min-height:40px; }
  .method-studio .ms-equation { font-size:10px; letter-spacing:-.25px; }
  .method-studio .ms-chart { height:106px; }
  .method-studio .ms-diagnostic { margin-top:6px; padding:5px 8px 4px; border-radius:9px; }
  .method-studio .ms-diagnostic figcaption { font-size:9px; }
  .method-studio .ms-diagnostic-chart { height:52px; }
  .method-studio .ms-diagnostic-chart .ms-svg-label { font-size:17px; }
  .method-studio .ms-phase-status { margin-top:5px; min-height:15px; font-size:9px; }
  .method-studio .ms-phase-track { max-width:62px; }
  .method-studio .ms-path { padding-top:7px; }
  .method-studio .ms-path li { min-height:23px; }
}
@media(max-width:359px) {
  .method-studio .ms-chart { height:102px; }
  .method-studio .ms-diagnostic-chart { height:48px; }
  .method-studio .ms-equation { font-size:9px; }
  .method-studio .ms-phase-track { max-width:38px; }
}

.method-studio .ms-context-line { fill:none; stroke-width:1.6; opacity:.13; }

/* The underline reports elapsed scene time; scans link the same fixed score
   in the observation and residual views rather than moving the data. */
.method-studio .ms-tabs button { position:relative; overflow:hidden; }
.method-studio.is-enhanced .ms-tabs button[aria-pressed=true]::after {
  content:''; position:absolute; left:8px; right:8px; bottom:1px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,#5b93bd,#9581c3);
  transform:scaleX(var(--ms-tour-progress,0)); transform-origin:left; pointer-events:none;
}
.method-studio .ms-score-scan-band { fill:#94bce1; opacity:.14; }
.method-studio .ms-score-scan { fill:none; stroke:#5687b5; stroke-width:1.4; opacity:.72; }
.method-studio:not(.is-enhanced) :is(.ms-score-scan-band,.ms-score-scan) { display:none; }

/* Effect annotations occupy measured empty space below the data, not the
   moving effect interval. The solid pale surface also separates scan guides. */
.method-studio .ms-effect-callout { pointer-events:none; }
.method-studio .ms-effect-callout rect { fill:#f5f9ff; stroke:#c5d6e9; stroke-width:.8; }
.method-studio .ms-effect-callout path, .method-studio .ms-bracket { fill:none; stroke:#416d97; stroke-width:1.4; }
.method-studio .ms-effect-callout text { fill:#355978; font:550 16px var(--sans); }
@media(max-width:480px) {
  .method-studio .ms-effect-callout text { font-size:18px; }
}
