/* Layouts of the UIs: the timeline app's toolbar and bottom split, the drill-down's
   pages, and the detail panel shared by both. */

.app-timeline { display: flex; flex-direction: column; }
.app-timeline > .dash { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drill-chippage { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drill-hint { font-size: 11px; padding: 0 12px; }
/* The timeline is as tall as its rows (the app sets --tl-rows), so a slice of a few
   rows leaves its height to the panels below rather than to an empty grid; a long row
   list scrolls inside 70% of the page. */
.app-timeline .dash > .tl { flex: 0 1 auto; flex-basis: calc(var(--tl-rows, 100vh) + 26px); min-height: 160px; max-height: 70%; }
.toolbar { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; font-size: 12px; flex-wrap: wrap; }
.toolbar button.on { background: var(--hi); border-color: var(--accent); }
.toolbar .grp { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; border: 1px solid var(--line); border-radius: 4px; }
.toolbar .glbl { color: var(--dimmer); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 4px 0 2px; }
.toolbar .help { margin-left: auto; font-size: 11px; }
.minimap { padding: 2px 8px 4px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.minimap .sm-brush { margin: 4px 0 2px; }
.minimap .sm-brush-info { margin: 0; }
.bottom { display: flex; gap: 6px; flex: 1; min-height: 240px; padding: 6px; border-top: 1px solid var(--line); background: var(--panel-2); }
.bottom-left { width: 46%; min-width: 320px; overflow: auto; }
.bottom-right { flex: 1; overflow: auto; }
.bottom-left[hidden] + .bottom-right { width: 100%; }

.stalls { padding: 4px 8px; }
.stalls-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 12px; }
.stalls-head input { flex: 1; }
.stalls table { width: 100%; }

/* The panel is a column whose listing box takes what the sections above it leave, so
   the common case has one scrollbar, the box's, centred on the pc, and not one inside
   another. */
.detail { padding: 6px 10px; font-size: 12px; display: flex; flex-direction: column; box-sizing: border-box; min-height: 100%; }
.detail > * { flex: none; }
.detail-head { margin-bottom: 4px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.detail-head button.expand { margin-left: auto; }
.detail-sec { margin: 8px 0 2px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.detail .kv { margin: 2px 0; }
.detail a.act { display: block; margin: 1px 0; }
.detail .slots { margin: 4px 0; }
.detail .listing { position: relative; flex: 1 1 120px; min-height: 120px; overflow: auto; border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; font-size: 11px; }
.detail .lrow { display: flex; gap: 6px; padding: 1px 2px; cursor: pointer; white-space: nowrap; }
.detail .lrow:hover { background: var(--hi); }
.detail .lrow.on { background: var(--hi); outline: 1px solid var(--sel); }
.detail .lpc { color: var(--dimmer); min-width: 40px; text-align: right; }
.detail .tiles { display: grid; grid-template-columns: repeat(8, 22px); gap: 2px; margin: 6px 0; }
.detail .tile { text-align: center; font-size: 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--dimmer); }
.detail .tile.on { background: var(--sc); color: var(--bg); border-color: var(--sc); }
.detail .card { margin-top: 8px; padding: 6px 10px; }

/* drill-down */
.app-drill { display: flex; flex-direction: column; }
.drill-map { flex: 1; overflow: auto; }
.drill-map .sm { max-height: none; border-bottom: none; }
.drill-table { padding: 6px 12px; }
.drill-bar { display: flex; gap: 8px; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; font-size: 12px; flex-wrap: wrap; }
.drill-bar button.on { background: var(--hi); border-color: var(--accent); }
.drill-bar .help { margin-left: auto; font-size: 11px; }
.drill-stack { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drill-tl { flex: 0 0 44%; min-height: 140px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.drill-tl .tl { flex: 1; }
.drill-stack .unitboxes { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; border-top: 1px solid var(--line); background: var(--panel); flex: none; }
.drill-stack .ubox { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; min-width: 90px; font-size: 11px; }
.drill-stack .ubox .ut { color: var(--dim); font-size: 10px; }
.drill-stack .ubox.live { border-color: var(--accent); }
.drill-detail { flex: 0 0 auto; max-height: 30%; overflow: auto; margin: 4px 8px; }
.drill-listing { flex: 1; min-height: 0; overflow: auto; font-size: 11px; position: relative; }
/* Rows are virtual: each sits at the y the layout gave it over a spacer as tall as
   the whole listing, and only the rows on screen exist. */
.drill-listing .lspacer { width: 1px; }
/* A bundle's slots flow onto a second line rather than off the right edge: nothing
   in the listing needs a sideways scroll. */
.drill-listing .lrow { position: absolute; left: 0; right: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 1px 6px; cursor: pointer; }
.drill-listing .lrow > span { white-space: nowrap; }
.drill-listing .lrow:hover { background: var(--hi); }
.drill-listing .lrow.on { background: var(--hi); outline: 1px solid var(--sel); }
.drill-listing .lrow.nop { color: var(--dimmer); }
.drill-listing .lpc { color: var(--dimmer); min-width: 44px; text-align: right; }
.drill-listing .lcount { color: var(--dimmer); min-width: 36px; text-align: right; font-size: 10px; }
.drill-listing .lcell { flex: none; }
.drill-listing .lcell .sn { color: var(--dimmer); font-size: 10px; margin-right: 3px; }
.drill-listing .lcell .mn { font-weight: 600; }
.drill-listing .lsep { color: var(--line); flex: none; margin: 0 2px; }
/* The listing's column names, above the scrolling rows and aligned with them. */
.drill-stack > .lhead { display: flex; gap: 6px; padding: 1px 6px; font-size: 11px; color: var(--dim); background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.drill-stack > .lhead .lpc { min-width: 44px; text-align: right; }
.drill-stack > .lhead .lcount { min-width: 36px; text-align: right; }
.drill-bar button.guide-open { margin-left: 8px; }