playwright-reborn 0.2.2 → 0.2.4

package/dist/ui/report.css

@@ -3,7 +3,7 @@
   src: url("fonts/geist-latin-400-normal.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -11,7 +11,7 @@
   src: url("fonts/geist-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -19,7 +19,7 @@
   src: url("fonts/geist-latin-600-normal.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -27,26 +27,34 @@
   src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 :root {
-  color-scheme: dark;
-  --base: #080808;
-  --surface: #111111;
-  --border: #1a1a1a;
-  --text: #f0f0f0;
-  --subtle: #888888;
-  --accent: #00ff88;
-  --accent-hover: #00cf6e;
-  --wash: rgba(0, 255, 136, 0.16);
-  --hairline: rgba(255, 255, 255, 0.08);
-  --pass: rgba(255, 255, 255, 0.22);
-  --fail: #00ff88;
-  --flaky: rgba(0, 255, 136, 0.45);
-  --skip: #888888;
-  --timeout: #00ff88;
-  --interrupted: #888888;
+  color-scheme: light;
+  --base: #f3f7fd;
+  --surface: #ffffff;
+  --control-active: #315386;
+  --pass-wash: #e8f5ee;
+  --fail-wash: #fff0f1;
+  --warning-wash: #fff4e5;
+  --heading: #315386;
+  --chart-2: #f58220;
+  --chart-3: #8aafd4;
+  --chart-4: #d0e0f3;
+  --border: #dbe5f0;
+  --text: #17324f;
+  --subtle: #5d7188;
+  --accent: #f58220;
+  --accent-hover: #aa4900;
+  --wash: #eaf2fc;
+  --hairline: rgba(49, 83, 134, 0.10);
+  --pass: #177b59;
+  --fail: #bd3740;
+  --flaky: #a15b08;
+  --skip: #7c8da2;
+  --timeout: #a15b08;
+  --interrupted: #6f7890;
   --sans: Geist, "Segoe UI", sans-serif;
   --display: Geist, "Segoe UI", sans-serif;
   --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -54,35 +62,27 @@
 }
 
 body[data-accent="red"] {
-  --accent: #ff4d4d;
-  --accent-hover: #e03b3b;
+  --accent: #c64246;
+  --accent-hover: #a22c34;
   --wash: rgba(255, 77, 77, 0.16);
-  --fail: #ff4d4d;
-  --timeout: #ff4d4d;
 }
 
 body[data-accent="blue"] {
-  --accent: #4da3ff;
-  --accent-hover: #2f86e0;
+  --accent: #315386;
+  --accent-hover: #203e6b;
   --wash: rgba(77, 163, 255, 0.16);
-  --fail: #4da3ff;
-  --timeout: #4da3ff;
 }
 
 body[data-accent="amber"] {
-  --accent: #ffb020;
-  --accent-hover: #e09610;
+  --accent: #a76500;
+  --accent-hover: #8c5100;
   --wash: rgba(255, 176, 32, 0.16);
-  --fail: #ffb020;
-  --timeout: #ffb020;
 }
 
 body[data-accent="violet"] {
-  --accent: #b07cff;
-  --accent-hover: #945fe0;
+  --accent: #7952b8;
+  --accent-hover: #5c3b92;
   --wash: rgba(176, 124, 255, 0.16);
-  --fail: #b07cff;
-  --timeout: #b07cff;
 }
 
 * { box-sizing: border-box; }
@@ -91,7 +91,7 @@ body[data-accent="violet"] {
 
 body {
   margin: 0;
-  background: #050806;
+  background: var(--base);
   color: var(--text);
   font-family: var(--sans);
   font-size: 15px;
@@ -107,22 +107,18 @@ body {
   left: 12px;
   top: -40px;
   background: var(--accent);
-  color: #080808;
+  color: var(--text);
   padding: 8px 12px;
-  z-index: 2;
+  z-index: 10;
 }
 
 .skip:focus { top: 12px; }
 
-.page {
-  width: min(1120px, calc(100% - 48px));
-  margin: 0 auto;
-  padding: 28px 0 64px;
-}
 
-button, input { font: inherit; color: inherit; }
+
+button, input, select { font: inherit; color: inherit; }
 button { cursor: pointer; }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
 ::selection { background: var(--wash); color: var(--text); }
 
 .top {
@@ -216,9 +212,7 @@ button { cursor: pointer; }
   color: var(--text);
 }
 
-.word[data-status="failed"],
-.word[data-status="timedOut"],
-.word[data-status="interrupted"] { color: var(--text); }
+
 
 .product {
   margin: 10px 0 0;
@@ -229,15 +223,7 @@ button { cursor: pointer; }
   line-height: 1.15;
 }
 
-.time {
-  margin: 0;
-  font-weight: 500;
-  font-size: clamp(48px, 7vw, 64px);
-  line-height: 1;
-  letter-spacing: -0.04em;
-  color: var(--accent);
-  font-variant-numeric: tabular-nums;
-}
+
 
 .summary {
   flex-basis: 100%;
@@ -389,7 +375,7 @@ button { cursor: pointer; }
   transform: none;
 }
 
-.segment[data-status="passed"] { background: rgba(255, 255, 255, 0.55); }
+.segment[data-status="passed"] { background: var(--pass); }
 .segment[data-status="failed"],
 .segment[data-status="timedOut"] { background: var(--fail); }
 .segment[data-status="interrupted"] { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
@@ -526,18 +512,18 @@ button { cursor: pointer; }
 }
 
 .run-row.is-dim { opacity: 0.28; }
-.run-row:hover { background: rgba(255, 255, 255, 0.04); }
+.run-row:hover { background: var(--wash); }
 .run-row[aria-current="true"] { background: var(--wash); }
 
 .run-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
 
 .run-track {
   height: 8px;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--hairline);
   overflow: hidden;
 }
 
-.run-fill { display: block; height: 100%; background: rgba(255, 255, 255, 0.55); }
+.run-fill { display: block; height: 100%; background: var(--pass); }
 .run-fill[data-status="failed"],
 .run-fill[data-status="timedOut"],
 .run-fill[data-status="flaky"] { background: var(--accent); }
@@ -624,7 +610,7 @@ button { cursor: pointer; }
 .row[data-status="skipped"],
 .row[data-status="interrupted"] { border-left-color: var(--border); }
 .row[aria-current="true"] { background: var(--hairline); }
-.row:hover { background: rgba(255, 255, 255, 0.04); }
+.row:hover { background: var(--wash); }
 
 .row-title {
   font-weight: 500;
@@ -659,8 +645,8 @@ button { cursor: pointer; }
 
 .detail {
   position: sticky;
-  top: 18px;
-  max-height: calc(100vh - 36px);
+  top: 76px;
+  max-height: calc(100vh - 94px);
   overflow: auto;
   padding: 18px 0 24px 28px;
   background: transparent;
@@ -870,7 +856,7 @@ button { cursor: pointer; }
 }
 
 .tile {
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--hairline);
   border-radius: 0;
   overflow: hidden;
   background: transparent;
@@ -884,7 +870,7 @@ button { cursor: pointer; }
 
 .log-card, .file-card {
   border: 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--hairline);
   border-radius: 0;
   background: transparent;
   box-shadow: none;
@@ -929,7 +915,7 @@ dialog .close-shot {
   border-radius: 0;
   padding: 6px 12px;
 }
-dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
+dialog::backdrop { background: rgba(23, 50, 79, 0.72); }
 
 @keyframes rise {
   from { opacity: 0; transform: translateY(40px); }
@@ -942,223 +928,8 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   .find-wrap { margin-left: 0; width: 100%; }
   .find { width: 100%; }
   .split { grid-template-columns: 1fr; }
-  .detail { position: static; max-height: none; padding-left: 0; }
-}
-
-.atmosphere {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: #050806;
-  overflow: hidden;
-}
-
-.bands {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  filter: blur(18px) saturate(1.05);
-  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
-  mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
-}
-
-.grain {
-  position: absolute;
-  inset: -20%;
-  opacity: 0.07;
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
-  background-size: 180px 180px;
-  animation: grain 0.7s steps(2) infinite;
-}
-
-.veil {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, rgba(5, 8, 6, 0) 0%, rgba(5, 8, 6, 0.12) 14%, rgba(5, 8, 6, 0.72) 30%, rgba(5, 8, 6, 0.9) 42%, rgba(5, 8, 6, 0.96) 100%);
-}
-
-.shell { position: relative; z-index: 1; }
-
-@keyframes grain {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(-2%, 1%); }
-}
-
-.page { width: 100%; max-width: none; margin: 0; padding: 0; }
-
-.shell {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.rail {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 28px;
-  padding: 12px 16px;
-  border-right: 0;
-  background: linear-gradient(180deg, rgba(5, 8, 6, 0.72), rgba(5, 8, 6, 0.35) 70%, rgba(5, 8, 6, 0));
-  transition: transform 220ms ease;
-}
-
-.rail.is-hidden {
-  transform: translateY(-110%);
-  pointer-events: none;
-}
-
-.rail .meta { margin: 0 0 0 auto; flex-direction: row; gap: 16px; justify-content: flex-end; text-align: right; }
-.rail .meta span { white-space: nowrap; }
-
-.rail .tabbar {
-  flex-direction: row;
-  align-items: center;
-  gap: 22px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.rail .tab {
-  text-align: left;
-  padding: 8px 0;
-  color: rgba(240, 240, 240, 0.72);
-}
-
-.rail .tab[aria-selected="true"] {
-  background: none;
-  color: var(--text);
-  box-shadow: inset 0 -1px 0 var(--accent);
-}
-
-.stage {
-  width: 100%;
-  margin: 0;
-  padding: 20px 16px 48px;
-}
-
-.hero { margin: 8px 0 28px; }
-
-.word {
-  font-size: clamp(64px, 8vw, 96px);
-  font-weight: 500;
-  letter-spacing: -0.045em;
-  max-width: 14ch;
-}
-
-.time { display: none; }
-
-#panel-tests,
-#panel-screenshots,
-#panel-logs,
-#panel-files {
-  background: transparent;
-  border: 0;
-  padding: 0;
-}
-
-.console {
-  background: transparent;
-  border: 0;
-}
-
-.console-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 18px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  color: var(--subtle);
-  font-size: 13px;
-}
-
-.console-body { padding: 0; }
-
-.console .section-label { margin-top: 18px; }
-
-.console .strip-window,
-.console .longest {
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  animation: none;
-}
-
-#legend.legend {
-  background: transparent;
-  border: 0;
-  gap: 0;
-}
-
-#legend .count {
-  background: transparent;
-  min-height: 0;
-  padding: 8px 18px 8px 0;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-#legend .count:last-child { border-right: 0; }
-
-.strip.timeline .segment { height: 18px; }
-
-.section-label {
-  margin: 32px 0 10px;
-  color: var(--subtle);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-#legend.legend {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 1px;
-  margin-top: 0;
-  background: transparent;
-  border: 0;
-}
-
-#legend .count {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  min-height: 0;
-  padding: 4px 16px 4px 0;
-  background: transparent;
-  border: 0;
-  color: var(--subtle);
-}
-
-#legend .count .n {
-  font-size: 28px;
-  line-height: 1;
-  letter-spacing: -0.04em;
-}
-
-#legend .count[aria-pressed="true"] { background: transparent; }
-
-.strip.timeline {
-  display: block;
-  position: relative;
-  height: auto;
-  min-width: 0;
-}
-
-.strip.timeline .segment {
-  position: absolute;
-  height: 18px;
-  min-width: 0;
+  .detail { position: static; max-height: none; padding-left: 0; border-top: 1px solid var(--border); }
+  #tests { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
 }
 
 .evidence {
@@ -1176,17 +947,390 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 }
 
 @media (max-width: 800px) {
-  .rail { flex-wrap: wrap; gap: 12px 18px; padding: 16px; }
+  .rail { flex-wrap: wrap; gap: 12px 18px; padding: 8px 16px; }
   .rail .meta { display: none; }
-  .rail .tabbar { flex-wrap: wrap; width: 100%; }
+  .rail .tabbar { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 20px; }
+  .rail .tab { flex: 0 0 auto; min-height: 44px; }
   .stage { width: 100%; padding: 12px 16px 40px; }
   #legend.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .charts { grid-template-columns: 1fr; }
+  .pie { width: 180px; margin: 0 auto; }
   #legend .count { border-right: 0; }
   .evidence { grid-template-columns: 1fr; }
-  .hero { margin: 24px 0 32px; }
+  .hero { margin: 12px 0 28px; }
+  .run-state { margin: 12px 0 0; }
+  .count, .tag-btn, .project-btn, .order-btn, .band-clear, .view, .subtab, .attempt, .open-test, .more, .reset-filters { min-height: 40px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .hero, .strip-window, .bands, .grain, .rail { animation: none; transition: none; }
 }
+
+/* State colors communicate outcomes independently of the chosen brand accent. */
+.run-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin: 4px 0 0;
+  padding: 6px 12px;
+  border: 1px solid currentColor;
+  border-radius: 20px;
+  font-size: 13px;
+  color: var(--subtle);
+}
+.run-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.run-state[data-status="passed"] { color: var(--pass); }
+.run-state[data-status="failed"] { color: var(--fail); }
+.run-state[data-status="timedout"], .run-state[data-status="interrupted"] { color: var(--timeout); }
+.sw[data-status="passed"] { color: var(--pass); }
+.sw[data-status="failed"], .sw[data-status="timedOut"] { color: var(--fail); }
+.sw[data-status="flaky"] { color: var(--flaky); }
+.row[data-status="failed"], .row[data-status="timedOut"] { border-left-color: var(--fail); }
+.row[data-status="flaky"] { border-left-color: var(--flaky); }
+.run-fill[data-status="failed"], .run-fill[data-status="timedOut"] { background: var(--fail); }
+.run-fill[data-status="flaky"] { background: var(--flaky); }
+.run-row[data-status="failed"], .run-row[data-status="timedOut"] { box-shadow: inset 2px 0 0 var(--fail); }
+.run-row[data-status="flaky"] { box-shadow: inset 2px 0 0 var(--flaky); }
+#legend .count[data-status="failed"] .n, #legend .count[data-status="timedOut"] .n { color: var(--fail); }
+#legend .count[data-status="flaky"] .n { color: var(--flaky); }
+#legend .count[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
+#legend.legend { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
+.charts:has(> .bars:only-child) { grid-template-columns: 1fr; }
+.hero > div, .info-row, .file-row, .row-meta, .stage, .rail, .detail { min-width: 0; }
+.info dd, .where, .file-name, .tile-title, .tile-meta, .now-file, .detail h2, .file-group h3, .step, .row-meta { overflow-wrap: anywhere; }
+.row-meta { flex-wrap: wrap; gap: 2px 12px; }
+.band { padding: 6px 0; }
+.band:hover .band-label { color: var(--text); }
+.find { padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; }
+.find:focus { border-color: var(--accent); }
+.list-summary { display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; color: var(--subtle); font-size: 13px; }
+.reset-filters { background: none; border: 0; color: var(--accent); padding: 4px 0; }
+.split { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
+#tests { padding-right: 16px; }
+.detail { border-left: 1px solid var(--border); }
+.row { padding: 12px; border-left-width: 2px; border-radius: 0 4px 4px 0; }
+.row[aria-current="true"] { background: var(--wash); }
+.error { border-left-color: var(--fail); }
+.step.bad .mark { background: var(--fail); }
+.gallery .tile { border-radius: 8px; background: var(--surface); }
+.tile img { object-fit: contain; background: var(--base); }
+.well pre { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
+dialog { border: 1px solid var(--border); border-radius: 8px; padding: 12px; max-height: 95vh; }
+dialog img { max-width: calc(92vw - 26px); object-fit: contain; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+@media (max-width: 800px) {
+  .split { grid-template-columns: minmax(0, 1fr); }
+  .detail { border-left: 0; padding-top: 20px; }
+  #tests { padding-right: 0; }
+  #legend.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .info { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+  .run-state { margin-top: 12px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; }
+}
+
+/* Report workspace: persistent navigation and a data-focused dashboard. */
+body { background: var(--base) !important; color: var(--text) !important; }
+.light { display: none; }
+.page { width: 100%; max-width: none; margin: 0; padding: 0; }
+.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
+.icon { width: 20px; height: 20px; flex-shrink: 0; }
+.rail {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 28px 18px 20px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  z-index: 5;
+}
+.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 23px; font-weight: 600; letter-spacing: -.045em; }
+.sidebar-brand > .icon { width: 40px; height: 40px; padding: 8px; border-radius: 12px; color: #ffffff; background: #315386; stroke-width: 2.2; }
+.brand-caption { display: block; font-size: 11px; color: var(--subtle); font-weight: 400; letter-spacing: 0; margin-top: -2px; }
+.project-card { display: flex; align-items: center; gap: 12px; margin: 32px 0 28px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
+.project-card > .icon { color: var(--accent); }
+.project-card > div { min-width: 0; }
+.project-caption { display: block; font-size: 11px; color: var(--subtle); }
+.project-card strong { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nav-caption { font-size: 12px; color: var(--subtle); margin: 0 12px 12px; }
+.rail .tabbar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 0; margin: 0; width: 100%; border: 0; }
+.rail .tab { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px; text-align: left; border: 1px solid transparent; border-radius: 8px; color: var(--subtle); font-size: 14px; font-weight: 500; }
+.rail .tab[aria-selected="true"] { color: var(--heading); background: var(--wash); border-color: var(--border); box-shadow: inset 3px 0 0 var(--accent); }
+.rail .tab:hover { background: var(--wash); color: var(--text); }
+.nav-count { margin-left: auto; min-width: 24px; padding: 1px 5px; border-radius: 4px; text-align: center; font-size: 11px; background: var(--hairline); }
+.sidebar-bottom { margin-top: auto; padding: 44px 12px 0; }
+.sidebar-bottom .nav-caption { margin-left: 0; }
+.sidebar-state { font-size: 12px; }
+.sidebar-note { font-size: 11px; color: var(--subtle); margin: 12px 0 22px; }
+.sidebar-note span { display: block; margin-top: 3px; }
+kbd { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 5px; font-family: var(--sans); font-size: 12px; color: var(--subtle); }
+.keyboard-hint { display: flex; gap: 10px; align-items: center; color: var(--subtle); font-size: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
+.stage { min-width: 0; width: 100%; }
+.workspace-bar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 36px; border-bottom: 1px solid var(--border); background: var(--surface); }
+.breadcrumb { min-width: 0; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--subtle); }
+#breadcrumb-company { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.breadcrumb strong { font-weight: 500; color: var(--text); }
+.breadcrumb-separator { color: #8296b1; }
+.report-content { max-width: 1600px; margin: 0 auto; padding: 30px 36px; }
+.panel { margin-top: 0; }
+.hero { margin: 0; gap: 18px; align-items: center; animation: none; }
+.dashboard-kicker { margin: 0 0 8px; font-size: 12px; color: var(--accent); }
+.word { font-size: 36px; font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
+.product { font-size: 15px; color: var(--subtle); letter-spacing: 0; margin-top: 10px; font-weight: 400; }
+.summary { font-size: 13px; margin-top: 6px; max-width: 65ch; }
+.summary:empty { display: none; }
+#meta { margin: 18px 0 0; font-size: 12px; gap: 6px 18px; }
+#meta span { overflow-wrap: anywhere; }
+.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 26px 0 24px; }
+.metric { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
+.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); font-size: 12px; }
+.metric-label .icon { width: 17px; height: 17px; color: var(--heading); }
+.metric-value { display: block; margin: 12px 0 6px; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
+.metric-note { font-size: 11px; color: var(--subtle); }
+.metric.positive .metric-value, .metric.positive .icon { color: var(--pass); }
+.metric.warning .metric-value, .metric.warning .icon { color: var(--flaky); }
+.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: stretch; }
+.dashboard-card { min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
+.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
+.card-heading h2, .range-head .section-label { margin: 0; font-size: 15px; color: var(--text); font-weight: 500; }
+.card-detail { font-size: 11px; color: var(--subtle); background: var(--hairline); border-radius: 5px; padding: 3px 8px; }
+.result-body { display: flex; align-items: center; gap: 28px; min-height: 185px; }
+.result-ring { width: 164px; height: 164px; flex: 0 0 164px; padding: 12px; border-radius: 50%; transform: rotate(0deg); }
+.result-ring > div { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); }
+.result-ring strong { font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
+.result-ring span { font-size: 12px; color: var(--subtle); }
+#legend.legend { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; min-width: 0; }
+#legend .count { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; min-height: 29px; padding: 4px 0; border: 0; font-size: 12px; color: var(--subtle); background: transparent; }
+#legend .count[data-status="all"] { display: none; }
+#legend .count .n { font-size: 13px; font-weight: 500; margin: 0 0 0 auto; color: var(--text); line-height: 1.4; letter-spacing: 0; }
+#legend .count::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--skip); }
+#legend .count[data-status="passed"]::after { background: var(--pass); }
+#legend .count[data-status="failed"]::after, #legend .count[data-status="timedOut"]::after { background: var(--fail); }
+#legend .count[data-status="flaky"]::after { background: var(--flaky); }
+#legend .count[data-status="interrupted"]::after { background: var(--timeout); }
+#legend .count:hover { color: var(--text); }
+#legend .count[aria-pressed="true"] { box-shadow: none; }
+.card-note { font-size: 11px; color: var(--subtle); margin: 22px 0 0; line-height: 1.6; }
+.range-head { margin: 0 0 12px; align-items: center; }
+.views { padding: 3px; gap: 0; background: var(--base); border: 1px solid var(--border); border-radius: 6px; }
+.view { padding: 4px 10px; font-size: 11px; border-radius: 4px; min-height: 26px; }
+.view[aria-pressed="true"] { background: var(--control-active); color: #ffffff; box-shadow: none; }
+.section-note { margin: 0; font-size: 11px; line-height: 1.6; max-width: 60ch; }
+.charts { grid-template-columns: 130px minmax(0, 1fr); gap: 22px; margin-top: 28px; min-height: 164px; }
+.pie { width: 130px; height: auto; margin: 0; }
+.band { padding: 6px 0; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 5px 8px; }
+.swatch { width: 7px; height: 7px; border-radius: 2px; margin-top: 5px; }
+.band-label { font-size: 11px; }
+.band .n { font-size: 12px; }
+.band-track, .band-fill { border-radius: 3px; }
+.band-track { height: 4px; }
+.strip-window { padding: 0; margin-top: 18px; background: transparent; border: 0; animation: none; max-height: 240px; overflow-y: auto; }
+.strip-scroll { overflow-x: hidden; }
+.console .run-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 8px; padding: 7px 6px; font-size: 11px; }
+.console .run-track { display: none; }
+.console .run-time { font-size: 10px; }
+.dashboard-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 11px; }
+.dashboard-link .icon { width: 14px; height: 14px; }
+.attention-card .card-heading { margin-bottom: 12px; }
+.attention-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 16px 0; border: 0; border-top: 1px solid var(--hairline); color: var(--text); background: transparent; text-align: left; }
+.attention-row:hover { background: var(--wash); }
+.attention-status { font-size: 11px; }
+.attention-test { min-width: 0; }
+.attention-test strong { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attention-test > span { display: block; color: var(--subtle); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
+.attention-time { font-size: 11px; color: var(--subtle); }
+.environment-card .card-heading > .icon { width: 16px; color: var(--subtle); }
+.run-details { margin: 0; }
+.run-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 14px 0; font-size: 12px; }
+.run-details dt { color: var(--subtle); }
+.run-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
+.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border); }
+.info dd { font-size: 12px; }
+.info dt { font-size: 11px; }
+.foot { font-size: 11px; margin-top: 28px; border-color: var(--border); }
+.page-heading { margin: 0 0 24px; }
+.page-heading h2, .panel > h2 { font-size: 30px; font-weight: 600; letter-spacing: -.035em; margin: 0 0 8px; }
+.page-heading p { font-size: 13px; color: var(--subtle); margin: 0; }
+#test-tools { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; gap: 12px 18px; }
+#test-tools .count { min-height: 30px; padding: 4px 8px; border-radius: 5px; }
+#test-tools .count[aria-pressed="true"] { background: var(--wash); border-color: transparent; color: var(--accent); }
+.split { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: clip; }
+#tests { padding: 8px 16px 16px; }
+.detail { padding: 24px; top: 20px; max-height: calc(100vh - 40px); }
+.detail h2 { font-size: 22px; line-height: 1.3; }
+.gallery .tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
+.log-card, .file-group { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-top: 16px; }
+.log-card h3 { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
+.well pre { background: var(--base); }
+.run-track, .run-fill { border-radius: 4px; }
+.banner { background: var(--fail-wash); padding: 14px; border-radius: 6px; font-size: 12px; }
+@media (min-width: 801px) and (max-width: 1200px) {
+  .shell { grid-template-columns: 216px minmax(0, 1fr); }
+  .workspace-bar { padding: 0 24px; }
+  .report-content { padding: 28px 24px; }
+  .dashboard-card { padding: 20px; }
+  .result-body { gap: 16px; }
+  .result-ring { width: 128px; height: 128px; flex-basis: 128px; padding: 10px; }
+  .charts { grid-template-columns: 105px minmax(0, 1fr); gap: 14px; }
+  .pie { width: 105px; }
+  .metric { padding: 16px; }
+}
+@media (max-width: 1050px) and (min-width: 801px) {
+  .dashboard-grid { grid-template-columns: 1fr; }
+  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .result-body { justify-content: center; }
+  #legend.legend { max-width: 280px; }
+  .charts { grid-template-columns: 150px minmax(0, 1fr); }
+  .pie { width: 150px; }
+}
+@media (max-width: 800px) {
+  .shell { grid-template-columns: minmax(0, 1fr); }
+  .rail { position: relative; top: 0; height: auto; overflow: visible; padding: 16px; border-right: 0; border-bottom: 1px solid var(--border); gap: 0; }
+  .sidebar-brand { font-size: 20px; padding: 0; }
+  .sidebar-brand > .icon { width: 34px; height: 34px; }
+  .brand-caption { display: none; }
+  .project-card { display: none; }
+  .rail > .nav-caption, .sidebar-bottom { display: none; }
+  .rail .tabbar { flex-direction: row; gap: 6px; overflow-x: auto; margin-top: 16px; padding-bottom: 2px; }
+  .rail .tab { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; font-size: 12px; gap: 7px; }
+  .rail .tab .icon { width: 16px; height: 16px; }
+  .rail .tab[aria-selected="true"] { box-shadow: none; }
+  .nav-count { display: none; }
+  .workspace-bar { height: 58px; padding: 0 16px; gap: 12px; }
+  .breadcrumb { font-size: 11px; gap: 10px; }
+  .report-content { padding: 24px 16px; }
+  .hero { flex-direction: row; align-items: flex-start; gap: 12px; }
+  .word { font-size: 30px; }
+  .hero .run-state { font-size: 11px; padding: 5px 8px; margin-top: 24px; }
+  .product { font-size: 13px; }
+  #meta { font-size: 11px; }
+  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
+  .metric { padding: 14px; }
+  .metric-label { font-size: 11px; }
+  .metric-value { font-size: 28px; }
+  .metric-note { font-size: 10px; }
+  .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+  .dashboard-card { padding: 18px; }
+  .card-heading { gap: 12px; }
+  .result-body { gap: 22px; justify-content: center; }
+  .result-ring { width: 128px; height: 128px; flex-basis: 128px; padding: 10px; }
+  #legend.legend { max-width: 250px; }
+  #legend .count { min-height: 32px; }
+  .charts { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; margin-top: 20px; }
+  .pie { width: 104px; }
+  .band { min-height: 36px; }
+  .band-label { font-size: 10px; }
+  .views .view { min-height: 28px; }
+  .attention-row { gap: 8px; grid-template-columns: 48px minmax(0, 1fr) auto; }
+  .dashboard-link { font-size: 10px; }
+  #test-tools { padding: 12px; }
+  .detail { position: static; padding: 20px 16px; max-height: none; }
+  #tests { padding: 8px 12px 12px; }
+  .page-heading h2, .panel > h2 { font-size: 28px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .panel-enter { animation: none; }
+}
+
+/* Light workspace theme with navy typography and warm accent details. */
+.sidebar-brand { color: var(--heading); }
+.sidebar-brand > .icon { border-radius: 13px; box-shadow: inset 0 -3px 0 var(--accent); }
+.project-card { background: var(--base); border-radius: 14px; }
+.project-card > .icon { color: var(--heading); }
+.rail .tab { border-radius: 24px; }
+.rail .tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
+.rail .tab:hover { color: var(--heading); }
+.workspace-bar { box-shadow: 0 1px 6px rgba(49, 83, 134, .025); }
+.dashboard-kicker { color: var(--heading); }
+.word { color: var(--heading); font-size: 40px; font-weight: 500; }
+.word::after { content: ''; display: block; width: 52px; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--accent); }
+.hero .product { margin-top: 14px; }
+.metric, .dashboard-card { border-radius: 16px; border-color: var(--border); box-shadow: 0 3px 15px rgba(49, 83, 134, .035); }
+.metric-label .icon { box-sizing: content-box; padding: 7px; background: var(--wash); border-radius: 50%; }
+.metric-value { color: var(--heading); }
+.card-heading h2, .range-head .section-label, .page-heading h2, .panel > h2, .detail h2, .file-group h3, .log-card h3 { color: var(--heading); }
+.card-detail { background: var(--wash); color: var(--heading); border-radius: 12px; padding: 4px 10px; }
+.views { border-radius: 20px; padding: 4px; border-color: var(--border); }
+.view { border-radius: 16px; padding: 5px 12px; }
+.result-ring strong { color: var(--heading); }
+.dashboard-link { color: var(--heading); padding-bottom: 3px; border-bottom: 2px solid var(--accent); }
+.dashboard-link:hover { color: var(--accent-hover); }
+#test-tools .count[aria-pressed="true"] { color: var(--heading); }
+.subtab[aria-pressed="true"], .attempt[aria-pressed="true"], .order-btn[aria-pressed="true"] { color: var(--heading); box-shadow: inset 0 -2px 0 var(--accent); }
+.file-link, .open-test, .more, .reset-filters { color: var(--heading); }
+.file-link:hover, .open-test:hover { color: var(--accent-hover); }
+.attention-row { color: var(--text); }
+.row[aria-current="true"] .row-title { color: var(--heading); }
+.band[aria-pressed="true"] .band-label, .band[aria-pressed="true"] .n, .run-row[aria-current="true"] .run-name { color: var(--heading); }
+.log-card, .file-group, .gallery .tile, .split { border-radius: 14px; }
+.run-state { border-color: transparent; background: var(--wash); font-weight: 500; }
+.run-state[data-status="passed"] { background: var(--pass-wash); }
+.run-state[data-status="failed"] { background: var(--fail-wash); }
+.run-state[data-status="timedout"], .run-state[data-status="interrupted"] { background: var(--warning-wash); }
+.banner { border-left-color: var(--fail); }
+.find:focus { border-color: var(--heading); }
+.skip { background: var(--heading); color: #ffffff; }
+@media (max-width: 800px) {
+  .word { font-size: 30px; }
+  .rail .tab[aria-selected="true"] { box-shadow: none; }
+}
+
+/* Shared controls and theme tokens keep both appearances consistent. */
+body[data-theme="dark"] {
+  color-scheme: dark;
+  --base: #101b2b;
+  --surface: #18263a;
+  --border: #2c405a;
+  --text: #e7eef8;
+  --subtle: #a1b2ca;
+  --heading: #aecaf0;
+  --control-active: #315386;
+  --wash: #223a58;
+  --hairline: rgba(174, 202, 240, .12);
+  --pass: #67d4a7;
+  --fail: #ff8b92;
+  --flaky: #f7bb61;
+  --skip: #8b9bb0;
+  --timeout: #f7bb61;
+  --interrupted: #8b9bb0;
+  --pass-wash: #193d35;
+  --fail-wash: #452b3a;
+  --warning-wash: #403528;
+  --chart-3: #709bce;
+  --chart-4: #3e597b;
+  --accent-hover: #ffbc83;
+}
+.theme-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--border); border-radius: 20px; color: var(--subtle); padding: 8px 12px; font-size: 12px; }
+.theme-toggle .icon { width: 16px; height: 16px; }
+.theme-toggle:hover { color: var(--heading); background: var(--wash); }
+.theme-switch { width: 28px; height: 16px; padding: 2px; background: var(--border); border-radius: 9px; }
+.theme-switch::before { content: ''; display: block; width: 12px; height: 12px; background: var(--surface); border-radius: 50%; }
+.theme-toggle[aria-checked="true"] .theme-switch { background: var(--accent); }
+.theme-toggle[aria-checked="true"] .theme-switch::before { transform: translateX(12px); background: #ffffff; }
+.filter-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
+.filter-toolbar .tags, .filter-toolbar .order { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
+.filter-control { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; color: var(--subtle); }
+.filter-select { min-width: 148px; max-width: 240px; height: 38px; padding: 7px 34px 7px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background-color: var(--surface); appearance: auto; cursor: pointer; font-size: 12px; }
+.filter-select:disabled { cursor: default; opacity: .6; }
+.filter-select:hover:not(:disabled) { border-color: var(--heading); }
+.filter-select:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }
+.filter-toolbar .band-clear { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--wash); color: var(--heading); font-size: 11px; min-height: 30px; }
+.filter-toolbar .band-clear:hover { border-color: var(--heading); }
+.list-summary { margin: 14px 0 10px; }
+.row-title { white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
+.row-time { align-self: start; }
+#shot-filters .shot-filter { padding: 6px 12px; border-radius: 18px; border: 1px solid var(--border); }
+#shot-filters .shot-filter[aria-pressed="true"] { background: var(--wash); color: var(--heading); border-color: var(--heading); }
+@media (max-width: 800px) {
+  .theme-toggle { padding: 8px; gap: 6px; }
+  .theme-toggle > span:not(.theme-switch) { display: none; }
+  .filter-toolbar { gap: 12px 18px; }
+  .filter-toolbar .tags, .filter-toolbar .order { gap: 12px; }
+  .filter-control { gap: 8px; }
+  .filter-select { min-width: 115px; max-width: 190px; }
+}