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

:root{
  --pad: 16px;
  --gap: 16px;
  --toolbar-h: 44px;
}

html, body { height: 100%; }

body {
  margin: 0;
  background-color: rgb(16, 17, 19);
  height: 100dvh;
  overflow: hidden;
  color: #ffffff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.app{
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr);
  gap: var(--gap);
  padding: var(--pad);
  align-items: center;
  min-height: 0;
}

/* Canvas side */
.stage {
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - (2 * var(--pad)));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.toolbar {
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
}

.clear-btn {
  width: 30px;
  height: 30px;
  padding: 1px;
  cursor: pointer;
  fill: #ffffff;
  border-radius: 10px;
}
.clear-btn:focus { outline: none; }
.clear-btn:hover { fill: #1676b6; }

#canvas {
  width: min(100%, calc(100dvh - (2 * var(--pad)) - var(--toolbar-h)));
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: calc(100dvh - (2 * var(--pad)) - var(--toolbar-h));
  border: 2px solid black;
  border-radius: 20px;
  background: black;
  touch-action: none;
  cursor: url("pen.cur"), default;
  margin-bottom: var(--toolbar-h);
}

.pixelated {
  image-rendering: pixelated;
}

/* Predictions side */
.prediction {
  min-height: 0;
  max-height: calc(100dvh - (2 * var(--pad)));
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.class-prediction {
  display: grid;
  grid-template-columns: 1.5rem 1fr 4.2rem;
  gap: 10px;
  align-items: center;
}

.class-label {
  margin: 0;
  font-size: 1.1rem;
}

.bar-track {
  height: 14px;
  border-radius: 999px;
  background: #2a2d33;
  overflow: hidden;
}

.predict-bar {
  height: 100%;
  width: 0%;
  background-color: #1676b6;
}

.probability {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .app {
    height: 100dvh;
    grid-template-columns: 1fr;
    --pred-h: 296px;
    grid-template-rows: minmax(0, 1fr) var(--pred-h);
    align-items: start;
  }

  .stage { min-height: 0; }

  .prediction {
    min-height: 0;
    max-height: var(--pred-h);
    overflow: hidden;
    justify-content: flex-start;
  }

  #canvas {
    max-height: calc(100dvh - (3 * var(--pad)) - var(--toolbar-h) - var(--pred-h)); /* pad + toolbar + predictions */
    width: min(100%, calc(100dvh - (2 * var(--pad)) - var(--toolbar-h) - var(--pred-h)));
    margin-bottom: 0;
  }
}