/* Schematic Converter. #sconv-scoped — tool-theme.css loads after this. */

#sconv { display: block; }

#sconv .sconv-drop {
  border: 2px dashed rgba(127, 127, 127, .45);
  border-radius: 14px;
  padding: 28px 18px;
  text-align: center;
  transition: border-color .15s, background-color .15s;
}
#sconv .sconv-drop.sconv-over { border-color: currentColor; background: rgba(127, 127, 127, .08); }
#sconv .sconv-droptitle { margin: 0 0 5px; font-size: 17px; font-weight: 700; }
#sconv .sconv-dropsub { margin: 0 0 15px; font-size: 13px; opacity: .7; }
#sconv .sconv-file { display: inline-block; cursor: pointer; }

#sconv .sconv-body { margin-top: 22px; }
#sconv .sconv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
#sconv .sconv-stat { padding: 10px 12px; border-radius: 10px; background: rgba(127, 127, 127, .10); }
#sconv .sconv-statlabel {
  display: block; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; opacity: .68;
}
#sconv .sconv-statvalue { display: block; font-size: 18px; line-height: 1.25; margin-top: 2px; word-break: break-word; }
#sconv .sconv-statsub { display: block; margin-top: 2px; font-size: 11px; opacity: .6; word-break: break-all; }

#sconv .sconv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: start;
}
#sconv .sconv-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#sconv .sconv-field { display: block; min-width: 0; }
#sconv .sconv-label {
  display: block; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; opacity: .72; margin-bottom: 6px;
}
#sconv .sconv-sub { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .72; }

/* Targets ----------------------------------------------------------------- */
#sconv .sconv-targets { display: flex; flex-direction: column; gap: 8px; }
#sconv .sconv-target {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: 10px; cursor: pointer; text-align: left;
}
#sconv .sconv-target.sconv-on { outline: 2px solid currentColor; outline-offset: -2px; }
#sconv .sconv-targetname {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700;
}
#sconv .sconv-targetlabel { font-size: 12.5px; font-weight: 600; opacity: .82; }
#sconv .sconv-targetnote { font-size: 11.5px; line-height: 1.45; opacity: .66; }
#sconv .sconv-refused {
  margin: 4px 0 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(127, 127, 127, .10);
  font-size: 12.5px; line-height: 1.6;
}

/* Preview ----------------------------------------------------------------- */
#sconv .sconv-stage {
  border-radius: 12px;
  padding: 10px;
  background: rgba(127, 127, 127, .10);
  display: flex; align-items: center; justify-content: center;
}
#sconv .sconv-stage canvas {
  display: block; max-width: 100%; height: auto;
  /* One canvas pixel is one block; smoothing turns a plan into a blur. */
  image-rendering: pixelated;
  border-radius: 6px;
}
#sconv .sconv-layernav { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#sconv .sconv-layernav input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; box-sizing: border-box; }
#sconv .sconv-step { width: 34px; height: 32px; border-radius: 8px; font-size: 14px; padding: 0; cursor: pointer; }

#sconv .sconv-mats { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
#sconv .sconv-mat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(127, 127, 127, .12);
  font-size: 12px;
}
#sconv .sconv-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .3); flex: 0 0 auto;
}

#sconv .sconv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#sconv .sconv-btn { padding: 9px 15px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; }
#sconv .sconv-note { margin: 0; min-height: 1.2em; font-size: 13px; line-height: 1.55; opacity: .85; }

#sconv .sconv-help { margin-top: 26px; font-size: 14.5px; line-height: 1.65; max-width: 72ch; }
#sconv .sconv-help p { margin: 0; }

#sconv [hidden] { display: none !important; }