* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 18px;
  font-family: Optima, Helvetica, Arial;
}

body {
  padding: 1rem;
}

[hidden] {
  display: none;
}

.app {
  padding: 1rem;
  display: grid;
  grid: "from swap to" auto "credits credits credits" min-content / 1fr auto 1fr;
  grid-gap: 1rem;
  overflow: hidden;
  min-height: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.swap::before {
  display: inline-block;
  content: '↔️';
}

@media screen and (max-width: 640px) {
  .app {
    grid: "from from" auto "swap swap" auto "to to" auto "credits credits" auto / 1fr;
  }

  .swap::before {
    content: '↕️';
  }
}

.panel {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-gap: 1rem;
  max-height: 100%;
  overflow: hidden;
}

label {
  padding: 0 0.5em;
  display: flex;
  align-items: center;
}

.lang-select {
  padding: 0.25rem 0.5rem;
  margin-left: 1rem;
  background: #f4f4f4;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  cursor: pointer;
}

.panel--from {
  grid-area: from;
}

.panel--to {
  grid-area: to;
}

.swap {
  align-self: center;
  grid-area: swap;
  font-size: 1.1rem;
}

.credits {
  grid-area: credits;
}

.credits img {
  float: left;
  margin: 1em 0;
}

textarea, [contenteditable], .output-area {
  padding: 1rem;
  font-family: sans-serif;
  font-size: 1rem;
  resize: none;
  border-radius: 2px;
  border: 1px solid #ccc;
  min-height: 100px;
  max-height: 100%;
  overflow: auto;
}

button {
  cursor: pointer;
  border: 1px solid #88c;
  border-radius: 4px;
  background: #eef;
  padding: 0;
  padding: 0.25rem 0.5rem;
}
button:hover {
  background: #cce;
}

#output {
  background-color: #f4f4f4;
  position: relative;
}

.output-area [x-bergamot-word-score].bad {
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 8px 2px;
  background-position:0 95%;
}

.output-area [x-bergamot-sentence-score].bad {
  background: rgba(255, 128, 128, 0.8);
}

.output-area [x-bergamot-sentence-index].highlight-sentence {
  background: rgba(255, 255, 128, 0.8);
}

.app.translating #output::after {
  position: absolute;
  bottom: 4px;
  right: 4px;
  content: 'Translating…';
}

/* Loading indicator takes priority, so below the .translating selector */
.app.loading #output::after {
  position: absolute;
  bottom: 4px;
  right: 4px;
  content: 'Loading translation model…';
}

.app {
  position: relative;
}

#unsupported-browser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
}
