/* The right-hand dock: the shell and what every panel in it shares. */

#dock {
  position: fixed;
  top: var(--bar-h); right: 0; bottom: 0;
  width: var(--dock-w);
  overflow-y: auto;
  padding: 1rem;
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 9;
  display: flex;
  flex-direction: column;
}

/* custom elements are inline by default, so every panel has to be told it is a box */
#dock > * { display: block; margin-bottom: 1.5rem; }
#dock h2 { margin: 1.25rem 0 .5rem; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
#dock h2:first-child { margin-top: 0; }
#dock .hint, #dock .sub { color: var(--dim); font-size: 12px; }
#dock a { color: inherit; }

/* only the panels tagged with the dock's current tab are shown */
#dock > [data-tab] { display: none; }
#dock[data-tab=state] > [data-tab=state],
#dock[data-tab=analysis] > [data-tab=analysis],
#dock[data-tab=about] > [data-tab=about] { display: block; }

/* the source tab fills the dock, so its table can sit at the bottom */
#dock[data-tab=source] > [data-tab=source] { display: flex; flex-direction: column; flex: 1; }
x-source-panel table { margin-top: auto; }

/* scoped to #dock or the `#dock > *` display above wins and the flex gap never applies */
#dock > x-dock-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin: -1rem -1rem 1.25rem;
  padding: .7rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

x-dock-tabs .tab {
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim);
  padding-bottom: .2rem;
  border-bottom: 2px solid transparent;
}
x-dock-tabs .tab:hover { color: var(--ink); }
x-dock-tabs .tab.on { color: var(--ink); border-bottom-color: var(--ink); }

/* label and value, for the readouts that are not a ranked list */
table.kv th { width: 8rem; text-transform: none; font-size: 11.5px; }
table.kv td { text-align: left; }