/* The colour band, the day strip, the heatmap frame and its label gutter. */

/* ---- colour legend, in the heatmap controls box ---- */
.legend{margin:0;padding:0}
.legend .lt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.legend .lt b{color:var(--text);letter-spacing:0;text-transform:none;font-size:12.5px}
.barwrap{position:relative;height:15px;touch-action:none}
.bar{height:15px;border-radius:4px;border:1px solid var(--line-2)}
.veil{position:absolute;top:0;height:15px;background:rgba(9,14,20,.78);pointer-events:none;
  border-radius:4px}
.grip{position:absolute;top:-4px;width:11px;height:23px;margin-left:-5.5px;border-radius:3px;
  background:var(--text);border:1px solid #0d1520;cursor:ew-resize;
  box-shadow:0 1px 4px rgba(0,0,0,.6)}
.grip:hover,.grip.on{background:#fff}
.grip::after{content:'';position:absolute;left:4px;top:6px;width:1px;height:9px;background:#4a5a6c}
.legend .lt .rng{float:right;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--text-3)}
.legend .lt .rng b{font-family:var(--mono);font-size:11.5px}
.legend .lt .rng a{margin-left:9px;color:var(--text-3);cursor:pointer;text-decoration:underline}
.legend .lt .rng a:hover{color:var(--text)}
.ticks{position:relative;height:17px;margin-top:5px}
.ticks span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:var(--text-3)}
.ticks span i{display:block;width:1px;height:4px;background:var(--line-2);margin:0 auto 2px}
.ticks span.lo{color:var(--text-2);transform:none;left:0}
.ticks span.lo i{margin:0 0 2px}

/* ---- chart frame: rotated y title + clickable label gutter + plot ---- */
.strip{margin:0 0 14px;padding:11px 14px 4px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:9px}
.strip-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.strip-h b{color:var(--text);letter-spacing:0;text-transform:none;font-size:12.5px}
.strip-h #stripHint{float:right;text-transform:none;letter-spacing:0;font-family:var(--mono);font-size:10.5px}
.strip-h .stripreset{float:right;margin:-3px 0 0 12px;padding:3px 10px;font-size:10.5px;
  border-radius:6px;text-transform:none;letter-spacing:0}
/* the heatmap is drawn at its full height - the window's scrollbar moves it */
/* overflow:clip, not hidden: it keeps the controls box riding on the heatmap inside its
   frame, so it slides in and out with it instead of floating over the tabs above, and
   unlike hidden it does not make a scroll box, so position:sticky still follows the window */
.scroll{overflow:clip;border:1px solid var(--line);border-radius:8px;background:#101a26;position:relative}
/* ---- Time arcs, the band above the heatmap (js/arcs.js) ---- */
/* the Time arcs are a tab of the network chart; their zoom buttons live in its bar */
.netbar .arctools{display:flex;gap:5px;flex:0 0 auto}
/* as tall as the other tabs; the band scrolls inside it */
.arcscroll{overflow-y:auto;overflow-x:hidden;padding:2px 0 4px}
.arcscroll::-webkit-scrollbar{width:10px}
.arcscroll::-webkit-scrollbar-track{background:var(--ink-2)}
.arcscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
.arcwrap{position:relative}
#arcsvg{display:block;width:100%;height:100%}
/* a name stands just before its own first arc, out among the others, so it carries a
   dark outline to stay readable wherever it lands */
#arcsvg text{font-family:var(--mono);font-size:9.5px;paint-order:stroke;
  stroke:#101a26;stroke-width:2.6px;stroke-linejoin:round}
#arcsvg text.sm{font-size:8.5px;stroke-width:2.2px}

/* The dates, stuck to the foot of the window: the charts scroll behind them and they are
   still there when the page is at the bottom. Kept low: they are all it holds. */
.footbar{position:sticky;bottom:0;z-index:20;background:var(--panel);
  border-top:1px solid var(--line);margin:0 -16px -13px;padding:1px 16px 3px}
.taxis{margin-top:0}
#timeaxis{height:31px}
/* "July", after the last date, reaches a few pixels past the chart's own box into the foot
   bar's padding: let it show there instead of being cut */
#timeaxis .main-svg{overflow:visible}
.scroll::-webkit-scrollbar{width:10px}
.scroll::-webkit-scrollbar-track{background:var(--ink-2)}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
.inner{display:flex;align-items:stretch}
.ytitle{flex:0 0 26px;position:relative;border-right:1px solid var(--line)}
.ytitle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;white-space:nowrap;font-size:11.5px;letter-spacing:.05em;color:var(--text-2)}
/* as narrow as the longest label needs (113 px in June: an H100 node row, "▸ rpg-93-1 24"),
   so the heatmap - and the dates, the Time arcs, the day strip and the hour slider, which
   all follow its axis - get the rest of the width (was 212 px until 2026-09-29) */
.gutter{flex:0 0 120px;position:relative;border-right:1px solid var(--line);user-select:none}
.gutter .r{position:absolute;left:0;right:0;display:flex;align-items:center;padding:0 8px 0 9px;
  font-family:var(--mono);font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden}
.gutter .r.g{cursor:pointer;color:var(--text-2);font-size:11.5px}
.gutter .r.g:hover{background:#1b293a;color:var(--text)}
.gutter .r.g b{color:var(--text);font-weight:600}
.gutter .r .tw{display:inline-block;width:11px;color:var(--text-3)}
.gutter .r .ct{margin-left:6px;color:var(--text-3);font-size:9.5px}
.gutter .r.m{padding-left:26px}
.gutter .r.dim,.gutter .r.dim b{color:#4a5a6c}   /* rows with nothing highlighted */
.gutter .r.p{font-size:11.5px;letter-spacing:.09em;color:var(--text);font-weight:800;
  cursor:pointer}
.gutter .r.p:hover{background:#1b293a;color:var(--text)}
.plotcol{flex:1 1 auto;min-width:0}

/* general, and narrow windows - kept after the rules they narrow */
.plot{width:100%}
.hint{font-size:12px;color:var(--text-3);font-family:var(--mono);margin-top:10px}
footer{margin-top:34px;padding-top:17px;border-top:1px solid var(--line);color:var(--text-3);
  font-size:12px;font-family:var(--mono)}
@media(max-width:820px){ .wrap{padding:0 13px 36px} h1{font-size:20px} .scroll{height:520px} }

/* ---- who is highlighted: the two lines between the tabs and the heatmap (highlight.js):
   the word Highlighted and the people, and under it the three modes, the count and clear,
   which are always there and locked until two or more people are picked ----
   Its first word starts right above the word H100 in the first row label: the heatmap's
   frame border (1 px) + the rotated axis title (26 px) + that label's indent (2 px) + the
   open/close arrow in front of it (11 px). */
.hlmenu{margin:0 0 8px;padding:0;font-size:11.5px}
.hl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:24px}
.hl-row + .hl-row,.hl-list + .hl-row{margin-top:5px}
.hl-title{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--text)}
/* the people: always as tall as all of them would need at this width (hlReserve), so
   picking more never pushes the heatmap down; they sit at the bottom of that room, right
   above the heatmap */
.hl-list{display:flex;flex-wrap:wrap;align-content:flex-end;gap:3px;margin-top:6px;overflow:hidden}
/* compact, and sized in em from --hlfs: hlReserve() picks the largest size at which all 37
   people fit on two lines at the current width */
.hl-user{display:inline-flex;align-items:center;gap:.35em;padding:.15em .1em .15em .5em;border:1px solid var(--line-2);
  border-radius:4px;background:var(--ink-2);font-family:var(--mono);font-size:var(--hlfs,10.5px);color:var(--text);
  line-height:1.35}
.hl-user .sw{width:.75em;height:.75em;border-radius:2px;flex:0 0 auto;border:1px solid rgba(255,255,255,.25)}
.hl-user .hl-x{font-size:1em;padding:0 .3em;line-height:1}
.hl-clear,.hl-x{background:none;border:0;color:var(--text-3);cursor:pointer;
  font-family:var(--mono);font-size:11px;padding:0 3px;line-height:1.2}
.hl-clear:hover:not(:disabled),.hl-x:hover{color:var(--text)}
.hl-clear:disabled{opacity:.4;cursor:default}
.hl-modes{display:inline-flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.hl-mode{background:var(--ink-2);border:0;border-right:1px solid var(--line-2);
  color:var(--text-2);font-family:var(--mono);font-size:10.5px;padding:4px 10px;cursor:pointer}
.hl-mode:last-child{border-right:0}
.hl-mode:hover{color:var(--text)}
.hl-mode.on{background:#24466e;color:#eaf1fb}
/* fewer than two people: the modes mean nothing yet, so they are shown but locked */
.hl-modes.locked{opacity:.45}
.hl-modes.locked .hl-mode{cursor:not-allowed}
.hl-modes.locked .hl-mode:hover{color:var(--text-2)}
.hl-count{font-family:var(--mono);font-size:10.5px;color:var(--text-3)}

/* ---- the heatmap's controls, riding on its top right --------------------------------
   The box hangs from a zero-height pin that is position:sticky inside the heatmap's
   frame, so it follows the window while the heatmap is on screen and never leaves it.
   The offset under the row of people is measured by placePins() in controls.js. */
.minipin{position:sticky;top:0;height:0;z-index:15;pointer-events:none}
.minimenu{position:absolute;pointer-events:auto;background:rgba(20,31,46,.96);
  border:1px solid var(--line-2);border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
/* folds down to its title button */
.minimenu{top:8px;right:24px;width:318px;padding:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-end}
.minimenu .mm-body{align-self:stretch}
.mm-body{padding:10px 12px 9px;border-top:1px solid var(--line)}
.minimenu.shut .mm-body{display:none}
.minimenu.shut{width:auto}
.mm-body .legend .lt{margin-bottom:7px;font-size:10px}
.mm-body .legend .lt b{font-size:11.5px}
.mm-body .ticks{height:15px;margin-top:3px}
.mm-body .ticks span{font-size:9.5px}
.mm-body .ctl{margin-top:9px}
.mm-body .ctl label{font-size:9.5px;margin-bottom:3px}
.mm-body select{padding:4px 7px;font-size:11px}
.mm-body .ctl.slider{min-width:0}
.mm-body input[type=range]{margin:6px 0 2px}
.mm-two{display:flex;gap:8px}
.mm-two .ctl{flex:1 1 0}
.mm-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.mm-foot .btn{padding:4px 11px;font-size:11px;white-space:nowrap}
.mm-stat{font-family:var(--mono);font-size:10.5px;color:var(--text-3);white-space:nowrap}
.mm-stat b{color:var(--text-2)}
/* a small button in the box's top right corner; folded, the box is just this button */
.mm-toggle{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  padding:3px 8px;color:var(--text-2);font-family:var(--mono);font-size:10.5px;cursor:pointer;
  white-space:nowrap}
.mm-toggle:hover{color:var(--text);background:#1b293a}
.mm-car{transition:transform .12s}
.minimenu.shut .mm-car{transform:rotate(-90deg)}