/* =============================================================================
   snapshots.css  —  Endeavos Online SOW
   Snapshot panel: the separate floating card that appears below the left
   info panel after the user captures their first model screenshot.
   Thumbnails are listed vertically; each has a hover-reveal delete button.
============================================================================= */

/* ── Snapshot panel — separate floating card ──────────────────────────────── */
#snapshot-strip {
  position: absolute;
  left: 12px;
  top: 300px;             /* overridden at runtime by positionSnapPanel() */
  width: 204px;
  z-index: 20;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(20,24,30,.14);
  padding: 12px 12px 14px;
  display: none;          /* hidden until first snapshot is taken */
}

/* Section heading */
.snap-strip-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: "Archivo", sans-serif;
  margin-bottom: 8px;
}

/* Vertical list of thumbnails */
.snap-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Roughly four thumbnails deep — each is ~150px with its caption and size
     row, so 320px only ever showed two. Capped against the viewport so the
     panel can't overflow the window on a short screen. */
  max-height: min(640px, calc(100vh - 260px));
  overflow-y: auto;
  padding-right: 2px;
}
.snap-grid::-webkit-scrollbar { width: 8px; }
.snap-grid::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 6px; }
.snap-grid::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
.snap-grid::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* Individual thumbnail wrapper */
.snap-thumb-wrap {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: border-color .15s;
  background: #f0f0f0;
}
.snap-thumb-wrap:hover { border-color: var(--orange); }

/* Every thumbnail gets the SAME box, whatever the capture's own aspect ratio.
   Captures are auto-cropped to their content plus any tag bubbles
   (autoCropCanvas in js/snapshots.js), so a Materials shot with a bubble off
   to one side crops wide while a Load Case shot crops tall — with height:auto
   the cards in the strip then ended up visibly different heights, and the
   strip's "roughly four thumbnails deep" sizing stopped holding.

   `contain`, not `cover`: the strip is a preview of what the figure contains,
   so it must never crop away part of the model or a tag. Letterbox padding is
   the acceptable cost. This is presentation only — the PDF still draws every
   figure at its true aspect (see drawFigures in js/sow.js). */
.snap-thumb-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: var(--snap-thumb-aspect, 4 / 3);
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* Delete button — revealed on hover, top-right corner */
.snap-delete-btn {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.snap-thumb-wrap:hover .snap-delete-btn { opacity: 1; }

/* Caption shown under each thumbnail — the figure number/caption used to be
   baked into the image pixels; now it's real text here and real PDF text at
   build time (js/sow.js), so the same string is never drawn twice. */
.snap-thumb-caption {
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--ink-soft);
  padding: 4px 6px 5px;
  background: #fff;
  word-break: break-word;
}

/* ── Figure preview modal — one figure rendered through the real PDF builder,
   so what's shown here is what prints (see previewFigure() in js/sow.js). ── */
#fig-preview-back {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.55);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#fig-preview-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(20, 24, 30, 0.35);
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#fig-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
#fig-preview-title {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: var(--w-label);
  color: var(--ink);
}
#fig-preview-close {
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
#fig-preview-close:hover { background: var(--orange-soft); color: var(--orange); }
#fig-preview-body {
  overflow: auto;
  padding: 14px;
  background: #f4f5f7;
}
#fig-preview-body canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
#fig-preview-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: var(--t-label);
  color: var(--ink);
}
#fig-preview-foot label { font-weight: var(--w-label); }
#fig-preview-size-range { flex: 1; accent-color: var(--orange); cursor: pointer; }
#fig-preview-size {
  width: 62px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  font-family: var(--font-entered);
  font-size: var(--t-body);
  color: var(--ink);
}
#fig-preview-size:focus { outline: none; border-color: var(--orange); }
.fig-preview-pct { color: var(--ink-soft); }
#fig-preview-size-reset {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--font-btn);
  font-size: var(--t-label);
  color: var(--ink);
  cursor: pointer;
}
#fig-preview-size-reset:hover { border-color: var(--orange); color: var(--orange); }

/* Per-thumbnail size control — one number, 100% = automatic size.
   Deliberately minimal: stacked +/− on the left, then a borderless number that
   is only as wide as its digits. No label, no box, no padding — it sits under
   the caption without reading as another form field. */
/* Floats in the empty space at the top of the render, not in a row of its own
   under the thumbnail. As a bottom row it cost every card ~20px of height and
   sat flush against the caption, so the two read as one run-together block.
   Renders have a white background up there, so the pill sits on empty pixels.
   Centered, clear of the select box (top-left) and delete button (top-right). */
.snap-size-row {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
  font-family: var(--font-label);
  line-height: 1;
}
.snap-thumb-wrap:hover .snap-size-row { background: #fff; }
/* Sized to match the 11px value text — big enough to hit, never taller than
   the number it sits beside, so the row reads as one line: −  100%  + */
.snap-size-step {
  width: 15px;
  height: 15px;
  line-height: 1;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
  color: var(--ink-soft);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.snap-size-step:hover { border-color: var(--orange); color: var(--orange); }
/* Selector is deliberately specific and !important-flagged: forms.css styles
   inputs by attribute (input[type="number"]), which outranks a bare class and
   was re-applying a border, a white background and 11px/13px padding here. */
.snap-size-row input.snap-size-input {
  /* Sized in ch so the field is exactly as wide as three digits — no dead
     space at the sides, and it still fits "200". */
  width: 3ch !important;
  min-width: 0 !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-entered) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--ink);
  text-align: left;
  -moz-appearance: textfield;
}
.snap-size-input::-webkit-outer-spin-button,
.snap-size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.snap-size-row input.snap-size-input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--orange);
}
.snap-size-pct { font-size: 11px; color: var(--ink-soft); margin-left: -2px; }

#fig-preview-hint {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  font-size: var(--t-hint);
  font-family: var(--font-hint);
  font-style: italic;
  color: var(--ink-soft);
}

/* Select checkbox — top-left of each thumbnail, used to pick exactly 2
   snapshots to combine into one figure. Hidden until hovered/selected so it
   doesn't clutter the strip normally. */
.snap-select-box {
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.8);
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .15s, background .15s, border-color .15s;
  z-index: 2;
}
.snap-thumb-wrap:hover .snap-select-box { opacity: 1; }
.snap-thumb-wrap.snap-selected .snap-select-box {
  opacity: 1;
  background: var(--orange);
  border-color: var(--orange);
}
.snap-thumb-wrap.snap-selected .snap-select-box::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.snap-thumb-wrap.snap-selected { border-color: var(--orange); }

/* Combined figure — two images side by side in one thumbnail. The ROW carries
   the shared aspect box so a combined card is exactly as tall as a single one;
   each half then fills that height rather than claiming the box for itself
   (which would have made combined cards half-height). */
.snap-combined-row {
  display: flex;
  aspect-ratio: var(--snap-thumb-aspect, 4 / 3);
  background: #fff;
}
.snap-combined-row img {
  width: 50%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}
.snap-combined-row img:first-child { border-right: 1px solid var(--line); }

/* Combine button — appears below the grid once exactly 2 are selected */
#snap-combine-btn {
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  border-radius: 7px;
  border: none;
  background: var(--orange);
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
#snap-combine-btn:hover { background: var(--accent2, #d3640f); }