/* Products round (docs/PRODUCTS.md): styles owned by WEB-RESEARCH — environment marketplace, RL and eval runs, apps
 * (web/js/pages/environments.js, runs.js, apps.js, web/js/research-common.js). Prefix: rs-. */

/* ------------------------------------------------------------------------------- page chrome */
.rs-page { padding-bottom: 60px; }
.rs-tabs { border-radius: 12px; border-bottom: 1px solid var(--border); padding: 6px 8px; margin-bottom: 18px; }
.rs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rs-subtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rs-subtab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; font-weight: 800; font-size: 12.5px; color: #4e5c70; border: 1px solid transparent; }
.rs-subtab:hover { background: #f0f3f6; color: var(--ink); }
.rs-subtab.active { background: #eef4e9; color: #3f6a27; border-color: #d6e8c8; }
.rs-lead { font-size: 14px; color: #3d4b60; line-height: 1.6; margin-top: 6px; max-width: 760px; }
.rs-warn-text { color: var(--warn-text); font-weight: 700; }
.rs-plain-list { padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; color: #3f4b5c; margin: 6px 0; }
.rs-kv { display: inline-flex; gap: 4px; margin-right: 10px; white-space: nowrap; font-size: 12px; }
.rs-req { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn-text); background: var(--warn-bg); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }

/* kinds */
.rs-kind { background: #eef4e9; color: #3f6a27; }
.rs-kind-eval { background: #e8effd; color: #2a5597; }
.rs-kind-robotics { background: #f1ecfb; color: #5b3f97; }
.rs-kind-verifier { background: #fff4db; color: #7f5d12; }

/* chips with a remove button */
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.rs-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 4px 3px 9px; border-radius: 7px; background: #eef4e9; border: 1px solid #d6e8c8; color: #36572a; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.rs-chip .icon { flex: none; }
.rs-chip .chip-remove { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------------------------- marketplace */
.rs-filters { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.rs-search { flex: 1 1 240px; min-width: 0; }
.rs-search input { width: 100%; min-height: 38px; }
.rs-filter-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.rs-sort { min-width: 130px; }
.rs-count { font-size: 12px; margin: 0 0 10px; }
.rs-count strong { color: var(--ink); }
.rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rs-card { background: #fff; border: 1px solid #e6ebef; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.rs-card:hover { border-color: #c8dac0; box-shadow: 0 14px 34px rgba(33, 51, 72, 0.07); }
.rs-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rs-card-title { font-size: 17px; letter-spacing: -0.03em; line-height: 1.25; overflow-wrap: anywhere; }
.rs-card-title a:hover { text-decoration: underline; }
.rs-card-by { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.rs-card-summary { font-size: 12.5px; color: #45536a; line-height: 1.55; flex: 1; }
.rs-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-tag { border: 1px solid #e1e7ee; background: #f7f9fb; color: #4e5c70; border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 700; }
.rs-tag:hover { background: #eef2f6; color: var(--ink); text-decoration: none; }
.rs-tag.selected { background: #e8f4df; border-color: #a9cd90; color: #3c6326; }
.rs-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px 10px; background: #f8fafc; border-radius: 9px; }
.rs-card-stats div { min-width: 0; }
.rs-card-stats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 800; }
.rs-card-stats dd { font: 700 14px "Space Grotesk", sans-serif; letter-spacing: -0.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rs-card-stats dd small { font: 600 10.5px "DM Sans", sans-serif; color: var(--muted); letter-spacing: 0; }
.rs-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.rs-creator { margin-top: 24px; }
.rs-creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.rs-creator .wl-h2 .icon { color: var(--brand); }
.rs-steps { padding-left: 18px; display: grid; gap: 8px; font-size: 12.5px; color: #3f4b5c; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------------------------------ detail */
.rs-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.rs-detail-title { min-width: 0; flex: 1 1 420px; display: grid; gap: 6px; }
.rs-h1 { font-size: 28px; letter-spacing: -0.04em; line-height: 1.15; overflow-wrap: anywhere; }
.rs-detail-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rs-owner-actions { justify-content: flex-end; }
.rs-detail-layout { margin-top: 6px; }
.rs-side { position: static; min-width: 0; }
.rs-price { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #f1f7ed; border: 1px solid #dfeeda; color: #3f6230; margin-bottom: 6px; }
.rs-price strong { font: 700 17px "Space Grotesk", sans-serif; letter-spacing: -0.02em; }
.rs-price small { font-size: 11.5px; line-height: 1.55; }
.rs-licenses { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
.rs-licenses li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; font-size: 12.5px; min-width: 0; }
.rs-licenses li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.rs-licenses .pill { white-space: normal; max-width: 150px; text-align: right; line-height: 1.35; }
.rs-admin-filters .field { width: 200px; }
.rs-admin-filters .select { min-width: 140px; }
.rs-board .rs-rank { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.rs-board .rs-first td { background: #f8fbf4; }
.rs-board .rs-rank .icon { color: #b88a12; }

/* Markdown (READMEs, app descriptions) */
.rs-md { font-size: 13.5px; line-height: 1.7; color: #33415a; overflow-wrap: anywhere; }
.rs-md > * + * { margin-top: 10px; }
.rs-md h2, .rs-md h3, .rs-md h4, .rs-md h5, .rs-md h6 { font-family: "Space Grotesk", "DM Sans", sans-serif; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; margin-top: 18px; }
.rs-md > :first-child { margin-top: 0; }
.rs-md h2 { font-size: 21px; }
.rs-md h3 { font-size: 16.5px; }
.rs-md h4, .rs-md h5, .rs-md h6 { font-size: 14px; }
.rs-md ul, .rs-md ol { padding-left: 22px; display: grid; gap: 4px; }
.rs-md li.rs-md-sub { margin-left: 18px; list-style-type: circle; }
.rs-md blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 14px; border-left: 3px solid #d6e8c8; color: #4b586c; }
.rs-md hr { border: 0; border-top: 1px solid #edf0f3; margin: 18px 0; }
.rs-md code { font-size: 0.88em; }
.rs-md-code { margin: 10px 0; padding: 12px 14px; background: #0f1a29; color: #e3eaf2; border-radius: 9px; overflow-x: auto; font: 12.5px/1.55 var(--mono); }
.rs-md-code code { background: transparent; color: inherit; padding: 0; white-space: pre; }
.rs-md-table { font-size: 12.5px; }
.rs-md-table th { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.rs-md-table code { white-space: nowrap; }
.rs-page .panel-header h2 { display: flex; align-items: center; gap: 8px; }
.rs-page .panel-header h2 .icon { color: var(--brand); }

/* -------------------------------------------------------------------------------------- forms */
.rs-form > .panel { margin-bottom: 0; }
.rs-form .panel-header h2 { font-size: 16px; }
.rs-form-actions { justify-content: flex-end; }
.rs-radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rs-radio-card { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid #dbe2ea; border-radius: 10px; cursor: pointer; background: #fff; min-width: 0; }
.rs-radio-card:hover { border-color: #b8c7d6; }
.rs-radio-card.selected { border-color: #a9cd90; background: #f6fbf2; }
.rs-radio-card input { margin-top: 3px; accent-color: #5c8a3c; flex: none; }
.rs-radio-card span { display: grid; gap: 2px; font-size: 12.5px; min-width: 0; }
.rs-radio-card strong { display: inline-flex; align-items: center; gap: 5px; }
.rs-radio-card small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.rs-radio-card:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.rs-radio-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rs-readme { min-height: 220px; }
.rs-readme-preview { border: 1px solid var(--border-2); border-radius: 9px; padding: 14px 16px; min-height: 220px; max-height: 60vh; overflow: auto; background: #fff; }
.rs-earn { align-self: end; padding-bottom: 6px; }
.rs-hint { margin: 0; }
.rs-hint .pill { margin-right: 2px; }
.rs-span-all { grid-column: 1 / -1; }
.rs-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.rs-param-bool small { font-weight: 400; margin-top: 1px; }
.rs-inline-field { display: flex; align-items: center; gap: 8px; }
.rs-inline-field .field { flex: 1 1 auto; min-width: 0; }
.rs-inline-field span { font-size: 12.5px; color: #45536a; font-weight: 700; }
.rs-details { border: 1px solid var(--border); border-radius: 10px; background: #fbfcfd; }
.rs-details > summary { padding: 11px 14px; cursor: pointer; font-size: 13px; }
.rs-details-body { padding: 4px 14px 14px; }
.rs-details fieldset:disabled { opacity: 0.55; }
.rs-inputs { display: grid; gap: 8px; }
.rs-signin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed #ced7e0; border-radius: 12px; }
.rs-signin > .icon { width: 26px; height: 26px; color: #8994a3; }
.rs-signin > div { flex: 1 1 240px; }

/* ------------------------------------------------------------------------------------- run lists */
.rs-progress-cell { display: grid; gap: 4px; min-width: 130px; font-size: 12px; }
.rs-progress-cell .budget-bar { height: 7px; }

/* -------------------------------------------------------------------------------------- run page */
.rs-run-progress { margin: 10px 0 0; }
.rs-run-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rs-run-stats dd small { font-size: 11px; color: var(--muted); font-family: "DM Sans", sans-serif; }
.rs-cap { height: 6px; margin: -2px 0 10px; }
.rs-token { border-color: var(--warn-border); }
.rs-token .panel-header { background: var(--warn-bg); }
.rs-token-who { font-size: 13px; color: #3d4b60; margin: 4px 0 2px; }
.rs-score-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rs-score { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; background: #fbfcfd; min-width: 0; }
.rs-score > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 800; overflow-wrap: anywhere; }
.rs-score strong { font: 700 22px "Space Grotesk", sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rs-score small { font-size: 11px; color: #4b586c; }
.rs-metric-chips { margin-bottom: 14px; }
.rs-metric-chips .chip { font-weight: 700; font-family: var(--mono); font-size: 11px; }
.rs-metric-chips .chip small { color: var(--muted); font-family: "DM Sans", sans-serif; margin-left: 3px; }
.rs-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rs-charts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.rs-chart-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 8px; min-width: 0; background: #fff; }
.rs-chart-head { margin-bottom: 4px; gap: 4px 10px; }
.rs-chart-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.rs-chart { position: relative; margin: 0; min-width: 0; }
.rs-chart-plot { width: 100%; min-height: 60px; }
.rs-chart-svg { display: block; overflow: visible; touch-action: pan-y; }
.rs-chart-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.rs-gridline { stroke: #edf0f3; stroke-width: 1; shape-rendering: crispEdges; }
.rs-axis { fill: #66728a; font: 10.5px "DM Sans", sans-serif; font-variant-numeric: tabular-nums; }
.rs-line { fill: none; stroke: #4f7d33; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rs-point { fill: #4f7d33; stroke: #fff; stroke-width: 1.5; }
.rs-cross { stroke: #8994a3; stroke-width: 1; shape-rendering: crispEdges; }
.rs-focus { fill: #4f7d33; stroke: #fff; stroke-width: 2; }
.rs-chart-tip { position: absolute; z-index: 2; pointer-events: none; background: var(--navy); color: #fff; border-radius: 7px; padding: 5px 9px; display: grid; gap: 1px; font-size: 11px; white-space: nowrap; box-shadow: 0 6px 18px rgba(12, 20, 34, 0.2); }
.rs-chart-tip[hidden] { display: none; }
.rs-chart-tip strong { font: 700 13px "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.rs-chart-tip span { color: #c9d3df; }
.rs-chart-empty { padding: 18px 0; font-size: 12.5px; }
.rs-chart-table { margin-top: 4px; font-size: 12px; }
.rs-chart-table > summary { cursor: pointer; color: #45536a; font-weight: 700; padding: 4px 0; }
.rs-chart-table .table-wrap { max-height: 240px; overflow: auto; }
.rs-rollouts td .link-btn { font-size: 12px; }

/* -------------------------------------------------------------------------------- storage picker */
.rs-pick { display: grid; gap: 10px; }
.rs-pick-bar { gap: 8px; }
.rs-pick-bar .crumb-bar { margin: 0; }
.rs-pick-bar .crumb { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.rs-pick-box { border: 1px solid var(--border); border-radius: 10px; max-height: min(46vh, 420px); overflow: auto; padding: 4px; background: #fff; }
.rs-pick-box > .btn { margin: 6px; }
.rs-pick-box > .note { padding: 4px 8px; }
.rs-pick-list { list-style: none; padding: 0; margin: 0; }
.rs-pick-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 7px; }
.rs-pick-row:hover { background: #f6f9f3; }
.rs-pick-row input { accent-color: #5c8a3c; width: 16px; height: 16px; margin: 0; }
.rs-pick-name { font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; cursor: pointer; text-align: left; }
.rs-pick-folder { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); padding: 2px 0; font-size: 13px; }
.rs-pick-folder .icon { color: #7fa85b; }
.rs-pick-folder:hover { text-decoration: underline; }
.rs-pick-spacer { width: 16px; }
.rs-pick-empty { padding: 18px 10px; font-size: 12.5px; }
.rs-pick-selected { display: grid; gap: 6px; font-size: 12.5px; }
.rs-pick-selected .rs-chips { max-height: 110px; overflow: auto; }

/* ------------------------------------------------------------------------------------------ apps */
.rs-cat-nav { margin-bottom: 6px; }
.rs-cat { margin-top: 22px; scroll-margin-top: 90px; }
.rs-cat-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.rs-cat-head .wl-h2 .icon { color: var(--brand); }
.rs-cat-head p { font-size: 12.5px; }
.rs-app-stats dd { font-size: 13px; }
.rs-lic-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; }
.rs-lic-chips li { background: #f3f5f8; border-radius: 5px; padding: 2px 6px; color: #45536a; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-lic-chips small { font-weight: 600; color: var(--muted); font-size: 10px; }
.rs-foot-note { margin-top: 18px; max-width: 900px; }
.rs-params .form-row small { overflow-wrap: anywhere; }
.rs-estimate { display: grid; gap: 8px; transition: opacity 0.2s; }
.rs-estimate.is-stale { opacity: 0.55; }
.rs-estimate-price { display: grid; gap: 2px; }
.rs-estimate-price strong { font: 700 24px "Space Grotesk", sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rs-estimate-price span { font-size: 12px; color: #45536a; }
.rs-estimate-error { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 9px; padding: 10px 12px; }
.rs-estimate-error .icon { margin-top: 2px; flex: none; }
.rs-estimate-error a { color: inherit; }
.rs-estimate-inline { display: none; font-size: 12.5px; color: #3d4b60; margin-right: auto; align-self: center; }
.rs-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rs-stage { border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; display: grid; gap: 7px; background: #fbfcfd; }
.rs-stage strong { font-size: 13.5px; }
.rs-stage .budget-bar { height: 8px; }
.rs-stage p { margin: 0; }
.rs-stage-pending, .rs-stage-skipped { background: #fff; border-style: dashed; }
.rs-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rs-thumb { display: grid; gap: 4px; font-size: 10.5px; color: #45536a; min-width: 0; }
.rs-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: repeating-conic-gradient(#f0f2f5 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.rs-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-thumb:hover img { border-color: #a9cd90; }
.rs-video { grid-column: span 2; margin: 0; display: grid; gap: 4px; font-size: 10.5px; min-width: 0; }
.rs-video video { width: 100%; border-radius: 8px; background: #0c1422; }

/* -------------------------------------------------------------------------------------- responsive */
@media (max-width: 1130px) {
  .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-run-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .rs-detail-layout .detail-side { order: 0; }
  .rs-charts { grid-template-columns: minmax(0, 1fr); }
  .rs-creator-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-estimate-inline { display: block; }
}
@media (max-width: 630px) {
  .rs-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-tabs { margin-bottom: 12px; }
  .rs-filters { padding: 10px; }
  .rs-filter-end { margin-left: 0; width: 100%; }
  .rs-filter-end .rs-sort { flex: 1; }
  .rs-h1 { font-size: 23px; }
  .rs-detail-cta { align-items: stretch; width: 100%; }
  .rs-detail-cta > .btn { justify-content: center; }
  .rs-owner-actions { justify-content: flex-start; }
  .rs-run-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-flags { grid-template-columns: minmax(0, 1fr); }
  .rs-radio-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-pick-row { grid-template-columns: 22px minmax(0, 1fr); }
  .rs-pick-row > .tiny { grid-column: 2; }
  .rs-previews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-video { grid-column: 1 / -1; }
  .rs-score strong { font-size: 19px; }
  .rs-form-actions .btn { flex: 1 1 auto; justify-content: center; }
}