/* Photo Collage Maker — tool-specific styles, all prefixed .pc-.
   Two steps: a layout card (frame + gallery), then the workspace — a bar, the
   one-line "add photos" uploader, the preview card (a drop surface) and the
   Photos / actions inspector, with settings in a docked Options sheet (layout
   from styles/components/form.css + uploader.css). Canvas-only compositing. */

/* Title icon — gradient tile matching the tool's registry colors. */
.pc-title-icon {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #ff6fb5, #e0398a);
}

/* ── Layout gallery — big cards, matching .vgr-card ─────────────────────── */
.pc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-2);
}

.pc-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: border-color 0.14s ease, color 0.14s ease, transform 0.08s ease, box-shadow 0.14s ease;
}

.pc-card:hover {
  border-color: var(--border-strong);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.pc-card:active { transform: translateY(0) scale(0.99); }

.pc-card.is-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-2);
}

.pc-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.pc-card-mini {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--bg-recessed);
  overflow: hidden;
}

/* Schematic tiles — a calm mid neutral so they read as a wireframe (not solid
   blocks) on both themes, with the accent fill reserved for the picked card. */
.pc-card-cell {
  position: absolute;
  background: var(--text-muted);
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1.5px var(--bg-recessed);
}

.pc-card.is-active .pc-card-cell { background: var(--accent); }

.pc-card-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}

.pc-card-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.pc-build-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

.pc-count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--mono);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Stage ──────────────────────────────────────────────────────────────── */
/* The preview row: the stage centred on the card. .pc-stage-fit is what
   app.js → fitPreview measures (no padding of its own). */
.pc-stage-pad { padding: var(--space-4); }

/* Sized in JS (app.js → fitPreview) to the canvas's displayed size so the
   click overlay lines up exactly; capped to the content width and ~62vh tall. */
.pc-stage {
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    repeating-conic-gradient(var(--checker-1) 0% 25%, var(--checker-2) 0% 50%)
    50% / 22px 22px;
  box-shadow: var(--shadow-1);
}

.pc-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.pc-canvas {
  display: block;
  touch-action: none;
  cursor: grab;
}
.pc-canvas:active { cursor: grabbing; }

/* Click targets / selection outline drawn over the canvas. */
.pc-cell-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pc-cell-hit {
  position: absolute;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.12s ease;
}
.pc-cell-hit.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 0 0 1px var(--accent);
}

/* Decode spinner (shown while HEIC is being decoded via libheif). */
.pc-busy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  background: var(--bg-vibrancy);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* ── Selected-cell head row: thumb + "Cell n / name · size" ───────────── */
.pc-cell-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
  background: var(--bg-recessed);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.pc-cell-thumb--empty {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.pc-cell-name { overflow-wrap: anywhere; }

/* Never squeeze a download button below its icon + label: when the pair
   doesn't fit side by side (longer ko/ja labels) the row wraps and each
   button fills its own line instead of one hanging short under the other. */
.pc-actions > .btn { min-width: max-content; }