@import url('https://fonts.googleapis.com/css?family=Inter');
:root {	
  font-family:  inter, sans-serif, system-ui;
  --eargoOrange: rgb(207,69,32);
  --eargoGreen: rgb(32,95,52);
  --eargoRed: rgb(129,46,39);
  --eargoYellow: rgb(214,161,52);
  --eargoBlue: rgb(44,85,126);
  --eargoBlack: rgb(33,35,34);
  --eargoBlackInverse: rgb(222,220,221);
  --eargoOrangeClear: rgba(207,69,32,0.5);
  --eargoRedClear: rgba(129,46,39,0.5);
  --eargoBlueClear: rgba(44,85,126,0.5);
  accent-color: var(--accent-color, var(--eargoOrange));
}



body {
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
  0height: 100vh;
  display: flex;
  flex-direction: column;
  place-items: center;
  0padding: 1rem;
  0gap: 1rem;
  0border: 1px grey dashed;
  0overflow: hidden;
}

.displayNone {  display: none !important;}

h1 {
  text-align: center;
  font-weight: 900;
  font-size: 1.4rem;
  0user-select: none;
  max-inline-size: none;
  margin: 0;
}

div.step {
  0border: 1px green dashed;
  transition: all 300ms;
  
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 1rem;
  max-height: 42rem;
  overflow: hidden;
  0box-sizing: border-box;
}
h2 {
  font-weight: 900;
  font-size: 1.4rem;
}

.message {
  border: var(--eargoOrange) 2px solid;
  padding: 0 1rem 1rem 1rem;
  border-radius: 1rem;
  color: var(--eargoOrange);
  max-width: 35rem;
  transition: all 300ms;
  max-height: 15rem;
  overflow: hidden;
  0box-sizing: border-box;
  opacity: 1;
  margin: 1rem;
  background: rgb( from var(--eargoOrange) r g b / 5%);
}
.success {
  border: var(--eargoGreen) 2px solid;
  color: var(--eargoGreen);
  background: rgb( from var(--eargoGreen) r g b / 5%);
}
.message button.orange {
  margin: 1rem auto;
  display: flex;
}
p.choice  {
  padding-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hide.hide.hide {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
}

button.orange { 
  cursor: pointer;
  outline: 0;
  user-select: none;
  line-height: 1.75;
  min-width: 64px;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  appearance: none;
  font-weight: 600;
  background-color: var(--eargoOrange);
  color: white;
  border-radius: 40px;
  padding: 8px 24px;
  border: 0px solid var(--eargoOrange);  
  transition: all 300ms;
}
button.orange:hover {
 
  background-color: color-mix(in hsl, var(--eargoOrange) 80%, black 20%);
}

div.step.bouncingArrow {
  0border: 1px blue dashed;
  position: relative; 
  display: flex;
  flex-direction: row;
  place-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}
.bouncingArrow>div {
  0border: 1px red dashed;
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 1rem;
  overflow: hidden;
}
.bouncingArrow .leftMargin {
  min-width: 600px;
}
.bouncingArrow .centerContent {
  min-width: 250px;
}
.bouncingArrow .rightMargin {
  width: 600px;
}
.arrow { 
  width: 200px; 
  fill: var(--eargoOrange);
  position: relative; 
  animation: slide 1s infinite alternate;
  0border: 1px red dashed;
} 
@keyframes slide { 
  0% { transform: translateX(20px); } 
  100% { transform: translateX(-20px); } 
}

svg.logoSpin {
  transform-origin: center;
  animation: spin 2s ease infinite;
}
svg.logoSpin > path {
  stroke: var(--eargoOrange);
  stroke-width: 4;
  fill: none;
}
@keyframes spin {
  0% {
    transform: rotate(0deg); /* Start at -10 degrees */
  }
  100% {
    transform: rotate(1080deg); /* Complete one full rotation */
  }
}


.connected.success table :is(td:first-of-type, th:first-of-type) {
  0border: 1px green solid;
  text-align: right;
}
.connected.success table :is(td:last-of-type, th:last-of-type) {
  0border: 1px green solid;
  text-align: left;
  padding-left: 1rem;
}

:is(.scanning, .results) table {
  border-collapse: collapse;
  0font-weight: bold;
}
:is(.scanning, .results) table th {
  border-bottom: 1px black solid;
}
:is(.scanning, .results) table :is(td, th) {
  text-align: left;
  padding: 5px;
}
:is(.scanning, .results) table :is(td:last-of-type, th:last-of-type) {
  padding-left: 1rem;
  0font-weight: bold;
  min-width: 20rem;
}
:is(.scanning, .results) table td:last-of-type {
  color: rgba(128,128,128,0.7);
}
:is(.scanning, .results) table span.passfail {
  font-weight: bold;
  color: var(--eargoRed);
}
:is(.scanning, .results) table span.passfail.PASSED {
  color: var(--eargoGreen);
}
:is(.scanning, .results) table td.left:nth-of-type(2) {
  color: var(--eargoBlue);
}
:is(.scanning, .results) table td.right:nth-of-type(2) {
  color: var(--eargoOrange);
}
:is(.scanning, .results) progress { 
  width: 20rem; 
}






p { 
  margin-top: 3px; 
  margin-bottom: 3px; 
}
p.detectPrompt {text-align: center;}



svg.check {
  0top: .125em;
  0position: relative;
  0cursor: pointer;
  stroke: var(--eargoGreen);
  0fill: none;
  fill: white;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  scale: 1.5;
  margin-right: 0.5rem;
}


.modules {
  display: flex;
  width: 100%;
  0border: 1px green dashed;
  0justify-content: space-evenly;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.modules>hr {
  display: block;
  flex-basis: 100%;
  border: 1px dashed rgba(0,0,0,0.0);
  height: 0;
  margin: 0;
  order: 4;
}
.modules details {
  border: 1px solid var(--eargoOrange);
  border-radius: 0.5rem;
  margin: 0.5rem;
  overflow: hidden;
  
  
  display: flex;
  0flex-direction: column;
  0place-items: center;
  0gap: 1rem;
  0padding: 0 1rem 1rem 1rem;
}
.modules details summary { 
  cursor: pointer;
  background: rgb(from var(--eargoOrange) r g b / 10%);
  padding: 0.5rem;
  0margin-left: -1rem;
  0margin-right: -1rem;
  0margin-bottom: 0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: bold;
  user-select: none;
}
.modules details > div {
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 1rem;
  padding: 1rem;
}
.modules details[open] {
  /* groups all the open ones together */
  order: 10;
}
.modules details:not([open]) {
  order: 11;
}
.modules details:nth-child(-n+3) {
  order: 1;
}



span.status {  display: inline-flex;}
svg.refresh {
  top: .125em;
  position: relative;
  cursor: pointer;
  stroke: var(--eargoOrange);
  fill: none;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.status b.c {  color: var(--eargoGreen);}
.status b.d {  color: var(--eargoRed);}
th {  text-align: right;}
.faded {opacity: 0.2;}
.bottomButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

table {   margin: auto; }




div.charger {
  border: 1px solid black;
  background: rgba(128,128,128,0.7);
  border-radius: 5rem;
  height: 6rem;
  width: 19rem;
  position: relative;
  flex-shrink: 0;
}
div.charger > * {  position: absolute;}
.right.HI { 
  0border: 1px dashed red;
  right: 2rem;
  top: 1rem;
  transform: scale(-1,1);
}
.left.HI {  
  0border: 1px dashed blue;
  left: 2rem;
  top: 1rem;
}
svg.arrows.left {
  left: 0;
  0border: 1px dashed lightblue;
}
svg.arrows.right {
  right: 0;
  0border: 1px dashed pink;
  transform: scale(-1,1);
}
svg.arrows path {  
  fill: none;   
  stroke-width: 6px; 
  stroke-linecap: round; 
  stroke: var(--eargoOrange);}
svg.arrows polygon {  fill: var(--eargoOrange); }
svg.chargerMic {
  left: 0;
  right: 0;
  margin: auto;
  0border: 1px green dashed;
  top: 2rem;
}

.selfCheck table { 
  border-collapse: collapse;
  0border-spacing: 0;
  font-size: small;
  background: rgba(128,128,128,0.3);
  width: 20rem;
}
.selfCheck th { 
  0border-bottom: 2px solid black;
  color: white;
}
.selfCheck table :is(td,th) { 
  text-align: center;
  0border: 1px dashed grey;
  border: 1px solid grey;
  padding: 0.2rem 0.4rem;
  font-weight: bold;
  0color: yellow;  
}
.selfCheck table tr:nth-of-type(2) td {   
  border-bottom-width: 0;
}
.selfCheck table tr:nth-of-type(3) td { 
  border-top-width: 0;
  border-bottom-width: 0;
}
.selfCheck table tr:nth-of-type(4) td { 
  border-top-width: 0;
}
.selfCheck th.left {  background: rgb(from var(--eargoBlue) r g b / 100%);}
.selfCheck th.charger {  background: rgb(128 128 128 / 100%);}
.selfCheck th.right {  background: rgb(from var(--eargoOrange) r g b / 100%);}
.selfCheck td.ok {  background: rgb(from var(--eargoGreen) r g b / 50%);}
.selfCheck td.weak {  background: rgb(from var(--eargoYellow) r g b / 50%);}
.selfCheck td.bad {  background: rgb(from var(--eargoRed) r g b / 50%);}
.selfCheck progress { 
  width: 2rem; 
}

.modules:has(#showSelfCheckDebug:not(:checked)) .selfCheckDebug { display: none; }
.modules:has(#showSelfCheckDebug:not(:checked)) .selfCheckResponse { display: none; }

.selfCheckDebug>div.smallGap {
  0gap:2px;
  gap:0;
}
.selfCheckDebug .selfCheckButtons {
  display: flex;
  0border: 1px dashed green;
  0width: 31rem;
  width: 34rem;
  0gap: 3px;
  gap: 2px;
}
.selfCheckDebug .selfCheckButtons button {
  0font-size: x-small;
  0padding: 2px;
}
.selfCheckDebug .charts {
  width: 34rem;
  height: 8rem;
  0border: 1px green dashed;
  display: flex;
  position: relative;
}
.selfCheckDebug .charts>* {
  0border: 1px red dashed;
}
.selfCheckDebug .charts:hover .copyButton {
  opacity: 0.9;
}
.selfCheckDebug .copyButton {
  position: absolute;
  padding: 2px;
  left: 215px;
  margin-top: 22px;
  opacity: 0.01;
  transition: all 300ms;  
}
.selfCheckDebug .copyButton svg {
  stroke: black;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.selfCheckDebug .selfcheckParams {
  display: flex;
}
.selfCheckDebug td:nth-of-type(2) {
  position: relative;
}
.selfCheckDebug .selfcheckParams svg {
  position: absolute;
  top: 3px;
  left: 50%;
  translate: -50%;
}
.selfCheckDebug :is(td:nth-of-type(1),td:nth-of-type(4)) {
  text-align: right;
}
.selfCheckDebug :is(legend, td, th) {
  font-size: small;
  0color: red;
}
.selfCheckDebug :is(td:nth-of-type(3),td:nth-of-type(6)) {
  color: rgba(128,128,128,0.8);
}
.selfCheckDebug input {
  width: 2rem;
  text-align: center;
}

.selfCheckDebug .expectedLevels th {
  text-align: left;
}

.selfCheckResponse>div.smallGap {
  gap:2px;
}
.selfCheckResponse input {
  width: 2rem;
}
.selfCheckResponse .chart {
  width: 14rem;
  height: 8rem;
}
.selfCheckResponse textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  width: 14rem;
}
 


.batteries .plot {
  width: 25rem;
  height: 15rem;
  0border: 1px green dashed;
}
.batteries>div.notPadded {
  padding: 0.5rem;
}




.terminalContainer {
  0border: 1px green dashed;
  min-height: 20rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  max-height: 10rem;
  
  position: fixed;
  bottom: 1.5rem;
}
.clearFilterButton {
  position: absolute;
  0z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.25rem;
}
.terminalContainer:hover > .hoverButtons {opacity: 1;}
.hoverButtons {
  0border: 1px red dashed;  
  position: absolute;
  display: flex;
  place-items: right;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  overflow: hidden;
  right: 1rem;
  margin-top: 0.55rem;
  opacity: 0;
  transition: all 300ms;
  z-index: 2;
}
.hoverButtons.row {
  flex-direction: row;
}
.hoverButtons>li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 3rem;
  max-width: 3rem;
  0width: 3rem;
  border-radius: 0.5rem;
  background: var(--eargoOrangeClear);
  transition: all 300ms;
  overflow: hidden;
  padding-left: 0.5rem;
  box-sizing: border-box;
}
.hoverButtons>li>* {
  margin: 0.5rem;
  flex: none;
}
.hoverButtons svg {
  stroke: black;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.hoverButtons .keyword {
  width: 6rem;
}
.hoverButtons>li:hover {
  background: var(--eargoOrange);
  max-width: 30rem;
}

.terminal {
  flex-grow: 1;
  min-width: 30rem;
  overflow: auto;
  text-align: left;
  margin-top: 0.5rem;
  background: rgba(128,128,128,0.1);
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem;
  padding-bottom: 1.5rem;
  white-space: pre-wrap;
  font-family: monospace;
  margin: 0;
  border: 1px solid rgba(128,128,128,0.5);
  scrollbar-width: thin;
}
.ADMIN {
  font-weight: bold;
  color: var(--eargoOrange);
}
.COMMAND {
  font-style: italic;
  color: var(--eargoOrange);
}
.CHGMONL, .HICOML {  color: var(--eargoBlue);}
.CHGMONR, .HICOMR {  color: var(--eargoRed);}
.timestamp {opacity: 0.5;}
.enterCommandBar {
  0border: 1px red dashed;
  display: flex;
}
.enterCommandBar > input {
  flex-grow: 1;
  0border-top-right-radius: 0;
  0border-bottom-right-radius: 0;
  border-radius: 0 0 0 0.5rem;
  border-width: 1px;
  padding: 0.5rem;
  border: 1px solid rgba(128,128,128,0.5);
}
.enterCommandBar > button {
  border-radius: 0 0 0.5rem 0;
  border-width: 1px;
  padding: 0.5rem;
  border: 1px solid rgba(128,128,128,0.5);
  background-color: var(--eargoOrangeClear);
}
.enterCommandBar > button:hover {
  background-color: var(--eargoOrange);
}












.version {
  0position: fixed;
  0bottom:0;
  0right:0;
  0padding: 0.5rem;
  0margin: 0.1rem 0.3rem;
  color: var(--eargoOrangeClear);
  user-select: none;
  text-decoration: none;
  font-size: small;
}



label[for="darkMode"] {
  position: fixed;
  top: 1rem;
  right: 1rem;
  user-select: none;
  cursor: pointer;
  z-index: 9;
}
label[for="darkMode"] svg>* {
  stroke: var(--eargoBlack);
  stroke-width: 10;
  fill: none;
  stroke-linecap: round;
}
label[for="darkMode"] span {
  position: absolute;
  right: 0;
  transition: all 300ms ease;
}
#darkMode {  display: none; }
#darkMode:checked ~ .dark { opacity: 1; 0display: block; }
#darkMode:checked ~ .light { opacity: 0.003; 0display: none; }
#darkMode:not(:checked) ~ .dark { opacity: 0.003; 0display: none; }
#darkMode:not(:checked) ~ .light { opacity: 1; 0display: block; }
:root:has(#darkMode:checked) {
  --redText: color-mix(in srgb, var(--eargoRed), var(--eargoBlackInverse));
  --blueText: color-mix(in srgb, var(--eargoBlue), var(--eargoBlackInverse));
  --greenText: color-mix(in srgb, var(--eargoGreen), var(--eargoBlackInverse));
  --0eargoRed: color-mix(in srgb, rgb(129,46,39), var(--eargoBlackInverse));
  --0eargoBlue: color-mix(in srgb, rgb(44,85,126), var(--eargoBlackInverse));
}
body {transition: background 300ms, color 300ms;}
body:has(#darkMode:checked) {
  color: var(--eargoBlackInverse);
  background: var(--eargoBlack);  
}
body:has(#darkMode:checked) a.backbutton { filter: invert(1); }
body:has(#darkMode:checked) label[for="darkMode"] svg>* { filter: invert(1); }


div.secretDebugButtons {
  opacity: 0.2;
  position: fixed;
  0bottom:0.5rem;
  bottom:0;
  scale: 0.5;
}
button.showAll {
  0opacity: 0.1;
  0position: fixed;
  0left:1rem;
}
button.forget {
  0opacity: 0.1;
  0position: fixed;
  0left:1rem;
  0top: 3rem;
}