/* CraftBot visual layer: existing constructor DOM, events and sizing contracts
   stay owned by the sport templates and mobile_constructor.js. */
body[data-i18n-page="constructor"] {
  --accent: var(--cb-blue, #007aff);
  --accent-dark: #0062cc;
  --bg: #f5f6f8;
  --card: var(--cb-surface, #fff);
  --border: var(--cb-border, #dce1e8);
  --ink: var(--cb-text, #1d1d1f);
  --muted: var(--cb-muted, #6e6e73);
}
body[data-i18n-page="constructor"] :is(#bb-adv-mode-wrap,#bbpm-builder) {
  --bbpz-accent: var(--cb-blue, #007aff);
  --bbpz-accent-dark: #0062cc;
  --bbpz-bg: #f5f6f8;
  --bbpz-card: #fff;
  --bbpz-border: var(--cb-border, #dce1e8);
  --bbpz-ink: var(--cb-text, #1d1d1f);
  --bbpz-muted: var(--cb-muted, #6e6e73);
}
body[data-i18n-page="constructor"] #sport-hockey {
  --hk-accent: var(--cb-blue, #007aff);
  --hk-bg: #f5f6f8;
  --hk-border: var(--cb-border, #dce1e8);
  --hk-ink: var(--cb-text, #1d1d1f);
  --hk-muted: var(--cb-muted, #6e6e73);
}
body[data-i18n-page="constructor"] .wrap {
  min-width: 0;
}
body[data-i18n-page="constructor"] .card {
  border-color: var(--cb-border, #dce1e8);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(29, 29, 31, .035);
}
body[data-i18n-page="constructor"] :is(.constructor-examples, .guest-constructor-note, .guest-constructor-actions) {
  background: #f0f6ff;
  border-color: #d5e5fa;
  border-radius: 14px;
  box-shadow: none;
}
body[data-i18n-page="constructor"] :is(.constructor-examples-copy strong, .guest-constructor-note strong) {
  color: var(--cb-text, #1d1d1f);
}
body[data-i18n-page="constructor"] .constructor-examples-link {
  background: var(--cb-blue, #007aff);
  border-radius: 10px;
  font-weight: 600;
}
body[data-i18n-page="constructor"] .constructor-examples-link:hover {
  background: #0062cc;
}
body[data-i18n-page="constructor"] .constructor-guide-link {
  color: #0067d8;
}
body[data-i18n-page="constructor"] :is(.sport-btn, .section-btn) {
  min-height: 42px;
  padding: 9px 15px;
  border-width: 1px;
  border-color: var(--cb-border, #dce1e8);
  border-radius: 10px;
  font-weight: 600;
  color: #4b4b50;
  background: #fff;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .025);
  transition: background .15s, border-color .15s, color .15s;
}
body[data-i18n-page="constructor"] :is(.sport-btn, .section-btn).active {
  color: #0067d8;
  border-color: #b8d5f8;
  background: #eaf3ff;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, .05);
}
body[data-i18n-page="constructor"] :is(.sport-btn, .section-btn):hover {
  border-color: #86baf5;
  color: #0067d8;
}
body[data-i18n-page="constructor"] :is(#delivery_switch, #bb_delivery_switch, #hk-delivery-switch)[role="radiogroup"] > label {
  border-width: 1px;
  border-color: var(--cb-border, #dce1e8);
  border-radius: 10px;
  color: #45454b;
  min-height: 44px;
  background: #fff;
  font-weight: 600;
  line-height: 1.45;
}
body[data-i18n-page="constructor"] :is(#delivery_switch, #bb_delivery_switch, #hk-delivery-switch)[role="radiogroup"] > label.active {
  background: #edf5ff;
  color: #0067d8;
  border-color: #94c2f8;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, .12);
}
body[data-i18n-page="constructor"] :is(#delivery_switch, #bb_delivery_switch, #hk-delivery-switch) input[type="radio"] {
  accent-color: var(--cb-blue, #007aff);
}
body[data-i18n-page="constructor"] :is(#football_form, #bb_form, #hk-save-form) > .row > div {
  min-width: 0;
}
body[data-i18n-page="constructor"] :is(#football_form, #bb_form, #hk-save-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  color: var(--cb-text, #1d1d1f);
  border-color: #d4d9e1;
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
body[data-i18n-page="constructor"] :is(#football_form, #bb_form, #hk-save-form) :is(input, select, textarea):focus {
  outline: none;
  border-color: #5da6f9;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .13);
}
body[data-i18n-page="constructor"] :is(#football_form, #bb_form, #hk-save-form) :is(input, select, textarea):disabled {
  color: #82828a;
  background-color: #f2f3f5;
}
body[data-i18n-page="constructor"] :is(.signal-shared-sender, .bb-shared-sender) {
  background: #f7f9fc;
  border-color: #dce4ef;
  color: #414b5b;
  border-radius: 12px;
}
body[data-i18n-page="constructor"] :is(.signal-sender-icon, .bb-sender-icon) {
  background: #eaf2ff;
}
body[data-i18n-page="constructor"] :is(.signal-sender-instructions, .signal-sender-actions, .signal-sender-actions button, .signal-sender-actions a) {
  word-break: normal;
  overflow-wrap: normal;
}

/* The 2px piece borders, padding and chain widths are deliberately retained:
   drag coordinates and the mobile width calculation depend on that geometry. */
body[data-i18n-page="constructor"] :is(#builder-shell, :is(#bb-builder-shell,#bbpm-builder-shell), #sport-hockey .hk-builder) {
  border-color: var(--cb-border, #dce1e8);
  border-radius: 14px;
  background: #f5f6f8;
  box-shadow: none;
  max-width: 100%;
}
body[data-i18n-page="constructor"] :is(#sidebar, :is(#bb-sidebar,#bbpm-sidebar), #sport-hockey .hk-sidebar) {
  background: #fafafb;
  border-color: #e1e5eb;
}
body[data-i18n-page="constructor"] :is(#sidebar h1, :is(#bb-sidebar,#bbpm-sidebar) h1, #sport-hockey .hk-sidebar h3) {
  color: var(--cb-text, #1d1d1f);
  font-weight: 650;
  line-height: 1.4;
}
body[data-i18n-page="constructor"] :is(.group-label, .bb-group-label, #sport-hockey .hk-group, .toolbox-section-label) {
  color: #686d76;
  letter-spacing: .025em;
  line-height: 1.45;
}
body[data-i18n-page="constructor"] :is(.toolbox, .bb-toolbox, #sport-hockey .hk-tool) {
  color: var(--cb-text, #1d1d1f);
  background: #fff;
  border-color: #e0e4eb;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(29, 29, 31, .025);
  line-height: 1.4;
  font-family: inherit;
  font-weight: 600;
  word-break: normal;
  overflow-wrap: normal;
  transition: border-color .15s, background .15s, color .15s;
}
body[data-i18n-page="constructor"] :is(.toolbox, .bb-toolbox, #sport-hockey .hk-tool):hover {
  border-color: #a8cef9;
  background: #f0f6ff;
  color: #0067d8;
  transform: none;
}
body[data-i18n-page="constructor"] :is(#topbar, :is(#bb-topbar,#bbpm-topbar), #sport-hockey .hk-topbar) {
  background: #fff;
  border-color: #e1e5eb;
  gap: 12px;
}
body[data-i18n-page="constructor"] :is(#topbar h2, :is(#bb-topbar,#bbpm-topbar) h2, #sport-hockey .hk-topbar h2) {
  color: var(--cb-text, #1d1d1f);
  font-weight: 650;
  line-height: 1.4;
}
body[data-i18n-page="constructor"] :is(#zoomBox, :is(#bb-zoomBox,#bbpm-zoomBox), #sport-hockey .hk-zoom) {
  border-color: #e1e5eb;
  background: #f5f6f8;
  border-radius: 9px;
}
body[data-i18n-page="constructor"] :is(#zoomBox button, :is(#bb-zoomBox,#bbpm-zoomBox) button, #sport-hockey .hk-zoom button) {
  padding: 0;
  white-space: nowrap;
  border-color: #dce1e8;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .035);
}
body[data-i18n-page="constructor"] :is(#clearBtn, :is(#bb-clearBtn,#bbpm-clear), #sport-hockey .hk-clear) {
  color: #62646b;
  border-color: #dce1e8;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
}
body[data-i18n-page="constructor"] :is(#clearBtn, :is(#bb-clearBtn,#bbpm-clear), #sport-hockey .hk-clear):hover {
  border-color: #efb5b3;
  color: #b32624;
  background: #fff6f5;
}
body[data-i18n-page="constructor"] :is(#workspace, :is(#bb-workspace,#bbpm-workspace), #sport-hockey .hk-workspace) {
  background-color: #f4f6f9;
  background-image: radial-gradient(circle, #cfd7e3 .8px, transparent .9px);
  background-size: 20px 20px;
  scrollbar-color: #bdc7d4 #f4f6f9;
}
body[data-i18n-page="constructor"] :is(.piece, .bb-piece, #sport-hockey .hk-piece) {
  background: #fff;
  border-color: #d7e3f3;
  border-radius: 12px;
  color: var(--cb-text, #1d1d1f);
  box-shadow: 0 2px 7px rgba(26, 45, 74, .045), 0 8px 20px rgba(26, 45, 74, .025);
}
body[data-i18n-page="constructor"] :is(.piece.or-slot, .bb-piece.bb-or-slot) {
  background: #fffaf0;
  border-color: #e7d3a1;
}
body[data-i18n-page="constructor"] :is(.piece.exact-values-slot, #sport-hockey .hk-piece:has(> .hk-or-row > .hk-block > .hk-exact-zone)) {
  background: #fbf8ff;
  border-color: #d6c6ef;
}
body[data-i18n-page="constructor"] #sport-hockey .hk-piece.hk-forecast-piece {
  background: #fffaf5;
  border-color: #edcfb5;
}
body[data-i18n-page="constructor"] :is(.piece.or-target, .bb-piece.bb-or-target, #sport-hockey .hk-piece.hk-drop-or) {
  background: #f0f6ff;
}
body[data-i18n-page="constructor"] :is(.piece.or-target-reject, .bb-piece.bb-or-target-reject, #sport-hockey .hk-piece.hk-drop-or-reject) {
  background: #fff4f4;
}
body[data-i18n-page="constructor"] :is(.phead, .bb-phead, #sport-hockey .hk-piece-head) {
  color: var(--cb-text, #1d1d1f);
  border-bottom-color: #e9edf3;
  font-weight: 650;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: normal;
}
body[data-i18n-page="constructor"] :is(.glabel, .bb-glabel, #sport-hockey .hk-piece-group) {
  letter-spacing: .015em;
  line-height: 1.3;
  white-space: nowrap;
}
body[data-i18n-page="constructor"] :is(.phead .rm, .bb-phead .bb-rm, #sport-hockey .hk-delete) {
  color: #828b98;
}
body[data-i18n-page="constructor"] :is(.phead .rm, .bb-phead .bb-rm, #sport-hockey .hk-delete):hover {
  color: #bd2826;
}
body[data-i18n-page="constructor"] :is(.piece, .bb-piece, #sport-hockey .hk-piece) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 34px;
  background: #f8f9fb;
  border-color: #d8dee8;
  box-sizing: border-box;
}
body[data-i18n-page="constructor"] :is(.frow, .bb-frow, #sport-hockey .hk-fields) {
  line-height: 1.45;
}
body[data-i18n-page="constructor"] :is(.frow label, .bb-frow label, #sport-hockey .hk-fields label) {
  word-break: normal;
  overflow-wrap: normal;
}
body[data-i18n-page="constructor"] :is(.exact-child, #sport-hockey .hk-exact-child, #sport-hockey .hk-period-history-row) {
  border-radius: 9px;
  background: #fff;
}
body[data-i18n-page="constructor"] :is(#empty-hint, :is(#bb-empty-hint,#bbpm-empty-hint), #sport-hockey .hk-empty, .add-hint, .bb-add-hint, #sport-hockey .hk-add-hint) {
  border-color: #cbd6e5;
  color: #68778b;
  background: rgba(255, 255, 255, .65);
  word-break: normal;
  overflow-wrap: normal;
}

/* Preview headings stay in the original position. Semantic bet/condition and
   error colors remain distinct; no display or visibility state is overridden. */
body[data-i18n-page="constructor"] :is(#fb_preview, #bb_preview, #sport-hockey .hk-preview) {
  border: 1px solid #d3dfef !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(29, 29, 31, .025);
}
body[data-i18n-page="constructor"] :is(#fb_preview, #bb_preview) > div:first-child,
body[data-i18n-page="constructor"] #sport-hockey .hk-preview-head {
  background: #edf4ff !important;
  color: #174d89 !important;
  border-bottom: 1px solid #d8e5f6;
  font-weight: 650 !important;
  line-height: 1.45;
}
body[data-i18n-page="constructor"] :is(#fb_prev_forecast, #fb_prev_cond, #bb_prev_forecast, #bb_prev_cond, #sport-hockey .hk-preview-value) {
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: normal;
}
body[data-i18n-page="constructor"] :is(.signal-view-launch, #sport-hockey .hk-output-options) {
  border-color: #dce4ef;
  border-radius: 12px;
  background: #f8fafc;
}
body[data-i18n-page="constructor"] :is(.signal-view-launch, .stars-payment, .guest-constructor-actions) {
  position: static;
}
body[data-i18n-page="constructor"] .stars-payment .stars-payment-option {
  border-color: #dce1e8;
  border-radius: 12px;
  background: #fafbfd;
  box-shadow: none;
}
body[data-i18n-page="constructor"] .stars-payment .constructor-action {
  border-radius: 9px;
  font-family: inherit;
  font-weight: 600;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.45;
}
body[data-i18n-page="constructor"] .stars-payment .constructor-action-save {
  background: var(--cb-blue, #007aff);
  color: #fff;
}
body[data-i18n-page="constructor"] .stars-payment .constructor-action-retro {
  background: #eaf3ff;
  border-color: #b9d5f7;
  color: #0065d1;
}
body[data-i18n-page="constructor"] .stars-payment .constructor-action-save:hover:not(:disabled) {
  background: #0062cc;
}
body[data-i18n-page="constructor"] .stars-payment .constructor-action-retro:hover:not(:disabled) {
  background: #dfeeff;
}
body[data-i18n-page="constructor"] .saved-strategy-card {
  border-color: #dce1e8;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(29, 29, 31, .025);
  color: var(--cb-text, #1d1d1f);
}
/* Retain the component's overflow-wrap protection on user-provided strategy
   names and conditions; only short action labels need normal word wrapping. */
body[data-i18n-page="constructor"] .saved-strategy-card .saved-strategy-actions .btn {
  word-break: normal;
  overflow-wrap: normal;
}
body[data-i18n-page="constructor"] .saved-strategy-card .saved-strategy-metrics > div {
  background: #f5f7fa;
  border-radius: 9px;
}
body[data-i18n-page="constructor"] .saved-strategy-card .saved-strategy-conditions {
  border-color: #e0e5ed;
  border-radius: 9px;
}
body[data-i18n-page="constructor"] .strategy-pagination-link {
  border-color: #dce1e8;
  border-radius: 9px;
  color: #0067d8;
}
body[data-i18n-page="constructor"] .strategy-pagination-link[aria-current="page"] {
  background: var(--cb-blue, #007aff);
  border-color: var(--cb-blue, #007aff);
  color: #fff;
}
body[data-i18n-page="constructor"] .strategy-pagination-link[aria-disabled="true"] {
  color: #898c95;
  background: #f3f4f6;
}
body[data-i18n-page="constructor"] :is(.mc-picker, #signal-view-modal .sv-dialog, #daily-report-modal .dr-dialog) {
  border-radius: 16px;
  border-color: #dce1e8;
  box-shadow: 0 20px 80px rgba(22, 31, 47, .2);
  background: #fff;
}
body[data-i18n-page="constructor"] .mc-picker::backdrop {
  background: rgba(27, 34, 47, .38);
}
body[data-i18n-page="constructor"] .mc-picker-head {
  background: #fff;
  border-color: #e1e5eb;
}
body[data-i18n-page="constructor"] .mc-close {
  border-color: #e2e6ed;
  color: #687180;
  background: #f5f6f8;
  border-radius: 10px;
}
body[data-i18n-page="constructor"] :is(.toolbox, .bb-toolbox, .hk-tool, .sport-btn, .section-btn, .constructor-examples-link, .constructor-guide-link, .strategy-pagination-link, .mc-add-button, .mc-close):focus-visible {
  outline: 3px solid rgba(0, 122, 255, .5);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body[data-i18n-page="constructor"] :is(#builder-shell.mc-mobile, :is(#bb-builder-shell,#bbpm-builder-shell).mc-mobile, #sport-hockey .hk-builder.mc-mobile) {
    border-radius: 12px;
  }
  body[data-i18n-page="constructor"] .mc-mobile .mc-toolbar {
    padding: 10px 12px;
    background: #fff;
    border-color: #e1e5eb;
    position: static;
  }
  body[data-i18n-page="constructor"] .mc-add-button {
    background: var(--cb-blue, #007aff);
    color: #fff;
    border-radius: 9px;
    font-family: inherit;
    font-weight: 600;
    min-height: 44px;
  }
  body[data-i18n-page="constructor"] :is(#topbar, :is(#bb-topbar,#bbpm-topbar), #sport-hockey .hk-topbar) {
    position: static;
    padding: 10px 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px;
  }
  body[data-i18n-page="constructor"] :is(.topbar-right, .bb-topbar-right, #sport-hockey .hk-topbar-right) {
    flex-wrap: wrap;
    gap: 8px;
  }
  body[data-i18n-page="constructor"] :is(#zoomBox button, :is(#bb-zoomBox,#bbpm-zoomBox) button, #sport-hockey .hk-zoom button) {
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
  }
  body[data-i18n-page="constructor"] :is(#clearBtn, :is(#bb-clearBtn,#bbpm-clear), #sport-hockey .hk-clear) {
    min-height: 44px;
    padding: 8px 12px;
  }
  body[data-i18n-page="constructor"] .mc-mobile :is(.phead, .bb-phead, .hk-piece-head) {
    font-size: 13px;
    line-height: 1.45;
    min-height: 30px;
  }
  body[data-i18n-page="constructor"] .mc-mobile :is(.piece, .bb-piece, .hk-piece) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 40px;
    font-size: 16px;
  }
  body[data-i18n-page="constructor"] .mc-mobile :is(.frow, .bb-frow, .hk-fields) > label {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body[data-i18n-page="constructor"] .mc-mobile :is(.frow, .bb-frow, .hk-fields) :is(select, textarea) {
    max-width: 100%;
  }
  body[data-i18n-page="constructor"] #sport-hockey .mc-mobile .hk-fields select {
    width: auto;
    max-width: 100%;
  }
  body[data-i18n-page="constructor"] #sport-hockey .mc-mobile .hk-fields :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 40px;
    font-size: 16px;
  }
  body[data-i18n-page="constructor"] .mc-picker :is(.toolbox, .bb-toolbox, .hk-tool) {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  body[data-i18n-page="constructor"] .wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
  body[data-i18n-page="constructor"] .card {
    padding: 16px 12px !important;
    border-radius: 13px;
  }
  /* Hockey originally bleeds to a 24px desktop card inset. Remove just that
     negative margin when the card inset is smaller; the builder DOM stays put. */
  body[data-i18n-page="constructor"] #sport-hockey .card > div:has(> .hk-builder) {
    margin: 0 !important;
  }
  body[data-i18n-page="constructor"] .constructor-examples {
    padding: 14px;
    gap: 11px;
  }
  body[data-i18n-page="constructor"] .constructor-examples-copy {
    flex-basis: 100%;
  }
  body[data-i18n-page="constructor"] .sport-switch {
    gap: 7px;
    margin: 18px 0 16px;
  }
  body[data-i18n-page="constructor"] .sport-btn {
    padding: 9px 11px;
    font-size: 13px;
  }
  body[data-i18n-page="constructor"] :is(#delivery_switch, #bb_delivery_switch, #hk-delivery-switch)[role="radiogroup"] > label {
    flex: 1 1 220px;
    width: 100%;
  }
  body[data-i18n-page="constructor"] :is(#football_form, #bb_form, #hk-save-form) > .row > div {
    flex-basis: 100%;
  }
  body[data-i18n-page="constructor"] :is(.signal-view-launch, .guest-constructor-buttons) .btn {
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.45;
  }
  body[data-i18n-page="constructor"] .saved-strategy-actions .btn {
    min-height: 44px;
    font-size: 13px !important;
  }
  body[data-i18n-page="constructor"] .saved-strategy-metrics > div {
    padding: 9px 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-i18n-page="constructor"] :is(.sport-btn, .section-btn, .toolbox, .bb-toolbox, .hk-tool, input, select, textarea) {
    transition: none;
  }
}
