/* Bone Flow #042 Button v1.0.12 */
.bone-button{--bb-bg:#1f2937;--bb-fg:#f8fafc;--bb-border:#64748b;--bb-primary:#2563eb;--bb-danger:#b91c1c;--bb-active-color:#4f8cff;--bb-align:center;position:relative;display:flex;align-items:center;justify-content:var(--bb-align);min-width:40px;min-height:24px;box-sizing:border-box}
.bone-button[data-theme="light"]{--bb-bg:#f8fafc;--bb-fg:#111827;--bb-border:#94a3b8;--bb-primary:#2563eb}
.bone-button[data-theme="dark"]{--bb-bg:#172033;--bb-fg:#f8fafc;--bb-border:#475569;--bb-primary:#3b82f6}
.bone-button[data-theme="neon"]{--bb-bg:#07101d;--bb-fg:#dffcff;--bb-border:#1a91a0;--bb-primary:#0f8090}
.bone-button[data-inherit-parent="true"]{width:100%!important;height:100%!important}
.bone-button__control{position:relative;width:100%;height:100%;min-height:32px;padding:0 18px;border:1px solid var(--bb-border);border-radius:10px;background:var(--bb-bg);color:var(--bb-fg);font:700 14px/1.2 Meiryo,"Yu Gothic",sans-serif;cursor:pointer;outline:none;transition:background .15s,border-color .15s,transform .1s,opacity .15s;overflow:visible}
.bone-button[data-inherit-parent="true"] .bone-button__control{background:var(--bb-parent-background,transparent);color:var(--bb-parent-text,inherit);border-color:var(--bb-parent-border,currentColor);border-radius:var(--bb-parent-radius,0);text-align:var(--bb-parent-align,center)}
.bone-button[data-variant="primary"] .bone-button__control{background:var(--bb-primary);border-color:var(--bb-primary);color:#fff}
.bone-button[data-variant="danger"] .bone-button__control{background:var(--bb-danger);border-color:var(--bb-danger);color:#fff}
.bone-button[data-variant="secondary"] .bone-button__control{background:transparent;color:var(--bb-fg)}
.bone-button[data-appearance="flat"] .bone-button__control{box-shadow:none;border-color:transparent}
.bone-button[data-appearance="borderless"] .bone-button__control{background:transparent;border-color:transparent}
.bone-button[data-size="small"] .bone-button__control{font-size:12px;padding:0 12px}
.bone-button[data-size="large"] .bone-button__control{font-size:16px;padding:0 24px}
.bone-button__control:active:not(:disabled){transform:translateY(1px)}
.bone-button__control:disabled{cursor:not-allowed;opacity:.48}
.bone-button__spinner{display:none;position:absolute;right:10px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;pointer-events:none;animation:bb-spin .7s linear infinite}
.bone-button.is-busy .bone-button__spinner{display:block}
.bone-button__feedback{position:absolute;left:0;top:calc(100% + 4px);min-height:16px;color:#94a3b8;font:12px/1.3 Meiryo,"Yu Gothic",sans-serif;white-space:nowrap}
.bone-button__feedback[data-level="error"]{color:#f87171}
.bone-button__feedback[data-level="success"]{color:#4ade80}
@keyframes bb-spin{to{transform:rotate(360deg)}}
@keyframes bb-spin-focus{50%{filter:drop-shadow(0 0 6px var(--bb-active-color))}}
@keyframes bb-blink{50%{box-shadow:0 0 0 3px var(--bb-active-color)}}


/* v1.0.9 Button visual contract: shape / normal color / normal+pressed image */
.bone-button{--bb-normal-color:#2563eb;--bb-normal-border-color:#2563eb;--bb-pressed-text-color:#ffffff}
.bone-button[data-variant="default"] .bone-button__control,.bone-button[data-variant="primary"] .bone-button__control{background:var(--bb-normal-color);border-color:var(--bb-normal-border-color,var(--bb-normal-color));color:#fff}
.bone-button[data-shape="normal"] .bone-button__control{border-radius:10px}
.bone-button[data-shape="square"] .bone-button__control{border-radius:0}
.bone-button[data-shape="raised"] .bone-button__control{border-radius:8px;box-shadow:0 5px 0 rgba(0,0,0,.36),0 9px 18px rgba(0,0,0,.28);transform:translateY(-2px)}
.bone-button[data-shape="raised"].is-pressed .bone-button__control{box-shadow:0 1px 0 rgba(0,0,0,.42),0 3px 7px rgba(0,0,0,.22);transform:translateY(2px)}
.bone-button[data-shape="image"] .bone-button__control{padding:0;border-color:transparent;background:transparent;overflow:hidden}
.bone-button__image-host{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;border-radius:inherit;pointer-events:none}
.bone-button__image-host[hidden]{display:none!important}
.bone-button__image-host>*{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important}
.bone-button__image-host img,.bone-button__image-host .bone-image-bitmap,.bone-button__image-host [class*="bitmap"]{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important}
.bone-button__image-host .bone-image-dummy{position:relative;display:block!important;width:100%!important;height:100%!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden!important}
.bone-button__image-host .bone-image-dummy>strong,.bone-button__image-host .bone-image-dummy>span:not(.bone-image-dummy-sample){display:none!important}
.bone-button__image-host .bone-image-dummy-sample{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:fill!important}
.bone-button__text{position:relative;z-index:2;pointer-events:none}
.bone-button[data-shape="image"] .bone-button__text{text-shadow:0 1px 3px rgba(0,0,0,.8)}
.bf-image-property.is-disabled{opacity:.48}
/* #002 formal connection image layout, adapted from completed Radio implementation */
#connection-images .bf-joint-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#connection-images .bone-button-test-card{background:#101827;border:1px solid #31425a;border-radius:8px;padding:12px;min-width:0}
#connection-images .bone-button-test-card--wide{grid-column:1/-1}
#connection-images .bone-button-test-card h3{margin:0 0 10px;font-size:15px}
#connection-images .bone-button-usage-flow{position:relative;min-height:168px;display:flex;align-items:center;justify-content:space-around;gap:28px;padding:24px;overflow:hidden;background:#0b1322;border:1px solid #263a55;border-radius:8px}
#connection-images .bone-button-usage-flow>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}
#connection-images .bone-button-node{position:relative;z-index:2;min-width:104px;padding:12px;border:1px solid #4c6584;border-radius:7px;text-align:center;background:#172235;color:#f5f8fc}
#connection-images .bone-button-node--source{border-color:#4d8bd8}
#connection-images .bone-button-node--button{border-color:#7c8cff}
#connection-images .bone-button-node--target{border-color:#42a66b}
#connection-images .bone-button-usage-flow--in-missing,#connection-images .bone-button-usage-flow--in-mismatch,#connection-images .bone-button-usage-flow--out-mismatch{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center}
#connection-images .bone-button-usage-flow--out-missing{display:flex;justify-content:flex-start;padding-left:18%}
#connection-images .bone-button-joint-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#connection-images .bone-button-joint-diagnostic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;margin-top:10px}
#connection-images .bone-button-joint-diagnostic>div{display:flex;justify-content:space-between;gap:12px;padding:5px 7px;border-bottom:1px solid #26384f;font-size:11px}
#connection-images .bone-button-joint-diagnostic span{color:#9eb0c7}#connection-images .bone-button-joint-diagnostic strong{color:#eef5ff;word-break:break-word}
#connection-images .bf-joint-path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media(max-width:900px){#connection-images .bf-joint-grid{grid-template-columns:1fr}#connection-images .bone-button-test-card--wide{grid-column:auto}}

.bone-button[data-inherit-parent="true"]:not([data-shape="image"]) .bone-button__control{background:var(--bb-parent-background,transparent);color:var(--bb-parent-text,inherit);border-color:var(--bb-parent-border,currentColor);border-radius:var(--bb-parent-radius,0)}

/* v1.0.9: #019 Button icon + top/bottom/left/right placement */
.bone-button__content{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;pointer-events:none}
.bone-button[data-icon-position="left"] .bone-button__content{flex-direction:row}
.bone-button[data-icon-position="right"] .bone-button__content{flex-direction:row-reverse}
.bone-button[data-icon-position="top"] .bone-button__content{flex-direction:column;gap:2px}
.bone-button[data-icon-position="bottom"] .bone-button__content{flex-direction:column-reverse;gap:2px}
/* #019/#018 standalone icon values can carry a 220x150 containerStyle. #042 constrains only the consumer display box. */
.bone-button__icon-host{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.55em;height:1.55em;min-width:0;min-height:0;max-width:1.55em;max-height:1.55em;overflow:hidden;line-height:1;pointer-events:none}
.bone-button__icon-host[hidden]{display:none!important}
.bone-button__icon-host>.bone-image{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none}
.bone-button__icon-host .bone-icon-view{display:inline-grid!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}
.bone-button__icon-host .bone-icon-view__slot{min-width:0!important;min-height:0!important}
.bone-button__icon-host .bone-icon{line-height:1!important}
.bone-button__icon-host .bone-image-file-icon,.bone-button__icon-host .bone-image-emoji-view{width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0!important}
.bone-button__text{position:relative;z-index:2;display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;pointer-events:none}

/* v1.0.9 Pressed text color: #042 owns pressed state, value is selected by #040 ColorPicker. */
.bone-button.is-pressed .bone-button__control{color:var(--bb-pressed-text-color,#ffffff)}