/* Sample task window. Dark by default; the title-bar switch makes it light. Loaded by the homepage and the Datasets page. */

.home-research.home-catalog.st-block { background: transparent; border: 0; padding: 0; margin-top: 64px; }
/* Phones: the sample window is desktop-only, so the whole section (heading, window, buttons) is hidden. */
@media (max-width: 760px) { .home-research.home-catalog.st-block { display: none; } }

.st-viewer {
  --v-fg: #475569; --v-strong: #0a1628; --v-dim: #64748b;
  --v-card: #fff; --v-card2: #f6f8fc; --v-line: #dbe3ef; --v-accent: #1d6fd0;
  --v-pass-bg: #d1fae5; --v-pass-fg: #065f46; --v-fail-bg: #ffe4e6; --v-fail-fg: #9f1239; --v-neutral-bg: #eef2f8; --v-neutral-fg: #475569;
  margin-top: 4px; background: #fff; border: 1px solid #c9d5e6; border-radius: 12px; overflow: hidden; box-shadow: none;
}
.st-viewer.dark {
  --v-fg: #d4d4d4; --v-strong: #fff; --v-dim: #8a8a8a;
  --v-card: #141414; --v-card2: #050505; --v-line: #2a2a2a; --v-accent: #5aa2ff;
  --v-pass-bg: rgba(52,211,153,0.16); --v-pass-fg: #6ee7b7; --v-fail-bg: rgba(251,113,133,0.16); --v-fail-fg: #fda4af; --v-neutral-bg: #1f1f1f; --v-neutral-fg: #b5b5b5;
  background: #0a0a0a; border-color: #262626;
}

/* window chrome */
.st-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 0 16px; height: 40px; background: linear-gradient(180deg, #f3f6fb, #e8eef7); border-bottom: 1px solid #d4deec; }
.st-titlebar-name { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: #5a6b85; min-width: 0; }
.st-titlebar-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-win-controls { display: flex; align-items: center; gap: 2px; }
.st-win-btn { width: 34px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #5a6b85; cursor: pointer; transition: background .15s, color .15s; }
.st-win-btn:hover { background: rgba(10,22,40,0.08); color: #0a1628; }
.st-win-close:hover { background: #e5484d; color: #fff; }
.st-viewer.minimized > :not(.st-titlebar) { display: none; }
.st-viewer.minimized .st-titlebar { border-bottom: 0; }
.st-viewer.closed { display: none; }
.st-reopen { display: none; margin-top: 8px; padding: 10px 20px; border-radius: 100px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.st-reopen:hover { background: var(--bg-alt); }
.st-viewer.closed + .st-reopen { display: inline-flex; }
.st-theme { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-right: 8px; padding: 0 12px; border: 1px solid #c9d5e6; border-radius: 100px; background: #fff; color: #3d4f6b; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: all .18s; }
.st-theme:hover { border-color: var(--sky-500); color: var(--sky-600); }
.st-theme .sun { display: none; }
.st-viewer.dark .st-theme .sun { display: inline; }
.st-viewer.dark .st-theme .moon { display: none; }
.st-viewer.dark .st-titlebar { background: linear-gradient(180deg, #1c1c1c, #141414); border-bottom-color: #262626; }
.st-viewer.dark .st-titlebar-name { color: #a3a3a3; }
.st-viewer.dark .st-theme { background: #1f1f1f; border-color: #333; color: #d4d4d4; }
.st-viewer.dark .st-theme:hover { border-color: #5aa2ff; color: #fff; }
.st-viewer.dark .st-win-btn { color: #a3a3a3; }
.st-viewer.dark .st-win-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.st-viewer.dark .st-win-close:hover { background: #e5484d; color: #fff; }

/* header and tabs */
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 24px 28px 20px; background: linear-gradient(180deg, #f4f9ff 0%, #fff 100%); }
.st-viewer.dark .st-head { background: linear-gradient(180deg, #131313, #0a0a0a); }
.st-title { font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; color: var(--v-strong); line-height: 1.15; }
.st-viewer.dark .st-title { color: #fff; }
.st-domain { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--v-accent); }
.st-viewer.dark .st-domain { color: #5aa2ff; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { padding: 6px 13px; border-radius: 100px; background: var(--v-card); border: 1px solid var(--v-line); font-size: 12.5px; font-weight: 500; color: var(--v-fg); }
.st-viewer.dark .st-chip { background: #1a1a1a; border-color: #2e2e2e; color: #d4d4d4; }
.st-tabs { display: inline-flex; gap: 4px; margin: 0 28px 4px; padding: 4px; background: var(--v-neutral-bg); border-radius: 100px; max-width: calc(100% - 56px); overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab { padding: 9px 18px; border: 0; border-radius: 100px; background: transparent; font-size: 14px; font-weight: 600; color: var(--v-dim); cursor: pointer; white-space: nowrap; transition: all .18s; }
.st-tab:hover { color: var(--v-strong); }
.st-tab.active { background: #fff; color: #0a1628; box-shadow: 0 2px 8px rgba(10,22,40,0.1); }
.st-viewer.dark .st-tabs { background: #1a1a1a; }
.st-viewer.dark .st-tab { color: #8a8a8a; }
.st-viewer.dark .st-tab:hover { color: #fff; }
.st-viewer.dark .st-tab.active { background: #2e2e2e; color: #fff; box-shadow: none; }

.st-viewer.dark .st-file.active, .st-viewer.dark .sv-run.active { background: #232323; border-color: #454545; }

/* panels */
.st-panel { margin: 16px 12px 12px; padding: 20px clamp(16px, 3vw, 32px) 24px; height: 620px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfd9e8 transparent; color: var(--v-fg); }
.st-viewer.dark .st-panel, .st-viewer.dark .sv-scroll, .st-viewer.dark .st-code { scrollbar-color: #3a3a3a transparent; }
.st-panel[hidden], .st-code[hidden] { display: none; }
.st-panel-fixed { overflow: hidden; padding-bottom: 8px; }
.sv-loading, .sv-error { padding: 40px 0; text-align: center; font-size: 14px; color: var(--v-dim); }
.sv-error { color: var(--v-fail-fg); }
.sv-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfd9e8 transparent; }
.sv-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--v-dim); margin: 0 0 12px; }
.sv-lede { max-width: 76ch; font-size: 15px; line-height: 1.7; margin: 0 0 22px; color: var(--v-fg); }

/* badges */
.sv-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; background: var(--v-neutral-bg); color: var(--v-neutral-fg); }
.sv-badge.pass { background: var(--v-pass-bg); color: var(--v-pass-fg); }
.sv-badge.fail { background: var(--v-fail-bg); color: var(--v-fail-fg); }

/* overview */
.sv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.sv-stat { padding: 16px 18px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-card); }
.sv-stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; color: var(--v-strong); }
.sv-stat span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--v-dim); }
.sv-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-stage { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-card); }
.sv-stage-n { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--v-neutral-bg); color: var(--v-neutral-fg); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.sv-stage-t { font-size: 14.5px; font-weight: 600; color: var(--v-strong); }
.sv-stage-d { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--v-dim); }
.sv-withheld { margin: 22px 0 0; padding: 14px 16px; border: 1px dashed var(--v-line); border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--v-dim); }

/* readme */
.st-prose { max-width: 76ch; }
.st-md { max-width: 76ch; font-size: 15px; line-height: 1.75; color: var(--v-fg); }
.st-md h1 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.2; color: var(--v-strong); margin: 0 0 16px; }
.st-md h2 { font-size: 16px; font-weight: 700; color: var(--v-strong); margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--v-line); }
.st-md p { margin: 0 0 1em; }
.st-md strong { color: var(--v-strong); font-weight: 600; }
.st-md blockquote { margin: 0 0 1em; padding: 2px 0 2px 14px; border-left: 3px solid var(--v-line); color: var(--v-dim); }
.st-md table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 14px; }
.st-md td, .st-md th { padding: 8px 12px; border: 1px solid var(--v-line); text-align: left; vertical-align: top; }
.st-md code { font-family: var(--mono); font-size: 0.86em; background: var(--v-neutral-bg); border: 1px solid var(--v-line); border-radius: 6px; padding: 1px 6px; color: var(--v-accent); }

/* files */
.st-files { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; height: 100%; }
.st-file-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #cfd9e8 transparent; }
.st-viewer.dark .st-file-list { scrollbar-color: #3a3a3a transparent; }
.st-folder { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-dim); font-weight: 600; padding: 12px 6px 4px; }
.st-folder:first-child { padding-top: 2px; }
.st-file { flex: 0 0 auto; text-align: left; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; font-family: var(--mono); font-size: 12.5px; color: var(--v-fg); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .15s; }
.st-file:hover { background: var(--v-neutral-bg); color: var(--v-strong); }
.st-file.active { background: rgba(43,133,240,0.12); border-color: rgba(43,133,240,0.4); color: var(--v-strong); font-weight: 600; }
.st-code { margin: 0; padding: 18px 20px; background: var(--v-card2); color: var(--v-fg); border: 1px solid var(--v-line); border-radius: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; overflow-y: auto; overflow-x: hidden; height: 100%; scrollbar-width: thin; scrollbar-color: #cfd9e8 transparent; }
.st-code code { font-family: inherit; white-space: pre-wrap; word-break: break-word; }

/* runs */
.sv-runs { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; height: 100%; }
.sv-run-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-dim); font-weight: 600; padding: 12px 6px 4px; }
.sv-run-group:first-child { padding-top: 2px; }
.sv-run { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; transition: all .15s; }
.sv-run:hover { background: var(--v-neutral-bg); }
.sv-run.active { background: rgba(43,133,240,0.12); border-color: rgba(43,133,240,0.4); }
.sv-run-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--v-strong); line-height: 1.3; }
.sv-run-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--v-dim); }
.sv-detail h3 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; color: var(--v-strong); }
.sv-detail .sv-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--v-fg); }
.sv-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sv-metric { padding: 10px 16px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-card); min-width: 110px; }
.sv-metric b { display: block; font-size: 20px; font-weight: 600; color: var(--v-strong); }
.sv-metric span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--v-dim); }
.sv-fam { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 70px; align-items: center; gap: 12px; padding: 5px 0; font-size: 12.5px; }
.sv-fam-name { color: var(--v-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-bar { display: flex; height: 8px; border-radius: 100px; overflow: hidden; background: var(--v-neutral-bg); }
.sv-bar i { display: block; height: 100%; }
.sv-bar .ok { background: #34d399; }
.sv-bar .bad { background: #fb7185; }
.sv-fam-n { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--v-dim); }
.sv-block { margin-top: 22px; }
.sv-callout { padding: 14px 16px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-card); font-size: 14px; line-height: 1.65; color: var(--v-fg); }
.sv-callout b { color: var(--v-strong); }
.sv-checks { display: grid; gap: 8px; }
.sv-check { padding: 12px 14px; border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-card); }
.sv-check-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--v-strong); }
.sv-check p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--v-fg); }
.sv-details { margin-top: 22px; }
.sv-details summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--v-accent); }
.sv-details .st-code { height: auto; max-height: 360px; margin-top: 10px; }

/* reviews */
.sv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.sv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-card); font-size: 13.5px; color: var(--v-fg); }
.sv-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--v-dim); }
.sv-row-main { min-width: 0; }
.sv-row-main b { color: var(--v-strong); font-weight: 600; }
.sv-list { display: grid; gap: 8px; }

/* rubric */
.st-rubric-note { max-width: 76ch; margin: 0 0 16px; font-size: 14px; color: var(--v-fg); }
.st-rubric-note b { color: var(--v-strong); }
.st-rubric { max-width: 76ch; margin: 0; list-style: none; padding: 0; display: grid; gap: 8px; }
.st-rubric-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--v-line); border-radius: 12px; font-size: 14.5px; line-height: 1.55; color: var(--v-fg); background: var(--v-card); }
.st-points { flex: 0 0 auto; min-width: 40px; text-align: center; padding: 2px 9px; border-radius: 100px; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.st-rubric-row.pos .st-points { background: var(--v-pass-bg); color: var(--v-pass-fg); }
.st-rubric-row.neg .st-points { background: var(--v-fail-bg); color: var(--v-fail-fg); }

/* footer note + buttons */
.st-foot { margin: 16px 4px 0; font-size: 12px; font-style: italic; text-align: center; color: var(--ink-dim); }
.st-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

@media (max-width: 860px) {
  .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .st-panel { height: 560px; margin: 14px 6px 8px; }
  .st-head { padding: 20px 18px 16px; }
  .st-tabs { margin: 0 18px 4px; max-width: calc(100% - 36px); }
  .st-files, .sv-runs { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .st-file-list, .sv-run-list { flex-direction: row; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 6px; }
  .st-folder, .sv-run-group { display: none; }
  .st-file, .sv-run { white-space: nowrap; width: auto; flex: 0 0 auto; margin-bottom: 0; }
  .sv-fam { grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 56px; }
  .sv-stage { grid-template-columns: 26px minmax(0, 1fr); }
  .sv-stage .sv-badge { grid-column: 2; justify-self: start; }
}