/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Bone Flow Formal Style Header
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Component ID : 029
File         : bone-numberbox.css
Version      : 1.0.3
Status       : Development
Standard     : Bone Flow Development Standard v1.0
Description  : Bone NumberBox本体および正式テストページ用スタイル。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
:root{color-scheme:dark;--bf-bg:#0b111b;--bf-panel:#111a27;--bf-panel2:#162234;--bf-line:#31425a;--bf-text:#eaf2ff;--bf-sub:#9eafc4;--bf-accent:#5ba6ff;--bf-ok:#55e6a5;--bf-warn:#ffc857;--bf-error:#ff7b8a}
*{box-sizing:border-box}body{margin:0;background:var(--bf-bg);color:var(--bf-text);font-family:Meiryo,"Yu Gothic",system-ui,sans-serif}.bf-page{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:24px 0 56px}.bf-header{margin-bottom:18px}.bf-header h1{margin:0;font-size:30px}.bf-header p{margin:6px 0;color:var(--bf-sub)}.bf-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.bf-badge{padding:5px 9px;border:1px solid var(--bf-line);border-radius:999px;background:#0f1724;font-size:12px}.bf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bf-card{min-width:0;padding:16px;border:1px solid var(--bf-line);border-radius:12px;background:var(--bf-panel)}.bf-card--wide{grid-column:1/-1}.bf-card h2,.bf-card h3{margin:0 0 10px}.bf-card p{color:var(--bf-sub)}.bf-property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bf-field{display:grid;gap:6px}.bf-field label{font-size:13px;color:#c8d5e7}.bf-field input[type="text"],.bf-field input[type="number"],.bf-field select{width:100%;padding:9px 10px;border:1px solid #50627d;border-radius:8px;background:#0c1420;color:var(--bf-text)}.bf-check{display:flex;align-items:center;gap:8px}.bf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}button{padding:9px 13px;border:1px solid #4f6f9c;border-radius:8px;background:#17304f;color:#eef6ff;cursor:pointer}button:hover{background:#21456e}button:disabled{opacity:.45;cursor:not-allowed}.is-danger{border-color:#7d3544;background:#3a1f28}.bone-numberbox{display:grid;gap:6px;width:100%;min-width:0}.bone-numberbox__input{width:100%;min-width:0;padding:10px 12px;border:1px solid #64748b;border-radius:8px;background:#0c1420;color:#eef6ff;font:inherit;outline:none;transition:border-color .12s,box-shadow .12s,background .12s}.bone-numberbox__input::placeholder{color:#71839c}.bone-numberbox.is-invalid .bone-numberbox__input{border-color:var(--bf-error);box-shadow:0 0 0 3px rgba(255,123,138,.12)}.bone-numberbox.is-readonly .bone-numberbox__input{background:#141d2a}.bone-numberbox.is-disabled .bone-numberbox__input{opacity:.55}.bone-numberbox.is-dirty .bone-numberbox__input{border-style:dashed}.bone-numberbox__feedback{min-height:18px;font-size:12px;color:var(--bf-sub)}.bone-numberbox__feedback[data-level="error"]{color:var(--bf-error)}.bone-numberbox__feedback[data-level="warning"]{color:var(--bf-warn)}.bone-numberbox__feedback[data-level="success"]{color:var(--bf-ok)}.bf-preview-stage{display:grid;gap:14px;padding:18px;border:1px dashed #52637b;border-radius:10px;background:#0c1420}.bf-state-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.bf-state{padding:8px;border:1px solid var(--bf-line);border-radius:8px;background:#0e1825}.bf-state span{display:block;color:var(--bf-sub);font-size:11px}.bf-state strong{display:block;margin-top:3px;overflow-wrap:anywhere}.bf-flow{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;align-items:center;gap:10px;padding:18px;border:1px solid var(--bf-line);border-radius:10px;background:#0c1420}.bf-node{min-height:72px;padding:10px;border:1px solid #50627d;border-radius:8px;background:#172337;display:grid;place-items:center;text-align:center}.bf-arrow{font-size:28px;color:var(--bf-accent)}.bf-code{margin:0;max-height:320px;overflow:auto;padding:12px;border:1px solid var(--bf-line);border-radius:8px;background:#09101a;color:#cfe1fa;white-space:pre-wrap;word-break:break-word}.bf-test-summary{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.bf-test-summary strong{font-size:20px}.bf-pass{color:var(--bf-ok)}.bf-fail{color:var(--bf-error)}.bf-pending{color:var(--bf-warn)}.bf-test-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}.bf-test-list li{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:7px 9px;border:1px solid #29384e;border-radius:7px;background:#0d1623}.bf-console{min-height:120px;max-height:260px;overflow:auto;padding:10px;border:1px solid var(--bf-line);border-radius:8px;background:#080e16;font-family:Consolas,monospace;font-size:12px;white-space:pre-wrap}.bf-completion{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.bf-completion>div{padding:9px;border:1px solid var(--bf-line);border-radius:8px;background:#0d1623}.bf-completion span{display:block;color:var(--bf-sub);font-size:11px}.bf-completion strong{display:block;margin-top:3px}.bf-dependencies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.bf-dependency{padding:10px;border:1px solid var(--bf-line);border-radius:8px;background:#0f1724}.bf-dependency b{display:block}.bf-dependency span{color:var(--bf-sub);font-size:12px}@media(max-width:860px){.bf-grid,.bf-property-grid{grid-template-columns:1fr}.bf-card--wide{grid-column:auto}.bf-flow{grid-template-columns:1fr}.bf-arrow{transform:rotate(90deg);justify-self:center}.bf-state-row,.bf-completion,.bf-dependencies{grid-template-columns:1fr 1fr}}@media(max-width:520px){.bf-page{width:min(100% - 20px,1280px);padding-top:14px}.bf-state-row,.bf-completion,.bf-dependencies{grid-template-columns:1fr}.bf-header h1{font-size:24px}}


/* #027 baseline: Untrusted IN / Joint WAIT-BLOCK integration */
.bone-numberbox[data-security-state="rejected"] .bone-numberbox__input{border-color:#ff7b8a;background:#21131a}
.bone-numberbox.is-waiting .bone-numberbox__input{border-color:#d5a733;box-shadow:0 0 0 3px rgba(255,200,87,.11)}
.bone-numberbox.is-blocked .bone-numberbox__input{border-color:#eb5055;box-shadow:0 0 0 3px rgba(235,80,85,.14)}
.bf-security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.bf-security-result{margin-top:10px;padding:10px;border:1px solid var(--bf-line);border-radius:8px;background:#0b1421;min-height:72px;white-space:pre-wrap;overflow-wrap:anywhere}
.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-complete-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
@media(max-width:860px){.bf-security-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.bf-security-grid{grid-template-columns:1fr}.bf-delivery-node{width:116px;font-size:.78rem}.bf-delivery-node--source{left:3%}.bf-delivery-node--target{right:3%}}


/* #027 baseline: Connection image / bilingual Property / QA visibility */
.bf-language-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:9px 10px;border:1px solid var(--bf-line);border-radius:8px;background:#0d1623}.bf-language-toolbar strong{margin-right:4px}.bf-language-button.is-active{border-color:#68d6ff;background:#1d4664;box-shadow:0 0 0 2px rgba(104,214,255,.14) inset}
.bf-connection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bf-connection-card{min-width:0;padding:12px;border:1px solid #35435a;border-radius:10px;background:#0d1623}.bf-connection-card--wide{grid-column:1/-1}.bf-connection-card h3{margin:0 0 4px;font-size:1rem}.bf-connection-card>p{margin:0 0 8px;font-size:.82rem}.bf-connection-stage{position:relative;isolation:isolate;height:150px;overflow:hidden;border:1px solid #2f4057;border-radius:8px;background:#09111c}.bf-connection-stage .bf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}.bf-connection-node{position:absolute;z-index:2;top:48px;width:clamp(88px,24%,132px);min-height:54px;display:grid;place-items:center;padding:8px;border:1px solid #50627d;border-radius:8px;background:#172337;text-align:center}.bf-connection-node strong{display:block}.bf-connection-node small{display:block;margin-top:3px;color:#9fb4cc}.bf-connection-node--source{left:2%}.bf-connection-node--target{right:2%}.bf-connection-node--numberbox{left:50%;transform:translateX(-50%);border-color:#5985b7}.bf-connection-node.is-missing{border-style:dashed;border-color:#a74a59;background:#281a20;color:#ff9ba5}.bf-connection-diagnostics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;margin-top:8px;font-size:.76rem}.bf-connection-diagnostics span{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid #213047}.bf-connection-diagnostics b{overflow-wrap:anywhere}.bf-connection-diagnostics .is-ok{color:#55e6a5}.bf-connection-diagnostics .is-error{color:#ff7b8a}.bf-connection-diagnostics .is-warn{color:#ffc857}
.bf-qa-toolbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:12px;border:1px solid #36516f;border-radius:9px;background:#0c1725}.bf-qa-stat{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid #2e425c;border-radius:999px;background:#0a1320}.bf-qa-stat span{color:#9eafc4}.bf-test-meta{margin:-2px 0 10px;color:#9eafc4;font-size:.78rem}.bf-test-list li{min-height:42px;align-items:start}.bf-test-list li span{overflow-wrap:anywhere}.bf-card--qa{grid-column:1/-1}.bf-visual-status{margin-top:8px;color:#9eafc4;font-size:.8rem}
/* Make delivery geometry explicit instead of inheriting mutable Joint display options. */
.bf-delivery-stage .bf-svg{z-index:2}.bf-delivery-stage .bf-delivery-overlay{z-index:7;overflow:visible}.bf-delivery-stage .bf-joint-path{filter:drop-shadow(0 0 3px rgba(91,166,255,.25))}
@media(max-width:860px){.bf-connection-grid{grid-template-columns:1fr}.bf-connection-card--wide{grid-column:auto}.bf-connection-diagnostics{grid-template-columns:1fr}}
@media(max-width:620px){.bf-connection-stage{height:170px}.bf-connection-node{top:58px;width:32%;font-size:.76rem;padding:7px 5px}}

/* #027 baseline: formal Joint visual parity */
.bone-label-test-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.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-connection-stage .bf-joint-flow-indicator,.bf-delivery-stage .bf-joint-flow-indicator{z-index:6}.bf-connection-stage .bf-joint-direction-marker,.bf-delivery-stage .bf-joint-direction-marker{display:block}.bf-connection-stage .bf-svg,.bf-delivery-stage .bf-svg{overflow:visible}@media(max-width:900px){.bone-label-overall-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.bone-label-validation-list--columns{grid-template-columns:1fr}}


/* v1.0.1 - Theme / layout / Parent Dependency / Active border effects */
.bone-numberbox{--btb-text:#eef6ff;--btb-placeholder:#71839c;--btb-border:#64748b;--btb-accent:#5ba6ff;--btb-focus-glow:rgba(91,166,255,.18);--btb-effect-color:var(--btb-accent);--btb-effect-duration:1.2s;--bone-numberbox-background:#0c1420;position:relative;min-width:0;max-width:100%}
.bone-numberbox[data-theme="dark"]{--btb-text:#f1f6ff;--btb-placeholder:#7f91aa;--btb-border:#52657f;--btb-accent:#68d6ff;--btb-focus-glow:rgba(104,214,255,.20)}
.bone-numberbox[data-theme="light"]{--btb-text:#172033;--btb-placeholder:#6b7280;--btb-border:#8996a8;--btb-accent:#2457d6;--btb-focus-glow:rgba(36,87,214,.17)}
.bone-numberbox[data-theme="neon"]{--btb-text:#e9fdff;--btb-placeholder:#69a7b5;--btb-border:#1c8ca2;--btb-accent:#35f4ff;--btb-focus-glow:rgba(53,244,255,.25);filter:drop-shadow(0 0 5px rgba(53,244,255,.10))}
.bone-numberbox__control{position:relative;width:100%;height:var(--btb-control-height,44px);min-width:0;border-radius:inherit}
.bone-numberbox__input{position:relative;z-index:1;width:100%;height:100%;min-width:0;padding:10px 12px;color:var(--btb-text);border-color:var(--btb-border);background:var(--bone-numberbox-background);transition:border-color .12s,box-shadow .12s,background .12s,color .12s,border-radius .12s;font:inherit;outline:none}
.bone-numberbox__input::placeholder{color:var(--btb-placeholder)}
.bone-numberbox[data-inherit-parent="false"][data-position="top-left"]{justify-self:start;align-self:start}.bone-numberbox[data-inherit-parent="false"][data-position="top-center"]{justify-self:center;align-self:start}.bone-numberbox[data-inherit-parent="false"][data-position="top-right"]{justify-self:end;align-self:start}.bone-numberbox[data-inherit-parent="false"][data-position="middle-left"]{justify-self:start;align-self:center}.bone-numberbox[data-inherit-parent="false"][data-position="center"]{justify-self:center;align-self:center}.bone-numberbox[data-inherit-parent="false"][data-position="middle-right"]{justify-self:end;align-self:center}.bone-numberbox[data-inherit-parent="false"][data-position="bottom-left"]{justify-self:start;align-self:end}.bone-numberbox[data-inherit-parent="false"][data-position="bottom-center"]{justify-self:center;align-self:end}.bone-numberbox[data-inherit-parent="false"][data-position="bottom-right"]{justify-self:end;align-self:end}
.bone-numberbox[data-appearance="normal"] .bone-numberbox__input{border-width:1px;border-style:solid;border-radius:8px}.bone-numberbox[data-appearance="flat"] .bone-numberbox__input{border-width:1px;border-style:solid;border-radius:0;box-shadow:none}.bone-numberbox[data-appearance="borderless"] .bone-numberbox__input{border-color:transparent;border-radius:0;box-shadow:none}
.bone-numberbox.is-readonly .bone-numberbox__input{filter:saturate(.78)}
/* Parent Dependency: 単体の幅/高さ/位置/背景/通常枠を描画上無視。 */
.bone-numberbox[data-inherit-parent="true"]{width:100%!important;height:100%;max-width:none;justify-self:stretch!important;align-self:stretch!important;color:var(--btb-parent-text,inherit);border:0!important;border-radius:var(--btb-parent-radius,inherit)}.bone-numberbox[data-inherit-parent="true"] .bone-numberbox__control{width:100%;height:100%;border:0!important;border-radius:var(--btb-parent-radius,inherit)}.bone-numberbox[data-inherit-parent="true"] .bone-numberbox__input{width:100%;height:100%;background:var(--btb-parent-background,inherit)!important;color:var(--btb-parent-text,inherit)!important;border:0!important;border-radius:var(--btb-parent-radius,inherit);box-shadow:none;text-align:var(--btb-parent-align,left)}.bone-numberbox[data-inherit-parent="true"] .bone-numberbox__input::placeholder{color:var(--btb-parent-text,inherit);opacity:.58}.bone-numberbox[data-inherit-parent="true"] .bone-numberbox__feedback{position:absolute;top:100%;left:0;right:0;z-index:9}
#numberbox-host{display:grid;position:relative;width:100%;min-height:140px;padding:12px;border:1px dashed #435872;border-radius:10px;background:#162234;color:#eaf2ff;overflow:visible}#numberbox-host[data-parent-dependent="true"]{padding:0}#numberbox-host[data-preview-theme="dark"]{background:#0b1420;color:#f1f6ff}#numberbox-host[data-preview-theme="light"]{background:#f4f7fb;color:#172033;border-color:#a9b7c8}#numberbox-host[data-preview-theme="default"]{background:#162234;color:#eaf2ff}#numberbox-host[data-preview-theme="neon"]{background:#06131d;color:#e9fdff;border-color:#35f4ff;box-shadow:0 0 16px rgba(53,244,255,.18)}
.bf-parent-preview{border:2px solid #6a8ab6;border-radius:14px;background:#26354a;color:#f3d36a}.bf-parent-note{margin-top:6px;font-size:.78rem;color:var(--bf-sub)}.bf-parent-settings,.bf-self-settings,.bf-effect-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:11px;border:1px solid #31425a;border-radius:9px;background:#0d1623}.bf-property-group-title{grid-column:1/-1;margin:0;color:#cfe1f7;font-size:.9rem}.bf-property-group-note{grid-column:1/-1;margin:0;color:#90a5be;font-size:.76rem}.bf-field.is-ignored,.bf-check.is-ignored{opacity:.42}.bf-field.is-ignored input,.bf-field.is-ignored select{cursor:not-allowed}.bf-background-controls{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:8px;align-items:end}.bf-background-controls input[type="color"]{width:100%;height:38px;padding:2px;border:1px solid #50627d;border-radius:8px;background:#0c1420}
@media(max-width:860px){.bf-parent-settings,.bf-self-settings,.bf-effect-settings{grid-template-columns:1fr}}

.bf-flow-map{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.2fr);gap:10px;align-items:stretch}.bf-flow-step{padding:10px;border:1px solid var(--bf-line);border-radius:10px;background:#0e1825;display:grid;gap:6px;align-content:start}.bf-flow-step span{font-size:12px;color:var(--bf-sub)}.bf-flow-step strong{font-size:14px;overflow-wrap:anywhere}.bf-flow-step small{font-size:11px;color:#cfe1fa;overflow-wrap:anywhere}.bf-flow-arrow{display:grid;place-items:center;font-size:26px;color:var(--bf-accent)}.bf-flow-note{font-size:12px;color:#9bb0c8;padding:2px 2px 0}@media(max-width:960px){.bf-flow-map{grid-template-columns:1fr}.bf-flow-arrow{transform:rotate(90deg)}}

.bf-preview-node{position:relative;z-index:3;min-height:110px;padding:14px 16px;border:1px solid #50627d;border-radius:10px;background:#172337;display:grid;gap:8px;align-content:start;box-shadow:0 8px 20px rgba(0,0,0,.15)}.bf-preview-node span{font-size:12px;color:var(--bf-sub)}.bf-preview-node strong{font-size:14px;overflow-wrap:anywhere}.bf-preview-node small{font-size:11px;color:#cfe1fa;overflow-wrap:anywhere}.bf-preview-flow-stage .bf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.bf-preview-flow-stage .bf-delivery-overlay{z-index:4;pointer-events:none}@media(max-width:960px){.bf-preview-flow-stage{grid-template-columns:1fr;gap:18px;min-height:360px;padding:18px}}

.bf-security-stage{position:relative;display:grid;grid-template-columns:minmax(180px,1fr) minmax(190px,1fr) minmax(220px,1.2fr);gap:52px;align-items:center;min-height:190px;margin-top:14px;padding:22px 26px;border:1px solid var(--bf-line);border-radius:10px;background:#0c1420;overflow:visible}.bf-security-node{position:relative;z-index:3;min-height:104px;padding:12px 14px;border:1px solid #50627d;border-radius:10px;background:#172337;display:grid;gap:6px;align-content:start}.bf-security-node span{font-size:12px;color:var(--bf-sub)}.bf-security-node strong{font-size:14px;overflow-wrap:anywhere}.bf-security-node small{font-size:11px;color:#cfe1fa;overflow-wrap:anywhere}.bf-security-node--gate{border-style:dashed}.bf-security-stage .bf-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.bf-security-stage .bf-delivery-overlay{z-index:4;pointer-events:none}@media(max-width:900px){.bf-security-stage{grid-template-columns:1fr;gap:18px;min-height:360px;padding:18px}}



/* #029 NumberBox numeric readability */
.bone-numberbox__input{font-variant-numeric:tabular-nums}


/* #029 v1.0.6 - NumberBox default right alignment / voucher mode */
.bone-numberbox__voucher{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;padding:5px 10px;border:1px solid var(--btb-border);border-radius:8px;background:var(--bone-numberbox-background);color:var(--btb-text);font-variant-numeric:tabular-nums;line-height:1;cursor:text;user-select:none}.bone-numberbox__voucher[hidden]{display:none!important}.bone-numberbox__voucher-value{display:flex;align-items:stretch;justify-content:flex-end;width:100%;height:100%}.bone-numberbox__voucher-grid{display:flex;align-items:stretch;justify-content:flex-end;width:100%;max-width:100%;height:100%}.bone-numberbox__voucher-sign{flex:0 0 clamp(16px,.9em,32px);display:grid;place-items:center;height:100%;font-weight:700;text-align:center;white-space:pre}.bone-numberbox__voucher-yen{flex:0 0 clamp(16px,.9em,32px);display:grid;place-items:center;height:100%;font-weight:700;text-align:center;white-space:pre}.bone-numberbox__voucher-cell{flex:1 1 0;min-width:0;display:grid;place-items:center;height:100%;padding:0 .02em;text-align:center;white-space:pre}.bone-numberbox__voucher-glyph{font-weight:700}.bone-numberbox__voucher-separator{flex:0 0 0;align-self:stretch;width:0;min-width:0;display:grid;place-items:center;overflow:visible;color:transparent;font-weight:700;border-left:var(--btb-voucher-line-width,1px) solid var(--btb-voucher-line-color,#6ea3ff)}.bone-numberbox__voucher-separator[data-group-break="true"]{border-left-width:var(--btb-voucher-group-line-width,3px)}.bone-numberbox__voucher-separator--decimal,.bone-numberbox__voucher-separator[data-decimal-break="true"]{border-left-color:var(--btb-voucher-decimal-line-color,#d96a6a);border-left-width:var(--btb-voucher-decimal-line-width,2px)}.bone-numberbox__voucher[data-grid-lines="true"] .bone-numberbox__voucher-separator{color:transparent}.bone-numberbox__voucher[data-grid-lines="false"] .bone-numberbox__voucher-separator{border-left-color:transparent}.bone-numberbox__voucher[data-grid-lines="false"] .bone-numberbox__voucher-separator[data-group-break="true"],.bone-numberbox__voucher[data-grid-lines="false"] .bone-numberbox__voucher-separator[data-decimal-break="true"]{flex:0 0 .72em;width:.72em;min-width:.72em;color:currentColor}
.bone-numberbox__voucher[data-negative-red="true"] .bone-numberbox__voucher-glyph{color:#e5484d}.bone-numberbox[data-display-mode="voucher"] .bone-numberbox__control{cursor:text}.bone-numberbox[data-display-mode="voucher"].is-invalid .bone-numberbox__voucher{border-color:var(--btb-border);box-shadow:none}
.bone-numberbox[data-appearance="flat"] .bone-numberbox__voucher{border-radius:0}.bone-numberbox[data-appearance="borderless"] .bone-numberbox__voucher{border-color:transparent;border-radius:0;box-shadow:none}
.bone-numberbox[data-inherit-parent="true"] .bone-numberbox__voucher{width:100%;height:100%;background:var(--btb-parent-background,inherit)!important;color:var(--btb-parent-text,inherit);border:0!important;border-radius:var(--btb-parent-radius,inherit);box-shadow:none}.bone-numberbox[data-inherit-parent="true"] .bone-numberbox__voucher[data-negative-red="true"] .bone-numberbox__voucher-glyph{color:#e5484d!important}
.bf-voucher-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:11px;border:1px solid #31425a;border-radius:9px;background:#0d1623}.bf-voucher-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px}.bf-voucher-note{grid-column:1/-1;margin:0;color:#90a5be;font-size:.76rem}
@media(max-width:860px){.bf-voucher-settings{grid-template-columns:1fr}}

.bf-connection-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;padding:10px;border:1px solid #31425a;border-radius:8px;color:#cbd8e8}.bf-connection-legend-line{display:inline-block;width:40px;height:3px;margin-right:8px;vertical-align:middle}.bf-connection-legend-line.is-blue{background:#5ba6ff}.bf-connection-legend-line.is-green{background:#4be06b}.bf-connection-legend-line.is-orange{background:#f5a623}.bf-connection-legend-line.is-red{background:#ff5b73}

/* #029 Candidate v1.0.18 color caller / guide controls. */
.bf-040-trigger{padding:6px 10px;min-width:76px;border:1px solid #8193a9;border-radius:7px;color:#182331;background-color:#eff6ff;font-size:12px;cursor:pointer}
.bf-029-transition-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin:8px 0}
.bf-029-transition-row label{display:flex;flex-direction:column;gap:5px}
.bf-029-transition-row select{width:100%;min-width:0}
.bf-029-color-settings p{line-height:1.55}
#bf-029-guide pre{overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
#bf-029-transition-results{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-height:250px;overflow:auto}
.bf-029-note{font-size:12px;color:inherit;opacity:.86}

/* #029 1.0.19 Layout isolation from the shared #118 test-page .bf-header flex style. */
body:has(> .bf-page > .bf-header) > .bf-page {max-width:none;width:min(1280px,calc(100% - 32px));margin:0 auto;padding:22px 0 56px}
.bf-page > .bf-header {display:grid!important;grid-template-columns:minmax(0,1fr);align-items:start;justify-content:stretch;gap:10px;min-width:0;background:#111a27;padding:20px 22px}
.bf-page > .bf-header > h1 {font-size:clamp(24px,2.5vw,32px);margin:0;overflow-wrap:normal;word-break:normal}
.bf-page > .bf-header > p {margin:0;line-height:1.6}
.bf-page > .bf-header .bf-badges{justify-content:flex-start;margin:2px 0}
.bf-page > .bf-header .bf-actions {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin:0;gap:8px}
.bf-029-link {display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #4f6f9c;border-radius:8px;color:#deebff;text-decoration:none;background:#17304f;font-weight:600}
.bf-029-link:hover{background:#21456e}
#numberbox-cumulative-results{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.bf-029-test-row{padding:10px;border-radius:8px;border:1px solid #455873;background:#0c1927;overflow-wrap:anywhere}
.bf-029-test-row.is-pass{border-color:#297c58}.bf-029-test-row.is-fail{border-color:#b44150}
#numberbox-cumulative-status{font-weight:700;margin-top:10px}
#numberbox-cumulative-effect-host{margin:12px 0 0;min-height:65px}
.bf-029-local-guide{width:min(1000px,calc(100vw - 28px));max-width:none;max-height:90vh;padding:0;background:#101c2b;color:#edf4ff;border:1px solid #4a6786;border-radius:12px;box-shadow:0 24px 80px #000b}
.bf-029-local-guide::backdrop{background:#000b;backdrop-filter:blur(3px)}
.bf-029-local-guide__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px;background:#17293e;border-bottom:1px solid #446180}
.bf-029-local-guide__actions{display:flex;gap:8px;flex-wrap:wrap}
.bf-029-local-guide__body{padding:16px 20px;overflow:auto;max-height:calc(90vh - 92px);line-height:1.65}
.bf-029-local-guide__body pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#08121f;padding:13px;border-radius:8px;border:1px solid #31506e}
.bf-029-local-guide__body h2{border-bottom:1px solid #36526e;padding-bottom:6px;margin-top:22px}
.bf-029-local-guide__body h3{margin-top:18px}
.bf-029-local-guide__body .bf-029-guide-note{color:#adc5dd}
@media(max-width:720px){.bf-page > .bf-header{padding:14px}.bf-page > .bf-header > h1{font-size:23px}.bf-029-local-guide__head{flex-wrap:wrap}}

/* #029 1.0.21 layout / readability: unlike older always-open debug trees, normal operation is first. */
.bf-page > .bf-header{gap:9px!important;padding:17px 20px!important}
.bf-page > .bf-header > h1{font-size:clamp(22px,2.2vw,29px);line-height:1.25!important}
.bf-page > .bf-header > p{font-size:13px;line-height:1.45!important}
.bf-page > .bf-header .bf-badges{gap:5px!important}
.bf-page > .bf-header .bf-badge{font-size:11px;padding:3px 7px}
.bf-page > .bf-header .bf-actions{gap:7px!important}
.bf-page > .bf-header .bf-actions > *{font-size:12px}
.bf-page > .bf-header .bf-actions button,.bf-page > .bf-header .bf-actions .bf-029-link{padding:7px 10px}
.bf-page > .bf-header #doc-0029-status{font-size:11px;overflow-wrap:anywhere}
.bf-card.bf-029-dependency-panel{padding:14px 16px}
.bf-029-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bf-029-section-head h2{font-size:18px!important;margin:0 0 9px!important}
.bf-029-section-hint{font-size:11px;color:#b5c9df}
.bf-029-direct-dependencies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bf-029-direct-dependencies .bf-dependency{min-width:0;padding:10px 12px;overflow-wrap:anywhere}
.bf-029-direct-dependencies .bf-dependency b{font-size:12px}
.bf-029-direct-dependencies .bf-dependency span{font-size:11px}
.bf-029-dependency-tree{border:1px solid #36536c;border-radius:7px;margin-top:10px;padding:0;background:#0d1826}
.bf-029-dependency-tree > summary{padding:9px 12px;color:#d4e9ff;cursor:pointer;font-weight:600;font-size:12px}
.bf-029-dependency-tree[open]{padding-bottom:12px}
.bf-029-dependency-tree[open] > summary{border-bottom:1px solid #36536c}
.bf-029-dependency-tree .bf-029-tree-entry{margin:12px 16px}
.bf-029-dependency-tree ul{margin:6px 0 0;padding-left:22px}
.bf-029-dependency-tree li{margin:3px 0}
.bf-029-dependency-tree > p{margin:8px 16px 0}
.bf-029-code-disclosure{padding:0!important;overflow:visible}
.bf-029-code-disclosure > summary{display:list-item;cursor:pointer;margin:0;padding:14px 18px;font-weight:700;font-size:15px}
.bf-029-code-disclosure[open]{padding:0 18px 18px!important}
.bf-029-code-disclosure[open] > summary{margin:0 -18px 12px;border-bottom:1px solid #37506c}
.bf-page .bf-card h2{font-size:19px}
.bf-page .bf-card h3{font-size:15px}
.bf-page .bf-field label{font-size:12px}
.bf-page .bf-property-grid{gap:10px}
@media(max-width:950px){.bf-029-direct-dependencies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bf-029-direct-dependencies{grid-template-columns:1fr}.bf-029-section-hint{display:none}}

/* Do not allow #002 Joint documentation .bf-card defaults to resize #029 panels. */
.bf-page .bf-card{min-height:0;overflow:visible}
.bf-page .bf-grid > .bf-card:not(.bf-card--wide){align-self:start}
#numberbox-host{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
#numberbox-host > .bone-numberbox{max-width:100%;box-sizing:border-box}
.bf-page pre,.bf-page code{max-width:100%;overflow-wrap:anywhere}

/* Responsive minmax(0,1fr) is essential: parent-width test is allowed to request 560px but cannot enlarge the entire Preview card. */
.bf-page .bf-preview-stage{grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
.bf-page .bf-preview-stage > *{max-width:100%;min-width:0;box-sizing:border-box}

/* #029 v1.0.22 — readable actual property controls and inspectable runtime. Shared CSS stays untouched. */
.bf-page > .bf-header > p{font-size:15px!important;line-height:1.55!important}
.bf-page > .bf-header .bf-badge{font-size:12px!important;padding:4px 9px!important}
.bf-page > .bf-header .bf-actions > *{font-size:14px!important;min-height:38px}
.bf-page .bf-field label{font-size:14px!important;line-height:1.45}
.bf-page .bf-check label,.bf-page .bf-029-transition-row label{font-size:14px!important;line-height:1.4}
.bf-page .bf-field input:not([type="checkbox"]):not([type="radio"]),.bf-page .bf-field select,.bf-page .bf-029-transition-row select{font-size:15px!important;min-height:39px}
.bf-page .bf-field input[type="checkbox"],.bf-page .bf-check input[type="checkbox"]{min-width:16px;min-height:16px}
.bf-page .bf-card p,.bf-page .bf-029-inspector summary{font-size:14px;line-height:1.55}
.bf-page .bf-card button{font-size:14px;line-height:1.3;min-height:36px}
.bf-page .bf-dependency b{font-size:14px}
.bf-page .bf-dependency span{font-size:13px}
.bf-page .bf-029-dependency-tree > summary{font-size:14px}
/* The formal #040 caller anchor is a trigger, not a color sample. Keep label contrast independent of chosen color. */
.bf-page .bf-card button.bf-040-trigger{display:flex!important;align-items:center;justify-content:flex-start;gap:9px;min-height:40px;min-width:125px;padding:5px 10px!important;background:#193451!important;color:#f2f8ff!important;border:1px solid #6fa1d2!important;border-radius:7px!important;opacity:1!important;font-weight:600!important;line-height:1.25!important;cursor:pointer}
.bf-page .bf-card button.bf-040-trigger:hover{background:#264e79!important;border-color:#c0defd!important}
.bf-page .bf-card button.bf-040-trigger:focus-visible{outline:3px solid #8bc7ff;outline-offset:2px}
.bf-029-color-swatch{display:block;flex:0 0 24px;width:24px;height:24px;border:1px solid #d4e8fc;border-radius:5px;box-shadow:0 0 0 1px #193451}
.bf-029-color-action{white-space:nowrap;font-size:13px}
.bf-page .bf-029-color-settings{min-width:0}
.bf-page .bf-background-controls{min-width:0;grid-template-columns:minmax(0,1fr) minmax(125px,auto)!important;align-items:center}
.bf-page .bf-background-controls > *{min-width:0;max-width:100%}
.bf-page .bf-029-inspector{border:1px solid #374f6b;border-radius:8px;overflow:hidden;margin-top:4px}
.bf-page .bf-029-inspector > summary{cursor:pointer;padding:11px 12px;color:#e4f1ff;background:#142338;font-weight:600}
.bf-page .bf-029-inspector > .bf-code{max-height:350px;overflow:auto;font-size:13px;line-height:1.5;margin:0}
.bf-029-local-guide__body{font-size:16px;line-height:1.75!important}
.bf-029-local-guide__body pre{font:14px/1.6 Consolas,monospace!important;white-space:pre!important;overflow:auto!important;overflow-wrap:normal!important;max-height:50vh}
.bf-029-local-guide__head strong{font-size:17px}
.bf-029-local-guide__actions button{font-size:14px!important;min-height:36px}
.bf-029-local-guide .bf-029-copy{display:inline-block;font-size:14px!important;margin:8px 0}
.bf-029-dependency-panel .bf-029-section-hint{font-size:13px;color:#c6d8ec}
@media(max-width:1100px){.bf-page .bf-background-controls{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:880px){.bf-page .bf-card .bf-property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:670px){.bf-page .bf-card .bf-property-grid{grid-template-columns:1fr}}


/* v1.0.23 — #017 Text visual contract review. Applies ONLY to #029 page.
   #017 baseline: 15px base text, 8px/13px high-contrast action controls,
   and an editable value next to a 48x38 swatch-only #040 Caller trigger. */
.bf-page{font-size:15px;line-height:1.55}
.bf-page :is(button,.bf-029-link){
  appearance:none;box-sizing:border-box;font-family:inherit;font-size:15px!important;
  font-weight:700;line-height:1.35;min-height:40px;
  padding:8px 13px;display:inline-flex;justify-content:center;align-items:center;
  text-align:center;white-space:normal;overflow-wrap:anywhere;
  color:#eef8ff;background:#142a40;border:1px solid #507ea5;
  border-radius:7px;text-decoration:none;cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease;
}
.bf-page :is(button,.bf-029-link):hover:not(:disabled){background:#1c3e5e;border-color:#79c6f8}
.bf-page :is(button,.bf-029-link):focus-visible,
.bf-page :is(input,select,summary):focus-visible{outline:3px solid #76ceff;outline-offset:2px}
.bf-page button:disabled{opacity:.50;cursor:not-allowed;background:#1c2936;border-color:#425569;color:#becbd9}
.bf-page :is(button.is-primary,.bf-029-run-button){background:#104267;border-color:#65beef;color:#f3fbff}
.bf-page :is(button.is-primary,.bf-029-run-button):hover:not(:disabled){background:#165783;border-color:#9fe5ff}
.bf-page button.is-danger{background:#40202d;border-color:#c97986;color:#ffe1e4}
.bf-page button.is-danger:hover:not(:disabled){background:#5b2c3b;border-color:#ffb1b7}
.bf-page button.bf-language-button.is-active{background:#1a4b6f;border:2px solid #7fd4ff;color:#fff;box-shadow:0 0 0 1px #21465f inset}
.bf-page :is(.bf-actions,.bf-voucher-actions,.bone-label-test-actions,.bf-complete-actions){display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.bf-page .bf-field label{font-size:14px!important;line-height:1.5;color:#d3e2f0;font-weight:500}
.bf-page .bf-property-grid input:not([type=checkbox]):not([type=radio]),
.bf-page .bf-property-grid select{font-family:inherit;font-size:15px!important;min-height:40px;min-width:0}
.bf-page .bf-property-grid .bf-field{min-width:0}
.bf-page .bf-background-controls{
 display:grid;grid-template-columns:minmax(0,1fr) 48px!important;gap:8px;align-items:center
}
.bf-page .bf-background-controls > select{grid-column:1/-1;width:100%}
.bf-page .bf-background-controls > input{grid-column:1;min-width:0;width:100%}
.bf-page .bf-background-controls > button{grid-column:2}
.bf-page .bf-029-color-value-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:center;min-width:0}
.bf-page .bf-029-color-value-row > input{min-width:0;width:100%}
/* #017's color swatch alone is the button; its color never becomes the button foreground. */
.bf-page .bf-card button.bf-040-trigger{
  display:grid!important;place-items:center;flex:0 0 48px;
  width:48px!important;min-width:48px!important;max-width:48px!important;
  height:40px!important;min-height:40px!important;padding:4px!important;
  border:1px solid #6089a9!important;border-radius:7px!important;
  background:#142a40!important;color:#fff!important;
  opacity:1!important;cursor:pointer!important;
}
.bf-page .bf-card button.bf-040-trigger:hover:not(:disabled){border-color:#89d9ff!important;background:#1d4b6d!important}
.bf-page .bf-card button.bf-040-trigger:focus-visible{outline:3px solid #79d7ff;outline-offset:2px}
.bf-page .bf-card button.bf-040-trigger .bf-029-color-swatch{
 display:block;width:100%;height:100%;max-width:38px;min-width:0;
 border:1px solid #dce9f6;border-radius:4px;box-shadow:inset 0 0 0 1px #38526b;
}
/* Restraint: no repeated '色を選択' labels; field label + input and swatch retain #040 identity. */
.bf-page .bf-029-color-settings .bf-029-qa-button{margin-top:8px}
.bf-page .bf-preview-stage button{font-size:15px!important;min-height:40px}
.bf-page .bf-header .bf-actions > *{font-size:15px!important;min-height:40px;padding:8px 13px}
.bf-page #doc-0029-status{color:#b6d7ee;font-size:13px}
.bf-page .bf-card .bf-check{min-height:38px;align-items:center}
.bf-page .bf-property-grid input[type=checkbox]{width:17px;height:17px;accent-color:#65b8f3}
@media(max-width:670px){
 .bf-page .bf-card .bf-property-grid{grid-template-columns:1fr}
 .bf-page .bf-header .bf-actions > *{flex:1 1 190px}
 .bf-page .bf-background-controls{grid-template-columns:minmax(0,1fr) 48px!important}
}
/* Both #020 Label and #040 ColorPicker ship button min-height overrides.
   Force #029's #017-equivalent touch target without editing the shared components. */
.bf-page button:not(.bf-040-trigger), .bf-page .bf-029-link {min-height:40px!important;}