/* Native radios and opt-in .choice-toggle checkboxes share the full-option hit
   area of the connection selector.
   Keep the existing DOM, labels, names and handlers: no synthetic selection or
   replacement buttons. These two structures cover Bootstrap and Django widgets,
   including choices inserted after page load. Existing tick cards stay intact. */

.app-layout :is(.form-check, label):has(> input:is([type="radio"], .choice-toggle)):not(.route-choice, .configuration-option, [hidden]) {
  position: relative;
  display: block;
  width: fit-content;
  min-width: min(8rem, 100%);
  max-width: min(36rem, 100%);
  min-height: 2.75rem;
  box-sizing: border-box;
  margin: 0 0 var(--ds-space-4);
  /* Reset older Bootstrap padding utilities. */
  padding: var(--ds-space-5) var(--ds-space-6) !important;
  padding-inline-start: calc(var(--ds-space-6) + 1.15rem + var(--ds-space-4)) !important;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.app-layout :is(.form-check, label):has(> input:is([type="radio"], .choice-toggle)):not(.route-choice, .configuration-option):hover:not(:has(> input:is(:disabled, :checked))) {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg);
}

.app-layout :is(.form-check, label):has(> input:is([type="radio"], .choice-toggle):checked):not(.route-choice, .configuration-option) {
  border-color: var(--ds-secondary);
  background: var(--ds-info-bg);
}

.app-layout :is(.form-check, label):has(> input:is([type="radio"], .choice-toggle):focus-visible):not(.route-choice, .configuration-option) {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

.app-layout :is(.form-check, label):has(> input:is([type="radio"], .choice-toggle):disabled):not(.route-choice, .configuration-option) {
  opacity: 0.55;
  cursor: not-allowed;
}

.app-layout :is(.form-check, label):not(.route-choice, .configuration-option) > input:is([type="radio"], .choice-toggle) {
  appearance: none;
  position: absolute;
  top: 50%;
  inset-inline-start: var(--ds-space-6);
  transform: translateY(-50%);
  float: none;
  width: 1.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  margin: 0 !important;
  padding: 0;
  border: 1.5px solid var(--ds-border-strong);
  border-radius: 50%;
  background: var(--ds-surface) no-repeat center / 80%;
  box-shadow: none;
  cursor: inherit;
  z-index: 1;
}

.app-layout :is(.form-check, label):not(.route-choice, .configuration-option) > input:is([type="radio"], .choice-toggle):checked {
  border-color: var(--ds-secondary);
  background-color: var(--ds-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 2.5 2.5 5.5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Extend the existing associated label over the row, including its padding.
   Native label activation still supplies click/change events and disabled rules. */
.app-layout .form-check:has(> input:is([type="radio"], .choice-toggle)) > label {
  display: block;
  margin: 0;
  color: inherit;
  cursor: inherit;
}

.app-layout .form-check:has(> input:is([type="radio"], .choice-toggle)) > label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* A help link/button inside an option must remain independently operable. */
.app-layout .form-check:has(> input:is([type="radio"], .choice-toggle)) :is(a, button, select, textarea, input:not([type="radio"], .choice-toggle), [data-bs-toggle], [tabindex]) {
  position: relative;
  z-index: 2;
}

/* Existing large tick cards already have full-label activation. Bring their
   borders, ticks and keyboard focus into the same visual family. */
.app-layout :is(.loading-mode-option, .crack-count-tick-card) {
  border-width: 1px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  box-shadow: none;
}

.app-layout input:is([type="radio"], .choice-toggle):checked + :is(.loading-mode-option, .crack-count-tick-card) {
  background: var(--ds-info-bg);
  border-color: var(--ds-secondary);
  box-shadow: none;
}

.app-layout input:is([type="radio"], .choice-toggle):focus-visible + :is(.loading-mode-option, .crack-count-tick-card) {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

.app-layout input:is([type="radio"], .choice-toggle):disabled + :is(.loading-mode-option, .crack-count-tick-card) {
  opacity: 0.55;
  cursor: not-allowed;
}

.app-layout :is(.loading-mode-check, .crack-count-tick) {
  border-radius: 50%;
}

.app-layout input:is([type="radio"], .choice-toggle):checked + label :is(.loading-mode-check, .crack-count-tick) {
  color: var(--ds-solid-fg);
}

/* Chart toolbars must accommodate the larger choices on narrow screens. */
.app-layout .cr-chart-time-scale {
  flex-wrap: wrap;
}

@media (forced-colors: active) {
  .app-layout :is(.form-check, label):not(.route-choice, .configuration-option) > input:is([type="radio"], .choice-toggle) {
    appearance: auto;
    background-image: none;
  }
}