/* Bone Flow #040 ColorPicker DOC Integration CSS v1.0.30 */
/* Bone Flow #040 ColorPicker DOC Integration v1.0.21
 * Component-owned styles for DOC-0040 live swatch display tests only.
 * Shared bone-doc-guide.css is not modified.
 */
.bf-colorpicker-doc-palette{margin:12px 0 20px;padding:12px;border:1px solid #314761;border-radius:9px;background:#0a1422;min-width:0}
.bf-colorpicker-doc-palette__status{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;border:1px solid #334b67;border-radius:7px;background:#101d2d;color:#dbeafe;font-weight:700}
.bf-colorpicker-doc-palette__status[data-result="pass"]{border-color:#1f8f63;color:#79f2b5}
.bf-colorpicker-doc-palette__status[data-result="fail"]{border-color:#b33a4f;color:#ff9baa}
.bf-colorpicker-doc-palette__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;min-width:0}
.bf-colorpicker-doc-swatch-card{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid #2f435c;border-radius:8px;background:#0d1827}
.bf-colorpicker-doc-swatch-card[data-result="fail"]{border-color:#b33a4f}
.bf-colorpicker-doc-swatch-card__host{display:flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;min-height:46px}
.bf-colorpicker-doc-swatch-card__host>.bf-colorpicker{display:block!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
.bf-colorpicker-doc-swatch-card__host .bone-colorpicker{width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
.bf-colorpicker-doc-swatch-card__host .bone-colorpicker__label-host,.bf-colorpicker-doc-swatch-card__host .bone-colorpicker__feedback{display:none!important}
.bf-colorpicker-doc-swatch-card__host .bone-colorpicker__control{box-sizing:border-box!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;max-height:42px!important;padding:2px!important;border:1px solid #7d91a8!important;border-radius:7px!important;background:#07111e!important;overflow:visible!important}
.bf-colorpicker-doc-swatch-card__host .bone-colorpicker__gradient-swatch{box-sizing:border-box!important;display:block!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important;border:0!important;border-radius:5px!important;background-size:12px 12px!important}
.bf-colorpicker-doc-swatch-card__meta{display:grid;gap:2px;min-width:0}
.bf-colorpicker-doc-swatch-card__name{color:#eef6ff;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.bf-colorpicker-doc-swatch-card__value{color:#9fbedf;font-family:Consolas,monospace;font-size:.72rem;line-height:1.3;overflow-wrap:anywhere}
.bf-colorpicker-doc-palette__error{margin:0;padding:10px;border:1px solid #b33a4f;border-radius:7px;background:#2a1219;color:#ffb1bd;overflow-wrap:anywhere}
@media(max-width:720px){.bf-colorpicker-doc-palette__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.bf-colorpicker-doc-palette__grid{grid-template-columns:1fr}}
/* v1.0.29: DOC section 7 is a color explanation grid. Keep the real bf-colorpicker
   swatch, but do not tile Runtime linear-gradient backgrounds inside explanation cards. */
.bf-colorpicker-doc-palette--gradient .bf-colorpicker-doc-swatch-card__host .bone-colorpicker__gradient-swatch{
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}