*:before, *:after, *, ::after, ::before {box-sizing: border-box;}

html, body {
  padding: 0;
  margin: 0;  
  overflow: hidden;
  transition: opacity 250ms;
}

/*  app-CONTAINER */
app-container {
	/* --w: 1fr;
  --n: 3; */
  display: grid;
  grid-template-columns: 13rem 1fr 14rem;
  /* grid-template-columns: repeat(var(--n), minmax(0, var(--w))); */
  grid-template-rows: min-content 1fr min-content;
  gap: 1rem;
  padding: 1rem;
  height: 100vh; /* native sticky page header/footer */
  overflow: hidden;
}

app-panel {
  display: grid;
  overflow: hidden;
  border-radius: .3rem;
}

app-panel:first-of-type, /* header and footer */
app-panel:last-of-type {
  grid-column: 1 / -1;
  grid-template-columns: 1fr max-content 1fr;
}

app-panel:not(:first-of-type):not(:last-of-type) {grid-template-rows: min-content 1fr min-content;}

panel-header,
panel-footer {
  display: grid;
  grid-template-columns: 1fr max-content;
}

panel-content {
  display: grid;
  overflow: hidden;
  align-content: start;
}

app-class,
user-name,
powered-by,
app-version {padding: 1rem;}

app-class {
  color: rgba(255,255,255,0.3);
  text-shadow: 1px -1px 1px rgba(0,0,0,0.4);
  font-family: 'agency_fb', sans-serif;
  letter-spacing: 0.09rem;
  text-transform: uppercase;
  font-weight: bold;
  transform: scale(1.0, 0.8);
}

user-name,
app-version {text-align: right;}

/* https://dev.to/kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j */

list-label {
  display: grid;
  grid-template-columns: 1fr max-content;
  border-radius: 0;
}

list-label > span {
  padding: .5rem 1rem;
}

/*  PANEL-LIST(S) */
panel-list {
  display: grid;
  gap: .5rem;
  overflow: auto;
}

list-item {display: grid;}

list-cell {padding: .5rem 1rem;}

app-panel:nth-of-type(2) panel-list,
app-panel:nth-of-type(4) panel-list {gap: 0;}

app-panel:nth-of-type(2) list-item,
app-panel:nth-of-type(4) list-item {
  grid-template-columns: 1fr max-content;
}

app-panel:nth-of-type(3) list-item {grid-template-columns: 1fr 1fr 1fr 1fr auto;}

app-panel:nth-of-type(3) panel-title {padding: 0 0 1rem 0;}

app-panel:nth-of-type(3) panel-list {margin-top: .5rem;}

meta-data,
meta-label {
  color: rgba(255,255,255,0.3);
  font-family: 'agency_fb', sans-serif;
  text-shadow: 1px -1px 1px rgba(0,0,0,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: .7rem;
  padding: .5rem 1rem;
}

meta-data span {color: rgba(255,255,255,0.5);}

reset-panel,
close-panel {
  color: rgba(255,255,255,0.3);
  font-family: 'agency_fb', sans-serif;
  text-shadow: 1px -1px 1px rgba(0,0,0,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: .7rem;
  padding: .5rem 1rem;
  cursor: pointer;
  align-self: center;
}
reset-panel span,
close-panel span {
  color: rgba(255,255,255,0.5);
  transition: color 250ms;
}

reset-panel:hover span,
close-panel:hover span {color: rgba(117,193,255,1.0);}

.close {height: 0;}

/* app-panel:nth-of-type(2) panel-list {
  height: auto;
} */