/* Bone Flow #040 ColorPicker Runtime CSS v1.0.24 */
.bone-colorpicker{box-sizing:border-box;display:grid;gap:8px;color:#e5e7eb;font-family:Meiryo,"Yu Gothic",sans-serif;max-width:100%;min-width:0;padding:10px;border:1px solid #334155;border-radius:12px;background:#172033;overflow:visible}
.bone-colorpicker *{box-sizing:border-box}.bone-colorpicker__label-host,.bone-colorpicker__control,.bone-colorpicker__feedback{min-width:0;max-width:100%}.bone-colorpicker__label-host{font-weight:700}.bone-colorpicker__control{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid #475569;border-radius:10px;background:#0f172a;min-height:48px;transition:border-color .15s,box-shadow .15s;overflow:hidden}.bone-colorpicker__input{display:block;flex:0 0 72px;width:72px;height:38px;min-width:72px;padding:2px;border:1px solid #64748b;border-radius:8px;background:#111827;cursor:pointer}.bone-colorpicker__input::-webkit-color-swatch-wrapper{padding:2px}.bone-colorpicker__input::-webkit-color-swatch{border:0;border-radius:5px}.bone-colorpicker__input::-moz-color-swatch{border:0;border-radius:5px}.bone-colorpicker__gradient-swatch{display:block;flex:0 0 72px;width:72px;height:38px;min-width:72px;border:1px solid #64748b;border-radius:8px;background:#111827}.bone-colorpicker__value{display:inline-flex;align-items:center;justify-content:center;min-width:96px;max-width:100%;padding:8px 12px;border:1px solid #475569;border-radius:8px;background:#3B82F6;color:#fff;font-family:Consolas,monospace;font-weight:800;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bone-colorpicker__feedback{min-height:18px;color:#94a3b8;font-size:12px;line-height:1.4}.bone-colorpicker__feedback[data-level="error"]{color:#fca5a5}.bone-colorpicker.is-focused .bone-colorpicker__control{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.16)}.bone-colorpicker.is-invalid{border-color:#ef4444}.bone-colorpicker.is-waiting{outline:1px solid #f59e0b}.bone-colorpicker.is-blocked{outline:2px solid #ef4444}.bone-colorpicker.is-disabled{opacity:.58}.bone-colorpicker[data-theme="light"]{color:#0f172a;background:#f8fafc;border-color:#cbd5e1}.bone-colorpicker[data-theme="light"] .bone-colorpicker__control{background:#fff;border-color:#cbd5e1}.bone-colorpicker[data-theme="dark"]{background:#111827}.bone-colorpicker[data-theme="neon"]{background:#06131d;border-color:#22d3ee;box-shadow:0 0 22px rgba(34,211,238,.12)}.bone-colorpicker[data-theme="neon"] .bone-colorpicker__control{border-color:#0891b2}.bone-colorpicker[data-appearance="flat"]{border-radius:4px;box-shadow:none}.bone-colorpicker[data-appearance="flat"] .bone-colorpicker__control,.bone-colorpicker[data-appearance="flat"] .bone-colorpicker__input,.bone-colorpicker[data-appearance="flat"] .bone-colorpicker__value{border-radius:3px}.bone-colorpicker[data-appearance="borderless"]{border-color:transparent;background:transparent}.bone-colorpicker[data-appearance="borderless"] .bone-colorpicker__control{border-color:transparent}.bone-colorpicker.is-disabled .bone-colorpicker__input{cursor:not-allowed}.bone-colorpicker.is-disabled .bone-colorpicker__gradient-swatch{opacity:.7}
#colorpicker-host{min-width:0;max-width:100%;width:100%}#parent-preview{min-width:0;max-width:100%;overflow:auto;align-items:flex-start}

/* Formal Security / Joint / WAIT-BLOCK / QA / Completion parity */
.bf-security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0 12px}.bf-security-grid button{padding:8px 10px;border:1px solid #475569;border-radius:7px;background:#111827;color:#e5e7eb;cursor:pointer}.bf-security-grid .is-danger{border-color:#7d3544;background:#3a1f28}.bf-security-stage{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px;align-items:center;min-height:150px;padding:14px;border:1px solid #35435a;border-radius:10px;background:#0a1019;overflow:hidden}.bf-security-node{position:relative;z-index:3;display:grid;gap:4px;place-items:center;min-height:82px;padding:10px;border:1px solid #4b7197;border-radius:8px;background:#172235;text-align:center}.bf-security-node--gate{border-style:dashed}.bf-security-node small{color:#aeb9c9;overflow-wrap:anywhere}.bf-security-node strong{overflow-wrap:anywhere}.bf-security-stage>.bf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.bf-security-stage>.bf-delivery-overlay{z-index:7}.bf-security-result{margin-top:10px;padding:10px;border:1px solid #334155;border-radius:8px;background:#0b1421;min-height:72px;white-space:pre-wrap;overflow-wrap:anywhere}.bf-svg{overflow:visible}
.bf-delivery-stage{position:relative;height:190px;margin-top:12px;border:1px solid #35435a;border-radius:10px;background:#0a1019;overflow:hidden}.bf-delivery-stage .bf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.bf-delivery-stage .bf-delivery-overlay{z-index:7;overflow:visible}.bf-delivery-node{position:absolute;z-index:3;top:62px;width:160px;padding:12px 10px;border:1px solid #4c6584;border-radius:8px;background:#172235;color:#f5f8fc;text-align:center}.bf-delivery-node--source{left:5%}.bf-delivery-node--target{right:5%}.bf-delivery-node small{display:block;margin-top:4px;color:#aeb9c9}.bf-delivery-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.bf-delivery-pill{display:inline-flex;padding:5px 10px;border:1px solid #425a78;border-radius:999px;font-weight:800}.bf-delivery-pill.is-ready{color:#67efb1;background:#123a31}.bf-delivery-pill.is-waiting{color:#ffd166;background:#352b12}.bf-delivery-pill.is-blocked{color:#ff8a98;background:#3c171d}.bf-visual-confirm{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid #425a78;border-radius:8px;background:#111722}.bf-visual-confirm.is-confirmed{border-color:#3b936b;background:#123126}.bf-target-log{max-height:130px;overflow:auto;margin-top:8px;padding:8px;border:1px solid #29384e;border-radius:7px;background:#080e16;font-family:Consolas,monospace;font-size:12px;white-space:pre-wrap}.bf-visual-status{margin-top:8px;color:#9eafc4;font-size:.8rem}
#connection-images .bone-colorpicker-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#connection-images .bone-colorpicker-test-card{background:#101827;border:1px solid #31425a;border-radius:8px;padding:12px;min-width:0}#connection-images .bone-colorpicker-test-card--wide{grid-column:1/-1}#connection-images .bone-colorpicker-test-card h3{margin:0 0 4px;color:#f5f8fc;font-size:1rem}#connection-images .bone-colorpicker-usage-flow{position:relative;min-height:168px;display:flex;align-items:center;justify-content:space-around;gap:28px;padding:24px;overflow:hidden}#connection-images .bone-colorpicker-usage-flow>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}#connection-images .bone-colorpicker-node{position:relative;z-index:2;min-width:96px;padding:12px;border:1px solid #4c6584;border-radius:7px;text-align:center;background:#172235;color:#f5f8fc}#connection-images .bone-colorpicker-node strong{color:#55e6a5}#connection-images .bone-colorpicker-node--source strong{color:#65aaff}#connection-images .bone-colorpicker-node--colorpicker strong,#connection-images .bone-colorpicker-node--target strong{color:#67e487}#connection-images .bone-colorpicker-usage-flow--in-missing,#connection-images .bone-colorpicker-usage-flow--in-mismatch,#connection-images .bone-colorpicker-usage-flow--out-missing,#connection-images .bone-colorpicker-usage-flow--out-mismatch{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center}#connection-images .bone-colorpicker-joint-diagnostic{display:grid;gap:5px;margin-top:8px}#connection-images .bone-colorpicker-joint-diagnostic>div{display:flex;justify-content:space-between;gap:12px;padding:5px 8px;border-radius:5px;background:#1a2331;font-size:.78rem}#connection-images .bone-colorpicker-joint-diagnostic strong{text-align:right;overflow-wrap:anywhere;color:#eef4ff}#connection-images .bone-colorpicker-joint-legend{margin-top:12px;border:1px solid #31425a;border-radius:8px;padding:10px;color:#cbd8e8}#connection-images .bone-colorpicker-joint-legend-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#connection-images .bone-colorpicker-joint-legend-line{display:inline-block;width:40px;height:3px;margin-right:8px;vertical-align:middle}#connection-images .bone-colorpicker-joint-legend-line.is-blue{background:#5ba6ff}#connection-images .bone-colorpicker-joint-legend-line.is-green{background:#4be06b}#connection-images .bone-colorpicker-joint-legend-line.is-orange{background:#f5a623}#connection-images .bone-colorpicker-joint-legend-line.is-red{background:#ff5b73}
.bone-label-test-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.bone-label-test-actions button{padding:8px 11px;border:1px solid #475569;border-radius:8px;background:#111827;color:#e5e7eb}.bone-label-test-actions .is-validation{background:#0f7a43;border-color:#159259}.bone-label-test-actions .is-primary{background:#1764ad;border-color:#2b7fd0}.bone-label-test-actions .is-danger{background:#a42d44;border-color:#c0445b}.bone-label-overall-summary{display:grid;grid-template-columns:minmax(145px,1.2fr) repeat(6,minmax(100px,1fr));align-items:center;margin:0 0 18px;border:1px solid #33445c;border-radius:8px;background:#0e1724;overflow:hidden}.bone-label-overall-summary>div{display:grid;gap:4px;place-items:center;min-height:66px;padding:8px 12px;border-left:1px solid #33445c;text-align:center}.bone-label-overall-summary>div span{font-size:.78rem;color:#98a9bf}.bone-label-overall-summary>div strong{font-size:1rem;color:#eef4ff}.bone-label-overall-summary .bf-overall{display:grid;place-items:center;min-height:42px;margin:12px;border-radius:6px;background:#172438;font-size:1.1rem;font-weight:800}.bone-label-result-section{margin-top:15px;border:1px solid #30425b;border-radius:8px;background:#0c1522;overflow:hidden}.bone-label-result-section>h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:9px 14px;border-bottom:1px solid #305798;background:linear-gradient(90deg,#123f87,#174f9b);color:#fff;font-size:1.08rem}.bone-label-result-badge{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:4px 11px;border:1px solid currentColor;border-radius:999px;background:#172438;font-size:.76rem;font-weight:800}.bone-label-result-badge.is-not-run{color:#aebbd0}.bone-label-result-badge.is-pass{color:#67efb1;background:#123a31}.bone-label-result-badge.is-fail{color:#ff7d8d;background:#421d27}.bone-label-validation-list{display:grid;gap:7px;padding:12px 14px}.bone-label-validation-list--columns{grid-template-columns:repeat(2,minmax(0,1fr))}.bone-label-validation-row{display:grid;grid-template-columns:28px 58px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid #2c3a50;border-radius:7px;background:#111b2a}.bone-label-validation-row.is-fail{border-color:#7a3844;background:#21151d}.bone-label-validation-number{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#203049;color:#cfe1f8;font-weight:700}.bone-label-validation-detail{display:grid;gap:3px}.bone-label-validation-name{font-weight:700}.bone-label-validation-reason{font-size:.9rem;color:#aebbd0}.bf-completion-panel>p{margin:0 0 14px;color:#d6e4f5}.bf-completion-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #33445c;background:#0f1928;overflow:hidden;border-radius:8px}.bf-completion-summary>div{display:grid;gap:5px;min-height:58px;padding:10px 12px;border-right:1px solid #33445c;border-bottom:1px solid #33445c}.bf-completion-summary>div:nth-child(3n){border-right:0}.bf-completion-summary>div:nth-last-child(-n+3){border-bottom:0}.bf-completion-summary span{font-size:12px;color:#6fa9ef}.bf-completion-summary strong{font-size:15px;color:#f0f5ff}.bf-completion-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.bf-completion-actions button{font-weight:700;padding:8px 11px;border:1px solid #475569;border-radius:8px;background:#111827;color:#e5e7eb}.bf-completion-actions .is-danger{background:#3a1f28;border-color:#7d3544}

.bf-property-note{margin:-2px 0 10px;color:#94a3b8;font-size:12px;line-height:1.6}.bf-inline-status{margin-top:7px;color:#94a3b8;font-size:12px}.bf-actions--compact{margin-top:7px}.bf-named-color-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0 10px}.bf-named-color{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:7px 8px;border:1px solid #475569;border-radius:8px;background:#111827;color:#e5e7eb;text-align:left;cursor:pointer}.bf-named-color:hover,.bf-named-color.is-selected{border-color:#60a5fa;background:#172554}.bf-named-color__swatch{grid-row:1/3;width:22px;height:22px;border:1px solid rgba(255,255,255,.45);border-radius:5px}.bf-named-color span{font-weight:700;overflow-wrap:anywhere}.bf-named-color small{color:#94a3b8;font-family:Consolas,monospace}.bf-preview-stage{position:relative;justify-content:flex-start}.bf-parent-caption{position:absolute;top:4px;right:8px;color:#93c5fd;font-size:10px;font-weight:700;pointer-events:none}#colorpicker-host{min-width:0;display:grid;align-items:stretch;justify-items:stretch;padding:8px}#parent-preview{overflow:auto;align-items:flex-start}
@media(max-width:1000px){.bf-security-stage{grid-template-columns:1fr;gap:18px;min-height:360px}.bf-completion-summary{grid-template-columns:1fr 1fr}.bf-completion-summary>div{border-right:1px solid #33445c!important;border-bottom:1px solid #33445c!important}.bf-completion-summary>div:nth-child(2n){border-right:0!important}.bf-completion-summary>div:nth-last-child(-n+2){border-bottom:0!important}.bone-label-overall-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){#connection-images .bone-colorpicker-test-grid{grid-template-columns:1fr}#connection-images .bone-colorpicker-test-card--wide{grid-column:auto}#connection-images .bone-colorpicker-joint-legend-items{grid-template-columns:1fr}.bone-label-validation-list--columns{grid-template-columns:1fr}}@media(max-width:620px){.bf-named-color-list{grid-template-columns:1fr}.bf-delivery-node{width:116px;font-size:.78rem}.bf-delivery-node--source{left:3%}.bf-delivery-node--target{right:3%}.bone-colorpicker__control{align-items:stretch;flex-direction:column}.bone-colorpicker__input{width:100%;min-width:0;flex-basis:44px}.bone-colorpicker__value{width:100%}}

/* v1.0.3 named solid / gradient preset UI */
.bf-named-gradient-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0 10px}.bf-named-gradient{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:7px 8px;border:1px solid #475569;border-radius:8px;background:#111827;color:#e5e7eb;text-align:left;cursor:pointer}.bf-named-gradient:hover,.bf-named-gradient.is-selected{border-color:#60a5fa;background:#172554}.bf-named-gradient__swatch{grid-row:1/3;width:44px;height:28px;border:1px solid rgba(255,255,255,.45);border-radius:5px}.bf-named-gradient span{font-weight:700;overflow-wrap:anywhere}.bf-named-gradient small{color:#94a3b8;font-family:Consolas,monospace;overflow-wrap:anywhere}.bf-custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.bf-custom-grid .bf-field{grid-template-columns:130px minmax(0,1fr)}@media(max-width:620px){.bf-named-gradient-list{grid-template-columns:1fr}.bf-custom-grid{grid-template-columns:1fr}.bone-colorpicker__gradient-swatch{width:100%;min-width:0;flex-basis:44px}}

/* v1.0.5 Actual-use picker popover + transparent value */
.bone-colorpicker{position:relative}.bone-colorpicker__control{overflow:visible}.bone-colorpicker__toggle{flex:0 0 34px;width:34px;height:34px;border:1px solid #475569;border-radius:7px;background:#111827;color:#e5e7eb;cursor:pointer;font-size:18px;line-height:1}.bone-colorpicker__toggle:hover{border-color:#60a5fa}.bone-colorpicker__toggle:disabled{opacity:.5;cursor:not-allowed}.bone-colorpicker__panel{position:absolute;z-index:80;left:0;top:calc(100% + 8px);width:min(430px,calc(100vw - 52px));max-height:440px;overflow:auto;padding:12px;border:1px solid #475569;border-radius:10px;background:#0b1220;box-shadow:0 18px 45px rgba(0,0,0,.48)}.bone-colorpicker__panel[hidden]{display:none}.bone-colorpicker__picker-section{display:grid;gap:7px;margin-bottom:11px}.bone-colorpicker__picker-section h4{margin:0;color:#cbd5e1;font-size:12px}.bone-colorpicker__palette{display:flex;flex-wrap:wrap;gap:6px}.bone-colorpicker__chip{display:block;position:relative;flex:0 0 30px;width:30px;height:30px;min-width:30px;padding:0;border:1px solid rgba(255,255,255,.38);border-radius:5px;background:#111827;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}.bone-colorpicker__chip:hover{transform:translateY(-1px);border-color:#e2e8f0;box-shadow:0 0 0 2px rgba(96,165,250,.26)}.bone-colorpicker__chip.is-selected{border-color:#fff;box-shadow:0 0 0 2px #2563eb,0 0 0 4px rgba(96,165,250,.25)}.bone-colorpicker__chip.is-transparent,.bone-colorpicker__gradient-swatch.is-transparent,.bone-colorpicker__value.is-transparent{background-color:#fff;background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 25%,transparent 75%,#cbd5e1 75%),linear-gradient(45deg,#cbd5e1 25%,#fff 25%,#fff 75%,#cbd5e1 75%);background-size:12px 12px;background-position:0 0,6px 6px;color:#111827;text-shadow:none}.bone-colorpicker__custom{margin-top:7px;border-top:1px solid #334155;padding-top:8px}.bone-colorpicker__custom summary{cursor:pointer;color:#cbd5e1;font-size:12px;font-weight:700}.bone-colorpicker__custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.bone-colorpicker__custom-grid input,.bone-colorpicker__custom-grid button{min-width:0;width:100%;padding:7px;border:1px solid #475569;border-radius:6px;background:#111827;color:#e5e7eb}.bone-colorpicker__custom-grid input[type=color]{height:36px;padding:2px}.bone-colorpicker__custom-grid button{cursor:pointer;background:#172554}.bf-preview-use-note{margin:10px 0 0;color:#94a3b8;font-size:12px;line-height:1.55}#parent-preview{overflow:visible;transition:min-height .15s}#parent-preview.is-picker-open{min-height:610px!important;padding-bottom:455px}.bf-parent-caption{pointer-events:none}
@media(max-width:620px){.bone-colorpicker__panel{width:min(360px,calc(100vw - 36px))}.bone-colorpicker__custom-grid{grid-template-columns:1fr}}

/* v1.0.6 targeted fixes: property accordions / preview containment / chip hover */
.bf-property-accordion{margin:10px 0;border:1px solid #334155;border-radius:9px;background:#111827;overflow:visible}
.bf-property-accordion>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;color:#e5e7eb;font-weight:800;list-style:none}
.bf-property-accordion>summary::-webkit-details-marker{display:none}
.bf-property-accordion>summary::before{content:"▸";color:#60a5fa;transition:transform .15s}
.bf-property-accordion[open]>summary::before{transform:rotate(90deg)}
.bf-property-accordion>summary small{margin-left:auto;padding:2px 7px;border:1px solid #475569;border-radius:999px;color:#94a3b8;font-size:11px}
.bf-property-accordion__body{padding:0 12px 12px;border-top:1px solid #334155}
.bf-property-accordion__body>.bf-property-note{margin-top:10px}
.bf-named-color,.bf-named-gradient{transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}
.bf-named-color:hover,.bf-named-gradient:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.24),0 0 0 2px rgba(96,165,250,.16)}
.bone-colorpicker__chip{transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,filter .12s ease}
.bone-colorpicker__chip:hover,.bone-colorpicker__chip:focus-visible{transform:translateY(-3px) scale(1.16);z-index:30;border-color:#fff;filter:saturate(1.08) brightness(1.06);box-shadow:0 0 0 2px rgba(96,165,250,.42),0 8px 18px rgba(0,0,0,.45),0 0 18px rgba(96,165,250,.22);outline:none}
#parent-preview{overflow:visible;width:100%;min-width:0}
#colorpicker-host{width:min(100%,560px)!important;min-width:0}
.bone-colorpicker__control{min-width:0}
.bone-colorpicker__value{flex:1 1 auto;min-width:0}
.bone-colorpicker[data-value-kind="gradient"] .bone-colorpicker__value{font-size:10px;letter-spacing:0;line-height:1.18;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;text-align:center}
.bone-colorpicker[data-value-kind="gradient"] .bone-colorpicker__control{gap:7px}
@media(max-width:520px){.bone-colorpicker[data-value-kind="gradient"] .bone-colorpicker__value{font-size:9px}.bone-colorpicker__toggle{flex-basis:30px;width:30px}.bone-colorpicker__gradient-swatch,.bone-colorpicker__input{flex-basis:58px;width:58px;min-width:58px}}


/* v1.0.12 compact swatch trigger / tooltip-only value */
.bone-colorpicker__native-input{display:none!important}
.bone-colorpicker__control{
  position:relative;
  width:34px;
  min-width:34px;
  max-width:34px;
  height:34px;
  min-height:34px;
  padding:4px;
  display:grid;
  place-items:center;
  gap:0;
  overflow:visible;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.bone-colorpicker__control:disabled{cursor:not-allowed}
.bone-colorpicker__control .bone-colorpicker__gradient-swatch{
  display:block;
  width:24px;
  min-width:24px;
  max-width:24px;
  height:24px;
  min-height:24px;
  max-height:24px;
  border:1px solid #64748b;
  border-radius:5px;
  background-color:#111827;
  background-size:12px 12px;
  flex:none;
  pointer-events:none;
}
.bone-colorpicker__control .bone-colorpicker__value,
.bone-colorpicker__control .bone-colorpicker__toggle{display:none!important}
.bone-colorpicker[data-value-kind="transparent"] .bone-colorpicker__gradient-swatch,
.bone-colorpicker__gradient-swatch.is-transparent{
  background-color:#fff;
  background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0;
}
.bone-colorpicker.is-focused .bone-colorpicker__control{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.16)}

/* v1.0.13 explicit tooltip: one tooltip only, anchored directly above the clickable swatch */
.bone-colorpicker{position:relative}
.bone-colorpicker__control::after{
  content:attr(data-tooltip);
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  z-index:140;
  display:none;
  width:max-content;
  max-width:min(420px,calc(100vw - 32px));
  padding:6px 8px;
  border:1px solid #475569;
  border-radius:6px;
  background:#020617;
  color:#f8fafc;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
  font-family:Consolas,monospace;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  pointer-events:none;
}
.bone-colorpicker.is-tooltip-enabled.is-tooltip-open .bone-colorpicker__control::after{display:block}


/* v1.0.16 caller overlay boundary: consumer owns its trigger; #040 owns only the detached overlay */
.bone-colorpicker--overlay{
  position:static!important;
  display:block!important;
  width:0!important;
  min-width:0!important;
  max-width:none!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
  z-index:10000;
}
.bone-colorpicker--overlay>.bone-colorpicker__label-host,
.bone-colorpicker--overlay>.bone-colorpicker__control,
.bone-colorpicker--overlay>.bone-colorpicker__native-input,
.bone-colorpicker--overlay>.bone-colorpicker__feedback{display:none!important}
.bone-colorpicker--overlay>.bone-colorpicker__panel{
  position:fixed;
  z-index:10000;
  margin:0;
  width:min(430px,calc(100vw - 16px));
  max-width:calc(100vw - 16px);
  max-height:min(440px,calc(100vh - 16px));
}

/* v1.0.16: Consumer-owned trigger styling is intentionally not part of #040 runtime CSS. */

/* v1.0.16 Caller tooltip: #040-owned body overlay, always above caller-owned trigger */
.bone-colorpicker__caller-tooltip{
  position:fixed;
  z-index:10020;
  display:block;
  width:max-content;
  max-width:min(430px,calc(100vw - 16px));
  padding:6px 8px;
  border:1px solid #475569;
  border-radius:6px;
  background:#020617;
  color:#f8fafc;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
  font-family:Consolas,monospace;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  pointer-events:none;
}
.bone-colorpicker__caller-tooltip[hidden]{display:none!important}


/* v1.0.21 picker chip tooltip: #040-owned body overlay only, viewport-clamped */
.bone-colorpicker__chip::after{display:none!important}
.bone-colorpicker__chip-tooltip{
  position:fixed;
  z-index:10040;
  display:block;
  width:max-content;
  max-width:min(430px,calc(100vw - 16px));
  padding:5px 7px;
  border:1px solid #475569;
  border-radius:6px;
  background:#020617;
  color:#f8fafc;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
  font-family:Consolas,monospace;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  pointer-events:none;
}
.bone-colorpicker__chip-tooltip[hidden]{display:none!important}

/* v1.0.21 test page: edge Caller verification stays inside its card */
.bf-caller-edge-stage{box-sizing:border-box;position:relative;width:100%;max-width:100%;min-width:0;height:74px;margin:12px 0 14px;border:1px dashed #41637e;border-radius:8px;background:#07131f;overflow:visible}
.bf-caller-edge-button{box-sizing:border-box;position:absolute;top:18px;max-width:calc(50% - 16px);min-width:0;padding:8px 10px;border:1px solid #3f6689;border-radius:7px;background:#142a40;color:#eef8ff;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
#caller-edge-left{left:8px}#caller-edge-right{right:8px}