/* The Devices index as a tree (COMMAND-1633, public/device-tree): a PC, its projects, what runs there. The look of the List
   view's rows (app.css .lv-table, .lv-link); one indent step per level. Loaded by index.html after app.css. */

.device-tree { padding: 0; overflow: hidden; }
.device-tree ul { list-style: none; margin: 0; padding: 0; }
.dt-device { border-bottom: 1px solid var(--line); }
.dt-device:last-child { border-bottom: 0; }
.dt-row { display: flex; align-items: baseline; gap: 6px 12px; padding: 10px 12px; font-size: 0.92rem; }
.dt-device-row { flex-wrap: wrap; }
.dt-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dt-cells { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-left: auto; }
.dt-arrow {
  flex: none; align-self: center; width: 28px; height: 28px; min-height: 28px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; line-height: 1; cursor: pointer;
}
.dt-arrow { display: inline-grid; place-items: center; }
.dt-arrow svg { width: 16px; height: 16px; }
.dt-arrow:hover, .dt-arrow:focus-visible { background: var(--surface-2); color: var(--text); }
/* One indent step per level: the projects under a PC, the runs under a project. */
.dt-branch { padding-left: 34px; }
.dt-project .dt-row { padding-top: 6px; padding-bottom: 6px; }
.dt-project .dt-branch { padding: 0 12px 8px 46px; }
.dt-project .dt-branch > p { margin: 0; }
.dt-run { padding: 3px 0; overflow-wrap: anywhere; }
.dt-run-who { font-weight: 600; }
a.dt-run-title { color: var(--accent); text-decoration: none; }
@media (hover: hover) { a.dt-run-title:hover { text-decoration: underline; } }
/* On a phone the device item wraps under its name. */
@media (max-width: 640px) {
  .dt-cells { flex-basis: 100%; margin-left: 34px; }
  .dt-branch { padding-left: 20px; }
  .dt-project .dt-branch { padding-left: 32px; }
}