/* ===== Top-down family-tree chart (nested <ul>/<li> with CSS connector lines) =====
   Shared by the Incidents Tree page and the Command Wall so both render the same
   org-chart of boxes joined by connector rails (not a flat list).
   Root level (.ot-chart > li) = independent event boxes, side by side, no connectors.
   Nested levels draw the classic org-chart rails in the theme border colour. */
.ot-chart { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start;
            list-style: none; margin: 0; padding: .25rem 0 0 0; }
.ot-chart > li { padding: 0; }
.ot-chart ul { display: flex; justify-content: center; list-style: none;
               margin: 0; padding: 18px 0 0 0; position: relative; }
.ot-chart ul::before { content: ''; position: absolute; top: 0; left: 50%;
                       border-left: 2px solid var(--bs-border-color); height: 18px; }
.ot-chart ul > li { display: flex; flex-direction: column; align-items: center;
                    position: relative; padding: 18px 6px 0 6px; }
.ot-chart ul > li::before { content: ''; position: absolute; top: 0; right: 50%;
                            width: 50%; height: 18px; border-top: 2px solid var(--bs-border-color); }
.ot-chart ul > li::after  { content: ''; position: absolute; top: 0; left: 50%;
                            width: 50%; height: 18px; border-top: 2px solid var(--bs-border-color);
                            border-left: 2px solid var(--bs-border-color); }
.ot-chart ul > li:first-child::before { display: none; }
.ot-chart ul > li:last-child::after { border-top: none; }
.ot-chart ul > li:only-child { padding-top: 0; }
.ot-chart ul > li:only-child::after { display: none; }

/* node boxes */
.ot-node { position: relative; background: var(--bs-tertiary-bg);
           border: 1px solid var(--bs-border-color); border-radius: .4rem;
           padding: .4rem .6rem .4rem .8rem; min-width: 11rem; max-width: 18rem;
           font-size: .85rem; text-align: left; }
.ot-bar { position: absolute; left: 0; top: -1px; bottom: -1px; width: 4px;
          border-radius: .4rem 0 0 .4rem; background: var(--agency, var(--bs-border-color)); }
.ot-event { background: var(--bs-secondary-bg); border-width: 2px; }
.ot-toggle { cursor: pointer; }
.ot-gap { border-color: var(--bs-warning); }
.ot-title { font-weight: 600; line-height: 1.25; }
.ot-sub { font-size: .76rem; display: flex; gap: .35rem; align-items: center;
          flex-wrap: wrap; margin-top: .15rem; }
.ot-chips { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem; max-width: 17rem; }
.ot-caret { margin-left: auto; transition: transform .15s; }
.ot-event-li:not(.ot-collapsed) .ot-caret { transform: rotate(180deg); }
.ot-event-li.ot-collapsed > ul.ot-children { display: none; }

/* page furniture (Tree page) */
.ot-region-head { background: var(--bs-secondary-bg); padding: .45rem .65rem;
                  border-radius: .35rem; margin-bottom: .6rem; }
.ot-scroll { overflow-x: auto; padding-bottom: .4rem; }
.ot-planned { margin-top: .65rem; }

/* per-event hide control (client-side, this browser only) */
.ot-hide-btn { position: absolute; top: 2px; right: 4px; padding: 0 .15rem; line-height: 1;
               border: 0; background: transparent; color: var(--bs-secondary-color);
               opacity: 0; transition: opacity .12s; font-size: .8rem; cursor: pointer; z-index: 2; }
.ot-event:hover .ot-hide-btn { opacity: .8; }
.ot-hide-btn:hover { opacity: 1 !important; color: var(--bs-danger); }
.ot-event-li.ot-force-hidden { display: none; }