@font-face {
  font-family:Archivo;
  src:url(assets/archivo.woff2) format("woff2");
  font-weight:100 900;
  font-display:swap}
@font-face {
  font-family:Shoulders;
  src:url(assets/shoulders.woff2) format("woff2");
  font-weight:100 900;
  font-display:swap}
@font-face {
  font-family:Jet;
  src:url(assets/mono.woff2) format("woff2");
  font-weight:100 900;
  font-display:swap}

:root {
  --stone:#f3f4f1;
  --white:#fff;
  --navy:#192f40;
  --muted:#526473;
  --line:#dbe1df;
  --coral:#b53729;
  --pale:#fff0ec;
  --green:#256044;
  --blue:#eaf0f5}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px}
body {
  margin:0;
  background:var(--stone);
  color:var(--navy);
  font-family:Archivo,Arial,sans-serif;
  font-size:15px;
  line-height:1.5}
a {
  color:inherit;
  text-underline-offset:4px}
button,input,select,textarea {
  font:inherit}
button,a.contact {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px 16px;
  background:white;
  color:var(--navy);
  font-weight:650;
  cursor:pointer}
button:hover {
  border-color:var(--navy);
  background:#edf1f2}
button:disabled {
  opacity:.45;
  cursor:not-allowed}
button.primary {
  background:var(--coral);
  color:white;
  border-color:var(--coral)}
button.dark,.contact {
  background:var(--navy);
  color:white;
  border-color:var(--navy)}
button.primary:hover {
  background:#982d22}
button.dark:hover {
  background:#29485f}
button.quiet {
  background:transparent}
button span {
  margin-left:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--coral);
  outline-offset:3px}
input,select,textarea {
  min-height:44px;
  width:100%;
  border:1px solid #80909b;
  border-radius:4px;
  background:#fff;
  color:var(--navy);
  padding:10px 12px;
  margin-top:6px}
textarea {
  resize:vertical}
label {
  font-size:13px;
  font-weight:600;
  display:block}
label small {
  display:block;
  color:var(--muted);
  font-weight:400;
  margin-top:6px;
  font-size:12px}
.topbar {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 4%;
  background:#fff;
  border-bottom:1px solid var(--line);
  gap:24px}
.identity {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none}
.identity img {
  object-fit:contain;
  background:var(--navy);
  padding:5px;
  border-radius:4px}
.wordmark {
  font-family:Shoulders,sans-serif;
  font-size:28px;
  letter-spacing:.02em;
  font-weight:800}
.wordmark-note {
  font-family:Archivo,sans-serif;
  font-size:10px;
  display:inline-block;
  padding-left:9px;
  letter-spacing:0;
  font-weight:500}
nav {
  display:flex;
  gap:20px}
nav a {
  font-size:13px;
  text-decoration:none;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 6px}
nav a:hover {
  color:var(--coral)}
.local-tag {
  font-family:Jet,monospace;
  font-size:11px;
  color:var(--muted)}
main {
  max-width:1560px;
  padding:0 4%;
  margin:auto}
.intro {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:9%;
  padding:44px 0 30px;
  align-items:center}
.eyebrow {
  font-family:Jet,monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:.11em;
  margin:0 0 10px;
  color:var(--muted)}
h1 {
  font-weight:650;
  font-size:clamp(32px,4.1vw,57px);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:0 0 18px}
h2 {
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0;
  font-weight:650}
.lead {
  color:var(--muted);
  max-width:620px;
  margin:0;
  font-size:16px}
.disclosure {
  border-left:2px solid #b5c0c5;
  padding-left:20px;
  font-size:12px}
.disclosure strong {
  font-size:13px}
.disclosure p {
  margin-bottom:0;
  color:var(--muted)}
.local-dot {
  width:7px;
  height:7px;
  display:inline-block;
  background:var(--green);
  border-radius:50%;
  margin-right:8px}
.pipeline {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--navy);
  color:white;
  border-radius:7px;
  overflow:hidden;
  margin-bottom:16px}
.pipeline>div {
  position:relative;
  display:grid;
  grid-template-columns:36px 1fr;
  padding:20px 24px;
  align-items:center;
  border-right:1px solid #496070;
  gap:2px 8px}
.step-num {
  grid-row:span 2;
  font-family:Jet,monospace;
  font-size:12px;
  color:#9eb5c5;
  border-bottom:2px solid #e9907d;
  padding-bottom:5px;
  width:24px}
.pipeline strong {
  font-size:14px;
  font-weight:550}
.pipeline small {
  font-size:11px;
  color:#c4d1da}
.status {
  min-height:44px;
  color:var(--muted);
  font-size:13px;
  padding:12px 0 20px}
.work-grid {
  display:grid;
  grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr);
  gap:20px;
  align-items:start}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  min-width:0}
.section-head {
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px}
.section-head .eyebrow {
  margin-bottom:7px}
.count {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:28px;
  height:25px;
  margin-left:8px;
  border-radius:4px;
  background:var(--blue);
  font-family:Jet,monospace;
  font-size:12px;
  font-weight:500;
  vertical-align:middle}
.filters {
  padding:0 24px 20px;
  display:grid;
  grid-template-columns:1.8fr 1fr .8fr;
  gap:12px}
.table-wrap {
  min-height:235px}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:12px}
th {
  color:var(--muted);
  background:#f7f8f7;
  font-size:10px;
  letter-spacing:.04em;
  font-weight:600;
  padding:12px 16px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
td {
  padding:16px;
  border-bottom:1px solid #e6eae8;
  vertical-align:middle;
  overflow-wrap:anywhere}
th:first-child,td:first-child {
  padding-left:24px}
td:first-child {
  max-width:230px}
td strong {
  display:block;
  font-size:13px;
  line-height:1.35;
  font-weight:600}
td small {
  display:block;
  font-family:Jet,monospace;
  color:var(--muted);
  font-size:10px;
  margin-top:5px}
.badge {
  display:inline-block;
  padding:4px 7px;
  border-radius:3px;
  font-size:10px;
  white-space:nowrap;
  font-weight:650;
  background:var(--blue);
  color:#314b60}
.badge.P1,.badge.failed {
  color:#9d2c21;
  background:var(--pale)}
.badge.completed {
  background:#e9f3ec;
  color:var(--green)}
.row-action {
  padding:8px 10px;
  min-width:44px;
  font-size:15px}
.selected {
  background:#f1f5f8}
.queue-footer {
  padding:16px 24px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  font-size:11px;
  color:var(--muted)}
.queue-footer span {
  margin-right:auto}
.queue-footer button {
  font-size:11px;
  padding:9px 11px}
.trace-icon {
  font-size:30px;
  color:var(--muted)}
#detail {
  padding:0 24px 24px;
  font-size:12px}
.detail-key {
  font-family:Jet,monospace;
  color:var(--muted);
  font-size:11px;
  margin:0 0 6px}
#detail h3 {
  font-size:19px;
  line-height:1.3;
  margin:0 0 16px;
  overflow-wrap:anywhere}
.detail-data {
  margin:14px 0 20px;
  background:#f4f6f6;
  padding:12px}
.detail-data p {
  margin:4px 0;
  overflow-wrap:anywhere}
.history {
  list-style:none;
  padding:0;
  margin:16px 0}
.history li {
  position:relative;
  border-left:1px solid #bac8cf;
  padding:0 0 20px 20px;
  margin-left:5px}
.history li:before {
  content:"";
  position:absolute;
  left:-4px;
  top:4px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#44677e}
.history li:last-child {
  padding-bottom:0}
.history strong {
  display:block;
  font-size:11px}
.history p {
  font-size:11px;
  color:var(--muted);
  margin:4px 0 0;
  overflow-wrap:anywhere}
.lab-control {
  border-top:1px solid var(--line);
  padding:18px 24px;
  background:#fafbf9}
.checkbox {
  display:flex;
  gap:10px;
  align-items:center;
  min-height:44px;
  line-height:1.4;
  font-size:12px}
.checkbox input {
  width:20px;
  min-height:20px;
  margin:0;
  accent-color:var(--coral);
  flex-shrink:0}
.lab-control p {
  font-size:11px;
  color:var(--muted);
  margin:6px 0 0}
.report {
  margin:20px 0}
.metrics {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:0 24px 20px;
  gap:12px}
.metric {
  border-left:1px solid var(--line);
  padding-left:16px}
.metric:first-child {
  border:0;
  padding-left:0}
.metric strong {
  display:block;
  font-family:Shoulders,sans-serif;
  font-size:36px;
  font-weight:650;
  line-height:1.1}
.metric span {
  font-size:11px;
  color:var(--muted)}
.fine {
  font-size:11px;
  color:var(--muted);
  line-height:1.6}
.report>.fine {
  padding:0 24px 20px;
  margin:0}
.button-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap}
.button-row button {
  font-size:12px}
.config-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}
.config-grid .panel {
  padding:24px}
.config-grid .section-head {
  padding:0 0 24px}
.corner-note {
  font-family:Jet,monospace;
  font-size:10px;
  color:var(--muted)}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}
.wide {
  grid-column:1/-1}
.error {
  color:#9d2c21;
  font-size:12px;
  min-height:4px}
.import {
  margin-top:24px;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:12px}
.import summary {
  font-weight:600;
  min-height:44px;
  cursor:pointer;
  padding-top:10px}
.import p {
  color:var(--muted)}
.import a {
  display:inline-block;
  min-height:44px;
  padding:10px 0}
.rule-intro {
  font-size:13px;
  color:var(--muted);
  margin:0 0 20px}
.code-editor {
  font-family:Jet,monospace;
  font-size:11px;
  line-height:1.65;
  background:#f5f7f7;
  tab-size:2;
  min-height:335px}
.confirm {
  margin:0 24px 20px;
  padding:16px;
  background:var(--pale);
  font-size:13px}
.confirm button {
  margin:0 8px 4px 0}
.handoff {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding:44px 0}
.handoff h2 {
  font-size:26px}
.handoff p:not(.eyebrow) {
  font-size:13px;
  color:var(--muted)}
.contact {
  display:inline-flex;
  align-items:center;
  gap:20px;
  text-decoration:none;
  white-space:nowrap;
  background:var(--navy)!important;
  color:white!important;
  font-size:13px}
footer {
  display:flex;
  gap:20px;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:24px 4%;
  font-size:10px;
  color:var(--muted);
  font-family:Jet,monospace}
.notice {
  padding:20px;
  background:var(--pale)}
.skip {
  position:absolute;
  left:10px;
  top:-100px;
  z-index:10;
  background:white;
  padding:12px}
.skip:focus {
  top:10px}
#detail:focus-visible {
  outline:3px solid var(--coral);
  outline-offset:-3px}
.sr-only {
  position:absolute;
  clip:rect(0,0,0,0);
  width:1px;
  height:1px;
  overflow:hidden}

@media(max-width:1050px) {
  .work-grid {
  grid-template-columns:1fr}
.detail-panel {
  display:grid;
  grid-template-columns:1fr 2fr}
.detail-panel .section-head {
  align-items:start}
.lab-control {
  grid-column:1/-1}
.intro {
  gap:32px}
.pipeline>div {
  padding:16px}
.local-tag {
  display:none}
.config-grid {
  grid-template-columns:1fr}
.code-editor {
  min-height:300px}
}

@media(max-width:640px) {
  body {
  font-size:14px}
.topbar {
  flex-wrap:wrap;
  padding:16px 5%;
  gap:6px}
.identity {
  width:100%}
nav {
  gap:12px;
  width:100%;
  justify-content:space-between}
nav a {
  padding:0 8px}
.wordmark {
  font-size:26px}
main {
  padding:0 5%}
.intro {
  grid-template-columns:1fr;
  gap:24px;
  padding:28px 0}
h1 {
  font-size:36px;
  max-width:300px}
.lead {
  font-size:14px}
.disclosure {
  font-size:11px;
  padding-left:14px}
.pipeline {
  grid-template-columns:1fr 1fr}
.pipeline>div {
  padding:16px 12px;
  grid-template-columns:25px 1fr;
  border-bottom:1px solid #496070;
  gap:4px}
.pipeline small {
  font-size:9px}
.pipeline strong {
  font-size:12px}
.step-num {
  font-size:10px;
  width:19px}
.section-head {
  padding:20px;
  flex-wrap:wrap}
.section-head .primary {
  width:100%}
.filters {
  padding:0 20px 16px;
  grid-template-columns:1fr 1fr}
.filters label:first-child {
  grid-column:1/-1}
h2 {
  font-size:20px}
.table-wrap {
  padding:0 20px}
table,tbody {
  display:block}
thead {
  display:none}
tr {
  display:grid;
  grid-template-columns:1fr auto;
  border:1px solid var(--line);
  border-radius:5px;
  padding:14px;
  margin:0 0 12px;
  gap:8px}
td,td:first-child {
  display:block;
  border:0;
  padding:0;
  max-width:none}
td:first-child {
  grid-column:1/-1}
td:nth-child(3) {
  grid-column:1/-1;
  color:var(--muted);
  font-size:12px}
td:nth-child(4) {
  grid-column:1}
td:last-child {
  grid-column:2;
  grid-row:2/5;
  align-self:end}
.queue-footer {
  padding:8px 20px 20px}
.queue-footer span {
  width:100%}
.detail-panel {
  display:block}
#detail {
  padding:0 20px 20px}
.lab-control {
  padding:16px 20px}
.metrics {
  grid-template-columns:1fr 1fr;
  padding:0 20px 20px;
  gap:20px}
.metric {
  padding-left:12px}
.metric:first-child {
  padding-left:12px;
  border-left:1px solid var(--line)}
.metric strong {
  font-size:32px}
.report .button-row {
  width:100%}
.report .button-row button {
  width:100%;
  font-size:13px}
.report>.fine {
  padding:0 20px 20px}
.config-grid .panel {
  padding:20px}
.config-grid .section-head {
  gap:8px}
.form-grid {
  grid-template-columns:1fr;
  gap:14px}
.wide {
  grid-column:auto}
.corner-note {
  font-size:9px}
.code-editor {
  font-size:10px;
  padding:10px}
.handoff {
  display:block;
  padding:30px 0}
.handoff h2 {
  font-size:24px}
.contact {
  white-space:normal;
  width:100%;
  justify-content:space-between;
  margin-top:12px;
  font-size:12px}
footer {
  display:block;
  padding:20px 5%}
footer span,footer a {
  display:block;
  margin:8px 0}
footer a {
  min-height:44px;
  padding-top:8px}
.confirm {
  margin:0 20px 20px}
}


/* Keep the selected result within the workshop, not over the page footer. */
.workshop-lab{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr);gap:20px;align-items:start}
.workshop-lab .work-grid{display:contents}
.workshop-lab .queue-panel,.workshop-lab .report,.workshop-lab .config-grid{grid-column:1}
.workshop-lab .detail-panel{grid-column:2;grid-row:1/span 3;position:sticky;top:16px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
.workshop-lab #detail{overflow:auto;min-height:0}
.workshop-lab .lab-control{flex-shrink:0}
.workshop-lab .report{margin:0}
.workshop-lab .config-grid{grid-template-columns:1fr}
.table-wrap{max-height:420px;overflow:auto}
.form-result{padding:10px 12px;margin-bottom:12px;background:var(--blue);border-left:3px solid var(--navy);font-size:12px;overflow-wrap:anywhere}
.form-result[hidden]{display:none}
.form-result p{margin:0 0 6px}
.form-result a{display:inline-flex;align-items:center;min-height:44px}
.form-result button{font-size:12px}
@media(max-width:1050px){.workshop-lab{display:block}.workshop-lab .detail-panel{position:static;max-height:none;margin-top:20px}.workshop-lab .report{margin:20px 0}}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}