#bootstrapLab,
#bootstrapLab * { box-sizing: border-box; }

#bootstrapLab {
  --pc-main: #1b5e20;
  --abe-teal: #197f8d;
  --abe-blue: #3e68a6;
  --abe-green: #2f8d57;
  --abe-amber: #b96824;
  --abe-red: #b9484d;
  --abe-ink: #20343d;
  --abe-muted: #526a73;
  --abe-line: #d8e3e8;
  --abe-pc: var(--pc-main, #1b5e20);
  --abe-pc-tint: color-mix(in srgb, var(--abe-pc) 7%, white);
  --abe-pc-strong: color-mix(in srgb, var(--abe-pc) 13%, white);
  --abe-pc-border: color-mix(in srgb, var(--abe-pc) 42%, white);
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto 28px;
  padding: 16px;
  color: var(--abe-ink);
  background: var(--abe-pc-tint);
  border: 1px solid var(--abe-pc-border);
  border-radius: 8px;
  font: 16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#bootstrapLab[hidden] { display: none !important; }
#bootstrapLab h2, #bootstrapLab h3, #bootstrapLab p, #bootstrapLab ol { margin: 0; }

.abe-hero {
  padding: 24px;
  background: var(--abe-pc-strong);
  border: 1px solid var(--abe-pc-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--abe-pc) 12%, transparent);
}

.abe-chips, .abe-presets, .abe-actions, .abe-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.abe-chip {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--abe-pc-border);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.abe-hero h2 { margin-top: 12px; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.08; }
.abe-hero > p { max-width: 880px; margin-top: 9px; color: var(--abe-muted); }
.abe-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.abe-metric { padding: 11px; background: #fff; border: 1px solid var(--abe-pc-border); border-radius: 8px; }
.abe-metric strong { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.abe-metric span { display: block; margin-top: 4px; color: var(--abe-muted); font-size: .75rem; }

.abe-ramp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.abe-ramp > div, .abe-panel, .abe-stage-panel, .abe-boundary, .abe-fixtures {
  background: #fff;
  border: 1px solid var(--abe-line);
  border-radius: 8px;
}
.abe-ramp > div { padding: 12px; }
.abe-ramp b { display: block; margin-bottom: 4px; color: var(--abe-teal); font-size: .75rem; text-transform: uppercase; }
.abe-ramp span { color: var(--abe-muted); font-size: .84rem; }

.abe-presets { margin-bottom: 12px; }
.abe-preset, .abe-btn {
  min-height: 40px;
  padding: 8px 12px;
  color: var(--abe-ink);
  background: #fff;
  border: 1px solid var(--abe-pc-border);
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}
.abe-preset[aria-pressed="true"] { background: var(--abe-pc-strong); box-shadow: inset 0 0 0 2px var(--abe-pc); }
.abe-btn { border-radius: 7px; color: #fff; background: var(--abe-teal); border-color: var(--abe-teal); }
.abe-btn.secondary { background: var(--abe-blue); border-color: var(--abe-blue); }
.abe-btn.reset { color: var(--abe-ink); background: #fff; border-color: var(--abe-line); }
.abe-btn.flip { background: var(--abe-teal); border-color: var(--abe-teal); }
.abe-btn.mode { color: var(--abe-ink); background: var(--abe-pc-strong); border-color: var(--abe-pc-border); }
.abe-btn:focus-visible, .abe-preset:focus-visible, #bootstrapLab select:focus-visible, #bootstrapLab input:focus-visible { outline: 3px solid color-mix(in srgb, var(--abe-teal) 35%, white); outline-offset: 2px; }

.abe-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 12px; align-items: start; }
#bootstrapLab .abe-grid.page-columns.page-full { display: grid; grid-template-columns: 310px minmax(0, 1fr) !important; }
#bootstrapLab .abe-grid > * { grid-column: auto !important; }
.abe-panel, .abe-stage-panel { padding: 14px; }
.abe-panel h3, .abe-stage-panel h3, .abe-fixtures h3 { margin-bottom: 10px; padding-bottom: 7px; border-bottom: 2px solid var(--abe-pc); font-size: 1rem; }
.abe-field { margin-bottom: 10px; }
.abe-field label { display: block; margin-bottom: 4px; color: var(--abe-muted); font-size: .76rem; font-weight: 850; text-transform: uppercase; }
#bootstrapLab select, #bootstrapLab input[type="number"] { width: 100%; min-height: 38px; padding: 7px 9px; color: var(--abe-ink); background: #fff; border: 1px solid #b7c9d2; border-radius: 7px; }
.abe-check { display: flex; gap: 9px; align-items: center; min-height: 40px; padding: 8px; background: #f7fafb; border: 1px solid var(--abe-line); border-radius: 7px; }
.abe-check input { width: 20px; height: 20px; accent-color: var(--abe-teal); }
.abe-durations { margin: 8px 0 12px; border: 1px solid var(--abe-line); border-radius: 7px; }
.abe-durations summary { padding: 10px; cursor: pointer; font-weight: 850; }
.abe-duration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px 10px; }
.abe-duration-grid label { color: var(--abe-muted); font-size: .7rem; font-weight: 800; }

.abe-stage-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.abe-stage {
  position: relative;
  min-height: 98px;
  padding: 10px;
  background: #f7fafb;
  border: 2px solid var(--abe-line);
  border-radius: 8px;
}
.abe-stage::after { content: ""; position: absolute; top: 50%; right: -9px; width: 9px; height: 2px; background: var(--abe-line); }
.abe-stage:last-child::after { display: none; }
.abe-stage.current { border-color: var(--abe-teal); box-shadow: 0 5px 14px rgba(25,127,141,.13); }
.abe-stage.pass { border-color: var(--abe-green); }
.abe-stage.fail { border-color: var(--abe-red); background: #fff4f3; }
.abe-stage.latent { border-style: dashed; }
.abe-stage b { display: block; font-size: .75rem; }
.abe-stage span { display: block; margin-top: 7px; color: var(--abe-muted); font-size: .69rem; overflow-wrap: anywhere; }

.abe-legend { margin: 10px 0; color: var(--abe-muted); font-size: .73rem; font-weight: 800; }
.abe-dot { width: 10px; height: 10px; border-radius: 50%; }
.abe-dot.current { background: var(--abe-teal); }.abe-dot.pass { background: var(--abe-green); }.abe-dot.fail { background: var(--abe-red); }.abe-dot.latent { background: #a9b7bd; }
.abe-evidence { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: 10px; }
.abe-trace { min-height: 220px; padding: 14px; background: #f7fafb; border: 1px solid var(--abe-line); border-radius: 8px; }
.abe-trace ol { padding-left: 20px; }
.abe-trace li { margin: 7px 0; color: var(--abe-muted); font-size: .84rem; }
.abe-trace li strong { color: var(--abe-ink); }
.abe-diagnosis { display: grid; gap: 7px; }
.abe-readout { padding: 9px; background: #f4f8fa; border-left: 4px solid var(--abe-blue); border-radius: 6px; }
.abe-readout.error { border-left-color: var(--abe-red); }.abe-readout.success { border-left-color: var(--abe-green); }
.abe-readout small { display: block; color: var(--abe-muted); font-weight: 800; text-transform: uppercase; }
.abe-readout strong { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.abe-formula { margin-top: 10px; padding: 11px; color: var(--abe-ink); background: #eef4f7; border-radius: 7px; font: 700 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.abe-conclusion { margin-top: 10px; padding: 12px; background: #eef8f8; border: 2px solid var(--abe-teal); border-radius: 8px; }
.abe-conclusion strong { display: block; }
.abe-conclusion span { display: block; margin-top: 3px; color: var(--abe-muted); }
.abe-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.abe-links a { color: #24567b; font-weight: 850; }

.abe-boundary, .abe-fixtures { margin-top: 12px; padding: 14px; }
.abe-boundary { border-left: 5px solid var(--abe-amber); }
.abe-boundary p { color: var(--abe-muted); font-size: .84rem; }
.abe-fixtures table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.abe-fixtures th, .abe-fixtures td { padding: 7px; text-align: left; border-bottom: 1px solid var(--abe-line); }
.abe-fixtures th { background: #eef4f7; }
.abe-pass { color: var(--abe-green); font-weight: 900; }.abe-fail { color: var(--abe-red); font-weight: 900; }
.abe-self-test[hidden] { display: none !important; }

@media (max-width: 900px) {
  .abe-grid, .abe-evidence { grid-template-columns: 1fr; }
  #bootstrapLab .abe-grid.page-columns.page-full { grid-template-columns: 1fr !important; }
  .abe-stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .abe-stage:nth-child(3)::after { display: none; }
}

@media (max-width: 520px) {
  #bootstrapLab { width: calc(100vw - 16px); padding: 8px; }
  .abe-hero { padding: 16px; }
  .abe-metrics, .abe-ramp, .abe-stage-grid, .abe-duration-grid { grid-template-columns: 1fr; }
  .abe-stage { min-height: 0; }
  .abe-stage::after { display: none; }
  .abe-presets { display: grid; grid-template-columns: 1fr; }
  .abe-preset, .abe-btn { width: 100%; }
  .abe-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .abe-fixtures table { table-layout: fixed; }
  .abe-fixtures th:first-child, .abe-fixtures td:first-child { width: 42%; }
  .abe-fixtures th, .abe-fixtures td { padding: 5px 3px; font-size: .67rem; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  #bootstrapLab *, #bootstrapLab *::before, #bootstrapLab *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}