/* minecraft-skin-converter — layout only. Colours, panels, buttons and form controls come
 * from tokens.css + tool-theme.css, same as every other tool on the site. */

.mskc { display: grid; gap: 12px; }

.mskc-step { padding: 14px 16px; }
.mskc-step .eyebrow { display: block; margin: 0 0 10px; }

/* ---------- drop zone ---------- */
.mskc-drop {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 26px 18px;
  border: 2px dashed var(--line);
  border-radius: var(--r-the, 12px);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.mskc-drop:hover,
.mskc-drop:focus-visible { border-color: var(--nhan); outline: none; }
.mskc-drop.mskc-over { border-color: var(--nhan); background: var(--nhan-nhat); }
.mskc-drop.mskc-has-file { border-style: solid; }
.mskc-drop b { font-size: 15px; color: var(--fg); }
.mskc-drop span { font-size: 13px; color: var(--fg-muted); }
.mskc-drop svg { width: 30px; height: 30px; margin-bottom: 2px; color: var(--nhan); }

.mskc-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- button row ---------- */
.mskc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.mskc-row button { min-height: 42px; }

.mskc-status { margin: 12px 0 0; font-size: 13.5px; min-height: 1.3em; }
.mskc-status.mskc-is-ok { color: var(--fg); }
/* The theme and the mobile layer both colour body text inside #tool-root from selectors
   carrying an id plus several attribute tests, which a class pair cannot outrank, and an
   error that reads as ordinary body text is not an error. This is the one declaration here
   that has to win outright, so it says so. */
.mskc-status.mskc-is-bad { color: #d14343 !important; font-weight: 500; }
:root[data-theme="dark"] .mskc-status.mskc-is-bad { color: #ff8f8f !important; }

/* ---------- sheets + 3D, side by side on a wide screen ---------- */
.mskc-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.mskc-cell { padding: 14px 16px; }
.mskc-cell .eyebrow { display: block; margin: 0 0 6px; }
.mskc-meta { margin: 0 0 10px; font-size: 12.5px; color: var(--fg-muted); }

.mskc-sheet {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 10px;
  border-radius: var(--r-o, 8px);
  /* A checkerboard so the transparent half of a skin sheet reads as transparent
     rather than as black or white pixels. */
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, rgba(127, 127, 127, .22) 25%, transparent 25%, transparent 75%, rgba(127, 127, 127, .22) 75%),
    linear-gradient(45deg, rgba(127, 127, 127, .22) 25%, transparent 25%, transparent 75%, rgba(127, 127, 127, .22) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.mskc-sheet canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.mskc-stage { display: grid; place-items: center; overflow: hidden; }
.mskc-stage canvas { max-width: 100%; height: auto; cursor: grab; touch-action: none; }
.mskc-stage canvas:active { cursor: grabbing; }

.mskc-field { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.mskc-field select, .mskc-field input { min-width: 0; width: 100%; }
.mskc-check { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.mskc-check span { font-size: 13.5px; color: var(--fg-muted); }

/* The 3D cell is the narrowest column in the grid, and a flex row there hands the second
   select only the leftover width, which is not enough for "Walking" plus its dropdown
   arrow once the theme bumps controls to 16px on touch. A grid splits the row evenly
   instead of by content, so no control is ever squeezed. */
.mskc-cell .mskc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: end;
  gap: 10px;
}
.mskc-cell .mskc-field { min-width: 0; }

.mskc-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--fg-muted); }
.mskc-note { margin: 0; font-size: 12.5px; color: var(--fg-dim); }

.mskc-how { padding: 14px 16px; }
.mskc-how .eyebrow { display: block; margin: 0 0 8px; }
.mskc-how p { margin: 0 0 8px; font-size: 13.5px; }
.mskc-how p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .mskc-grid { grid-template-columns: 1fr; }
  .mskc-row button { flex: 1 1 100%; }
  .mskc-drop { padding: 22px 14px; }

  /* The site's mobile layer sizes every control to 16px text and a 44px box at a
   * specificity my flex rules cannot reach, so two fields sharing a flex row leaves the
   * second select too narrow for its own text and dropdown arrow. A one-column grid takes
   * the width question away from flex entirely, and the doubled class matches the theme's
   * own way of raising specificity without !important. */
  .mskc-cell .mskc-row.mskc-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mskc-field.mskc-field { min-width: 0; width: 100%; }
  .mskc-check.mskc-check { display: flex; flex-direction: row; align-items: center; }
}