/* iNat TrailCam Local V07 — density and 1920x1080 refinement only.
   No file-system, EXIF, JSON or local-save logic is defined here. */

@media (min-width: 1181px) {
  html { font-size: 15px; }

  .compatibility-card,
  .app-grid {
    width: min(calc(100% - 32px), 1600px);
    margin-left: auto;
    margin-right: auto;
  }

  .compatibility-card {
    padding: 10px 14px;
  }

  .app-grid {
    grid-template-columns: 280px minmax(720px, 900px) 340px;
    justify-content: center;
    gap: 14px;
    padding: 6px 0 14px;
  }

  .panel {
    padding: .88rem;
  }

  .panel h2 {
    font-size: 1.22rem;
    margin-bottom: .58rem;
  }

  .panel h3 {
    font-size: 1rem;
    margin-bottom: .55rem;
  }

  .panel section + section {
    margin-top: .9rem;
    padding-top: .9rem;
  }

  .player-panel {
    max-width: 900px;
  }

  .player-panel .video-stage {
    width: min(100%, 860px);
    max-width: 860px;
    max-height: 484px;
    margin-top: .62rem;
    margin-bottom: .62rem;
  }

  .video-stage video {
    max-height: 484px;
  }

  .player-controls-stack {
    padding: 8px;
  }

  .player-controls-layout-v01 {
    gap: .58rem;
  }

  .playlist {
    max-height: min(390px, calc(100vh - 440px));
  }

  .playlist li button {
    min-height: 44px;
    padding: .52rem .62rem;
  }

  .complete-mode-box-v20 {
    padding: 10px;
  }

  .complete-mode-box-v20 .selected-folder-state strong {
    font-size: 14px;
  }

  .subfolder-section .section-row,
  .subfolder-progress {
    padding-left: 10px;
    padding-right: 10px;
  }

  button {
    padding: .62rem .82rem;
  }

  .small-button {
    padding: .5rem .68rem;
    font-size: .82rem;
  }

  input,
  select,
  textarea {
    padding: .62rem .7rem;
  }

  label,
  .hint,
  .current-video,
  .compatibility-status {
    font-size: .84rem;
  }

  .subsection-label {
    font-size: .7rem;
    margin-top: .8rem;
    margin-bottom: .35rem;
  }

  .status-box {
    padding: .65rem .7rem;
  }

  .observed-fields,
  .date-format-line {
    gap: .45rem;
  }

  .observation-panel {
    max-height: calc(100vh - 18px);
  }
}

/* Prevent translated camera-date formats from being clipped. */
.date-format-line {
  grid-template-columns: minmax(0, .82fr) minmax(148px, 1.18fr);
  gap: .5rem;
}

.date-format-line > label {
  min-width: 0;
  line-height: 1.2;
}

#cameraDateFormat {
  min-width: 0;
  width: 100%;
  padding-left: .65rem;
  padding-right: 2rem;
  text-overflow: ellipsis;
}

@media (max-width: 1450px) and (min-width: 1181px) {
  .app-grid {
    grid-template-columns: 255px minmax(0, 1fr) 315px;
  }

  .player-panel .video-stage {
    width: min(100%, 820px);
    max-width: 820px;
    max-height: 461px;
  }

  .video-stage video {
    max-height: 461px;
  }

  .date-format-line {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1921px) {
  .compatibility-card,
  .app-grid {
    width: min(calc(100% - 64px), 1600px);
  }
}

@media (max-width: 1180px) {
  .date-format-line {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr);
  }
}

@media (max-width: 620px) {
  .date-format-line {
    grid-template-columns: 1fr;
  }
}