.darts-lab {
  display: grid;
  gap: 28px;
  margin-top: 36px;
}

.darts-control-panel,
.darts-visual-panel,
.darts-checkout-panel,
.darts-comparison-panel {
  border: 1px solid var(--line);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.darts-control-panel {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr);
  gap: 24px;
  padding: 24px;
}

.darts-control-panel label {
  display: grid;
  gap: 9px;
  color: var(--blue-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.darts-control-panel select,
.darts-control-panel input[type="number"] {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--theme-border-strong);
  background: var(--theme-surface-raised);
  color: var(--ink);
  font: 700 1rem/1 var(--sans);
}

.darts-slider-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.darts-slider-line output {
  min-width: 54px;
  color: var(--ink);
  font: 800 1rem/1 var(--sans);
  text-align: right;
}

.darts-control-panel input[type="range"] {
  width: 100%;
  accent-color: var(--theme-accent);
}

.darts-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.darts-kpi {
  min-height: 118px;
  padding: 20px;
  background: var(--theme-surface);
}

.darts-kpi small {
  display: block;
  color: var(--blue-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.darts-kpi strong {
  display: block;
  margin-top: 13px;
  color: var(--ink);
  font: 600 clamp(1.7rem, 4vw, 2.6rem)/1 var(--serif);
}

.darts-kpi span {
  display: block;
  margin-top: 7px;
  color: var(--blue-muted);
  font-size: .8rem;
}

.darts-visual-grid {
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
  gap: 24px;
}

.darts-visual-panel {
  padding: 24px;
}

.darts-visual-panel h3,
.darts-checkout-panel h3,
.darts-comparison-panel h3 {
  margin: 0;
  color: var(--ink);
  font: 600 1.35rem/1.2 var(--serif);
}

.darts-visual-panel > p,
.darts-checkout-panel > p,
.darts-comparison-panel > p {
  margin: 9px 0 0;
  color: var(--blue-muted);
  line-height: 1.6;
}

.darts-board-live {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 28px auto 0;
  border: 12px solid var(--theme-eval-black);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at center,
      #b4433f 0 3.3%,
      #2e8b7b 3.4% 8%,
      #e7ddc4 8.1% 44%,
      #b4433f 44.1% 48%,
      #e7ddc4 48.1% 78%,
      #2e8b7b 78.1% 84%,
      #e7ddc4 84.1% 100%);
  box-shadow: var(--theme-shadow-strong);
}

.darts-board-live::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -9deg, transparent 0 18deg, rgba(20, 30, 42, .88) 18deg 36deg);
  mix-blend-mode: multiply;
  opacity: .82;
}

.darts-probability-dot,
.darts-aim-marker {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.darts-probability-dot {
  width: calc(10px + (var(--probability) * 34px));
  height: calc(10px + (var(--probability) * 34px));
  background: rgba(46, 139, 123, .68);
  border: 2px solid rgba(255, 255, 255, .78);
  box-shadow: 0 0 18px rgba(46, 139, 123, .7);
}

.darts-aim-marker {
  width: 18px;
  height: 18px;
  border: 4px solid var(--theme-eval-black);
  background: var(--theme-maize-bright);
  box-shadow: 0 0 0 4px rgba(255,255,255,.88);
}

.darts-board-key {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  color: var(--blue-muted);
  font-size: .78rem;
  font-weight: 700;
}

.darts-board-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.darts-board-key i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.darts-key-aim { background: var(--theme-maize-bright); }
.darts-key-outcome { background: rgba(46,139,123,.75); }

.darts-distribution {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.darts-outcome-row {
  display: grid;
  grid-template-columns: 48px minmax(90px, 1fr) 66px 54px;
  gap: 10px;
  align-items: center;
}

.darts-outcome-target {
  color: var(--ink);
  font-weight: 800;
}

.darts-outcome-bar {
  height: 10px;
  overflow: hidden;
  background: var(--theme-surface-muted);
}

.darts-outcome-bar i {
  display: block;
  height: 100%;
  background: var(--theme-accent);
}

.darts-outcome-probability,
.darts-outcome-score {
  color: var(--blue-muted);
  font-size: .78rem;
  text-align: right;
}

.darts-checkout-panel {
  padding: 24px;
}

.darts-checkout-controls {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: end;
  margin-top: 24px;
}

.darts-checkout-controls label {
  display: grid;
  gap: 8px;
  color: var(--blue-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.darts-route {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.darts-route-chip {
  display: grid;
  min-width: 92px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--theme-surface-raised);
}

.darts-route-chip small {
  color: var(--blue-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.darts-route-chip strong {
  margin-top: 5px;
  color: var(--ink);
  font: 700 1.35rem/1 var(--serif);
}

.darts-route-chip em {
  margin-top: 4px;
  color: var(--blue-muted);
  font: normal 700 .74rem/1 var(--sans);
}

.darts-route-empty {
  color: var(--blue-muted);
  font-weight: 700;
}

.darts-checkout-result {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) 1fr;
  gap: 24px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.darts-checkout-result strong {
  display: block;
  color: var(--ink);
  font: 600 2.25rem/1 var(--serif);
}

.darts-checkout-result small,
.darts-checkout-result p {
  color: var(--blue-muted);
}

.darts-checkout-result small {
  display: block;
  margin-bottom: 9px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.darts-checkout-result p {
  margin: 0;
  line-height: 1.55;
}

.darts-comparison-panel {
  padding: 24px;
}

.darts-comparison-table {
  width: 100%;
  margin-top: 22px;
  border-collapse: collapse;
}

.darts-comparison-table th,
.darts-comparison-table td {
  padding: 13px 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.darts-comparison-table th {
  color: var(--blue-muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.darts-comparison-table td {
  color: var(--ink);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .darts-control-panel,
  .darts-visual-grid,
  .darts-checkout-controls {
    grid-template-columns: 1fr;
  }

  .darts-kpis {
    grid-template-columns: 1fr;
  }

  .darts-checkout-result {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 620px) {
  .darts-control-panel,
  .darts-visual-panel,
  .darts-checkout-panel,
  .darts-comparison-panel {
    padding: 18px;
  }

  .darts-board-live {
    border-width: 9px;
  }

  .darts-outcome-row {
    grid-template-columns: 42px minmax(70px, 1fr) 60px;
  }

  .darts-outcome-score {
    display: none;
  }

  .darts-comparison-table {
    font-size: .85rem;
  }
}

/* 2026-09-22 compact layout + dartboard readability pass */
.catalog-detail-hero {
  padding-top: 34px;
  padding-bottom: 28px;
}

.catalog-meta-band div {
  padding-top: 14px;
  padding-bottom: 14px;
}

.catalog-detail-section {
  padding-top: 44px;
  padding-bottom: 44px;
}

.catalog-detail-section > p:not(.eyebrow):not(.catalog-provenance) {
  margin-top: 16px;
  line-height: 1.65;
}

.catalog-callout {
  margin-top: 22px;
  padding: 18px 20px;
}

.catalog-solution-grid {
  margin-top: 24px;
  gap: 10px;
}

.catalog-solution-grid > div {
  min-height: 150px;
  padding: 18px;
}

.catalog-solution-grid h3 {
  margin-top: 20px;
}

.catalog-lessons {
  margin-top: 24px;
}

.catalog-lessons li {
  padding: 14px 0;
}

.darts-lab {
  gap: 14px;
  margin-top: 22px;
}

.darts-notation-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.darts-notation-strip span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--theme-surface-muted);
  color: var(--blue-muted);
  font-size: .76rem;
}

.darts-notation-strip strong {
  margin-right: 5px;
  color: var(--ink);
}

.darts-control-panel {
  grid-template-columns: minmax(160px, .7fr) minmax(260px, 1.3fr);
  gap: 18px;
  padding: 16px 18px;
}

.darts-kpi {
  min-height: 86px;
  padding: 14px 16px;
}

.darts-kpi strong {
  margin-top: 8px;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.darts-kpi span {
  margin-top: 4px;
}

.darts-visual-grid {
  gap: 14px;
}

.darts-visual-panel,
.darts-checkout-panel,
.darts-comparison-panel {
  padding: 18px;
}

.darts-visual-panel > p,
.darts-checkout-panel > p,
.darts-comparison-panel > p {
  margin-top: 6px;
  line-height: 1.45;
}

.darts-board-wrap {
  position: relative;
  width: min(100%, 430px);
  margin: 16px auto 0;
  padding: 24px;
}

.darts-board-live {
  width: 100%;
  margin: 0;
  overflow: visible;
  border-width: 10px;
}

.darts-board-number {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  color: #fff;
  font: 800 .75rem/1 var(--sans);
  text-shadow: 0 1px 3px #000, 0 0 2px #000;
  pointer-events: none;
}

.darts-ring-label {
  position: absolute;
  z-index: 8;
  left: 0;
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: var(--theme-surface-raised);
  color: var(--ink);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .06em;
  pointer-events: none;
}

.darts-ring-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 18px;
  height: 1px;
  background: var(--theme-border-strong);
}

.darts-ring-label-double { top: 25%; }
.darts-ring-label-triple { top: 47%; }
.darts-ring-label-single { top: 68%; }

.darts-board-key {
  margin-top: 10px;
  gap: 10px 14px;
  font-size: .72rem;
}

.darts-distribution {
  gap: 7px;
  margin-top: 14px;
}

.darts-outcome-row {
  grid-template-columns: 44px minmax(90px, 1fr) 62px 50px;
  gap: 8px;
}

.darts-checkout-controls {
  margin-top: 14px;
  gap: 14px;
}

.darts-checkout-result {
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
}

.darts-route-chip {
  min-width: 78px;
  padding: 9px 11px;
}

.darts-route-chip strong {
  font-size: 1.15rem;
}

.darts-comparison-table {
  margin-top: 14px;
}

.darts-comparison-table th,
.darts-comparison-table td {
  padding: 9px 10px;
}

@media (max-width: 720px) {
  .catalog-detail-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .darts-board-wrap {
    padding: 20px;
  }

  .darts-ring-label {
    display: none;
  }
}


/* 2026-09-22 wide desktop utilization pass */
.darts-case-study .catalog-detail {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.darts-case-study .catalog-detail-section > h2,
.darts-case-study .catalog-detail-section > p:not(.eyebrow):not(.catalog-provenance),
.darts-case-study .catalog-lessons,
.darts-case-study .catalog-callout,
.darts-case-study .darts-comparison-panel,
.darts-case-study .darts-checkout-panel,
.darts-case-study .darts-lab {
  max-width: none;
}

.darts-case-study .hero-copy {
  max-width: 1180px;
}

.darts-case-study .catalog-detail-section > p:not(.eyebrow):not(.catalog-provenance) {
  width: min(100%, 1180px);
}

.darts-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.darts-decision-grid .catalog-callout {
  margin-top: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
}

.darts-decision-card strong {
  font-size: .76rem;
}

@media (max-width: 980px) {
  .darts-decision-grid {
    grid-template-columns: 1fr;
  }

  .darts-decision-grid .catalog-callout {
    grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .darts-case-study .catalog-detail-section > p:not(.eyebrow):not(.catalog-provenance) {
    width: 100%;
  }

  .darts-decision-grid .catalog-callout {
    grid-template-columns: 1fr;
  }
}


/* 2026-09-22 dartboard anatomy + control consistency pass */
.darts-anatomy {
  display: grid;
  grid-template-columns: auto repeat(6, minmax(72px, 1fr));
  gap: 6px;
  align-items: stretch;
  margin-top: 14px;
}

.darts-anatomy > span {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 7px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--theme-surface-muted);
  color: var(--blue-muted);
  font-size: .68rem;
}

.darts-anatomy > span strong {
  color: var(--ink);
  font-size: .78rem;
}

.darts-anatomy > span em {
  color: var(--theme-accent);
  font-style: normal;
  font-weight: 800;
}

.darts-anatomy-title {
  grid-template-columns: 1fr !important;
  align-content: center;
  min-width: 150px;
  color: var(--ink) !important;
  font-weight: 800;
  letter-spacing: .04em;
}

.darts-selected-region {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.darts-selected-region.is-d,
.darts-selected-region.is-t,
.darts-selected-region.is-s {
  background: conic-gradient(
    from calc(var(--section-angle) - 9deg),
    rgba(255, 203, 5, .55) 0deg 18deg,
    transparent 18deg 360deg
  );
}

.darts-selected-region.is-d {
  -webkit-mask: radial-gradient(circle, transparent 0 78%, #000 78.2% 84.2%, transparent 84.4%);
  mask: radial-gradient(circle, transparent 0 78%, #000 78.2% 84.2%, transparent 84.4%);
}

.darts-selected-region.is-t {
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 44.2% 48.2%, transparent 48.4%);
  mask: radial-gradient(circle, transparent 0 44%, #000 44.2% 48.2%, transparent 48.4%);
}

.darts-selected-region.is-s {
  -webkit-mask: radial-gradient(circle,
    transparent 0 8%,
    #000 8.2% 43.8%,
    transparent 44% 48.4%,
    #000 48.6% 77.8%,
    transparent 78%);
  mask: radial-gradient(circle,
    transparent 0 8%,
    #000 8.2% 43.8%,
    transparent 44% 48.4%,
    #000 48.6% 77.8%,
    transparent 78%);
}

.darts-selected-region.is-sb {
  inset: 42%;
  border: 4px solid rgba(255, 203, 5, .95);
  box-shadow: 0 0 0 7px rgba(255, 203, 5, .24);
}

.darts-selected-region.is-db {
  inset: 47%;
  background: rgba(255, 203, 5, .55);
  border: 2px solid rgba(255, 203, 5, .95);
}

.darts-key-selected {
  background: rgba(255, 203, 5, .55);
  border: 1px solid var(--theme-maize-bright);
}

.darts-checkout-controls input[type="number"] {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 0;
  background: var(--theme-surface-raised);
  color: var(--ink);
  font: 700 1rem/1.2 var(--sans);
}

.darts-checkout-controls input[type="number"]:focus-visible,
.darts-control-panel select:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .darts-anatomy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .darts-anatomy-title {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .darts-anatomy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 2026-09-22 accurate SVG dartboard renderer */
.darts-board-live {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.darts-board-live::before {
  content: none;
}

.darts-board-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}

.darts-board-surround {
  fill: #111820;
  stroke: #05080c;
  stroke-width: 2.2;
}

.darts-board-segment {
  stroke: #d7d7d7;
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
  transition: filter .12s ease, stroke-width .12s ease, opacity .12s ease;
}

.darts-single-dark {
  fill: #252a2d;
}

.darts-single-light {
  fill: #e7d7b0;
}

.darts-ring-red {
  fill: #b73535;
}

.darts-ring-green {
  fill: #2a7453;
}

.darts-bull-green {
  fill: #2a7453;
}

.darts-bull-red {
  fill: #b73535;
}

.darts-board-segment.is-selected {
  stroke: #ffcb05;
  stroke-width: 2.6;
  filter:
    brightness(1.28)
    drop-shadow(0 0 4px rgba(255, 203, 5, .95))
    drop-shadow(0 0 9px rgba(255, 203, 5, .55));
}

.darts-board-number {
  fill: #f7f7f7;
  stroke: rgba(0, 0, 0, .78);
  stroke-width: 2.2;
  paint-order: stroke fill;
  font: 800 8px/1 var(--sans);
  pointer-events: none;
}

.darts-probability-dot,
.darts-aim-marker {
  z-index: 5;
}

.darts-probability-dot {
  background: rgba(54, 170, 145, .58);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 12px rgba(54, 170, 145, .7);
}

.darts-aim-marker {
  border-color: #111820;
  background: #ffcb05;
}

.darts-key-selected {
  background: #ffcb05;
  border: 1px solid #ffcb05;
}

@media (max-width: 620px) {
  .darts-board-live {
    width: min(100%, 390px);
  }
}


/* 2026-09-22 number-ring alignment + input consistency */
.darts-board-number-ring {
  fill: none;
  stroke: #05080c;
  stroke-width: 18;
}

.darts-number-ring-divider {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.darts-board-number {
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  dominant-baseline: middle;
}

.darts-control-panel select,
.darts-checkout-controls input[type="number"] {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 0;
  background-color: var(--theme-surface-raised);
  color: var(--ink);
  font: 700 1rem/1.2 var(--sans);
}

.darts-checkout-controls input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.darts-checkout-controls input[type="number"]::-webkit-inner-spin-button,
.darts-checkout-controls input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  opacity: .72;
}

.darts-control-panel select:focus-visible,
.darts-checkout-controls input[type="number"]:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}


/* 2026-09-24 deterministic dartboard number centering */
.darts-board-number-box {
  overflow: visible;
  pointer-events: none;
}

.darts-board-number-box .darts-board-number {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #f7f7f7;
  font: 800 8.5px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .85),
     1px -1px 0 rgba(0, 0, 0, .85),
    -1px  1px 0 rgba(0, 0, 0, .85),
     1px  1px 0 rgba(0, 0, 0, .85);
  white-space: nowrap;
}


/* 2026-09-24 centered HTML overlay labels for dartboard numbers */
.darts-board-number-label {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: flex;
  min-width: 32px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  color: #f7f7f7;
  font: 800 17px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .85),
     1px -1px 0 rgba(0, 0, 0, .85),
    -1px  1px 0 rgba(0, 0, 0, .85),
     1px  1px 0 rgba(0, 0, 0, .85);
  white-space: nowrap;
  pointer-events: none;
}