/* Start-page palette, typography and three-image layout from webapp/static/styles.css. */
html { font-size: 12px; }
body { font-family: Arial, sans-serif; background: #001100; color: rgb(206,230,230); margin: 8px; }
button, select { font: inherit; }
#filter-form { display: flex; justify-content: center; }
#filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1100px; }
.input-field { width: 130px; padding: 5px; margin-top: 10px; background: #fff; color: #111; border: 1px solid #999; border-radius: 2px; color-scheme: light; }
.reset-btn { background: none; border: none; cursor: pointer; color: rgb(100,140,100); padding: 5px; margin-top: 10px; font-size: 26px; }
.reset-btn:hover { color: rgb(150,200,150); }
#summary { text-align: center; color: #9bb59b; font-size: 12px; margin: 16px 0 8px; }
.image-row { display: flex; flex-direction: row; align-items: stretch; padding: 10px; border-bottom: 1px solid #ccc; width: 70%; max-width: 600px; margin: auto; gap: 10px; content-visibility: auto; contain-intrinsic-block-size: auto 101px; }
.left-column { font-weight: bold; flex: 1; white-space: nowrap; align-self: center; }
.timestamp { background: none; border: none; color: inherit; padding: 0; font-weight: bold; cursor: pointer; text-align: left; max-width: 145px; overflow-wrap: anywhere; white-space: normal; }
.center-column { display: flex; flex-wrap: nowrap; gap: 5px; justify-content: flex-start; flex: 3; align-items: center; min-width: 0; }
.center-column img { display: block; width: 115px; height: 80px; object-fit: cover; }
.right-column { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 4px; min-width: 100px; }
.description-container { width: max-content; min-width: 100px; }
.label-text { color: yellow; display: block; padding: 2px 0; }
.pred-text { color: #66cc66; margin: 4px 0; }
.label-text, .pred-text { font-family: inherit; font-size: 1rem; font-weight: bold; font-style: normal; white-space: nowrap; overflow-wrap: normal; }
.play-btn { cursor: pointer; background: #000; border: 1px solid #355335; font-size: 20px; color: #fff; min-width: 38px; min-height: 30px; padding: 0 8px; }
.play-btn:hover { background: #163516; }
.audio-error { color: #ffb3a5; font-size: 12px; max-width: 14rem; overflow-wrap: anywhere; }
.media-error { outline: 1px solid #c77; }
.loading { text-align: center; padding: 20px; }
#sentinel { height: 1px; }
:focus-visible { outline: 2px solid #d4e788; outline-offset: 3px; }
@media (min-width: 900px) { html { font-size: 16px; } }
@media (max-width: 800px) { .image-row { width: auto; max-width: 640px; } }
@media (max-width: 600px) {
  .image-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; padding: 12px 2px; contain-intrinsic-block-size: auto 110px; }
  .left-column { grid-column: 1 / -1; }
  .timestamp { max-width: none; }
  .center-column img { width: 100%; height: auto; aspect-ratio: 115 / 80; min-width: 0; flex: 1; }
  .center-column { align-items: center; }
  .right-column { min-width: 0; padding: 0; }
  .input-field { width: 125px; }
}