<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="generator" content="hotsos" />
    <title>{{ hostname }} HotSOS Report</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .tree{
          --spacing : 1.5rem;
          --radius  : 10px;
        }
        .tree li{
          display      : block;
          position     : relative;
          padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
        }
        .tree ul{
          margin-left  : calc(var(--radius) - var(--spacing));
          padding-left : 0;
        }
        .tree ul li{
          border-left : 2px solid #ddd;
        }
        .tree ul li:last-child{
          border-color : transparent;
        }
        .tree ul li::before{
          content      : '';
          display      : block;
          position     : absolute;
          top          : calc(var(--spacing) / -2);
          left         : -2px;
          width        : calc(var(--spacing) + 2px);
          height       : calc(var(--spacing) + 1px);
          border       : solid #ddd;
          border-width : 0 0 2px 2px;
        }
        .tree summary{
          display : block;
          cursor  : pointer;
        }
        .tree summary::marker,
        .tree summary::-webkit-details-marker{
          display : none;
        }
        .tree summary:focus{
          outline : none;
        }
        .tree summary:focus-visible{
          outline : 1px dotted #000;
        }
        .tree li::after,
        .tree summary::before{
          content       : '';
          display       : block;
          position      : absolute;
          top           : calc(var(--spacing) / 2 - var(--radius));
          left          : calc(var(--spacing) - var(--radius) - 1px);
          width         : calc(2 * var(--radius));
          height        : calc(2 * var(--radius));
          border-radius : 50%;
          background    : #ddd;
        }
        .tree summary::before{
          content     : '+';
          z-index     : 1;
          background  : #696;
          color       : #fff;
          line-height : calc(2 * var(--radius) - 2px);
          text-align  : center;
        }
        .tree details[open] > summary::before{
          content : '−';
        }
    </style>
</head>
<body>
