/*
 * Machine-file tool card — shared by /convert (change the format) and
 * /resize (change the size).
 *
 * The two pages are one tool with two front doors: same dropzone, same
 * browser-side parse, same result panel and simulator, same POST to
 * /convert/run. They are split because the *questions* are different — "my
 * machine won't read this file" and "this design won't fit my hoop" are not
 * the same problem and a single page asking both at once read as clutter.
 * templates/_convert_tool.html is the shared markup; this is its styling.
 *
 * Class names stay `convert-` prefixed on both pages. Renaming them to
 * something neutral would touch every id convert-page.js reaches for, for no
 * gain the user can see.
 */
.convert-hero {
  background: linear-gradient(135deg, #1452cc 0%, #0f3d96 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.convert-hero h1 { font-weight: 700; letter-spacing: -0.02em; }
.convert-hero .lead { color: rgba(255,255,255,.85); }

.convert-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(10, 25, 62, .08);
  padding: 1.75rem;
  margin-top: -2rem;
}

.convert-drop {
  display: block;
  border: 2px dashed var(--gray-300, #ccd3e0);
  border-radius: 14px;
  padding: 2.25rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.convert-drop:hover, .convert-drop.is-dragging {
  border-color: #1452cc;
  background-color: rgba(20, 82, 204, .04);
}
.convert-drop-icon { font-size: 2rem; color: #1452cc; margin-bottom: .5rem; }
.convert-drop-title { font-weight: 600; margin-bottom: .25rem; }

.convert-panel {
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-top: 1.25rem;
}
.convert-panel-head {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; margin-bottom: .75rem;
}

.convert-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .75rem;
}
.convert-stat {
  background: var(--gray-50, #f6f8fb);
  border-radius: 10px;
  padding: .55rem .7rem;
}
.convert-stat-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-500, #6b7a90);
}
.convert-stat-value { font-weight: 600; font-size: 1.02rem; }

.convert-hoop {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .85rem;
}
.convert-hoop-label {
  font-size: .78rem; font-weight: 600; color: var(--gray-600, #55637a);
  margin-bottom: 0; white-space: nowrap;
}
.convert-hoop-size { max-width: 360px; }
.convert-hoop-size input { max-width: 72px; }
/* Bootstrap reserves 2.25rem on the right for the chevron, so a select sized to
   its text alone renders as a bare arrow with the unit pushed out of view. */
.convert-hoop-size select { width: auto; min-width: 4.75rem; flex: 0 0 auto; }
.convert-hoop-note { flex: 1 1 100%; font-size: .8rem; color: var(--gray-500, #6b7a90); }
.convert-hoop-note.is-ok { color: #198754; }
.convert-hoop-note.is-over { color: #dc3545; font-weight: 500; }

.convert-resize {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .85rem;
}
.convert-resize-label {
  font-size: .78rem; font-weight: 600; color: var(--gray-600, #55637a);
  margin-bottom: 0; white-space: nowrap;
}
.convert-resize-size { max-width: 420px; }
.convert-resize-size input { max-width: 84px; }
/* Same Bootstrap chevron reservation as the hoop row above: a select sized to
   its own text renders as a bare arrow with the label clipped out of view. */
.convert-resize-size select { width: auto; flex: 0 0 auto; }
.convert-resize-size select#convert-resize-mode { min-width: 9.5rem; }
.convert-resize-size select#convert-resize-unit { min-width: 4.75rem; }
.convert-resize-note { flex: 1 1 100%; font-size: .8rem; color: var(--gray-500, #6b7a90); }
.convert-resize-note.is-ok { color: #198754; }
.convert-resize-note.is-warn { color: #b26a00; }
.convert-resize-note.is-over { color: #dc3545; font-weight: 500; }
.convert-resize-note strong { font-weight: 600; }

.convert-threads { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.convert-thread {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; padding: .2rem .55rem;
  border: 1px solid var(--gray-200); border-radius: 999px;
}
.convert-thread-swatch {
  width: .8rem; height: .8rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}

.convert-pairs { display: flex; flex-wrap: wrap; gap: .5rem; }
.convert-pairs a {
  border: 1px solid var(--gray-200); border-radius: 999px;
  padding: .3rem .8rem; font-size: .88rem; text-decoration: none;
}
.convert-pairs a:hover { border-color: #1452cc; }
.convert-pairs a.is-current {
  background: #1452cc; border-color: #1452cc; color: #fff;
}

/* ── /resize: the size control leads ────────────────────────────────────────
 *
 * Dropping a file used to produce a wall of numbers and colour chips with the
 * one control that matters tucked underneath. On /resize the target size is
 * the question the page exists to answer, so it sits first and at full size,
 * and the design's own measurements read as the context they are.
 */
.convert-resize--lead {
  margin-top: 0;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200, #e6eaf1);
}
.convert-resize--lead .convert-resize-label {
  font-size: .95rem;
  color: var(--gray-800, #2c3647);
}
.convert-resize--lead .convert-resize-size {
  max-width: 460px;
}
.convert-resize--lead .convert-resize-size input { max-width: 110px; }
.convert-resize--lead .convert-resize-size select#convert-resize-mode { min-width: 11rem; }
.convert-resize--lead .convert-resize-size select#convert-resize-unit { min-width: 5.5rem; }
.convert-resize--lead .convert-resize-note { font-size: .85rem; }

/* Secondary to the control above it: still legible, no longer the headline. */
.convert-resize--lead ~ .convert-stats .convert-stat-value { font-size: .95rem; }

@media (max-width: 575.98px) {
  /* The three-part input group wraps on a phone; letting the size field and
     its unit share a row keeps them readable instead of squeezing to a
     spinner and two characters. */
  .convert-resize--lead .convert-resize-size { max-width: 100%; }
  .convert-resize--lead .convert-resize-size select#convert-resize-mode {
    flex: 1 0 100%;
    min-width: 0;
    border-top-right-radius: var(--bs-border-radius, .375rem);
    border-bottom-left-radius: 0;
  }
  .convert-resize--lead .convert-resize-size input { max-width: none; flex: 1 1 auto; }
}

/* ── uploaded-design preview ────────────────────────────────────────────────
 *
 * Shown on both pages the moment a file parses, as confirmation that the right
 * design arrived. The fabric tone is the simulator's (#eef0f2, see
 * stitch-simulator.css): a light neutral reads as fabric and, more to the
 * point, keeps white and cream threads visible — on a white card they would
 * vanish entirely.
 *
 * Fixed height, auto width: the canvas is sized in JS to the design's own
 * aspect so it never letterboxes, and the flex centring here handles the
 * leftover space either side.
 */
.convert-preview {
  /* Hugs the canvas rather than spanning the card: a swatch of fabric the size
     of the design reads as "here is your design", where a full-width band with
     a small design adrift in it reads as an empty viewport. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1rem;
  background: #eef0f2;
  border: 1px solid var(--gray-200, #e6eaf1);
  border-radius: 10px;
  padding: .5rem;
}
.convert-preview canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.convert-preview.is-empty { display: none; }