/* OBSCURA OS: OBSCURA Gnosis.

   One working window, laid out as desktop statistics and coding software
   is: the bar with the way home, the menus, the project's name and Save;
   the row of views (the data side, then the qualitative side); the
   options of the view that is open; then a list on the left, the work in
   the middle and details on the right, and a status line across the foot
   that says how many cases are in use and whether a filter or a split is
   on. Only the work scrolls.

   The page is an application while <body> carries rs-app, which
   pro-load.js takes off when it shows the lock screen instead, so the lock
   screen is laid out as an ordinary page. Every colour, size, corner and
   duration is a theme.css token, so the window follows the colourway and
   dark mode the rest of the site does; the charts take theirs from the
   --chart-1 to --chart-5 tokens there. On a phone the side panels
   are sheets over the work and every control is at least 44 pixels. */

.rs {
  --rs-grid: color-mix(in srgb, var(--rule) 70%, transparent);
  --rs-nav: 232px;
  --rs-side: 300px;
  --rs-hit: 32px;
  --rs-row: 28px;
}
.rs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rs-body .rs-noscript { padding: var(--space-4); }

/* ------------------------------------------------------------ the frame */

body.rs-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
body.rs-app .os-footer, body.rs-app .os-topbar, body.rs-app .os-toolnav { display: none !important; }
body.rs-app #ppBadge { left: auto; right: var(--space-1); bottom: 3px; min-height: 22px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }

.rs {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  font: var(--text-xs)/1.4 var(--font-sans);
  animation: rs-arrive var(--dur-4) var(--ease-standard) both;
}
@keyframes rs-arrive { from { opacity: 0; } }
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs button, .rs input, .rs select, .rs textarea { font: inherit; color: inherit; }
.rs svg:not(.rs-chart) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rs svg.rs-chart { display: block; width: 100%; height: auto; max-width: 720px; }
.rs-map { margin: var(--space-3) 0; }
.rs-map-node { cursor: grab; touch-action: none; }
.rs-map-node:active { cursor: grabbing; }
.rs-grow { flex: 1 1 auto; }
.rs-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rs-muted { color: var(--ink-faint); }
.rs-link { border: 0; background: none; padding: 0; color: var(--accent-strong); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rs-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rs-num { font-variant-numeric: tabular-nums; text-align: right; }
.rs kbd, .rs code { font: var(--text-2xs) var(--font-mono); padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--paper-inset); }
.rs kbd { border: 1px solid var(--rule); border-bottom-width: 2px; }

/* ------------------------------------------------------------ the bar */

.rs-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.rs-id { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.rs-home { display: inline-flex; align-items: center; justify-content: center; width: max(36px, var(--rs-hit)); height: max(36px, var(--rs-hit)); border-radius: var(--radius-md); color: var(--ink-soft); }
.rs-home:hover { background: var(--paper-inset); color: var(--ink); }
.rs-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.rs-menubar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.rs-menu { position: relative; }
.rs-menu > summary { list-style: none; display: flex; align-items: center; min-height: var(--rs-hit); padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: default; user-select: none; }
.rs-menu > summary::-webkit-details-marker { display: none; }
.rs-menu > summary:hover, .rs-menu[open] > summary { background: var(--paper-inset); }
.rs-drop { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; display: flex; flex-direction: column; min-width: 260px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), var(--elev-2, 0 12px 32px rgb(0 0 0 / 0.18)); }
.rs-drop-wide { min-width: 300px; }
.rs-menu[open] > .rs-drop { animation: os-menu-in var(--dur-3) var(--ease-standard); }
.rs-drop button, .rs-drop a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); min-height: var(--rs-hit); padding: 6px var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rs-drop button:hover, .rs-drop button:focus-visible, .rs-drop a:hover, .rs-drop a:focus-visible { background: var(--paper-inset); outline: none; }
.rs-drop button:disabled { opacity: 0.45; cursor: default; background: none; }
.rs-drop kbd { border: 0; background: none; padding: 0; color: var(--ink-faint); }
.rs-drop hr { width: 100%; border: 0; border-top: 1px solid var(--rule); margin: var(--space-1) 0; }
.rs-drop-head { margin: var(--space-2) var(--space-3) 2px; color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rs-drop-head:first-child { margin-top: var(--space-1); }
.rs-drop-group { display: flex; flex-direction: column; }
/* Analyse holds every procedure: in columns where the window is wide
   enough, each group kept whole, so the menu is never taller than the
   screen. */
@media (min-width: 900px) {
  .rs-drop-wide { display: block; width: min(820px, calc(100vw - 340px)); columns: 230px; column-gap: var(--space-2); }
  .rs-drop-wide .rs-drop-group { break-inside: avoid; }
  .rs-drop-wide button { width: 100%; white-space: normal; }
}
.rs-docname { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.25; }
.rs-name { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rs-saved { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.rs-saved[data-save-state="failed"] { color: var(--danger); }
.rs-saved[data-save-state="saving"]::before { content: "\25CF  "; color: var(--accent-strong); }
.rs-ib { display: inline-flex; align-items: center; justify-content: center; width: var(--rs-hit); height: var(--rs-hit); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; flex: none; }
.rs-ib:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.rs-ib:disabled { opacity: 0.35; cursor: default; }
.rs-ib[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.rs-ib svg { width: 16px; height: 16px; }
.rs-save { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--rs-hit); padding: 0 var(--space-3); }
.rs-save svg { width: 16px; height: 16px; }
/* With nothing open there is nothing to save: the button sits back as
   a quiet outline rather than the accent at half strength, which still
   read as the thing to press. Its colour needs !important to win over
   the theme's, which sets every primary button's that way. */
body.rs-app button.btn-primary.rs-save:disabled { opacity: 1; background: transparent; border-color: var(--rule); color: var(--ink-faint) !important; box-shadow: none; }

/* ------------------------------------------------------------ views */

.rs-viewbar { display: flex; align-items: center; min-width: 0; padding-left: var(--space-2); border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.rs-views { display: flex; flex: 1 1 auto; align-items: center; gap: 2px; min-width: 0; padding: var(--space-1) var(--space-2) var(--space-1) 0; overflow-x: auto; scrollbar-width: none; background: var(--paper-raised); }
.rs-views::-webkit-scrollbar { display: none; }
.rs-views button { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: 36px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.rs-views button:hover { background: var(--paper-inset); color: var(--ink); }
.rs-views button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); font-weight: 600; }
.rs-views svg { width: 20px; height: 20px; }
/* The workspace switch, then that workspace's views alone. */
.rs-ws { display: inline-flex; flex: none; gap: 2px; margin-right: var(--space-3); padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.rs-ws button { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); }
.rs-ws button:hover { color: var(--ink); }
.rs-ws button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); border-color: var(--rule-strong); }
.rs-ws-pick { display: none; }
.rs-vshared { display: flex; flex: none; margin-left: auto; padding-left: var(--space-3); }
/* Before a project is open there is no workspace; once one is, the menus
   of the other workspaces are put away, unless the project has work there. */
.rs:not([data-open]) .rs-viewbar, .rs:not([data-open]) .rs-menu[data-ws],
.rs[data-ws]:not([data-ws="stats"]):not([data-has-stats]) .rs-menu[data-ws="stats"],
.rs[data-ws]:not([data-ws="qual"]):not([data-has-qual]) .rs-menu[data-ws="qual"],
.rs[data-ws]:not([data-ws="review"]):not([data-has-review]) .rs-menu[data-ws="review"] { display: none; }
.rs-vgroup { display: flex; flex: none; align-items: center; gap: 2px; padding-left: var(--space-3); border-left: 1px solid var(--rule); }
.rs-views[data-ws="stats"] .rs-vgroup:not([data-ws="stats"]),
.rs-views[data-ws="qual"] .rs-vgroup:not([data-ws="qual"]),
.rs-views[data-ws="review"] .rs-vgroup:not([data-ws="review"]) { display: none; }
.rs-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-count[hidden] { display: none; }

.rs-opts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--rule); background: var(--paper-inset); color: var(--ink-soft); }
.rs-opts:empty { display: none; }
.rs > .rs-main { grid-row: 4; }
.rs > .rs-status { grid-row: 5; }
/* The buttons are the site's .btn, drawn here as every application's own
   buttons are (Case, Keep, Books and the rest): 36px, the label at 14px
   and 600, the accent behind the one that does the thing and a rule
   round the secondary ones. A plain .btn is filled, as it is on the
   rest of the site. Before this they kept the site's larger 42px
   button at 13px and the reset's weight, so the start screen read as a
   different product. The rules after this one size the buttons in
   particular places. */
.rs .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; }
/* The colours at an element's weight more, to outrank the site's
   :root button.btn-secondary, which takes the rule away. */
.rs :is(a, button, label).btn { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: none; }
.rs :is(a, button, label).btn:not(.btn-secondary, .btn-danger, .ghost):hover:not(:disabled) { background: var(--accent-strong); }
.rs :is(a, button, label).btn-secondary { border-color: var(--rule-strong); background: var(--paper-raised); color: var(--ink); }
.rs :is(a, button, label).btn-secondary:hover:not(:disabled) { background: var(--paper-inset); }
.rs :is(a, button, label).btn.ghost { border-color: transparent; background: transparent; color: var(--ink); }
.rs :is(a, button, label).btn.ghost:hover:not(:disabled) { background: var(--paper-inset); }
.rs-opts .btn { min-height: 30px; padding: 0 var(--space-3); }
.rs-tool { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); white-space: nowrap; cursor: pointer; }
a.rs-tool { text-decoration: none; }
.rs-tool:hover:not(:disabled) { background: var(--paper-raised); border-color: var(--rule); }
.rs-tool:disabled { opacity: 0.45; cursor: default; }
.rs-tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.rs-tool svg { width: 16px; height: 16px; }
.rs-sep { flex: none; width: 1px; height: 20px; margin: 0 var(--space-1); background: var(--rule-strong); }
.rs-opts-label { color: var(--ink-faint); }

/* ------------------------------------------------------------ fields */

.rs input[type="text"], .rs input[type="number"], .rs input[type="search"], .rs select, .rs textarea {
  min-height: 30px; padding: 4px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
}
.rs textarea { width: 100%; min-height: 72px; resize: vertical; line-height: 1.45; }
.rs input:focus-visible, .rs select:focus-visible, .rs textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.rs :is(button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rs label.rs-field { display: grid; align-content: start; gap: var(--space-1); min-width: 0; color: var(--ink-soft); }
.rs label.rs-field > :is(input, select, textarea) { width: 100%; min-width: 0; }
.rs-form [data-field][hidden] { display: none; }
.rs .rs-field > span:first-child, .rs .rs-legend { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.rs label.rs-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; color: var(--ink); cursor: pointer; }
.rs fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* ------------------------------------------------------------ the working area */

.rs-main { position: relative; display: grid; grid-template-columns: var(--rs-nav) minmax(0, 1fr) var(--rs-side); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.rs-main.no-nav { grid-template-columns: 0 minmax(0, 1fr) var(--rs-side); }
.rs-main.no-side { grid-template-columns: var(--rs-nav) minmax(0, 1fr) 0; }
.rs-main.no-nav.no-side { grid-template-columns: 0 minmax(0, 1fr) 0; }
.rs-main.no-nav > .rs-nav, .rs-main.no-side > .rs-side { visibility: hidden; overflow: hidden; border: 0; }
.rs-nav { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; border-right: 1px solid var(--rule); background: var(--paper-raised); }
.rs-side { min-height: 0; overflow-y: auto; scrollbar-width: thin; border-left: 1px solid var(--rule); background: var(--paper-raised); }
.rs-stage { position: relative; min-width: 0; min-height: 0; display: flex; background: var(--paper); }
.rs-view { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.rs-view[hidden], .rs-empty[hidden] { display: none; }

.rs-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.rs-panel-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 650; }
.rs-panel-close { display: none; }
.rs-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.rs-sec:last-child { border-bottom: 0; }
.rs-sec > h3 { margin: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.rs-sec > p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.rs-sec > .rs-link { justify-self: start; min-height: 28px; }
.rs-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--ink); line-height: 1.45; }
.rs-note.good { background: var(--good-soft); }
.rs-note:empty { display: none; }
.rs-list { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1px; margin: 0; padding: var(--space-1); list-style: none; }
.rs-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); transition: background-color var(--dur-2) var(--ease-standard); }
.rs-list li:hover { background: var(--paper-inset); }
.rs-list li[aria-current="true"] { background: var(--accent-soft); }
.rs-list li > button.rs-li-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rs-list .rs-li-sub { margin-left: auto; color: var(--ink-faint); font-size: var(--text-2xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-list .rs-ib { width: 26px; height: 26px; }
.rs-list-head { min-height: 0; padding: var(--space-3) var(--space-3) var(--space-1); color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rs-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-dot { display: inline-block; vertical-align: -1px; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sw, var(--ink-faint)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.rs-kind { flex: none; color: var(--ink-faint); }
.rs-kind svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ start */

.rs-empty { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6) var(--space-5); }
.rs-start { max-width: 1240px; margin: 0 auto; }
.rs-start h2 { margin: 0 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.rs-start > p { max-width: 640px; margin: 0 0 var(--space-5); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.rs-start-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.rs-start-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-raised); transition: border-color var(--dur-2) var(--ease-standard); }
.rs-start-card:hover { border-color: var(--rule-strong); }
.rs-start-card h3 { margin: 0; font-size: var(--text-md); font-weight: 650; }
.rs-start-card p { flex: 1 1 auto; margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.rs-start-card .btn { align-self: flex-start; }
.rs-start-switch { margin: var(--space-3) 0 0; }
.rs-start-sub { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.rs-recent { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rs-recent li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-bottom: 1px solid var(--rule); }
.rs-recent li.rs-muted { padding: var(--space-3) 0; }
.rs-recent button.rs-li-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--space-3); min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rs-recent b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-recent span { color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ a job running */

/* The analysis or imputation under way (research-jobs.js), at the top of
   the view: what runs, how far it has got, and Cancel. The bar fills when
   the job can say how much there is to do; otherwise it stays faint and
   the count gives the time so far. The strip rises in once the job has
   run long enough to be shown; the bar fills in steps that ease rather
   than jump, and while the job cannot say how far it has got the faint
   bar breathes, a slow change of opacity and nothing that moves (with
   motion switched down it simply stays faint). */
.rs-job { flex: 0 0 auto; display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); background: var(--paper-raised); --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rs-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.rs-job-title { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rs-job-count { color: var(--ink-soft); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rs-job-cancel { flex: 0 0 auto; }
.rs-job-bar { position: relative; height: 4px; overflow: hidden; border-radius: var(--radius-sm); background: var(--rule); }
.rs-job-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width var(--dur-2) var(--ease-standard); }
.rs-job-bar.is-unknown > span { width: 100%; opacity: 0.3; animation: rs-job-wait var(--dur-sweep) var(--ease-standard) infinite; }
@keyframes rs-job-wait { 50% { opacity: 0.55; } }

/* ------------------------------------------------------------ the data grid */

.rs-gridwrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; outline: none; background: var(--paper-raised); }
.rs-gridwrap:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.rs-table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; table-layout: fixed; }
.rs-table th, .rs-table td { height: var(--rs-row); padding: 0 var(--space-2); border-right: 1px solid var(--rs-grid); border-bottom: 1px solid var(--rs-grid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-table thead th { position: sticky; top: 0; z-index: 3; background: var(--paper-inset); color: var(--ink); font-weight: 600; text-align: left; cursor: default; border-bottom-color: var(--rule-strong); }
.rs-table thead th.rs-num { text-align: right; }
.rs-table th.rs-rowno { position: sticky; left: 0; z-index: 2; width: 56px; min-width: 56px; background: var(--paper-inset); color: var(--ink-faint); font-weight: 500; text-align: right; }
.rs-table thead th.rs-rowno { z-index: 4; }
.rs-table td.rs-num { text-align: right; }
.rs-table td.rs-miss { color: var(--ink-faint); }
.rs-table td.is-cur { box-shadow: inset 0 0 0 2px var(--accent-strong); }
.rs-table th.is-cur, .rs-table td.is-col { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rs-table thead th.is-cur { background: var(--accent-soft); color: var(--accent-strong); }
.rs-table tr.is-out th.rs-rowno { background-image: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--ink-faint) calc(50% - 0.75px), var(--ink-faint) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.rs-table tr.is-out td { color: var(--ink-faint); }
.rs-cellinput { position: absolute; z-index: 6; margin: 0; padding: 0 var(--space-2); border: 2px solid var(--accent-strong); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.rs-spacer td { height: auto; padding: 0; border: 0; }
.rs-vt th, .rs-vt td { cursor: default; }
.rs-vt td.rs-edit { cursor: text; }
.rs-vt td.rs-pick { cursor: pointer; }
.rs-vt td.rs-pick:hover { background: var(--paper-inset); }

/* ------------------------------------------------------------ output */

.rs-outline { padding: var(--space-1); }
.rs-outline li > button.rs-li-main { font-weight: 500; }
.rs-outline .rs-li-time { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rs-doc { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-5) var(--space-8); background: var(--paper); }
.rs-item { max-width: 920px; margin: 0 auto var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.rs-item { transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); }
.rs-item.is-current { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
.rs-item-head { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-3); }
.rs-item-head h2 { flex: 1 1 auto; margin: 0; font: 650 var(--text-lg)/1.25 var(--font-sans); }
.rs-item-meta { color: var(--ink-faint); font-size: var(--text-2xs); white-space: nowrap; }
.rs-group-head { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--rule); font-size: var(--text-sm); font-weight: 600; font-style: italic; }
.rs-apa-table { margin: var(--space-4) 0; overflow-x: auto; }
.rs-apa-table .rs-tno { margin: 0; font-weight: 700; }
.rs-apa-table .rs-ttitle { margin: 2px 0 var(--space-2); font-style: italic; }
.rs-apa-table table { width: auto; min-width: 50%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.rs-apa-table th { padding: 5px var(--space-3) 4px; border-bottom: 1px solid var(--ink); font-weight: 600; text-align: left; vertical-align: bottom; white-space: nowrap; }
.rs-apa-table td { padding: 3px var(--space-3); vertical-align: top; white-space: nowrap; }
.rs-apa-table td:first-child { white-space: normal; min-width: 140px; max-width: 320px; }
.rs-apa-table .rs-num { text-align: right; }
/* A table of words (the summary of findings, the studies' characteristics)
   wraps in its cells and fills the page, rather than running off the side. */
.rs-apa-table.is-wrap table { width: 100%; }
.rs-apa-table.is-wrap th, .rs-apa-table.is-wrap td { min-width: 96px; white-space: normal; }
.rs-apa-table tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rs-apa-table .rs-tnote { margin: var(--space-1) 0 0; color: var(--ink-soft); font-size: var(--text-2xs); line-height: 1.45; }
.rs-apa-table .rs-tnote i { font-style: italic; }
.rs-figure { margin: var(--space-4) 0; }
.rs-figure figcaption { margin: 0 0 var(--space-2); }
.rs-figure figcaption b { display: block; }
.rs-figure figcaption i { font-style: italic; }
.rs-figure figcaption .rs-ib { float: right; margin-left: var(--space-2); }
.rs-explain { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--rule-strong); color: var(--ink-soft); line-height: 1.55; }
.rs-para { max-width: 72ch; margin: 0 0 var(--space-3); line-height: 1.6; }
.rs-apa { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--paper-inset); line-height: 1.55; }
.rs-apa p { flex: 1 1 auto; margin: 0; }
.rs-apa .rs-ib { width: 28px; height: 28px; }
.rs-warn { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); line-height: 1.5; }
.rs-syn { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); font: var(--text-2xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-doc-empty { max-width: 560px; margin: var(--space-8) auto; color: var(--ink-soft); text-align: center; line-height: 1.6; }
.rs-doc-empty .rs-row { justify-content: center; }
.rs-doc-empty h2 { margin: 0 0 var(--space-2); color: var(--ink); font: 650 var(--text-lg)/1.3 var(--font-sans); }

/* ------------------------------------------------------------ syntax */

.rs-syntax { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: var(--space-3); gap: var(--space-2); }
.rs-syntax textarea { flex: 1 1 auto; min-height: 240px; resize: none; padding: var(--space-3); font: var(--text-xs)/1.6 var(--font-mono); tab-size: 2; white-space: pre; }
.rs-runlog { max-height: 30%; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.rs-runlog li { padding: 3px 0; border-bottom: 1px solid var(--rule); font: var(--text-2xs)/1.45 var(--font-mono); }
.rs-runlog li.is-bad { color: var(--danger); }

/* ------------------------------------------------------------ sources and coding */

.rs-reader { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-5) var(--space-8); background: var(--paper); }
.rs-page { position: relative; max-width: 800px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-6) 112px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.rs-page h2 { margin: 0 0 var(--space-1); font: 650 var(--text-lg)/1.3 var(--font-sans); overflow-wrap: anywhere; }
.rs-page-meta { margin: 0 0 var(--space-4); color: var(--ink-faint); font-size: var(--text-2xs); }
.rs-text { position: relative; font: var(--text-sm)/1.75 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); cursor: text; }
.rs-text ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.rs-text mark { padding: 0; border-radius: var(--radius-sm); color: inherit; background: color-mix(in srgb, var(--hl, var(--accent)) 20%, transparent); }
.rs-text mark.rs-hit { background: color-mix(in srgb, var(--warn) 35%, transparent); }
.rs-text .rs-ann { text-decoration: underline dotted var(--ink-soft); text-underline-offset: 3px; cursor: help; }
.rs-text .rs-part { display: block; position: relative; margin: 0 0 var(--space-3); }
.rs-text .rs-part-label { position: absolute; left: -100px; top: 2px; width: 40px; color: var(--ink-faint); font-size: var(--text-2xs); text-align: right; font-variant-numeric: tabular-nums; }
.rs-stripes { position: absolute; top: 0; bottom: 0; left: 0; width: 104px; pointer-events: none; }
.rs-stripe { position: absolute; left: max(2px, calc(68px - var(--lane, 0) * 8px)); width: 4px; border-radius: var(--radius-sm); background: var(--sw); pointer-events: auto; cursor: pointer; transition: width var(--dur-2) var(--ease-standard); }
.rs-stripe:hover, .rs-stripe.is-on { width: 6px; }
.rs-codebar { position: sticky; bottom: var(--space-3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); max-width: 780px; margin: var(--space-3) auto 0; padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: var(--elev-2, 0 12px 32px rgb(0 0 0 / 0.18)); }
.rs-codebar[hidden] { display: none; }
.rs-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; max-width: 220px; padding: 0 var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.rs-chip:hover { border-color: var(--rule-strong); background: var(--paper-inset); }
.rs-chip kbd { margin-left: 2px; }
.rs-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A recording: the player, the timeline of coded stretches under it, the
   bar of its actions, then the transcript with each paragraph's time. */
.rs-media { margin: 0 0 var(--space-2); }
.rs-media audio { display: block; width: 100%; }
.rs-media video { display: block; width: 100%; max-height: 420px; border-radius: var(--radius-md); background: var(--ink); }
.rs-timeline { --lanes: 1; position: relative; height: calc(var(--lanes) * 10px + 14px); margin: 0 0 var(--space-2); border-radius: var(--radius-sm); background: var(--paper-inset); box-shadow: inset 0 0 0 1px var(--rule); }
.rs-tl-track { position: absolute; inset: 7px 0; }
.rs-tl-span { position: absolute; top: calc(var(--lane) * 10px); height: 8px; min-width: 3px; border-radius: var(--radius-sm); background: var(--sw, var(--accent)); cursor: pointer; }
.rs-tl-span.is-on { box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3px var(--ink); }
.rs-tl-mark { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); pointer-events: none; }
.rs-tl-mark[hidden] { display: none; }
.rs-tl-cursor { position: absolute; top: -2px; bottom: -2px; left: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.rs-media-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-4); }
.rs-media-span { color: var(--ink-soft); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rs-cues .rs-cue { display: block; position: relative; margin: 0 0 var(--space-3); border-radius: var(--radius-sm); }
.rs-cues .rs-cue.is-now { background: var(--paper-inset); box-shadow: 0 0 0 6px var(--paper-inset); }
.rs-cues .rs-cue-gap { display: none; }
.rs-cue-time { position: absolute; left: -100px; top: 0; width: 56px; min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-faint); font: var(--text-2xs)/1.75 var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; user-select: none; cursor: pointer; }
.rs-cue-time:hover { color: var(--ink); text-decoration: underline; }
.rs-cue-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.rs-transcript-none { margin-bottom: var(--space-3); }
.rs-tx-tools { flex-wrap: wrap; margin: 0 0 var(--space-2); }
.rs-imgwrap { position: relative; display: inline-block; max-width: 100%; user-select: none; touch-action: none; cursor: crosshair; }
.rs-imgwrap img { display: block; max-width: 100%; height: auto; }
.rs-region { position: absolute; border: 2px solid var(--sw, var(--accent)); background: color-mix(in srgb, var(--sw, var(--accent)) 14%, transparent); border-radius: var(--radius-sm); }
.rs-region.is-draft { border-style: dashed; }
.rs-region span { position: absolute; left: 0; top: -22px; padding: 0 4px; border: 1px solid var(--sw, var(--accent)); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font-size: var(--text-2xs); white-space: nowrap; }
.rs-coded { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.rs-coded li { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; }
.rs-coded li .rs-ellipsis { flex: 1 1 auto; }

/* ------------------------------------------------------------ codes */

.rs-tree { margin: 0; padding: var(--space-1); list-style: none; }
.rs-tree li { display: flex; align-items: center; gap: var(--space-1); min-height: 32px; padding-right: var(--space-2); border-radius: var(--radius-sm); transition: background-color var(--dur-2) var(--ease-standard); }
.rs-tree li:hover { background: var(--paper-inset); }
.rs-tree li[aria-current="true"] { background: var(--accent-soft); }
.rs-tree li > button.rs-li-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 0 0 calc(var(--depth, 0) * 16px + var(--space-2)); border: 0; background: none; text-align: left; cursor: pointer; }
.rs-tree .rs-li-sub { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rs-quotes { max-width: 820px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-8); }
.rs-quotes > h2 { margin: 0 0 var(--space-1); font: 650 var(--text-lg)/1.3 var(--font-sans); overflow-wrap: anywhere; }
.rs-hscroll { overflow-x: auto; }
.rs-picks-short { max-height: 220px; }
/* A framework matrix: cases down, codes across, a summary in each cell. */
.rs-fw-table { border-collapse: separate; border-spacing: 0; }
.rs-fw-table th, .rs-fw-table td { vertical-align: top; }
.rs-fw-table thead th { white-space: nowrap; }
.rs-fw-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--paper-raised); white-space: nowrap; }
.rs-fw-table td { min-width: 220px; }
.rs-fw-table td.is-on { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--radius-sm); }
.rs-fw-count { display: block; margin: 0 0 var(--space-1); font-size: var(--text-2xs); }
.rs-fw-count:disabled { color: var(--ink-faint); text-decoration: none; cursor: default; }
.rs-fw-sum { display: block; width: 100%; min-height: 64px; resize: vertical; font: var(--text-xs)/1.45 var(--font-sans); }
.rs-fw-detail td { padding-top: 0; }
/* Plug-ins (Analyse, Plug-ins). */
.rs-plugins > p { margin: 0 0 var(--space-3); }
.rs-pl-list { margin: 0 0 var(--space-3); padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.rs-pl-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.rs-pl-list li:last-child { border-bottom: 0; }
.rs-pl-main { flex: 1 1 260px; min-width: 0; }
.rs-pl-main .rs-help { margin: 2px 0 0; }
.rs-pl-kind { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.rs-pl-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rs-pl-sub { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); }
.rs-fw-passages { position: sticky; left: 0; max-width: min(860px, calc(100vw - 48px)); }
.rs-fw-passages h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.rs-quote { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--rule); border-left: 3px solid var(--sw, var(--rule-strong)); border-radius: var(--radius-sm); background: var(--paper-raised); }
.rs-quote p { margin: 0 0 var(--space-1); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rs-quote footer { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--ink-faint); font-size: var(--text-2xs); }
.rs-swatches { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.rs-swatch { width: 26px; height: 26px; padding: 0; border: 2px solid var(--paper-raised); border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.rs-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-strong); }

/* ------------------------------------------------------------ queries, cases */

.rs-qform { display: grid; gap: var(--space-3); max-width: 920px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--rule); }
.rs-qform h2 { margin: 0; font: 650 var(--text-lg)/1.3 var(--font-sans); }
.rs-qform > p { margin: 0; color: var(--ink-soft); line-height: 1.5; max-width: 680px; }
.rs-qrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.rs-qrow label.rs-field { flex: 1 1 200px; }
.rs-qrow label.rs-field.rs-narrow { flex: 0 0 120px; }
.rs-results { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-8); }
.rs-results > .rs-row { margin-bottom: var(--space-3); }
.rs-kwic { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.rs-kwic td { padding: 4px var(--space-2); border-bottom: 1px solid var(--rule); vertical-align: top; }
.rs-kwic .rs-kl { text-align: right; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; direction: rtl; }
.rs-kwic .rs-kw { font-weight: 700; white-space: nowrap; }
.rs-kwic .rs-kr { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.rs-kwic .rs-ksrc { color: var(--ink-faint); white-space: nowrap; font-size: var(--text-2xs); }
.rs-plain { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rs-plain th, .rs-plain td { padding: 4px var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.rs-plain .rs-ib { width: 28px; height: 28px; }
.rs-plain tbody th { font-weight: 600; }
.rs-plain th { color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; }
.rs-plain .rs-num { text-align: right; }
.rs-plain input[type="text"] { width: 100%; min-width: 80px; }
.rs-hits { margin: 0; padding: 0; list-style: none; }
.rs-hits li { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); line-height: 1.55; }
.rs-hits li b { background: color-mix(in srgb, var(--warn) 35%, transparent); font-weight: 600; }
.rs-hits .rs-ksrc { display: block; color: var(--ink-faint); font-size: var(--text-2xs); }

/* ------------------------------------------------------------ the review */

/* Records: one paper to a row, its title over its citation, with tags
   for the copies found and where it stands. */
.rv-seg { display: inline-flex; align-items: center; gap: 2px; }
.rv-records { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-8); }
.rv-records-head { margin: 0 0 var(--space-2); color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rv-rows { max-width: 1000px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rv-rows li { border-bottom: 1px solid var(--rule); transition: background-color var(--dur-2) var(--ease-standard); }
.rv-rows li[aria-current="true"] { background: var(--accent-soft); }
.rv-row { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-2); border: 0; background: none; text-align: left; cursor: pointer; }
.rv-row:hover { background: var(--paper-inset); }
.rv-row-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rv-row-meta { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--ink-soft); font-size: var(--text-2xs); }
.rv-tag { flex: none; padding: 0 var(--space-1); border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.02em; white-space: nowrap; }
.rv-tag.is-include { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); color: var(--good); }
.rv-tag.is-exclude { color: var(--ink-faint); }
.rv-tag.is-conflict { border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); color: var(--danger); }
.rv-more { margin: var(--space-3) 0 0; }
.rv-none { margin: var(--space-4) 0; }
.rv-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); margin: 0; }
.rv-dl dt { color: var(--ink-soft); }
.rv-dl dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.rv-copies { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.rv-copies li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); align-items: baseline; }
.rv-copies li .rs-link { grid-column: 2; justify-self: start; }
.rv-ref .rv-title { font-size: var(--text-sm); }
.rv-abs-short { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.rv-pre { white-space: pre-wrap; }
.rv-more-note { padding: var(--space-2) var(--space-3); }
/* Two records that may be one paper, field beside field. */
.rv-pair { max-width: 980px; margin: 0 auto; }
.rv-pair-table td { width: 45%; overflow-wrap: anywhere; vertical-align: top; }
.rv-pair-table tr.is-same td { color: var(--ink-soft); }
.rv-pair-table tr.is-diff td { background: var(--warn-soft); }
.rv-pair-act { margin-top: var(--space-4); }

/* Screening: the record as a page, the decision under it. */
.rv-reader { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: 0; }
.rv-card { width: 100%; max-width: 820px; margin: 0 auto; padding: var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.rv-pos { margin: 0 0 var(--space-3); color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rv-title { margin: 0 0 var(--space-3); font: 650 var(--text-xl)/1.25 var(--font-sans); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rv-authors { margin: 0 0 var(--space-1); color: var(--ink-soft); line-height: 1.45; }
.rv-bib, .rv-ids { margin: 0; color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.5; overflow-wrap: anywhere; }
.rv-ids { font-family: var(--font-mono); }
.rv-abs { max-width: var(--measure); margin: var(--space-4) 0 0; font: var(--text-md)/1.7 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-kw { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-4) 0 0; }
.rv-kw-chip { padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); font-size: var(--text-2xs); }
mark.rv-hl-in { padding: 0 1px; border-radius: var(--radius-sm); background: var(--good-soft); color: inherit; box-shadow: inset 0 -1px 0 var(--good); }
mark.rv-hl-out { padding: 0 1px; border-radius: var(--radius-sm); background: var(--danger-soft); color: inherit; box-shadow: inset 0 -1px 0 var(--danger); }
.rv-decide { position: sticky; bottom: 0; width: 100%; max-width: 820px; margin: 0 auto; padding: var(--space-3) 0; background: var(--paper); }
.rv-said, .rv-conflict { margin: 0 0 var(--space-2); color: var(--ink-soft); }
.rv-conflict { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--ink); }
.rv-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rv-btn { display: inline-flex; flex: 1 1 0; max-width: 220px; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.rv-btn kbd { margin-left: auto; font-weight: 500; }
.rv-btn::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.rv-btn.is-in::before { background: var(--good); }
.rv-btn.is-maybe::before { background: var(--warn); }
.rv-btn.is-out::before { background: var(--danger); }
.rv-btn:hover { background: var(--paper-inset); }
.rv-btn.is-in:hover, .rv-btn.is-in[aria-pressed="true"] { border-color: var(--good); background: var(--good-soft); }
.rv-btn.is-maybe:hover, .rv-btn.is-maybe[aria-pressed="true"] { border-color: var(--warn); background: var(--warn-soft); }
.rv-btn.is-out:hover, .rv-btn.is-out[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-soft); }
.rv-btn.is-missing:hover, .rv-btn.is-missing[aria-pressed="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.rv-btn.is-in[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--good); }
.rv-btn.is-maybe[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--warn); }
.rv-btn.is-out[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
.rv-btn.is-missing[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.rv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.rv-dot.is-include { background: var(--good); box-shadow: none; }
.rv-dot.is-maybe { background: var(--warn); box-shadow: none; }
.rv-dot.is-exclude { background: var(--ink-faint); box-shadow: none; }
.rv-dot.is-missing { background: var(--rule-strong); box-shadow: none; }
.rv-dot.is-conflict { background: var(--danger); box-shadow: none; }
.rv-order-said { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rv-progress { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-bar { position: relative; width: 96px; height: 6px; overflow: hidden; border-radius: var(--radius-sm); background: var(--rule); }
.rv-bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width var(--dur-3) var(--ease-standard); }
.rv-reasons { display: grid; gap: 2px; }
.rv-reasons input[type="text"] { width: 100%; margin-top: var(--space-1); }
.rv-reasons input[type="text"][hidden] { display: none; }
.rv-imp-wrap { max-height: min(56vh, 520px); overflow-y: auto; }
.rv-imp th[scope="row"] { min-width: 0; font-weight: 400; }
.rv-imp tbody tr:not(.rv-imp-search) > * { padding-top: var(--space-2); border-bottom: 0; }
.rv-imp select, .rv-imp input[type="text"] { width: 100%; }
.rv-imp-file { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.rv-imp-sub { display: block; color: var(--ink-faint); font-size: var(--text-2xs); }
.rv-imp-search td { padding-top: 0; }
.rv-imp-search summary { min-height: 28px; color: var(--ink-soft); font-size: var(--text-2xs); cursor: pointer; }
.rv-imp-search textarea { margin-top: var(--space-1); }

/* The PRISMA 2020 flow diagram, as it will be printed. */
.rv-flow { max-width: 900px; }
.rv-prisma-wrap { overflow-x: auto; }
.rs svg.rv-prisma { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; }
.rv-flow .rs-tnote { margin: var(--space-3) 0 0; color: var(--ink-soft); font-size: var(--text-2xs); line-height: 1.45; }

@media (max-width: 760px) {
  .rv-records { padding: var(--space-2) var(--space-2) var(--space-7); }
  .rv-card { padding: var(--space-4) var(--space-4); }
  .rv-title { font-size: var(--text-lg); }
  .rv-btn { flex: 1 1 0; min-width: 0; max-width: none; justify-content: center; padding: 0 var(--space-2); }
  .rv-btn kbd { display: none; }
  .rv-btns > .rs-grow { display: none; }
  .st-doc .rs-item.st-form { padding: var(--space-4); }
  .st-fields { grid-template-columns: minmax(0, 1fr); }
  .st-diff > span { flex-basis: 100%; }
  .st-ed { grid-template-columns: minmax(0, 1fr) auto; }
  .st-ed [name=k] { grid-column: 1; grid-row: 2; }
  .st-ed [name=o] { grid-column: 1 / -1; grid-row: 3; }
  .st-ed-act { grid-column: 2; grid-row: 1 / 3; flex-direction: column; }
  .rv-progress .rv-bar { display: none; }
  .rs svg.rv-prisma { min-width: 640px; }
  .rs svg.rs-forest { min-width: 720px; }
  /* The review's pickers keep their label beside them and stay inside the
     screen. */
  .rs-opts label.rs-row:has(#robTool, #maMeasure, #maMethod, #rvShow, #rvMe) { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  :is(#robTool, #maMeasure, #maMethod, #rvShow, #rvMe) { min-width: 0; max-width: calc(100vw - 120px); }
  .ma-plot .rs-chart:not(.rs-forest) { min-width: 520px; }
  .rv-imp thead { display: none; }
  .rv-imp, .rv-imp tbody { display: block; }
  .rv-imp tbody tr:not(.rv-imp-search) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-1) var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
  .rv-imp tbody tr:not(.rv-imp-search) > * { display: block; padding: 0; }
  .rv-imp th[scope="row"] { grid-column: 1 / -1; }
  .rv-imp-search { display: block; }
  .rv-imp-search td { display: block; padding: 0 0 var(--space-2); border-bottom: 0; }
  .rv-imp-search td:first-child { display: none; }
}

/* Meta-analysis: each study's figures typed in a table, the results and
   the plots under it as they are typed. */
.ma-doc .rs-item { max-width: 1000px; }
.rs .ma-name { width: 100%; min-height: 34px; padding: 2px var(--space-1); border-color: transparent; background: transparent; font: inherit; }
.rs .ma-name:hover { border-color: var(--rule); }
.rs .ma-name:focus-visible { background: var(--paper); }
.ma-table .rs-ib { color: var(--ink-faint); }
.ma-tablewrap { overflow-x: auto; }
.ma-dta-sum { max-width: 34rem; }
.ma-table { width: auto; min-width: 100%; }
.ma-table input[type="text"] { min-width: 0; border-color: transparent; background: transparent; }
.ma-table input[type="text"]:hover { border-color: var(--rule); background: var(--paper); }
.ma-table input[type="text"]:focus-visible { background: var(--paper); }
.ma-table td { padding-top: 2px; padding-bottom: 2px; }
.ma-table td:first-child input { width: 100%; min-width: 150px; }
.ma-table input.rs-num { width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; }
.ma-table th.ma-arm { padding-bottom: 0; text-align: center; }
.ma-table th.ma-arm input { width: 100%; min-height: 26px; border-color: transparent; background: transparent; color: var(--ink-soft); font-weight: 600; text-align: center; }
.ma-table th.ma-arm input:hover { border-color: var(--rule); }
.ma-eff { min-width: 150px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-eff.is-bad { color: var(--danger); }
.ma-add { margin-top: var(--space-3); }
.ma-plot { overflow-x: auto; }

.ma-loo summary { min-height: 32px; font-weight: 600; cursor: pointer; }

/* Risk of bias: each domain judged with its support, the plots under. */
.rb-doc .rs-item { max-width: 920px; }
.rb-domains { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.rs label.rs-field.rb-cat { margin-top: var(--space-4); max-width: 24rem; }
.rb-met { font-variant-numeric: tabular-nums; }
.rb-screen-note { flex-basis: 100%; order: 3; margin: 0; }
.rb-domain { display: grid; gap: var(--space-2); padding: var(--space-3) 0 0; border-top: 1px solid var(--rule); }
.rb-domain.is-app .rb-did { color: var(--ink-faint); }
.rb-dhead { display: flex; align-items: baseline; gap: var(--space-2); }
.rb-did { flex: none; min-width: 2.2em; color: var(--ink-soft); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: 0.04em; }
.rb-dname { font-weight: 600; }
.rb-levels { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.rb-level { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); }
.rb-level:hover { background: var(--paper-inset); }
.rb-level input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rb-level:has(input:checked) { border-color: var(--ink-soft); background: var(--paper-inset); box-shadow: inset 0 0 0 1px var(--ink-soft); font-weight: 600; }
.rb-level:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.rb-level:has(input:disabled) { opacity: 0.6; cursor: default; }
.rb-note { min-height: 44px !important; }
.rb-dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--paper-raised); font: 700 var(--text-2xs)/1 var(--font-sans); }
.rb-dot.is-low { background: var(--good); box-shadow: none; }
.rb-dot.is-some, .rb-dot.is-moderate { background: var(--warn); box-shadow: none; }
.rb-dot.is-high, .rb-dot.is-serious { background: var(--danger); box-shadow: none; }
.rb-dot.is-critical { background: color-mix(in srgb, var(--danger) 62%, var(--ink)); box-shadow: none; }
.rb-dot.is-unclear, .rb-dot.is-ni { background: var(--ink-faint); box-shadow: none; }
.rb-overall { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.rb-conflict { color: var(--danger); }
.rb-diff .rs-row { margin-top: var(--space-2); }
/* Studies: the characteristics table, typed in place. */
.st-table { table-layout: auto; }
.st-table th, .st-table td { vertical-align: top; }
.st-table thead th { white-space: nowrap; }
.st-doc .rs-item { max-width: none; }
.st-table th.st-study { position: sticky; left: 0; z-index: 1; min-width: 180px; max-width: 240px; background: var(--paper-raised); box-shadow: inset 0 -1px 0 var(--rule); text-align: left; font-weight: 400; white-space: normal; }
.st-table tr.is-pdf th.st-study { box-shadow: inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--rule); }
.st-cite { display: block; color: var(--ink); font-weight: 600; }
.st-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-soft); font-size: var(--text-2xs); line-height: 1.4; }
.st-table textarea { display: block; width: 100%; min-width: 140px; min-height: 32px; resize: none; overflow: hidden; border-color: transparent; background: transparent; line-height: 1.4; }
.st-table textarea:hover { border-color: var(--rule); background: var(--paper); }
.st-table textarea:focus-visible { background: var(--paper); }
.st-table select, .st-table .st-numin { width: 100%; min-width: 120px; }
/* Data extraction, one study at a time: the form of the review's fields,
   then the study's figures for each outcome pooled. */
.st-doc .rs-item.st-form { max-width: 820px; margin: 0 auto; padding: var(--space-6); }
.st-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.st-field { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }
.st-field.is-wide { grid-column: 1 / -1; }
.st-label { color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 600; }
.st-field textarea { display: block; width: 100%; min-height: 36px; resize: none; overflow: hidden; line-height: 1.45; }
.st-field select, .st-field .st-numin { width: 100%; }
.st-head { grid-column: 1 / -1; margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); color: var(--ink-faint); font: 600 var(--text-2xs)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.st-fields > .st-head:first-child { margin-top: var(--space-4); }
.st-yesno, .st-multi { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.st-pick { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.st-pick:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); }
.st-pick input { margin: 0; }
.st-none { margin: var(--space-2) 0 0; }
.st-out { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); }
.st-out-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.st-out-head .rs-muted { font-size: var(--text-2xs); }
.st-arms { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.st-arm { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.st-arm-name { flex-basis: 100%; color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 600; }
.st-fig { display: grid; gap: 2px; color: var(--ink-faint); font-size: var(--text-2xs); }
.st-fig input { width: 6.5em; font-variant-numeric: tabular-nums; }
.st-out-add { margin-top: var(--space-2); }
/* Meta-regression: the moderators to choose, then the coefficients. */
/* A reference list: hanging indents, or numbers. */
.rs-refs { margin: 0; padding: 0; list-style: none; }
.rs-refs li { margin: 0 0 var(--space-2); padding-left: 2em; text-indent: -2em; line-height: 1.55; overflow-wrap: anywhere; }
.rs-refs.is-numbered { padding-left: 2em; list-style: decimal; }
.rs-refs.is-numbered li { padding-left: 0; text-indent: 0; }
.rv-bib-sample { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); padding-left: calc(var(--space-3) + 2em); text-indent: -2em; border-radius: var(--radius-sm); background: var(--paper-inset); font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
.ma-mods { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.ma-mods .rs-muted { font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.ma-regtab { margin-bottom: var(--space-3); }
.ma-regtab td.rs-num, .ma-regtab th.rs-num { white-space: nowrap; }
/* Where the other extractor's copy says something else. */
.st-field.is-diff > :is(textarea, select, input, .st-yesno, .st-multi), .st-fig.is-diff input { box-shadow: 0 0 0 1px var(--warn); }
.st-diff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); font-size: var(--text-xs); }
.st-diff > span { margin-right: auto; overflow-wrap: anywhere; }
.st-pos-diff { color: var(--ink-soft); }
.st-done.is-diff { background: var(--warn); box-shadow: none; }
.st-foot { display: flex; align-items: center; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.st-done { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.st-done.is-part { background: var(--warn); box-shadow: none; }
.st-done.is-whole { background: var(--good); box-shadow: none; }
/* The fields' editor. */
.st-eds { display: grid; gap: var(--space-2); max-height: min(56vh, 520px); margin: var(--space-3) 0; padding: 0; overflow-y: auto; list-style: none; }
.st-ed { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.st-ed [name=o] { grid-column: 1 / 3; grid-row: 2; }
.st-ed-act { display: flex; grid-column: 3; grid-row: 1; }
/* GRADE: the certainty under an analysis. */
.gr-item { max-width: 920px; }
.gr-grid { display: grid; grid-template-columns: minmax(0, 360px); margin: var(--space-3) 0; }
.gr-table { width: 100%; }
.gr-table th[scope="row"] { width: 30%; font-weight: 600; }
.gr-table td:nth-child(2) { width: 220px; }
.gr-table select, .gr-table input { width: 100%; min-width: 0; }
.gr-cert { flex: none; padding: 0 var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font: 600 var(--text-xs)/1.8 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-cert.is-high { border-color: var(--good); color: var(--good); }
.gr-cert.is-moderate { border-color: var(--ink-soft); color: var(--ink); }
.gr-cert.is-low { border-color: var(--warn); color: var(--warn); }
.gr-cert.is-verylow { border-color: var(--danger); color: var(--danger); }
/* Search: the concepts, and the search written for each database. */
.sr-doc .rs-item { max-width: 920px; }
.sr-concepts { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.sr-concept { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); }
.sr-chead { display: flex; align-items: center; gap: var(--space-2); }
.sr-and { flex: none; min-width: 2.6em; color: var(--ink-faint); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: 0.08em; }
.sr-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); }
.sr-grid textarea { min-height: 76px; font-family: var(--font-mono); font-size: var(--text-xs); }
.sr-limits { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.sr-limits .rs-field input { width: 7em; font-variant-numeric: tabular-nums; }
.sr-dbs { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--space-3) 0; }
.sr-out { margin: 0; padding: var(--space-3); max-height: 360px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); color: var(--ink); font: var(--text-xs)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-out:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sr-none { margin: 0; }
.sr-run { margin-top: var(--space-3); }
/* The window a search is run from: what is sent, then the count, then the
   records coming in. */
.sr-sent { max-height: 180px; margin: var(--space-3) 0; }
.sr-since { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.sr-since legend { width: 100%; padding: 0; margin-bottom: var(--space-1); color: var(--ink-soft); }
.sr-live { min-height: 2.6em; font-variant-numeric: tabular-nums; }
.sr-live p { margin: 0 0 var(--space-2); }
.sr-live-bad { color: var(--danger); }
.rv-bar.sr-live-bar { display: block; width: 100%; }
/* Bibliometrics: the map, its clusters, and the field in figures. */
.bb-doc .rs-item { max-width: 920px; }
.bb-plot svg.rs-chart { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }
.bb-clusters { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--ink-soft); }
.bb-clusters b { color: var(--ink); font-weight: 600; }
.bb-swatch { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: 50%; vertical-align: baseline; }
.bb-c1 { background: var(--chart-1); } .bb-c2 { background: var(--chart-2); } .bb-c3 { background: var(--chart-3); } .bb-c4 { background: var(--chart-4); } .bb-c5 { background: var(--chart-5); }
.bb-tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.bb-top h3 { margin: 0 0 var(--space-2); font: 650 var(--text-sm)/1.3 var(--font-sans); }
.bb-cite { color: var(--ink); font-weight: 600; }
/* The bursts: each keyword's years on a line from the first to the last. */
.bb-bursts td, .bb-bursts th { vertical-align: middle; }
.bb-span-h { width: 40%; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.bb-span { position: relative; display: block; height: 8px; border-radius: var(--radius-sm); background: var(--rule); }
.bb-span > span { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-sm); background: var(--accent); transition: left var(--dur-3) var(--ease-standard), width var(--dur-3) var(--ease-standard); }
#bbMin { width: 4.5em; font-variant-numeric: tabular-nums; }
/* Full texts: the paper's PDF beside the work on it. */
.fx-split { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.fx-main { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fx-split.has-pdf > .fx-main { flex-basis: 0; }
.fx-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-height: 40px; padding: var(--space-1) var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft); font-size: var(--text-xs); }
.fx-strip > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.fx-strip > span { flex: 1 1 auto; min-width: 0; }
.fx-strip b { color: var(--ink); font-weight: 600; }
.fx-count { color: var(--ink-soft); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-pane { flex: 1 1 0; min-width: 380px; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--rule); background: var(--paper-inset); }
.fx-bar { display: grid; gap: 2px; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.fx-group { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.fx-grow { flex: 1 1 auto; }
.fx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--text-xs); }
.fx-pages-n, .fx-said { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-find { flex: 0 1 220px; min-width: 120px; }
.fx-find input { width: 100%; }
.fx-zoom { min-width: 56px; justify-content: center; font-variant-numeric: tabular-nums; }
.fx-pages { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-4); outline: none; }
.fx-pages:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.fx-wait { margin: var(--space-6) auto; max-width: 360px; color: var(--ink-soft); text-align: center; }
.fx-page { position: relative; margin: 0 auto var(--space-4); background: white; box-shadow: 0 0 0 1px var(--rule-strong); }
.fx-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* pdf.js's text layer: the words over the picture of the page,
   transparent, so they can be selected and found. */
.fx-page .textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0; }
.fx-page .textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.fx-page .textLayer ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.fx-page .textLayer :is(.fx-hit, .fx-whole) { background: color-mix(in srgb, var(--warn) 45%, transparent); }
.fx-page .textLayer span.fx-hit { position: static; }
.fx-match select { width: 100%; min-width: 220px; }
.fx-match th[scope="row"] .rs-muted { display: block; font-weight: 400; }
/* The review's plots are drawn at their own size and never stretched:
   only made smaller where the window is narrower. */
.rs svg.rs-rob, .rs svg.rs-forest { width: auto; max-width: 100%; height: auto; margin: 0 auto; }

/* ------------------------------------------------------------ status */

.rs-status { display: flex; align-items: center; gap: var(--space-3); min-height: 30px; padding: 0 150px 0 var(--space-3); border-top: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; }
.rs-status > #rsSay { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rs-status [data-kind="warn"] { color: var(--warn); }
.rs-flag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.rs-flag[hidden] { display: none; }
.rs-flag svg { width: 13px; height: 13px; }
.rs-flag.is-stale { background: var(--warn-soft); color: var(--ink); }
.rs-cases { font-variant-numeric: tabular-nums; }
.rs-share { border: 0; background: none; padding: 0 var(--space-1); color: var(--ink-soft); font: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.rs-steps { margin: 0 0 var(--space-3); padding-left: 1.25rem; }
.rs-steps li { margin-bottom: var(--space-1); }
@media (max-width: 760px) { .rs-share { display: none; } }
.rs-share:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ dialogs */

.rs-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgb(0 0 0 / 0.55); }
.rs-dialog.is-wide { width: min(860px, calc(100vw - 32px)); }
.rs-form { display: grid; gap: var(--space-3); padding: var(--space-5); font-size: var(--text-xs); }
.rs-form h2 { margin: 0; font: 650 var(--text-lg)/1.25 var(--font-sans); }
.rs-form > p, .rs-form .rs-help { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.rs-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rs-form-grid > .rs-span { grid-column: 1 / -1; }
.rs-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-1); }
.rs-actions .rs-grow { flex: 1 1 auto; }
.rs-picklist { display: grid; gap: 4px; }
.rs-picklist input[type="search"] { width: 100%; }
.rs-picks { height: 184px; margin: 0; padding: 2px; overflow-y: auto; list-style: none; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); }
.rs-picks li label { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard); }
.rs-picks li label:hover { background: var(--paper-inset); }
.rs-picks li label .rs-ellipsis { flex: 1 1 auto; }
.rs-picks li label .rs-pick-name { color: var(--ink-faint); font: var(--text-2xs) var(--font-mono); }
.rs-picks li[hidden] { display: none; }
.rs-pick-count { color: var(--ink-faint); font-size: var(--text-2xs); }
.rs-pairs { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.rs-pairs li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.rs-rules { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.rs-rules li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.rs-keys { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.rs-keys dt { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.rs-keys dd { margin: 0; color: var(--ink-soft); }
.rs-keys-head { grid-column: 1 / -1; margin: var(--space-3) 0 0; font-weight: 650; }

/* ------------------------------------------------------------ narrower */

@media (max-width: 1180px) {
  .rs { --rs-nav: 200px; --rs-side: 268px; }
}
/* Four cards in a row where each is wide enough for its button on one
   line, two to a row below that. */
@media (max-width: 1300px) {
  .rs-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A phone: the bar wraps under the name, the list and the details are
   sheets over the work that the options row brings up, and everything a
   finger presses is 44 pixels. Reading and coding a source works here; the
   wide tables scroll sideways inside their own frame. */
@media (max-width: 760px) {
  .rs-top { row-gap: 2px; padding: 6px 6px 4px; }
  /* The views are one row a finger's height, with no more padding than
     the bar's, so the bar, the menus and the views stay inside a sixth of
     the screen. */
  .rs-views { padding: 2px var(--space-2); }
  .rs-ws { display: none; }
  .rs-ws-pick { display: block; flex: none; min-height: 44px; margin-right: var(--space-2); font-weight: 600; }
  .rs-vgroup { padding-left: var(--space-2); }
  /* A view's options keep to one row, which slides sideways, so the work
     starts high on the screen. */
  .rs-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rs-opts::-webkit-scrollbar { display: none; }
  .rs-opts > * { flex: none; }
  .rs-menubar { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .rs-menubar::-webkit-scrollbar { display: none; }
  .rs-drop { position: fixed; top: auto; left: var(--space-2); right: var(--space-2); min-width: 0; max-height: 60vh; }
  .rs-docname { display: none; }
  .rs-save span { display: none; }
  .rs-main, .rs-main.no-nav, .rs-main.no-side, .rs-main.no-nav.no-side { grid-template-columns: minmax(0, 1fr); }
  .rs-main > .rs-nav, .rs-main > .rs-side { position: absolute; z-index: 30; visibility: visible; box-shadow: 0 12px 36px rgb(0 0 0 / 0.3); }
  .rs-main > .rs-nav { top: 0; bottom: 0; left: 0; width: min(280px, 84vw); }
  .rs-main > .rs-side { left: 0; right: 0; bottom: 0; max-height: 64%; border-left: 0; border-top: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .rs-main.no-nav > .rs-nav, .rs-main.no-side > .rs-side { display: none; }
  .rs-panel-close { display: inline-flex; }
  .rs-stage { grid-column: 1; }
  .rs-empty { padding: var(--space-4) var(--space-3); }
  .rs-start-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-doc, .rs-reader { padding: var(--space-3) var(--space-2) var(--space-7); }
  .rs-item { padding: var(--space-4) var(--space-3); }
  .rs-page { padding: var(--space-4) var(--space-3) var(--space-5) 40px; }
  .rs-text .rs-part-label { position: static; display: block; width: auto; text-align: left; }
  .rs-cue-time { position: static; display: block; width: auto; text-align: left; }
  .rs-stripes { width: 32px; }
  .rs-stripe { left: max(2px, calc(30px - var(--lane, 0) * 7px)); }
  .rs-qform, .rs-results, .rs-quotes { padding-left: var(--space-3); padding-right: var(--space-3); }
  .rs-form { padding: var(--space-4); }
  .rs-form-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-status { padding-right: var(--space-2); }
  .rs-flag span { display: none; }
  /* The badge sits in the status bar, as Write's does, not above it over
     the start screen's cards. */
  body.rs-app #ppBadge { left: auto; right: var(--space-2); bottom: 2px; min-height: 44px; }
  .rs-status { min-height: 48px; padding-right: 64px; }
}
@media (pointer: coarse) {
  .rs { --rs-hit: 44px; --rs-row: 40px; }
  .rs-menu > summary { justify-content: center; }
  .rs-menu > summary, .rs-views button, .rs-tool, .rs .btn, .rs-save, .rs .rs-ib, .rs-link, .rs label.rs-check, .rs-swatch, .rs-drop button, .rs-drop a, .rs-list li > button.rs-li-main, .rs-tree li > button.rs-li-main, .rs-chip, .rs-picks li label { min-height: 44px; min-width: 44px; }
  .rs input[type="text"], .rs input[type="number"], .rs input[type="search"], .rs select { min-height: 44px; }
  .rs label.rs-check input { width: 22px; height: 22px; }
  .rs-status { min-height: 48px; }
  .rs-stripe { width: 6px; }
  .rs-cue-time { min-height: 44px; min-width: 44px; }
}
.rs-side-open { display: none; }
@media (max-width: 760px) {
  .rs-side-open { display: inline-flex; }
  /* GRADE's domains stack: the name, then its rating and its reason. */
  .gr-table thead { display: none; }
  .gr-table, .gr-table tbody, .gr-table tr, .gr-table th[scope="row"], .gr-table td, .gr-table td:nth-child(2) { display: block; width: auto; }
  .gr-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .gr-table th[scope="row"], .gr-table td { padding: var(--space-1) 0; border: 0; }
  .st-table th.st-study { min-width: 128px; max-width: 160px; }
  .sr-grid { grid-template-columns: minmax(0, 1fr); }
  .bb-tops { grid-template-columns: minmax(0, 1fr); }
  /* A phone: the PDF is a sheet over the work, closed to get back to it. */
  .fx-split.has-pdf { position: relative; }
  .fx-split.has-pdf > .fx-pane { position: absolute; inset: 0; z-index: 20; min-width: 0; border-left: 0; }
  .fx-strip { padding: var(--space-1) var(--space-2); }
}
@media (pointer: coarse) {
  .st-table textarea { min-height: 44px; }
}
@media (forced-colors: active) {
  .rs-stripe, .rs-dot, .rs-swatch, .rv-dot, .rb-dot, .bb-swatch { forced-color-adjust: none; }
}

/* The review's overview: its steps, the next one lit. */
.ov-doc { max-width: 820px; margin: 0 auto; width: 100%; }
.ov-head { margin-bottom: var(--space-5); }
.ov-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.ov-q { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.ov-q .rs-link { margin-left: var(--space-2); }
.ov-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ov-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--rule); }
.ov-step.is-now { background: var(--paper-raised); box-shadow: inset 2px 0 0 var(--accent); }
.ov-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-step.is-now .ov-n { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.ov-step.is-done .ov-n { border-color: var(--good); color: var(--good); }
.ov-n svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ov-body h3 { margin: 0 0 2px; font-size: var(--text-md); }
.ov-step.is-done .ov-body h3 { color: var(--ink-soft); font-weight: 600; }
.ov-body p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.ov-bar.rv-bar { display: block; width: min(320px, 100%); margin-top: var(--space-2); }
.ov-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.ov-step.is-later .ov-act .btn, .ov-step.is-done .ov-act .btn { min-height: 32px; }
.ov-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.ov-cell h3 { margin: 0 0 var(--space-1); color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ov-cell p { margin: 0 0 var(--space-1); color: var(--ink-soft); line-height: 1.5; }
.ov-cell p .rs-link { margin-right: var(--space-3); }
@media (max-width: 760px) {
  .ov-step { grid-template-columns: 24px 1fr; padding: var(--space-3) var(--space-2); }
  .ov-foot { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* One kind of work in the project: no switch between kinds. */
.rs[data-one-ws] .rs-ws, .rs[data-one-ws] .rs-ws-pick { display: none; }
.rs[data-one-ws] .rs-vgroup { padding-left: 0; border-left: 0; }
.rs-empty.is-drop .rs-start { outline: 2px dashed var(--accent); outline-offset: var(--space-3); border-radius: var(--radius-lg); }

/* ------------------------------------------------------------ arriving */

/* How the window moves, in the site's own measures (theme.css: --dur-3
   for a notice or a list's rows, --dur-4 for a screen, --stagger between
   rows). Every entrance here uses theme.css's keyframes or rises by the
   same distances, and says so with --os-fade, so with motion switched down
   each is a fade of 100ms and nothing moves; gentle keeps the fades and
   the steps. Nothing below runs on its own: each is the reply to a thing
   somebody did, over in 450ms at most.

   The start screen deals itself out: the heading, the line, the four
   cards a step apart, then the projects on this device. It runs again
   each time a project is closed and the screen comes back. */
.rs-start > h2, .rs-start > p, .rs-start-grid > .rs-start-card, .rs-start-example, .rs-start-switch, .rs-start-sub, .rs-recent > li { --os-fade: var(--dur-fade); }
.rs-start > h2 { animation: os-rise var(--dur-4) var(--ease-emph) backwards; }
.rs-start > p { animation: os-rise-soft var(--dur-3) var(--ease-standard) var(--os-step) backwards; }
.rs-start-grid > .rs-start-card { animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--os-step) * 2); }
.rs-start-grid > .rs-start-card:nth-child(2) { animation-delay: calc(var(--os-step) * 2 + var(--stagger)); }
.rs-start-grid > .rs-start-card:nth-child(3) { animation-delay: calc(var(--os-step) * 2 + var(--stagger) * 2); }
.rs-start-grid > .rs-start-card:nth-child(4) { animation-delay: calc(var(--os-step) * 2 + var(--stagger) * 3); }
.rs-start-example, .rs-start-switch, .rs-start-sub { animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--os-step) * 3); }
.rs-recent > li { animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--os-step) * 3); }
.rs-recent > li:nth-child(2) { animation-delay: calc(var(--os-step) * 3 + var(--stagger)); }
.rs-recent > li:nth-child(3) { animation-delay: calc(var(--os-step) * 3 + var(--stagger) * 2); }
.rs-recent > li:nth-child(n+4) { animation-delay: calc(var(--os-step) * 3 + var(--stagger) * 3); }

/* A project opened: the row of views and the options under it fade in
   where they will sit (both are display: none until there is something
   to show, so the animation starts as they appear). */
.rs-viewbar, .rs-opts { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }

/* One view to another. research-app.js puts is-switching on the working
   area while a view arrives, and takes it off once every entrance below
   has had time to finish: the work rises in over --dur-4, the list's rows
   are dealt a --stagger apart, and the details fade. A view redrawn for
   any other reason (a value typed, an item deleted) does not move. */
.rs-main.is-switching > .rs-stage > .rs-view > :not(.rs-job, .rs-sr),
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li,
.rs-main.is-switching > .rs-nav > .rs-panel-head,
.rs-main.is-switching > .rs-side,
.rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item { --os-fade: var(--dur-fade); }
.rs-main.is-switching > .rs-stage > .rs-view > :not(.rs-job, .rs-sr) { animation: os-rise-soft var(--dur-4) var(--ease-standard) backwards; }
.rs-main.is-switching > .rs-side, .rs-main.is-switching > .rs-nav > .rs-panel-head { animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li { animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li:nth-child(2) { animation-delay: var(--stagger); }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.rs-main.is-switching > .rs-nav :is(.rs-list, .rs-tree, .rv-rows) > li:nth-child(n+7) { animation-delay: calc(var(--stagger) * 6); }
/* The output's items are dealt the same way as the view arrives (the
   document itself does not rise then, or the items would move twice). */
.rs-main.is-switching > .rs-stage > .rs-view > .rs-doc:has(.rs-item) { animation-name: os-fade-in; }
.rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item { animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item:nth-child(2) { animation-delay: var(--stagger); }
.rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item:nth-child(n+5) { animation-delay: calc(var(--stagger) * 4); }

/* A result arriving. research-output-ui.js marks the item an analysis has
   just added is-new, the one time it is drawn: it rises in on the curve
   for a large entrance, its tables' rows are dealt a step apart and its
   chart fades up last, within 450ms all told; the status line says it is
   there and the document scrolls to it. Whatever else is arriving, the
   new item is first (no delay), which is why these rules come last. */
.rs-main .rs-doc > .rs-item.is-new, .rs-main.is-switching > .rs-stage > .rs-view .rs-doc > .rs-item.is-new { --os-fade: var(--dur-fade); animation: os-rise var(--dur-4) var(--ease-emph) backwards; animation-delay: 0s; }
.rs-item.is-new .rs-apa-table tbody > tr, .rs-item.is-new .rs-figure svg, .rs-item.is-new .rs-apa, .rs-item.is-new .rs-explain { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.rs-item.is-new .rs-apa-table tbody > tr:nth-child(2) { animation-delay: var(--stagger); }
.rs-item.is-new .rs-apa-table tbody > tr:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.rs-item.is-new .rs-apa-table tbody > tr:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.rs-item.is-new .rs-apa-table tbody > tr:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.rs-item.is-new .rs-apa-table tbody > tr:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.rs-item.is-new .rs-apa-table tbody > tr:nth-child(n+7) { animation-delay: calc(var(--stagger) * 6); }
.rs-item.is-new .rs-figure svg, .rs-item.is-new .rs-apa, .rs-item.is-new .rs-explain { animation-duration: var(--dur-4); animation-delay: var(--dur-2); }
/* The count on the Output view grows by one as a result lands: it pops
   on the spring, as a tick does elsewhere on the site. */
.rs-count.is-bump { --os-fade: var(--dur-fade); animation: os-pop var(--dur-4) var(--ease-spring); }

/* The status line: a message rises in as it is said and fades as it
   goes (research-app.js). */
.rs-status > #rsSay { transition: opacity var(--dur-2-out) var(--ease-exit); }
.rs-status > #rsSay.is-new { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rs-status > #rsSay.is-out { opacity: 0; }

/* The bar of codes comes up under a selection; a record's card and a
   code's passages are dealt as each is reached. */
.rs-codebar:not([hidden]) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rv-reader > .rv-card { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rs-quotes > .rs-quote { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.rs-quotes > .rs-quote:nth-of-type(2) { animation-delay: var(--stagger); }
.rs-quotes > .rs-quote:nth-of-type(3) { animation-delay: calc(var(--stagger) * 2); }
.rs-quotes > .rs-quote:nth-of-type(4) { animation-delay: calc(var(--stagger) * 3); }
.rs-quotes > .rs-quote:nth-of-type(5) { animation-delay: calc(var(--stagger) * 4); }
.rs-quotes > .rs-quote:nth-of-type(6) { animation-delay: calc(var(--stagger) * 5); }
.rs-quotes > .rs-quote:nth-of-type(n+7) { animation-delay: calc(var(--stagger) * 6); }

/* The list and the details, brought back after being put away (View, The
   side panel; the buttons on a phone). On a wide screen the panel fades
   in where it sits: its column cannot grow smoothly without the words in
   it rewrapping as it does. On a phone the panels are sheets over the
   work: the list comes in from the left and the details rise from the
   foot, by the distances that are nought with motion switched down. Both
   are display: none while put away, so the animation starts as each
   appears, and a redraw while one is open does not run it again. */
.rs-main:not(.no-nav) > .rs-nav, .rs-main:not(.no-side) > .rs-side { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
@keyframes rs-sheet-left { from { opacity: 0; transform: translate3d(calc(var(--os-rise) * -1), 0, 0); } }
@keyframes rs-sheet-up { from { opacity: 0; transform: translate3d(0, var(--os-rise-lg), 0); } }
@media (max-width: 760px) {
  .rs-main:not(.no-nav) > .rs-nav { animation: rs-sheet-left var(--dur-4) var(--ease-standard) backwards; }
  .rs-main:not(.no-side) > .rs-side { animation: rs-sheet-up var(--dur-4) var(--ease-standard) backwards; }
}