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

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

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