@import url("https://software.schmorp.de/schmorpforge.css");

body {
   box-sizing: border-box;
   max-width: 1740px;
   min-height: 100vh;
   margin: 0 auto;
   padding: 2.2em;
   background: #f3f6fb;
   color: #263344;
   font: 15px/1.6 system-ui, sans-serif;
}

h1 {
   margin: 0 0 .4em;
   color: #153d57;
   font-size: 2.4em;
   font-weight: 650;
   line-height: 1.2;
   letter-spacing: -.03em;
}

h1::before {
   content: "";
   display: inline-block;
   width: .3em;
   height: .7em;
   margin-right: .4em;
   border-radius: 2px;
   background: #298abf;
}

h2
{
   border: 0;
   border-bottom: 1px solid #c5d4e5;
   margin: 1.7em 0 0;
   padding: 0 0 .4em;
   color: #15648f;
   font-size: 1.3em;
}

h2 + p {
   margin: .3em 0 .7em;
   padding: 0;
   color: #65778e;
   font-size: .86em;
}

h3 {
   margin: 1.7em 0 .7em;
   color: #15648f;
   font-size: 1.2em;
}

body > p {
   max-width: 100ch;
   margin: .5em 0;
   padding: 0;
   color: #536579;
}

hr {
   display: block;
   margin-top: 2em;
   border: 0;
   box-shadow: 0 0 5px 1px #44f;
}

.hfstatus {

   pre {
      box-sizing: border-box;
      overflow-x: auto;
      margin: .8em 0 1.6em;
      border: 1px solid #b9cadd;
      border-radius: 10px;
      background-color: black;
      color: #bbb;
      padding: 1.3em 1.5em;
      font-family: Hack, Andale Mono, monospace;
      background-image: linear-gradient(to bottom, transparent calc(100% - 2px), #113 calc(100% - 2px)), linear-gradient(black, black);
      background-size: 100% 1.55em, 100% 100%;
      background-repeat: repeat-y, no-repeat;
      background-origin: content-box, padding-box;
      background-clip: content-box, padding-box;
      line-height: 1.55em;
      white-space: pre;
   }

   m31 { display: inline; vertical-align: baseline; color: #b33; }
   m32 { display: inline; vertical-align: baseline; color: #3b3; }
   m33 { display: inline; vertical-align: baseline; color: #bb3; }
   m34 { display: inline; vertical-align: baseline; color: #66c; }
   m35 { display: inline; vertical-align: baseline; color: #b3b; }
   m36 { display: inline; vertical-align: baseline; color: #3bb; }
   m37 { display: inline; vertical-align: baseline; color: #ddf; }
   m91 { display: inline; vertical-align: baseline; color: #f00; }
   m92 { display: inline; vertical-align: baseline; color: #0f0; }
   m93 { display: inline; vertical-align: baseline; color: #ff0; }
   m94 { display: inline; vertical-align: baseline; color: #77f; }
   m95 { display: inline; vertical-align: baseline; color: #f0f; }
   m96 { display: inline; vertical-align: baseline; color: #0ff; }
   m97 { display: inline; vertical-align: baseline; color: #fff; }

   pre a {
      color: inherit;
      text-decoration: inherit;
   }

   pre a:hover {
      text-decoration: underline;
   }
}

.hfstatus body > m93 {
   color: #906000;
}

dl {
   display: grid;
   grid-template-columns: 12em minmax(0, 1fr);
   gap: 0 1em;
   margin: 1em 0 3em;
   padding: .5em 1.3em;
   border: 1px solid #c5d4e5;
   border-radius: 10px;
   background: white;
}

dt, dd {
   margin: 0;
   padding: .5em 0;
   border-bottom: 1px solid #dce4ed;
}

dt {
   color: #15648f;
   font-weight: 600;
}

dd {
   color: #536579;
}

dl > :nth-last-child(-n+2) {
   border-bottom: 0;
}

/*
.filter {
  position: relative;
  -webkit-filter: brightness(81%) saturate(113%);
  filter: brightness(81%) saturate(113%);
}
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  background: rgba(253, 62, 65, 0.91);
}

*/

.svg-defs {
   width: 0;
   height: 0;
}

.fineprint {
   font-size: 60%;
}

progress {
   border: none;
   width: 100%;
   border-radius: none;
}

.popup-menu {
   position: fixed;
   background: white;
   color: #263344;
   padding: 1em;
   border: 1px solid #c5d4e5;
   border-radius: 10px;
   box-shadow: 0 12px 30px #0003;
   z-index: 1000;
}

@media (max-width: 700px) {
   body { padding: 1em; }
   .hfstatus pre { font-size: 13px; padding: 1em; }
   dl { grid-template-columns: 1fr; }
   dt { padding-bottom: 0; border-bottom: 0; }
   dd { padding-top: 0; }
}

@media (prefers-color-scheme: dark) {

   body {
      background: #0b111a;
      color: #d4deeb;
   }

   h1 { color: #e6f1ff; }
   h1::before { background: #6cb8e8; }
   h2, h3 { color: #a8d8f6; }
   h2 { border-bottom-color: #2a3a4d; }
   h2 + p { color: #8f9fb3; }
   body > p { color: #aebccf; }
   .hfstatus pre { border-color: #26354a; }
   .hfstatus body > m93 { color: #ff0; }

   dl {
      background: #111a28;
      border-color: #26354a;
   }

   dt, dd { border-bottom-color: #273448; }
   dt { color: #a8d8f6; }
   dd { color: #b4c1d1; }

   .popup-menu {
      background: #192637;
      color: #e6f1ff;
      border-color: #456079;
   }

}