/* App chrome, following benchmark.inceptbench.com: Inter, slate text,
   blue for primary actions and selections, pastel icon tiles. */
:root {
  color-scheme: light;
  --bg: #F8FAFC; --card: #FFFFFF; --text: #0F172A; --text-2: #475569; --text-3: #94A3B8;
  --border: #E2E8F0; --border-2: #F1F5F9;
  --primary: #2563EB; --primary-hover: #1D4ED8; --primary-50: #EFF6FF; --primary-100: #DBEAFE; --primary-300: #93C5FD;
  --violet: #7C3AED; --violet-50: #F5F3FF;
  --green: #15803D; --green-50: #F0FDF4;
  --amber: #D97706; --amber-50: #FFFBEB;
  --red: #DC2626; --red-50: #FEF2F2;
  --high: #B91C1C; --high-bg: #FEE2E2; --med: #B45309; --med-bg: #FEF3C7;
  --low: #1D4ED8; --low-bg: #DBEAFE;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
code { font: .86em var(--mono); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.ico { display: block; flex: none; }
.faint { color: var(--text-3); }

/* top bar + tabs */
.topbar { background: var(--card); border-bottom: 1px solid var(--border); padding-inline: 16px; }
.topbar-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; }
/* centred pill switcher */
.brand { justify-self: start; }
.tabs { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; background: var(--border-2); border: 1px solid var(--border); border-radius: 12px; }
.tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 9px; color: var(--text-2); font-weight: 500; font-size: 14px; line-height: 1.2; transition: background-color .15s, color .15s, box-shadow .15s; }
.tabs a .ico { color: var(--text-3); transition: color .15s; }
.tabs a:hover { color: var(--text); background: rgba(255,255,255,.6); text-decoration: none; }
.tabs a.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 1px 1px rgba(15,23,42,.04); }
.tabs a.on .ico { color: var(--primary); }
.who { justify-self: end; display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 13px; }
.who-email { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.signout { color: var(--text-2); font-weight: 500; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; }
.signout:hover { background: var(--bg); color: var(--text); text-decoration: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 16px 72px; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--text-3); }

/* buttons */
.btn { font: 500 14px var(--sans); border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1.3; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn .ico { width: 16px; height: 16px; color: var(--text-2); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary .ico { color: #fff; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-lg { font-size: 15px; padding: 11px 22px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; margin: 0; }
.linkbtn { font: 500 13px var(--sans); color: var(--violet); background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

.pagehead { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.pagehead h1 { font-size: 24px; line-height: 1.25; }
.lede { font-size: 14px; color: var(--text-2); margin: 4px 0 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--border-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.seg a { color: var(--text-2); font-weight: 500; font-size: 13px; padding: 5px 12px; border-radius: 6px; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

/* runs table */
.table { margin-top: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.thead, .trow { display: grid; grid-template-columns: 112px minmax(0, 2.2fr) 56px 132px 118px minmax(0, 1.2fr) 118px; gap: 12px; align-items: center; padding: 12px 20px; }
.thead { font-size: 12px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--border); background: var(--bg); }
.trow { color: var(--text); border-bottom: 1px solid var(--border-2); font-size: 14px; }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--bg); text-decoration: none; }
.c-lesson { display: grid; min-width: 0; }
.c-lesson b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-lesson code { color: var(--text-3); font-size: 12px; }
.c-ver { font-weight: 600; color: var(--text); }
.c-who, .c-when { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap; border: 1px solid transparent; }
.badge.done { background: var(--green-50); color: var(--green); border-color: #BBF7D0; }
.badge.failed { background: var(--red-50); color: var(--red); border-color: #FECACA; }
.badge.running { background: var(--primary-50); color: var(--primary); border-color: var(--primary-100); }
.badge .spin { width: 10px; height: 10px; }

/* new run form */
.card-form { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-head { padding: 26px 32px 22px; border-bottom: 1px solid var(--border-2); }
.card-head h1 { font-size: 24px; }
.group-box { border: 1px solid var(--border); border-radius: 12px; margin: 26px 32px 0; padding: 8px 24px 24px; min-width: 0; }
.group-box legend { display: inline-flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 15px; font-weight: 600; margin-left: -6px; }
.gicon { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; }
.gicon .ico { width: 17px; height: 17px; }
.g-blue { background: var(--primary-50); color: var(--primary); }
.g-violet { background: var(--violet-50); color: var(--violet); }
.g-green { background: var(--green-50); color: var(--green); }
.g-amber { background: var(--amber-50); color: var(--amber); }
.g-grey { background: var(--border-2); color: var(--text-3); }
.flabel { display: block; font-weight: 500; font-size: 14px; margin: 16px 0 8px; color: var(--text); }
.req { color: var(--text-3); }
.card-form select { width: 100%; appearance: none; -webkit-appearance: none; font: 15px var(--sans); color: var(--text); padding: 12px 40px 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.card-form select:hover { border-color: #CBD5E1; }
.card-form select:focus { outline: none; border-color: var(--primary-300); box-shadow: 0 0 0 3px var(--primary-50); }
.card-form select:disabled { color: var(--text-3); background-color: var(--bg); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.two > label { min-width: 0; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 500; min-width: 0; background: var(--card); }
.opt-card:hover { border-color: #CBD5E1; }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.oc-name { flex: 1; min-width: 0; }
.oc-check { color: var(--primary); visibility: hidden; display: inline-flex; }
.oc-check .ico { width: 18px; height: 18px; }
.opt-card:has(input:checked) { border-color: var(--primary-300); background: var(--primary-50); color: var(--primary); box-shadow: 0 0 0 1px var(--primary-300); }
.opt-card:has(input:checked) .oc-check { visibility: visible; }
.opt-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.static-field { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); flex-wrap: wrap; }
.sf-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--text-2); }
.sf-text b { color: var(--text); font-weight: 600; }
.lastnote { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.card-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 32px; margin-top: 28px; border-top: 1px solid var(--border-2); }
.card-form .alert { margin: 20px 32px 0; }

.running { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--primary); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary-100); border-top-color: var(--primary); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* severity pills */
.pills-row { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sev { display: inline-block; font: 600 12px/1 var(--sans); border-radius: 6px; padding: 4px 7px; min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.sev-high { color: var(--high); background: var(--high-bg); }
.sev-med { color: var(--med); background: var(--med-bg); }
.sev-low { color: var(--low); background: var(--low-bg); }
.sev.zero { color: var(--text-3); background: var(--border-2); }
.tag-muted { font-size: 12px; color: var(--text-2); background: var(--border-2); border-radius: 6px; padding: 3px 8px; }
.look { font-size: 12.5px; color: var(--text-2); }

.alert { margin-top: 18px; background: var(--red-50); border: 1px solid #FECACA; border-radius: 10px; padding: 14px 18px; color: #7F1D1D; }
.alert h2 { font-size: 15px; margin-bottom: 4px; color: var(--red); }
.alert p { margin: 0 0 10px; font-size: 14px; }
.empty { color: var(--text-2); background: var(--card); border: 1px dashed var(--border); border-radius: 12px; padding: 18px 20px; font-size: 14px; }
.hint { font-size: 13px; color: var(--text-2); margin: 16px 0 0; }

/* run page */
.crumbs { font-size: 15px; font-weight: 500; color: var(--text-3); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--primary); }
.runhead { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.runhead h1 { font-size: 24px; line-height: 1.25; margin: 4px 0 4px; }
.meta { margin: 0; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
iframe.report { display: block; width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #F3F4F8; min-height: 70vh; }

.progress { margin-top: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; }
.st { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-2); font-size: 14px; }
.st:last-child { border-bottom: 0; }
.st .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); }
.st .slabel { font-weight: 500; }
.st .sstate { font-size: 13px; color: var(--text-3); }
.st-done .dot { background: var(--green); border-color: var(--green); }
.st-active .dot { border-color: var(--primary-100); border-top-color: var(--primary); animation: spin .9s linear infinite; }
.st-active .sstate { color: var(--primary); font-weight: 500; }
.st-skipped .slabel, .st-pending .slabel { color: var(--text-3); }
.st-skipped .dot { border-style: dashed; }
.st-failed .dot { background: var(--red); border-color: var(--red); }
.st-failed .sstate { color: var(--red); font-weight: 500; }

/* history */
.timeline { list-style: none; margin: 20px 0 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tl { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-2); }
.tl:last-child { border-bottom: 0; }
.tl-v { font-weight: 600; font-size: 15px; color: var(--primary); background: var(--primary-50); border-radius: 8px; text-align: center; padding: 6px 0; }
.tl-failed .tl-v { color: var(--text-3); background: var(--border-2); }
.tl-failed .tl-top a { color: var(--text-3); }
.tl-top { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.tl-top a { color: var(--text); font-size: 14px; }
.tl-top b { font-weight: 500; }
.tl-meta { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.tl-counts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 6px; }
.tl-err { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.trend { font-size: 12.5px; font-weight: 500; }
.trend.better { color: var(--green); }
.trend.worse { color: var(--red); }
.trend.same { color: var(--text-3); }

@media (max-width: 720px) {
  .tl { grid-template-columns: 40px minmax(0, 1fr); }
  .tl > .btn { grid-column: 2; justify-self: start; }
  .tabs a { padding: 7px 11px; gap: 6px; }
  .brand-name { display: none; }
  .who-email { display: none; }
  .thead { display: none; }
  .trow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lesson ver" "status counts" "when fb"; gap: 6px 12px; padding: 12px 16px; }
  .c-lesson { grid-area: lesson; } .c-ver { grid-area: ver; } .c-status { grid-area: status; }
  .c-counts { grid-area: counts; justify-self: end; } .c-when { grid-area: when; } .c-who { display: none; }
  .c-fb { grid-area: fb; justify-self: end; }
  .group-box { margin: 20px 14px 0; padding: 6px 14px 18px; }
  .card-head { padding: 20px 16px 16px; } .card-foot { padding: 16px; }
  .card-form .alert { margin: 20px 14px 0; }
  .two, .opt-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Course Feedback filing */
.fbnote { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); }
.fbnote.ok .ico { color: var(--green); }
.fbnote.warn { color: var(--amber); }
.fbnote.warn a { color: var(--primary); }
.fbtag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.fbtag.sent { color: var(--green); }
.fbtag.failed { color: var(--red); }
.c-fb { min-width: 0; }

/* latest-version column and the version strip */
.c-ver { display: grid; gap: 1px; }
.ver-note { font-size: 12px; font-weight: 500; color: var(--primary); }
.versions { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 16px 0 4px; scrollbar-width: thin; }
.versions .vlab { align-self: center; font-size: 12px; font-weight: 500; color: var(--text-3); margin-right: 2px; white-space: nowrap; }
.vchip { flex: none; display: grid; gap: 2px; min-width: 124px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 12.5px; }
.vchip:hover { border-color: #CBD5E1; text-decoration: none; }
.vchip b { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.vchip .vmeta { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.vchip.on { border-color: var(--primary-300); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-300); }
.vchip.on b { color: var(--primary); }
.vchip.failed b { color: var(--text-3); }
.vchip .pills-row { margin-top: 2px; }

/* sign-in page */
.login-page { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(900px 480px at 50% -10%, var(--primary-50), transparent 70%), var(--bg); padding: 24px 16px; }
.login-wrap { width: 100%; max-width: 420px; }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px 28px;
  text-align: center; box-shadow: 0 12px 40px -24px rgba(15,23,42,.25); }
.login-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-50); color: var(--primary);
  display: inline-grid; place-items: center; margin-bottom: 16px; }
.login-card h1 { font-size: 22px; line-height: 1.3; }
.login-lede { margin: 8px 0 24px; color: var(--text-2); font-size: 14px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 11px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-weight: 500;
  font-size: 15px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.gbtn:hover { background: var(--bg); border-color: #CBD5E1; text-decoration: none; }
.login-note { margin: 16px 0 0; font-size: 13px; color: var(--text-3); }
.login-msg { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; text-align: left; }
.login-msg.err { background: var(--red-50); color: #991B1B; border: 1px solid #FECACA; }
.login-msg.ok { background: var(--green-50); color: var(--green); border: 1px solid #BBF7D0; }

/* New run card: typography pass */
.card-form { font-feature-settings: "cv11", "tnum"; }            /* single-storey a, even digits */
.card-head h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.card-head .lede { font-size: 14px; color: var(--text-3); margin-top: 6px; }
.group-box legend { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.card-form .flabel { font-size: 13px; font-weight: 500; color: var(--text-2); margin: 18px 0 8px; }
.card-form .req { color: var(--text-3); font-weight: 400; }
.card-form select { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; padding: 13px 40px 13px 14px; }
.card-form select:invalid, .card-form select option[value=""] { color: var(--text-3); font-weight: 400; }
.opt-card { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; padding: 13px 16px; }
.opt-card:not(:has(input:checked)) { color: var(--text-2); font-weight: 500; }
.lastnote { font-size: 13px; color: var(--text-3); }
.lastnote a { font-weight: 500; }
.srcmeta { margin: 12px 2px 0; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.srcmeta b { color: var(--text-2); font-weight: 600; }
.srcmeta code { font: 12px var(--mono); color: var(--text-2); background: var(--border-2); padding: 2px 6px; border-radius: 6px; }
.srcmeta .linkbtn { font-size: 13px; margin-left: 6px; }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px #DCFCE7; margin: 0 8px 1px 2px; vertical-align: middle; }
.card-foot { padding: 18px 32px; }

/* run page header */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.rhead h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.rhead-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--text-3); }
.rhead-sub code { color: var(--text-2); }
.rhead-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-icon { padding: 8px 10px; }
.runbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; font-feature-settings: "tnum"; }
.rb-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-ver { font-weight: 650; font-size: 14px; color: var(--primary); background: var(--primary-50); border-radius: 8px; padding: 4px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.rb-ver.failed { color: var(--red); background: var(--red-50); }
.rb-ver.running { color: var(--primary); }
.rb-meta { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.rb-meta code { font-size: 12px; color: var(--text-3); }
.rb-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cnt { font-size: 12.5px; color: var(--text-2); border-radius: 999px; padding: 3px 10px; background: var(--border-2); white-space: nowrap; }
.cnt b { font-weight: 650; margin-right: 2px; }
.cnt.high { background: var(--high-bg); color: var(--high); }
.cnt.med { background: var(--med-bg); color: var(--med); }
.cnt.low { background: var(--low-bg); color: var(--low); }
.cnt.look { background: var(--violet-50); color: var(--violet); }
.cnt.zero { background: var(--border-2); color: var(--text-3); }
.fbbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap; border: 1px solid var(--border); color: var(--text-2); }
.fbbadge.ok { color: var(--green); background: var(--green-50); border-color: #BBF7D0; }
.fbbadge.bad { color: var(--red); background: var(--red-50); border-color: #FECACA; }
.fbbadge.warn { color: var(--amber); background: var(--amber-50); border-color: #FDE68A; }
a.fbbadge:hover { text-decoration: none; filter: brightness(.97); }
.vpills { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.vpills .vlab { font-size: 12px; font-weight: 500; color: var(--text-3); margin-right: 4px; }
.vpill { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 3px 11px; }
.vpill:hover { border-color: #CBD5E1; text-decoration: none; }
.vpill.on { color: var(--primary); background: var(--primary-50); border-color: var(--primary-300); }
.vpill.failed { color: var(--text-3); font-weight: 500; }
.vpill.failed .ico { color: var(--red); }
.vpill .spin { width: 10px; height: 10px; }
.runbar + .vpills + .alert, .runbar + .alert { margin-top: 14px; }
iframe.report { margin-top: 16px; }
.progress { margin-top: 16px; }
@media (max-width: 720px) { .rb-counts { margin-left: 0; } .rhead h1 { font-size: 22px; } }

.rb-ver.queued { color: var(--amber); background: var(--amber-50); }
.queue-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--amber-50); border: 1px solid #FDE68A; color: #92400E; font-size: 13.5px; }
.queue-note b { font-weight: 600; }
.badge.queued { background: var(--amber-50); color: var(--amber); border-color: #FDE68A; }