/* ABOUTME: Stitch calibrator styles — port of v1 .stitch-calibrate-tool with focus-mode chrome. */

.stitch-calibrate-page { background: #fff; }

/* Variant dropdown in the focus bar — match the top-bar dark theme. */
.focus-bar-variant { margin: 0; }
.focus-bar-variant select {
  padding: 4px 8px;
  border: 2px solid rgba(255,255,255,0.4);
  background: var(--ind-ink); color: #fff;
  font: inherit; font-size: 12px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0;
}

/* Save-status pill in the focus bar. */
.stc-status {
  padding: 2px 8px;
  border: 2px solid transparent;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.stc-status.ok       { color: var(--ind-green);  border-color: var(--ind-green);  background: #e8f5e9; }
.stc-status.dirty    { color: var(--ind-orange); border-color: var(--ind-orange); background: #fff8f0; }
.stc-status.unsaved  { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }
.stc-status.loading  { color: rgba(255,255,255,0.85); }
.stc-status.err      { color: var(--ind-red); border-color: var(--ind-red); background: rgba(192,57,43,0.1); }
.stc-status.muted    { color: rgba(255,255,255,0.5); }

/* Secondary toolbar — blend modes, opacity, view ops. */
.stc-tools {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  background: var(--ind-paper-alt);
  border-bottom: 2px solid var(--ind-ink);
  font-size: 12px;
  flex-wrap: wrap;
}
.stc-tools button {
  margin: 0; padding: 4px 10px;
  border: 2px solid var(--ind-ink); border-radius: 0;
  background: #fff; color: var(--ind-ink);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
.stc-tools button:hover  { background: var(--ind-paper-alt); }
.stc-tools button.active { background: var(--ind-ink); color: #fff; }

.stc-blend-group { display: inline-flex; gap: 4px; }

.stc-opacity {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ind-ink-soft);
}
.stc-opacity input[type="range"] {
  width: 90px; margin: 0;
}

.stc-sep      { width: 1px; height: 18px; background: var(--ind-gray); }
.stc-spacer   { flex: 1; }
.stc-conn-label .stc-badge {
  display: inline-block; padding: 1px 6px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 2px solid;
  margin-right: 6px;
}
.stc-conn-label .stc-badge.gt { color: var(--ind-green); border-color: var(--ind-green); }
.stc-conn-label .stc-badge.fp { color: var(--ind-red); border-color: var(--ind-red); }
.stc-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
}
.val { font-variant-numeric: tabular-nums; font-weight: 700; }
.muted { color: var(--ind-ink-soft); }

/* Viewport + the drag-to-align scene. */
.stc-viewport {
  flex: 1; min-height: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
  cursor: grab;
}
.stc-viewport:active { cursor: grabbing; }
.stc-scene {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
}
.stc-img-a, .stc-img-b {
  position: absolute;
  user-select: none; -webkit-user-drag: none;
  image-rendering: optimizeQuality;
  pointer-events: none;
  /* Pico applies `img { max-width: 100% }`; the scene parent is 0×0
     because its children are absolutely positioned, so that rule collapses
     these to width 0. Force intrinsic dimensions. */
  max-width: none; width: auto; height: auto;
}
.stc-img-a {
  top: 0; left: 0;
  mix-blend-mode: normal;
}
.stc-img-b {
  mix-blend-mode: multiply;
  opacity: 1;
}
.stc-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ind-ink-soft);
  font-size: 14px;
}

.stc-help {
  flex: 0 0 auto;
  padding: 6px 16px;
  background: var(--ind-paper-alt);
  border-top: 2px solid var(--ind-ink);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ind-ink-soft);
  text-align: right;
}