/* timestamp.css */

/* Page container: expands on large screens, centered */
.ts-container {
  width: min(2200px, 95vw);
  margin: 16px auto;
  box-sizing: border-box;
  padding: 0 8px;
}

/* Optional page title */
.page-title {
  font: 600 28px "Segoe UI", Roboto, Arial, sans-serif;
  color: #0f172a;
  letter-spacing: 0.2px;
  margin: 8px 0 12px;
}

/* Main tile (wrapper around canvases) */
#layersWrapper {
  width: 100%;
  border: 1px solid #cfd3d7;
  border-radius: 8px;
  padding: 14px;
  margin: 10px 0;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}

/* Labels above each layer */
.layer-label {
  margin: 10px 0 8px;
  font: 500 16px "Segoe UI", Roboto, Arial, sans-serif;
  color: #111827;
}

/* Canvases (image + footer) */
.layer-canvas {
  max-width: 100%;
  width: 100%;            /* preview stretches; output uses true pixels */
  border: 1px dashed #9aa6b2;
  background: #ffffff;
  display: block;
}

/* Controls row */
#tsControls {
  margin-top: 14px;
  font: 14px "Segoe UI", Roboto, Arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px; /* row gap, column gap */
}

#tsControls label { margin-right: 4px; }
#tsControls select {
  font: 14px "Segoe UI", Roboto, Arial, sans-serif;
  padding: 6px 8px;
}

#tsControls button {
  font: 600 14px "Segoe UI", Roboto, Arial, sans-serif;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #d0d5dd;
  background: #f9fafb;
  cursor: pointer;
}

#tsControls button:hover { background: #f2f4f7; }

#tsControls .hint {
  margin-top: 4px;
  color: #4b5563;
  font-size: 13px;
  flex-basis: 100%;
}

/* Small screens */
@media (max-width: 640px) {
  .page-title { font-size: 22px; }
  #tsControls button { width: 100%; }
}