/* Hamster Times Explorer: a Windows 95 style site map, docked at the top of
   every page except the front page. See explorer.js for how it works. */

/* Make room for the title bar so it never covers the top of the page. */
html { padding-top: 30px; }

#ht-explorer,
#ht-explorer * { box-sizing: border-box; }

#ht-explorer {
  position: fixed;
  top: 4px;
  left: 4px;
  z-index: 2147483000;
  width: 380px;
  max-width: calc(100vw - 8px);
  padding: 3px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  font: 11px/13px Tahoma, "MS Sans Serif", Arial, Helvetica, sans-serif;
  color: #000;
  text-align: left;
}

/* The white-on-blue title bar, which is also the button that opens the window. */
#ht-explorer .ht-x-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: #000080;
  color: #fff;
  font: bold 11px/13px Tahoma, "MS Sans Serif", Arial, Helvetica, sans-serif;
  text-align: left;
  cursor: pointer;
}
#ht-explorer .ht-x-title:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
#ht-explorer .ht-x-title img { flex: none; width: 16px; height: 16px; margin-right: 3px; }
#ht-explorer .ht-x-title .ht-x-name { flex: 1; white-space: nowrap; }

/* A little 3D button on the right, with an arrow showing which way it will go. */
#ht-explorer .ht-x-arrow {
  position: relative;
  flex: none;
  width: 16px;
  height: 14px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
#ht-explorer .ht-x-arrow::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  border: 4px solid transparent;
  border-top: 4px solid #000;
  border-bottom-width: 0;
}
#ht-explorer.ht-x-open .ht-x-arrow {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
              inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
#ht-explorer.ht-x-open .ht-x-arrow::after {
  left: 5px;
  top: 5px;
  border: 4px solid transparent;
  border-bottom: 4px solid #000;
  border-top-width: 0;
}

/* The window that grows out of the title bar. */
#ht-explorer .ht-x-window {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.22s ease-out, visibility 0s linear 0.22s;
}
#ht-explorer.ht-x-open .ht-x-window {
  max-height: min(340px, 70vh);
  visibility: visible;
  transition: max-height 0.22s ease-out, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  #ht-explorer .ht-x-window,
  #ht-explorer.ht-x-open .ht-x-window { transition: none; }
}

/* The white, sunken pane the folders are drawn in. */
#ht-explorer .ht-x-pane {
  margin-top: 3px;
  padding: 4px 2px;
  max-height: calc(min(340px, 70vh) - 3px);
  overflow: auto;
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

#ht-explorer ul { margin: 0; padding: 0; list-style: none; }
#ht-explorer li { position: relative; margin: 0; padding: 0; }
#ht-explorer li ul { margin-left: 24px; }

/* The dotted lines joining each item to its folder. */
#ht-explorer li li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px dotted #808080;
}
#ht-explorer li li:last-child::before { bottom: auto; height: 9px; }
#ht-explorer li li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  border-top: 1px dotted #808080;
}

#ht-explorer .ht-x-row { position: relative; display: flex; align-items: center; height: 17px; white-space: nowrap; }
#ht-explorer .ht-x-gap { position: relative; flex: none; width: 16px; height: 17px; }
#ht-explorer .ht-x-row > img { flex: none; width: 16px; height: 16px; margin-right: 3px; }

/* The little box with a plus or minus in it. */
#ht-explorer .ht-x-toggle {
  position: absolute;
  left: 5px;
  top: 4px;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 1px solid #808080;
  border-radius: 0;
  background: #fff;
  cursor: default;
}
#ht-explorer .ht-x-toggle::before,
#ht-explorer .ht-x-toggle::after { content: ""; position: absolute; background: #000; }
#ht-explorer .ht-x-toggle::before { left: 1px; top: 3px; width: 5px; height: 1px; }
#ht-explorer .ht-x-toggle::after { left: 3px; top: 1px; width: 1px; height: 5px; }
#ht-explorer .ht-x-open > .ht-x-row .ht-x-toggle::after { display: none; }

/* Folder names and page links share one look. */
#ht-explorer .ht-x-label,
#ht-explorer a.ht-x-link,
#ht-explorer a.ht-x-link:visited {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font: inherit;
  text-decoration: none;
  cursor: default;
  text-align: left;
}
#ht-explorer a.ht-x-link { display: flex; align-items: center; cursor: pointer; }
#ht-explorer a.ht-x-link img { flex: none; width: 16px; height: 16px; margin-right: 3px; }
#ht-explorer .ht-x-text { display: block; padding: 1px 2px; }
#ht-explorer .ht-x-label:focus-visible,
#ht-explorer a.ht-x-link:focus-visible { outline: none; }
#ht-explorer .ht-x-label:focus-visible .ht-x-text,
#ht-explorer a.ht-x-link:focus-visible .ht-x-text { outline: 1px dotted #000; outline-offset: -1px; }

/* The page you are reading, highlighted the way Explorer highlights a selection. */
#ht-explorer a.ht-x-link[aria-current="page"] .ht-x-text { background: #000080; color: #fff; }
#ht-explorer a.ht-x-link[aria-current="page"]:focus-visible .ht-x-text { outline-color: #ff0; }

#ht-explorer .ht-x-folder:not(.ht-x-open) > ul { display: none; }

@media print {
  #ht-explorer { display: none; }
  html { padding-top: 0; }
}