/* Element defaults and the app shell. */

* { box-sizing:border-box; }
html,body {
  margin:0;
  height:100%;
}
body {
  background:var(--case);
  color:var(--case-ink);
  font-family:var(--vt);
  font-size:20px;
  line-height:1.1;
  overflow-x:hidden;
}
button {
  font:inherit;
  color:inherit;
}

/*
 * The hidden attribute has to beat any display rule an element also carries.
 * The start overlay is display:flex and the top-bar stats are display:flex, so
 * without this both stay on screen when hidden — and a screen you cannot see
 * past makes every button under it look dead.
 */
[hidden] { display: none !important; }
.px { font-family:var(--px); }

/* Controls that only exist in the touch layout: see mobile.css. */
.touch-only { display: none; }
.sheet-backdrop { display: none; }
#app {
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  min-height:660px;
}