/* Scanner-only styles.
 *
 * Kept out of shared/tools.css because nothing else in the suite has a
 * camera, and a viewfinder is not tool furniture.
 */

.capture-start {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The staging tray sits inside the drop area, so the dashed box, the
   photos and the two buttons read as one container rather than three
   things that happen to follow each other. */
.drop-area {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  margin-top: 16px;
  padding: 16px;
}

.drop-area .page-strip {
  margin-top: 14px;
}

.drop-area .tool-actions {
  margin-top: 4px;
}

.panel-note.is-warning {
  background: var(--pf-warn-soft);
  border: 1px solid var(--pf-warn-line);
  border-radius: 10px;
  color: var(--pf-warn);
  padding: 10px 12px;
}

/* ---- Viewfinder ---------------------------------------------------------
 *
 * The only part of the suite that does NOT follow the theme. A camera
 * preview is black in both modes, because the image has to be the
 * brightest thing on screen and a pale surround is glare; the hint pill
 * and the shutter ring are white because they sit on that black, not on
 * the page. Hard-coded on purpose. */

.camera-stage {
  background: #0b0b0c;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.camera-stage video {
  display: block;
  /* Contain, not cover: cropping the preview would hide the page edge the
     person is trying to get inside the frame, and they would only find out
     after the shot. */
  object-fit: contain;
  max-height: 62vh;
  width: 100%;
}

.camera-overlay {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.camera-hint {
  background: rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  bottom: 14px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  left: 50%;
  margin: 0;
  padding: 7px 16px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.camera-hint.is-ready {
  background: rgba(34, 94, 51, 0.92);
}

.camera-count {
  background: rgba(0, 0, 0, 0.62);
  border-radius: 999px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  left: 14px;
  margin: 0;
  padding: 5px 12px;
  position: absolute;
  top: 14px;
}

/* The shutter flash. Without some acknowledgement that a frame was taken,
   auto-capture feels broken: the page looks the same and nothing moved. */
.camera-flash {
  background: var(--pf-card);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.camera-flash.is-firing {
  animation: pf-flash 240ms ease-out;
}

@keyframes pf-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .camera-flash.is-firing {
    animation-duration: 1ms;
  }
}

/* The shutter stays centred under the viewfinder whatever is beside it,
   so a hidden Switch button does not shove it off to one side. Three equal
   columns do that; space-between does not. */
.camera-controls {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 14px;
}

.camera-controls > .camera-side:first-child {
  justify-self: start;
}

.camera-controls > .camera-side:last-child {
  justify-self: end;
}

.camera-settings {
  border-top: 1px solid var(--pf-line);
  margin-top: 14px;
  padding-top: 12px;
}

.camera-buttons {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-self: center;
}

.shutter {
  background: var(--pf-primary);
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--pf-primary);
  cursor: pointer;
  height: 62px;
  padding: 0;
  width: 62px;
}

.shutter:hover {
  background: var(--pf-primary-hover);
}

.shutter:active {
  transform: scale(0.94);
}

/* ---- Pages -------------------------------------------------------------- */

.page-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
}

.page-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  flex: none;
  padding: 8px;
  position: relative;
  width: 146px;
}

.page-card img {
  background: var(--pf-tint);
  border-radius: 6px;
  display: block;
  height: 182px;
  object-fit: contain;
  width: 100%;
}

.page-tag {
  background: var(--pf-bar);
  border-radius: 999px;
  color: var(--pf-on-bar);
  font-size: 11px;
  font-weight: 700;
  left: 14px;
  padding: 2px 8px;
  position: absolute;
  top: 14px;
}

.page-tools {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
}

.page-tools .icon-btn {
  min-height: 34px;
  padding: 0 8px;
}

.page-tools .is-danger {
  color: var(--pf-danger);
}

/* ---- Looks -------------------------------------------------------------- */

.look-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
}

.look {
  background: var(--pf-card);
  border: 2px solid var(--pf-line);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  flex: none;
  gap: 6px;
  justify-items: center;
  padding: 8px;
  width: 112px;
}

.look img {
  background: var(--pf-tint);
  border-radius: 4px;
  display: block;
  height: 118px;
  object-fit: contain;
  width: 100%;
}

.look span {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.look:hover {
  border-color: var(--pf-primary);
}

.look.is-active {
  background: var(--pf-tint);
  border-color: var(--pf-primary);
}

.preview-wrap {
  margin-top: 6px;
}

.preview-label {
  color: var(--pf-muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}

.preview {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.preview img {
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(16, 43, 23, 0.14);
  max-height: 60vh;
  max-width: 100%;
}

@media (max-width: 560px) {
  /* Too narrow for three columns: the shutter takes its own row, with the
     two side buttons under it. */
  .camera-controls {
    grid-template-columns: 1fr 1fr;
  }

  .camera-controls > .camera-buttons {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: center;
  }

  .camera-controls > .camera-side:first-child {
    grid-row: 2;
  }

  .camera-controls > .camera-side:last-child {
    grid-row: 2;
  }

  .camera-stage video {
    max-height: 54vh;
  }
}

/* ---- Save as -------------------------------------------------------------
 *
 * The format row sits with the rest of the end-of-job controls rather
 * than at the top of the page: the choice between a document and
 * images is easier to make once the pages are on screen.
 */

.scan-format-label {
  color: var(--taadom-muted);
  font-size: 12px;
  font-weight: 600;
  padding-bottom: 9px;
}

.scan-hint {
  color: var(--taadom-muted);
  flex-basis: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}