/* OBSCURA OS: OBSCURA Research.

   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-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: var(--space-1) var(--space-2); 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: var(--rs-hit); height: 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-2) 0 0; font-size: var(--text-sm); font-weight: 650; 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; }

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

.rs-views { display: flex; align-items: center; gap: 2px; padding: var(--space-1) var(--space-2); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); 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; }
.rs-views-gap { flex: none; width: 1px; height: 22px; margin: 0 var(--space-2); background: var(--rule); }
.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; }
.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; }
.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 .btn { min-height: 34px; }
.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); }
.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: 1040px; margin: 0 auto; }
.rs-start h2 { margin: 0 0 var(--space-2); font: 700 var(--text-2xl)/1.15 var(--font-headline); }
.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); }
.rs-start-card h3 { margin: 0; font-size: var(--text-sm); 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; }

/* ------------------------------------------------------------ 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.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; }
.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-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-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; }
.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); }
.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); }

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

/* ------------------------------------------------------------ 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-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.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; }
.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; }
  .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 { padding: var(--space-1); }
  /* 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-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; }
}
@media (forced-colors: active) {
  .rs-stripe, .rs-dot, .rs-swatch { forced-color-adjust: none; }
}