/* Existing research becomes principles, then a system, in one central column.
   Carries the approved two-stage study into the site's existing section and themes. */
.research-flow-section {
  --flow-fiber: #b5c7aa;
  --flow-signal: #dfa98d;
  --flow-chalk: #e7eddf;
  --flow-panel: #233d32;
  --flow-muted: #adbda6;
  --flow-rule: #dce7d328;
  margin-top: 46px;
  border-top: 1px solid var(--flow-rule);
}
html[data-theme="dark"] .research-flow-section {
  --flow-fiber: #babbb1;
  --flow-signal: #f5f1df;
  --flow-chalk: #efeee8;
  --flow-panel: #111111;
  --flow-muted: #b5b3ab;
  --flow-rule: #eeece629;
}
.research-well { margin: 0; padding: 25px 0 0; }
.research-well-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.research-column-art { max-width: 640px; margin-inline: auto; }

/* Each paper carries its field's glyph; its cells acquire their colour in the animation. */
.research-well-art .rw-solid { fill: var(--flow-panel); }
.rw-page { fill: var(--flow-panel); stroke: var(--flow-fiber); stroke-width: 1.15; }
.rw-fold { stroke: var(--flow-fiber); stroke-opacity: .7; stroke-width: 1; }
.rw-lines { stroke: var(--flow-fiber); stroke-opacity: .45; stroke-width: 1.1; }
.rw-paper .rw-glyph { stroke: var(--flow-signal); stroke-width: 1.45; }
.rw-paper .rw-dot { fill: var(--flow-signal); stroke: none; }
.rw-check { stroke: var(--flow-signal); stroke-width: 1.9; }
.rw-cross { stroke: var(--flow-muted); stroke-width: 1.3; stroke-opacity: .85; }
.rw-verdict text { fill: var(--flow-chalk); stroke: none; font: 10px var(--mono); letter-spacing: 1.2px; }

/* The well and the working system assembled from the surviving principles. */
.rw-wall { stroke: var(--flow-fiber); stroke-opacity: .55; stroke-width: 1.2; }
.rw-grid { fill: var(--flow-fiber); fill-opacity: .16; stroke: none; }
.rw-row-flash { fill: var(--flow-chalk); stroke: none; }
.rw-outline { stroke: var(--flow-chalk); stroke-width: 1.7; }
.rw-pin { stroke: var(--flow-fiber); stroke-width: 1.2; }
.rw-core-body { fill: var(--flow-fiber); fill-opacity: .12; stroke: var(--flow-chalk); stroke-width: 1.4; }
.rw-core-cell { fill: var(--flow-chalk); fill-opacity: .32; stroke: var(--flow-fiber); stroke-width: .7; }
.rw-module-body { fill: var(--flow-fiber); fill-opacity: .06; stroke: var(--flow-fiber); stroke-width: 1.15; }
.rw-module-detail { stroke: var(--flow-fiber); stroke-opacity: .6; stroke-width: 1; }
.rw-connection { stroke: var(--flow-chalk); stroke-opacity: .8; stroke-width: 1.3; }

/* The two stages use the study's gates, rails and quiet side labels. */
.research-well-art text { stroke: none; }
.rc-source-label { fill: var(--flow-fiber); font: 10px var(--mono); letter-spacing: 1.55px; }
.rc-guide { stroke: var(--flow-fiber); stroke-width: 1; stroke-opacity: .22; stroke-dasharray: 1 7; }
.rc-gate { stroke: var(--flow-signal); stroke-width: 1.4; }
.rc-rail { stroke: var(--flow-fiber); stroke-width: 1; stroke-opacity: .22; }
.rc-leader { stroke: var(--flow-fiber); stroke-width: 1; stroke-opacity: .4; }
.rc-stage-title { fill: var(--flow-chalk); font: 11px var(--mono); letter-spacing: 1.3px; }
.rc-stage-caption { fill: var(--flow-muted); font: 11px var(--sans); }
.rc-principle { fill: var(--flow-signal); font: 11px var(--mono); letter-spacing: 1.3px; }
.rc-note { fill: var(--flow-muted); font: 11px var(--sans); }
.rc-bottom-label { fill: var(--flow-fiber); font: 9px var(--mono); letter-spacing: 1.7px; }

.research-flow-section .research-flow-copy { margin-top: 24px; border-top: 1px solid var(--flow-rule); }
.research-flow-copy .principle { padding-top: 27px; }
.research-flow-copy .principle h3 { margin-top: 0; }

@media (max-width: 760px) {
  .research-flow-section { margin-top: 30px; }
  .research-well { padding-top: 15px; }
  .research-flow-section .research-flow-copy { margin-top: 22px; }
  .research-flow-copy .principle { padding-block: 24px; }
  .research-flow-copy .principle:last-child { padding-bottom: 0; }
}
/* Keep the progression readable as the same single drawing scales onto a phone. */
@media (max-width: 600px) {
  .rc-source-label { font-size: 20px; }
  .rc-stage-title { font-size: 20px; letter-spacing: .6px; }
  .rc-stage-caption, .rc-note { display: none; }
  .rc-principle { font-size: 18px; letter-spacing: 1px; }
  .rc-bottom-label { font-size: 14px; letter-spacing: 1px; }
}
@media print {
  .research-flow-section, html[data-theme="dark"] .research-flow-section {
    --flow-fiber: #527258; --flow-signal: #a25136; --flow-chalk: #243d34;
    --flow-panel: #ffffff; --flow-muted: #56675c; --flow-rule: #c6cfc2;
  }
  .research-well { break-inside: avoid; }
}