/* BONE FLOW #054 Display Timeline CSS / Package Version 1.0.37 / Runtime 1.0.12 */
.bone-display-timeline{--bf-bg:#081223;--bf-panel:#0f1b31;--bf-axis:#0b1730;--bf-border:#294563;--bf-grid:rgba(96,165,250,.18);--bf-grid-strong:rgba(96,165,250,.45);--bf-text:#e5eefc;--bf-muted:#8fb4db;--bf-neutral:#d7dee9;--bf-focus:#38bdf8;--bf-comment:#fde047;--bf-comment-text:#1f2937;position:relative;display:block;width:100%;min-height:var(--bf-root-min-height,220px);padding:12px;background:var(--bf-bg);border:1px solid var(--bf-border);border-radius:10px;overflow:hidden}
.bone-display-timeline--light{--bf-bg:#ffffff;--bf-panel:#ffffff;--bf-axis:#ffffff;--bf-border:#94a3b8;--bf-grid:rgba(59,130,246,.16);--bf-grid-strong:rgba(59,130,246,.30);--bf-text:#0f172a;--bf-muted:#475569;--bf-neutral:#334155;--bf-comment:#fff8ae;--bf-comment-text:#111827}
.bone-display-timeline--neon{--bf-bg:#07101d;--bf-panel:#081525;--bf-axis:#071421;--bf-border:#1d4d77;--bf-grid:rgba(34,211,238,.14);--bf-grid-strong:rgba(34,211,238,.55);--bf-text:#defbff;--bf-muted:#7dd3fc;--bf-neutral:#d1fae5;--bf-focus:#22d3ee;--bf-comment:#fef08a;--bf-comment-text:#1f2937}
.bone-display-timeline__axis{position:relative;height:28px;background:var(--bf-axis);border:1px solid var(--bf-border);border-radius:8px 8px 0 0;overflow:hidden}
.bone-display-timeline__tick{position:absolute;left:var(--bf-pos);top:0;transform:translateX(-50%);width:52px;text-align:center;color:var(--bf-muted);font-size:11px;line-height:28px;height:28px}.bone-display-timeline__tick.is-first{transform:none;text-align:left;padding-left:4px}.bone-display-timeline__tick.is-last{transform:translateX(-100%);text-align:right;padding-right:4px}
.bone-display-timeline__tick-label{display:block;white-space:nowrap;overflow:visible}
.bone-display-timeline__track{position:relative;height:var(--bf-track-height,180px);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border:1px solid var(--bf-border);border-top:none;border-radius:0 0 8px 8px;overflow:hidden}.bone-display-timeline__track.is-axis-hidden{border-top:1px solid var(--bf-border);border-radius:8px}
.bone-display-timeline__grid{position:absolute;inset:0;pointer-events:none}
.bone-display-timeline__grid-line{position:absolute;left:var(--bf-pos);top:0;bottom:0;width:1px;transform:translateX(-50%);background:var(--bf-grid)}
.bone-display-timeline__grid--front{z-index:6}.bone-display-timeline__grid--front .bone-display-timeline__grid-line{background:var(--bf-grid-strong);opacity:.75}
.bone-display-timeline__bars,.bone-display-timeline__comments{position:absolute;inset:0}
.bone-display-timeline__bars{z-index:2}
.bone-display-timeline__comments{z-index:8;pointer-events:none;overflow:hidden}
.bone-display-timeline__item{position:absolute;left:var(--bf-start);width:var(--bf-size);top:var(--bf-top,12px);height:var(--bf-bar-height,64px);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid currentColor;border-radius:7px;color:var(--bf-neutral);background:var(--bf-item-bg,color-mix(in srgb,currentColor 12%,var(--bf-panel)));box-shadow:0 6px 16px rgba(0,0,0,.18);cursor:grab;user-select:none;touch-action:none;overflow:hidden;z-index:2;mix-blend-mode:var(--bf-blend-mode,normal);opacity:.96}
.bone-display-timeline__item.is-full-height{height:var(--bf-bar-height,64px);z-index:4}
.bone-display-timeline__item.is-selected{outline:2px solid var(--bf-focus);outline-offset:1px}
.bone-display-timeline__item.is-disabled{cursor:not-allowed;opacity:.45}
.bone-display-timeline__item--work{color:#d9e5cf}.bone-display-timeline__item--break{color:#d8e6f2}.bone-display-timeline__item--meeting{color:#fff200}.bone-display-timeline__item--info{color:#f6c36a}.bone-display-timeline__item--warning{color:#fca5a5}.bone-display-timeline__item--neutral{color:#cbd5e1}
.bone-display-timeline__item-label{color:var(--bf-item-text,var(--bf-text));font-weight:700;font-size:13px;overflow:visible;text-overflow:clip;white-space:normal;word-break:normal;overflow-wrap:normal;line-height:1.15;text-align:center;width:100%;max-width:100%}.bone-display-timeline__item.is-compact-label{padding:3px 2px;align-items:center;justify-content:center}.bone-display-timeline__item.is-compact-label .bone-display-timeline__item-label{font-size:11px;line-height:1.05;max-width:calc(100% - 4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap}.bone-display-timeline__label-line{display:block;white-space:nowrap}.bone-display-timeline__item.is-compact-label .bone-display-timeline__handle{width:12px;opacity:1}
.bone-display-timeline__item-time{display:none;font-size:11px;color:var(--bf-item-text,var(--bf-muted));white-space:nowrap;opacity:.9}
.bone-display-timeline__handle{position:absolute;top:0;bottom:0;width:12px;background:transparent;opacity:1;z-index:5}.bone-display-timeline__handle--start{left:0;cursor:ew-resize}.bone-display-timeline__handle--end{right:0;cursor:ew-resize}
.bone-display-timeline__comment{position:absolute;inset:0;pointer-events:none}
.bone-display-timeline__comment.is-selected .bone-display-timeline__comment-box{outline:2px solid var(--bf-focus);outline-offset:1px}
.bone-display-timeline__comment-anchor{position:absolute;left:var(--bf-anchor-left);top:var(--bf-anchor-top);transform:translate(-50%,-50%);width:10px;height:10px;border:2px solid #fbbf24;border-radius:50%;background:var(--bf-bg);z-index:2}
.bone-display-timeline__comment-svg{position:absolute;inset:0;overflow:visible}
.bone-display-timeline__comment-line-shape{stroke:#fbbf24;stroke-width:1.5;stroke-dasharray:4 3;fill:none}
.bone-display-timeline__comment-box{position:absolute;left:var(--bf-comment-left);top:var(--bf-comment-top);width:var(--bf-comment-width,96px);min-height:40px;max-height:76px;padding:6px 8px;background:var(--bf-comment-bg,var(--bf-comment));color:var(--bf-comment-text);border:1px solid #f59e0b;border-radius:5px;box-shadow:0 6px 14px rgba(0,0,0,.18);display:grid;gap:2px;align-content:start;cursor:grab;pointer-events:auto;overflow:hidden;touch-action:none;user-select:none}.bone-display-timeline__comment-box.is-dragging{cursor:grabbing}
.bone-display-timeline__comment-time{font-size:11px;font-weight:700;line-height:1.1}
.bone-display-timeline__comment-label{font-size:13px;font-weight:700;line-height:1.25;word-break:break-all;overflow-wrap:anywhere}
.bone-display-timeline__status{min-height:28px;padding:8px 2px 0;color:var(--bf-muted);font-size:12px}
.bf-display-timeline{display:block}
.bone-display-timeline.is-parent-snapped{width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.bone-display-timeline.is-parent-snapped .bone-display-timeline__status{display:none}
.bone-display-timeline.is-parent-snapped[style*="height: 100%"]{min-height:0}
.bone-display-timeline.is-parent-snapped .bone-display-timeline__axis{border-left:0;border-right:0;border-top:0;border-radius:0}
.bone-display-timeline.is-parent-snapped .bone-display-timeline__track{max-height:100%;border-left:0;border-right:0;border-bottom:0;border-radius:0}
.bone-display-timeline.is-parent-snapped .bone-display-timeline__track.is-axis-hidden{border-top:0;border-radius:0}
.bf-display-timeline[data-timeline-bar-height]{min-height:var(--bf-root-min-height,220px)}
/* Vertical: time increases downwards; stacked lanes spread horizontally. */
.bone-display-timeline--vertical{display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;column-gap:0}
.bone-display-timeline--vertical .bone-display-timeline__axis{grid-column:1;grid-row:1;width:62px;height:var(--bf-track-height,620px);border-radius:8px 0 0 8px;border-right:0;overflow:visible}
.bone-display-timeline--vertical .bone-display-timeline__tick{left:0;top:var(--bf-pos);width:100%;height:20px;line-height:20px;transform:translateY(-50%);text-align:left;padding-left:5px;font-size:11px}
.bone-display-timeline--vertical .bone-display-timeline__tick.is-first{transform:none;text-align:left;padding-left:5px}
.bone-display-timeline--vertical .bone-display-timeline__tick.is-last{transform:translateY(-100%);text-align:left;padding-right:0}
.bone-display-timeline--vertical .bone-display-timeline__track{grid-column:2;grid-row:1;width:100%;height:var(--bf-track-height,620px);min-height:0;border:1px solid var(--bf-border);border-radius:0 8px 8px 0}
.bone-display-timeline--vertical[data-timeline-axis-visible="false"] .bone-display-timeline__track{grid-column:1/-1;border-radius:8px}
.bone-display-timeline--vertical .bone-display-timeline__grid-line{left:0;right:0;top:var(--bf-pos);bottom:auto;width:100%;height:1px;transform:translateY(-50%)}
.bone-display-timeline--vertical .bone-display-timeline__item{left:var(--bf-top,12px);top:var(--bf-start);width:var(--bf-bar-height,64px);height:var(--bf-size);min-height:0;flex-direction:column;padding:8px 5px}
.bone-display-timeline--vertical .bone-display-timeline__item.is-full-height{height:var(--bf-size)}
.bone-display-timeline--vertical .bone-display-timeline__handle{left:0;right:0;width:100%;height:12px;top:auto;bottom:auto;cursor:ns-resize}
.bone-display-timeline--vertical .bone-display-timeline__handle--start{top:0}
.bone-display-timeline--vertical .bone-display-timeline__handle--end{bottom:0}
.bone-display-timeline--vertical .bone-display-timeline__status{grid-column:1/-1;grid-row:2}
.bone-display-timeline--vertical.is-parent-snapped .bone-display-timeline__axis{border-left:0;border-top:0;border-radius:0}
.bone-display-timeline--vertical.is-parent-snapped .bone-display-timeline__track{max-height:none;border-top:0;border-right:0;border-bottom:0;border-radius:0}
@media (max-width: 900px){.bone-display-timeline__tick{width:42px;font-size:10px}.bone-display-timeline__item-label{font-size:12px}.bone-display-timeline__comment-box{width:min(128px,calc(100% - 8px))}}

.bone-display-timeline--light .bone-display-timeline__axis,.bone-display-timeline--light .bone-display-timeline__track{background:#ffffff}
@media print{.bone-display-timeline,.bone-display-timeline--light,.bone-display-timeline.is-parent-snapped{background:#fff!important;color:#000!important;box-shadow:none!important}.bone-display-timeline__axis,.bone-display-timeline__track{background:#fff!important}}

/* #054 v1.0.31: vertical time bars occupy the full #048 column track; comments are inside bars. */
.bone-display-timeline--vertical .bone-display-timeline__item{
  left:-1px;width:calc(100% + 2px);max-width:none;box-sizing:border-box;
  justify-content:flex-start;align-items:flex-start;text-align:left;padding:4px 6px;
}
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-shape-bar{z-index:5}
.bone-display-timeline--vertical .bone-display-timeline__item .bone-display-timeline__item-label{
  width:100%;max-width:100%;text-align:inherit;white-space:normal;overflow-wrap:anywhere;
  font-size:12px;line-height:1.15;
}
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-position-top-left{
  justify-content:flex-start;align-items:flex-start;text-align:left;
}
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-position-center{
  justify-content:center;align-items:center;text-align:center;
}
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-position-bottom{
  justify-content:flex-end;align-items:center;text-align:center;
}
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-position-center .bone-display-timeline__item-label,
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-position-bottom .bone-display-timeline__item-label{text-align:center}

/* #054 v1.0.31: legacy lane division removed; Item-defined foreground retains full width. */

/* #054 v1.0.34: targeted foreground bars anchor to a lane edge. */
.bone-display-timeline__item.is-foreground-overlap{isolation:isolate}


/* #054 v1.0.32: vertically-rendered bars fill the actual #048 cell track. */
.bone-display-timeline--vertical .bone-display-timeline__item,
.bone-display-timeline--vertical .bone-display-timeline__item.is-vertical-shape-bar{
  box-sizing:border-box!important;left:-1px;width:calc(100% + 2px);
  min-width:0;max-width:none!important;white-space:normal;
}
.bone-display-timeline--vertical .bone-display-timeline__item-label{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* #054 v1.0.34: one stacking context for bars AND horizontal shape comments.
   Keep the .comments holder static: positioned comment items are anchored by .bars
   and their per-item z-index competes directly with bar z-index. */
.bone-display-timeline__bars>.bone-display-timeline__comments{
  position:static;inset:auto;z-index:auto;overflow:visible;pointer-events:none;
}
.bone-display-timeline__bars>.bone-display-timeline__comments>.bone-display-timeline__comment{
  position:absolute;inset:0;pointer-events:none;
}
.bone-display-timeline__comment.is-foreground-overlap .bone-display-timeline__comment-box{
  opacity:1;
}
.bone-display-timeline__item.is-foreground-overlap{
  opacity:1;
}

/* 1.0.34 — Each foreground Item is anchored to the requested side.
   Underlying full-lane bar is not shrunk; no extra lanes. */
.bone-display-timeline--vertical .bone-display-timeline__item[data-overlap-placement="left"]{left:0!important;width:50%!important;right:auto!important}
.bone-display-timeline--vertical .bone-display-timeline__item[data-overlap-placement="right"]{left:50%!important;width:50%!important;right:auto!important}
.bone-display-timeline--horizontal .bone-display-timeline__item[data-overlap-placement="top"]{top:var(--bf-top)!important;height:calc(var(--bf-bar-height) / 2)!important}
.bone-display-timeline--horizontal .bone-display-timeline__item[data-overlap-placement="bottom"]{top:calc(var(--bf-top) + var(--bf-bar-height) / 2)!important;height:calc(var(--bf-bar-height) / 2)!important}

/* v1.0.34 precise physical heights, including border/padding */
.bone-display-timeline--horizontal .bone-display-timeline__item{box-sizing:border-box}

/* v1.0.36 — vertical text fit mode */
.bone-display-timeline--vertical .bone-display-timeline__item.is-text-fit-shrink .bone-display-timeline__item-label{overflow-wrap:anywhere;word-break:break-word}
.bone-display-timeline--vertical .bone-display-timeline__item.is-text-fit-expand-column .bone-display-timeline__item-label{font-size:12px;line-height:1.15}