/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Bone Flow Formal Style Header
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Component ID : 032
File         : bone-datetimebox.css
Version      : 1.0.23
Status       : Development
Standard     : Bone Flow Development Standard v1.0
Description  : Bone DateTimeBox本体および正式Runtime/Smoke/Validationページ用スタイル。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
: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-field input[type="color"]{width:100%;height:38px;padding:2px;border:1px solid #50627d;border-radius:8px;background:#0c1420}.bf-check{display:flex;align-items:center;gap:8px}.bf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.bf-preview-actions{margin:8px 0 10px}
button{padding:9px 13px;border:1px solid #4f6f9c;border-radius:8px;background:#17304f;color:#eef6ff;cursor:pointer}button:hover:not(:disabled){background:#21456e}button:disabled{opacity:.45;cursor:not-allowed}.is-danger{border-color:#7d3544;background:#3a1f28}
.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-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-pass{color:var(--bf-ok)}.bf-fail{color:var(--bf-error)}.bf-pending{color:var(--bf-warn)}
.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}.bf-dependency a{display:block;color:inherit;text-decoration:none}.bf-dependency a:hover b{text-decoration:underline;text-underline-offset:3px}

/* Property baseline */
.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-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-parent-preview{border:2px solid #6a8ab6;border-radius:14px;background:#26354a;color:#f3d36a}

/* #032 DateTimeBox - Active Border Effect drawing is delegated to #022. */
.bone-datetimebox{--bdtb-font-size:14px;--bdtb-icon-size:16px;--bdtb-text:#eef6ff;--bdtb-placeholder:#71839c;--bdtb-border:#64748b;--bdtb-effect-color:#5ba6ff;--bdtb-effect-duration:1.2s;--bdtb-background:#0c1420;position:relative;display:grid;gap:6px;width:100%;max-width:100%;min-width:0;overflow:visible;font-size:var(--bdtb-font-size)}
.bone-datetimebox[data-theme="dark"]{--bdtb-placeholder:#7f91aa}.bone-datetimebox[data-theme="light"]{--bdtb-placeholder:#6b7280}.bone-datetimebox[data-theme="neon"]{--bdtb-placeholder:#69a7b5;filter:drop-shadow(0 0 5px rgba(53,244,255,.10))}
.bone-datetimebox__control{position:relative;width:100%;height:100%;min-height:40px;border-radius:inherit}
.bone-datetimebox__input{position:relative;z-index:1;width:100%;height:100%;min-width:0;padding:10px 52px 10px 12px;border:1px solid var(--bdtb-border);border-radius:8px;background:var(--bdtb-background);color:var(--bdtb-text);font:inherit;font-size:var(--bdtb-font-size);font-variant-numeric:tabular-nums;outline:none;transition:border-color .12s,box-shadow .12s,background .12s,color .12s,border-radius .12s;color-scheme:dark}.bone-datetimebox[data-theme="light"] .bone-datetimebox__input{color-scheme:light}.bone-datetimebox__input::placeholder{color:var(--bdtb-placeholder)}
.bone-datetimebox__display{position:absolute;z-index:2;left:12px;right:52px;top:0;bottom:0;display:flex;align-items:center;justify-content:center;min-width:0;color:var(--bdtb-text);font:inherit;font-size:var(--bdtb-font-size);font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:1;transition:opacity .1s}.bone-datetimebox[data-input-align="left"] .bone-datetimebox__display{justify-content:flex-start}.bone-datetimebox[data-input-align="right"] .bone-datetimebox__display{justify-content:flex-end}.bone-datetimebox:not(.is-focused) .bone-datetimebox__input{color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent}.bone-datetimebox.is-focused .bone-datetimebox__input{color:var(--bdtb-text);-webkit-text-fill-color:var(--bdtb-text);caret-color:auto}.bone-datetimebox.is-focused .bone-datetimebox__display{opacity:0}
.bone-datetimebox__trigger{position:absolute;z-index:4;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--bdtb-text);cursor:pointer;font-size:var(--bdtb-icon-size);line-height:1}.bone-datetimebox__trigger:hover:not(:disabled){background:color-mix(in srgb,var(--bdtb-text) 10%,transparent)}.bone-datetimebox__trigger:disabled{opacity:.45;cursor:not-allowed}.bone-datetimebox__trigger--date{right:8px}.bone-datetimebox__fa-clock,.bone-datetimebox__fa-calendar{display:block;width:var(--bdtb-icon-size);height:var(--bdtb-icon-size);color:currentColor}.bone-datetimebox__fa-clock{fill:currentColor}.bone-datetimebox__fa-calendar{fill:none}
.bone-datetimebox__feedback{min-height:18px;font-size:12px;color:var(--bf-sub)}.bone-datetimebox__feedback[data-level="error"]{color:var(--bf-error)}.bone-datetimebox__feedback[data-level="warning"]{color:var(--bf-warn)}.bone-datetimebox__feedback[data-level="success"]{color:var(--bf-ok)}
.bone-datetimebox__picker{position:absolute;top:calc(100% + 6px);z-index:50;width:min(520px,95vw);min-width:100%;padding:10px;border:1px solid var(--bdtb-border);border-radius:10px;background:var(--bdtb-picker-background,var(--bdtb-background));color:var(--bdtb-text);box-shadow:0 16px 40px rgba(0,0,0,.42)}.bone-datetimebox__picker[hidden]{display:none}.bone-datetimebox[data-picker-position="left"] .bone-datetimebox__picker{left:0;right:auto;transform:none}.bone-datetimebox[data-picker-position="center"] .bone-datetimebox__picker{left:50%;right:auto;transform:translateX(-50%)}.bone-datetimebox[data-picker-position="right"] .bone-datetimebox__picker{right:0;left:auto;transform:none}
.bone-datetimebox__picker-header{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;align-items:center}.bone-datetimebox__date-input-storage{display:none!important}.bone-datetimebox__picker-date-trigger,.bone-datetimebox__picker-clock-trigger{height:38px;padding:0 10px;border:1px solid var(--bdtb-border);border-radius:8px;background:var(--bdtb-picker-surface,var(--bdtb-background));color:var(--bdtb-text);cursor:pointer;font-size:var(--bdtb-icon-size)}.bone-datetimebox__picker-date-trigger{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;font-size:.9rem;font-variant-numeric:tabular-nums}.bone-datetimebox__picker-date-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bone-datetimebox__picker-clock-trigger{display:grid;place-items:center;width:38px;padding:0}.bone-datetimebox__picker-date-trigger:hover:not(:disabled),.bone-datetimebox__picker-clock-trigger:hover:not(:disabled){background:var(--bdtb-picker-header,var(--bdtb-picker-surface))}.bone-datetimebox__picker-date-trigger:disabled,.bone-datetimebox__picker-clock-trigger:disabled{opacity:.45;cursor:not-allowed}.bone-datetimebox__picker-date-trigger .bone-datetimebox__fa-calendar,.bone-datetimebox__picker-clock-trigger .bone-datetimebox__fa-clock{width:18px;height:18px;flex:none}.bone-datetimebox__calendar-panel{margin-top:8px;padding:8px;border:1px solid var(--bdtb-border);border-radius:8px;background:var(--bdtb-picker-surface,var(--bdtb-background));color:var(--bdtb-text)}.bone-datetimebox__calendar-panel[hidden]{display:none}.bone-datetimebox__calendar-nav{display:grid;grid-template-columns:34px 1fr 34px;gap:6px;align-items:center;margin-bottom:6px}.bone-datetimebox__calendar-title{text-align:center;color:var(--bdtb-text);font-size:.92rem}.bone-datetimebox__calendar-nav-button{height:30px;border:1px solid var(--bdtb-border);border-radius:6px;background:var(--bdtb-picker-header,var(--bdtb-picker-surface));color:var(--bdtb-text);font-size:1.25rem;line-height:1;cursor:pointer}.bone-datetimebox__calendar-nav-button:hover:not(:disabled){filter:brightness(1.08)}.bone-datetimebox__calendar-nav-button:disabled{opacity:.3;cursor:not-allowed}.bone-datetimebox__calendar-weekdays,.bone-datetimebox__calendar-days{display:grid;grid-template-columns:repeat(7,minmax(28px,1fr));gap:3px;text-align:center}.bone-datetimebox__calendar-weekdays{margin-bottom:3px;color:color-mix(in srgb,var(--bdtb-text) 72%,transparent);font-size:.72rem}.bone-datetimebox__calendar-weekdays span{padding:4px 0}.bone-datetimebox__calendar-days{grid-auto-rows:30px}.bone-datetimebox__calendar-blank{display:block}.bone-datetimebox__calendar-day{border:1px solid transparent;border-radius:6px;background:transparent;color:var(--bdtb-text);font-variant-numeric:tabular-nums;cursor:pointer}.bone-datetimebox__calendar-day:hover:not(:disabled){background:var(--bdtb-picker-header,var(--bdtb-picker-surface));border-color:var(--bdtb-border)}.bone-datetimebox__calendar-day.is-selected{background:var(--bdtb-effect-color);color:#fff;font-weight:700}.bone-datetimebox__calendar-day:disabled{opacity:.25;cursor:not-allowed}.bone-datetimebox__time-grid{display:grid;grid-template-columns:repeat(2,minmax(70px,1fr));gap:8px;margin-top:8px}.bone-datetimebox__time-grid[hidden]{display:none}.bone-datetimebox__time-column{display:grid;grid-template-columns:1fr;align-content:start;max-height:190px;overflow:auto;border:1px solid var(--bdtb-border);border-radius:8px;background:var(--bdtb-picker-surface,var(--bdtb-background));color:var(--bdtb-text)}.bone-datetimebox__time-column>strong{position:sticky;top:0;z-index:1;padding:6px;text-align:center;background:var(--bdtb-picker-header,var(--bdtb-picker-surface));color:var(--bdtb-text)}.bone-datetimebox__picker-option{border:0;border-radius:0;background:transparent;color:var(--bdtb-text);padding:6px}.bone-datetimebox__picker-option:hover:not(:disabled){background:var(--bdtb-picker-header,var(--bdtb-picker-surface))}.bone-datetimebox__picker-option.is-selected{background:var(--bdtb-effect-color);color:#fff;font-weight:700}.bone-datetimebox__picker-option:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--bdtb-text)}.bone-datetimebox__picker-apply{width:100%;margin-top:8px;border-color:var(--bdtb-border);background:var(--bdtb-picker-header,var(--bdtb-picker-surface));color:var(--bdtb-text)}
.bone-datetimebox__time-unit-heading{display:flex;align-items:center;justify-content:center;gap:4px;min-height:28px}.bone-datetimebox__time-unit-heading[data-visual="emoji"]{font-family:Meiryo,"Segoe UI Emoji","Apple Color Emoji",sans-serif;font-size:14px}.bone-datetimebox__time-unit-fa{display:inline-flex;align-items:center;justify-content:center;gap:4px}.bone-datetimebox__time-unit-fa .bone-datetimebox__fa-clock{width:13px;height:13px;fill:currentColor}
.bone-datetimebox__input::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important;width:0!important;margin:0!important;padding:0!important}.bone-datetimebox__input::-webkit-clear-button,.bone-datetimebox__input::-webkit-inner-spin-button{display:none!important}
.bone-datetimebox[data-appearance="normal"] .bone-datetimebox__input{border-width:1px;border-style:solid;border-radius:8px}.bone-datetimebox[data-appearance="flat"] .bone-datetimebox__input{border-width:1px;border-style:solid;border-radius:0;box-shadow:none}.bone-datetimebox[data-appearance="borderless"] .bone-datetimebox__input{border-color:transparent;border-radius:0;box-shadow:none}
.bone-datetimebox[data-inherit-parent="false"][data-position="top-left"]{justify-self:start;align-self:start}.bone-datetimebox[data-inherit-parent="false"][data-position="top-center"]{justify-self:center;align-self:start}.bone-datetimebox[data-inherit-parent="false"][data-position="top-right"]{justify-self:end;align-self:start}.bone-datetimebox[data-inherit-parent="false"][data-position="middle-left"]{justify-self:start;align-self:center}.bone-datetimebox[data-inherit-parent="false"][data-position="center"]{justify-self:center;align-self:center}.bone-datetimebox[data-inherit-parent="false"][data-position="middle-right"]{justify-self:end;align-self:center}.bone-datetimebox[data-inherit-parent="false"][data-position="bottom-left"]{justify-self:start;align-self:end}.bone-datetimebox[data-inherit-parent="false"][data-position="bottom-center"]{justify-self:center;align-self:end}.bone-datetimebox[data-inherit-parent="false"][data-position="bottom-right"]{justify-self:end;align-self:end}
.bone-datetimebox.is-readonly .bone-datetimebox__input{filter:saturate(.78)}.bone-datetimebox.is-disabled .bone-datetimebox__input{opacity:.55}.bone-datetimebox.is-invalid .bone-datetimebox__input{border-color:var(--bf-error)}.bone-datetimebox.is-dirty .bone-datetimebox__input{border-style:dashed}.bone-datetimebox[data-security-state="rejected"] .bone-datetimebox__input{border-color:#ff7b8a;background:#21131a}.bone-datetimebox.is-waiting .bone-datetimebox__input{border-color:#d5a733;box-shadow:0 0 0 3px rgba(255,200,87,.11)}.bone-datetimebox.is-blocked .bone-datetimebox__input{border-color:#eb5055;box-shadow:0 0 0 3px rgba(235,80,85,.14)}
.bone-datetimebox[data-inherit-parent="true"]{width:100%!important;height:100%!important;max-width:none;justify-self:stretch!important;align-self:stretch!important;color:var(--bdtb-parent-text,inherit);border:0!important;border-radius:var(--bdtb-parent-radius,inherit)}.bone-datetimebox[data-inherit-parent="true"] .bone-datetimebox__control{width:100%;height:100%;border:0!important;border-radius:var(--bdtb-parent-radius,inherit)}.bone-datetimebox[data-inherit-parent="true"] .bone-datetimebox__input{width:100%;height:100%;background:var(--bdtb-parent-background,inherit)!important;color:var(--bdtb-parent-text,inherit)!important;border:0!important;border-radius:var(--bdtb-parent-radius,inherit);box-shadow:none;text-align:var(--bdtb-parent-align,left)}.bone-datetimebox[data-inherit-parent="true"] .bone-datetimebox__input::placeholder{color:var(--bdtb-parent-text,inherit);opacity:.58}.bone-datetimebox[data-inherit-parent="true"] .bone-datetimebox__display{color:var(--bdtb-parent-text,inherit);justify-content:var(--bdtb-parent-justify,center);text-align:var(--bdtb-parent-align,left)}.bone-datetimebox[data-inherit-parent="true"] .bone-datetimebox__feedback{position:absolute;top:100%;left:0;right:0;z-index:9}

#datetimebox-host{display:grid;position:relative;width:100%;min-width:0;height:150px;min-height:150px;padding:14px;border:1px dashed #435872;border-radius:10px;background:#162234;color:#eaf2ff;overflow:visible}.bf-security-reason{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35;color:#f0c8ce}.bf-visual-status{margin-top:8px;color:var(--bf-sub);font-size:.85rem}

/* #027 formal connection image baseline */
#connection-images .bone-text-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#connection-images .bone-text-test-card{background:#101827;border:1px solid #31425a;border-radius:8px;padding:12px;min-width:0}#connection-images .bone-text-test-card--wide{grid-column:1/-1}#connection-images .bone-text-test-card h3{margin:0 0 4px;color:#f5f8fc;font-size:1rem}#connection-images .bone-text-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-text-usage-flow>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}#connection-images .bone-text-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-text-node strong{color:#55e6a5}#connection-images .bone-text-node--source strong{color:#65aaff}#connection-images .bone-text-node--text strong,#connection-images .bone-text-node--target strong{color:#67e487}#connection-images .bone-text-joint-diagnostic{display:grid;gap:5px;margin-top:8px}#connection-images .bone-text-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-text-joint-diagnostic strong{text-align:right;overflow-wrap:anywhere;color:#eef4ff}#connection-images .bone-text-usage-flow--in-missing,#connection-images .bone-text-usage-flow--in-mismatch,#connection-images .bone-text-usage-flow--out-missing,#connection-images .bone-text-usage-flow--out-mismatch{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center}#connection-images .bone-text-usage-flow--out-missing .bone-text-node--text{grid-column:1}#connection-images .bone-text-usage-flow--in-missing .bone-text-node--source{grid-column:1}#connection-images .bone-text-usage-flow--in-missing .bone-text-node--text{grid-column:2}#connection-images .bone-label-joint-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#connection-images .bone-label-joint-line{pointer-events:stroke}#connection-images .bone-text-joint-legend{margin-top:12px;border:1px solid #31425a;border-radius:8px;padding:10px;color:#cbd8e8}#connection-images .bone-text-joint-legend-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#connection-images .bone-text-joint-legend-line{display:inline-block;width:40px;height:3px;margin-right:8px;vertical-align:middle}#connection-images .bone-text-joint-legend-line.is-blue{background:#5ba6ff}#connection-images .bone-text-joint-legend-line.is-green{background:#4be06b}#connection-images .bone-text-joint-legend-line.is-orange{background:#f5a623}#connection-images .bone-text-joint-legend-line.is-red{background:#ff5b73}#connection-images .bf-joint-path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}#connection-images .bf-joint-end-error line{stroke:#ff475d;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}#connection-images .bf-joint-end-error-text{fill:#ff475d;font-size:22px;font-weight:900}#connection-images .bf-joint-label{pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}#connection-images .bf-joint-label text{font-family:Meiryo,"Yu Gothic",sans-serif;font-weight:700}

/* Security / Delivery */
.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-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}
.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;overflow:visible}.bf-delivery-stage .bf-delivery-overlay{z-index:7}.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}

/* Runtime QA / Completion */
.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-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-complete-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}

@media(max-width:900px){.bf-grid,.bf-property-grid{grid-template-columns:1fr}.bf-card--wide{grid-column:auto}.bf-parent-settings,.bf-self-settings,.bf-effect-settings{grid-template-columns:1fr}.bf-security-stage{grid-template-columns:1fr;gap:18px;min-height:360px;padding:18px}.bone-label-overall-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.bone-label-validation-list--columns{grid-template-columns:1fr}.bf-dependencies,.bf-completion{grid-template-columns:1fr 1fr}}
@media(max-width:760px){#connection-images .bone-text-test-grid{grid-template-columns:1fr}#connection-images .bone-text-test-card--wide{grid-column:auto}#connection-images .bone-text-joint-legend-items{grid-template-columns:1fr}}
@media(max-width:620px){.bf-page{width:min(100% - 20px,1280px);padding-top:14px}.bf-header h1{font-size:24px}.bone-datetimebox__picker{width:min(94vw,520px)}.bf-delivery-node{width:116px;font-size:.78rem}.bf-delivery-node--source{left:3%}.bf-delivery-node--target{right:3%}.bf-dependencies,.bf-completion{grid-template-columns:1fr}}


/* #032 composite DateTime Picker presentation: v1.0.10 outward form + formal #025/#024/#026 internals */
.bone-datetimebox__picker{position:absolute;top:calc(100% + 6px);z-index:2147482900;width:min(520px,95vw);min-width:100%;padding:10px;border:1px solid var(--bdtb-border);border-radius:10px;background:var(--bdtb-picker-background,var(--bdtb-background));color:var(--bdtb-text);box-shadow:0 16px 40px rgba(0,0,0,.42)}.bone-datetimebox__picker[hidden]{display:none!important}.bone-datetimebox[data-picker-position="left"] .bone-datetimebox__picker{left:0;right:auto;transform:none}.bone-datetimebox[data-picker-position="center"] .bone-datetimebox__picker{left:50%;right:auto;transform:translateX(-50%)}.bone-datetimebox[data-picker-position="right"] .bone-datetimebox__picker{right:0;left:auto;transform:none}
.bone-datetimebox__picker-header{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;align-items:center}.bone-datetimebox__picker-date-trigger,.bone-datetimebox__picker-clock-trigger{height:38px;padding:0 10px;border:1px solid var(--bdtb-border);border-radius:8px;background:var(--bdtb-picker-surface,var(--bdtb-background));color:var(--bdtb-text);cursor:pointer;font-size:var(--bdtb-icon-size)}.bone-datetimebox__picker-date-trigger{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;font-size:.9rem;font-variant-numeric:tabular-nums}.bone-datetimebox__picker-date-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bone-datetimebox__picker-clock-trigger{display:grid;place-items:center;width:38px;padding:0}.bone-datetimebox__picker-date-trigger:hover:not(:disabled),.bone-datetimebox__picker-clock-trigger:hover:not(:disabled){background:var(--bdtb-picker-header,var(--bdtb-picker-surface))}.bone-datetimebox__picker-date-trigger:disabled,.bone-datetimebox__picker-clock-trigger:disabled{opacity:.45;cursor:not-allowed}.bone-datetimebox__picker-date-trigger .bone-datepicker__fa-icon,.bone-datetimebox__picker-clock-trigger .bone-timepicker__fa-icon,.bone-datetimebox__trigger .bone-datepicker__fa-icon{width:18px;height:18px;display:block}
.bone-datetimebox__formal-date-host,.bone-datetimebox__formal-time-host{margin-top:8px}.bone-datetimebox__formal-date-host[hidden],.bone-datetimebox__formal-time-host[hidden]{display:none!important}.bone-datetimebox__formal-date-host>.bone-datepicker__panel,.bone-datetimebox__formal-time-host>.bone-timepicker__panel{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;max-width:none!important;box-shadow:none!important;z-index:auto!important}.bone-datetimebox__formal-date-host>.bone-datepicker__panel>.bone-calendar{width:100%!important;max-width:none!important;height:360px!important;box-shadow:none!important}.bone-datetimebox__formal-time-host>.bone-timepicker__panel{padding:8px!important}.bone-datetimebox__formal-time-host .bone-timepicker__columns{min-height:230px}.bone-datetimebox__formal-time-host .bone-timepicker__list{height:194px}.bone-datetimebox__formal-time-host .bone-timepicker__footer{display:none!important}.bone-datetimebox__picker-apply{width:100%;min-height:34px;margin-top:8px;padding:6px 10px;border:1px solid var(--bdtb-border);border-radius:7px;background:var(--bdtb-picker-header,var(--bdtb-picker-surface));color:var(--bdtb-text);cursor:pointer}.bone-datetimebox__picker-apply[hidden]{display:none!important}.bone-datetimebox__picker-apply:hover{filter:brightness(1.08)}

/* #032 formal Picker bridge: #025 DatePicker -> #024 Calendar / #026 TimePicker */
.bf-calendar-settings,.bf-timepicker-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-file-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 11px;border:1px solid #60738f;border-radius:7px;background:#172337;color:#e8eef7;cursor:pointer;font:inherit}.bf-file-button:hover{filter:brightness(1.08)}
.bf-annotation-note{margin:8px 0 10px;padding:9px 11px;border:1px solid #31425a;border-radius:8px;background:#0d1623;color:#aebbd0}