/**
 * Stitch simulator styles
 * =======================
 *
 * Shared by the download step (templates/index.html) and the account page's
 * design cards (templates/account.html), which is why this is its own file
 * rather than part of digitize.css — the account page has no reason to load
 * the whole editor stylesheet.
 */
/* ---------------------------------------------------------------------------
   Stitch simulator (static/js/stitch-simulator.js)

   Lives inside #embroidery-preview-container on the download step, swapping
   in for the server-rendered preview image when the user presses play. The
   container is a fixed-height box, so the simulator lays itself out as a
   flex column: the canvas stage takes whatever height the transport controls,
   colour legend and stats line leave behind.
--------------------------------------------------------------------------- */

.stitch-sim-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 0.4rem;
}

.stitch-sim-panel.d-none {
  display: none !important;
}

/* The preview box is sized for a static image. Once the transport controls,
   colour legend and stats line are in there too, 400px leaves the canvas with
   barely half the height, so the box grows while the simulator is open. The
   height on the container is an inline style, hence !important. */
#embroidery-preview-container.stitch-sim-open {
  height: 540px !important;
  /* The container carries `cursor: zoom-in` for click-to-enlarge on the static
     preview. That is wrong over the simulator — nothing here zooms — and the
     canvas inherits it, so it is reset for the whole panel and re-stated on the
     controls that really are clickable. */
  cursor: default;
}

.stitch-sim-panel,
.stitch-sim-stage,
.stitch-sim-canvas,
.stitch-sim-footer {
  cursor: default;
}

.stitch-sim-chip,
.stitch-sim-transport .btn,
.stitch-sim-events-toggle {
  cursor: pointer;
}

@media (max-width: 575.98px) {
  #embroidery-preview-container.stitch-sim-open {
    height: 420px !important;
  }
}

.stitch-sim-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Deliberately not white: the first colour block of a patch design is
     usually white thread on a white base, which is invisible against a white
     canvas. A light neutral reads as fabric and keeps pale threads visible. */
  background: #eef0f2;
  border-radius: 0.25rem;
  overflow: hidden;
}

.stitch-sim-canvas {
  position: absolute;
  inset: 0;
  display: block;
}

.stitch-sim-overlay {
  pointer-events: none;
}

.stitch-sim-transport {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.stitch-sim-transport .btn {
  flex: 0 0 auto;
  line-height: 1;
}

.stitch-sim-play {
  min-width: 2.4rem;
}

.stitch-sim-speed {
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
}

.stitch-sim-counter {
  margin-left: auto;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The scrub sits directly on top of the timeline strip so the thumb and the
   event ticks share one coordinate space. The input keeps its thumb but gives
   up its track; the canvas underneath is the track. */
.stitch-sim-track {
  position: relative;
  flex: 0 0 auto;
  height: 18px;
  margin: 0.1rem 7px 0.35rem;
  /* The border frames the strip so a white or cream colour band still reads as
     part of the timeline rather than as empty space. */
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 3px;
  overflow: hidden;
}

.stitch-sim-timeline {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 3px;
}

.stitch-sim-scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.stitch-sim-scrub:focus {
  outline: none;
}

.stitch-sim-scrub:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.stitch-sim-scrub::-webkit-slider-runnable-track {
  height: 16px;
  background: transparent;
  border: 0;
}

.stitch-sim-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 16px;
  border-radius: 3px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.stitch-sim-scrub::-moz-range-track {
  height: 16px;
  background: transparent;
  border: 0;
}

.stitch-sim-scrub::-moz-range-thumb {
  width: 14px;
  height: 16px;
  border-radius: 3px;
  background: transparent;
  border: 0;
}

.stitch-sim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 0 0 auto;
  max-height: 3.4rem;
  overflow-y: auto;
}

.stitch-sim-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid #dee2e6;
  border-radius: 999px;
  background: #fff;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #495057;
  white-space: nowrap;
}

.stitch-sim-chip.is-active {
  border-color: #0d6efd;
  background: #e7f1ff;
  color: #084298;
  font-weight: 600;
}

.stitch-sim-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}

.stitch-sim-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.9rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* The key is also the event count: the glyph in it is exactly what is drawn on
   the canvas and ticked on the timeline, so there is nothing to look up. */
.stitch-sim-key {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stitch-sim-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  cursor: help;
}

.stitch-sim-key-item svg {
  flex: 0 0 auto;
}

.stitch-sim-events-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0 auto;
  cursor: pointer;
  white-space: nowrap;
}

/* The preview box is 400px tall and shared with the static image; on a phone
   the legend and stats would squeeze the canvas to nothing, so they go. */
@media (max-width: 575.98px) {
  .stitch-sim-legend,
  .stitch-sim-stats {
    display: none;
  }

  .stitch-sim-key {
    gap: 0.5rem;
    font-size: 0.7rem;
  }

  .stitch-sim-events-toggle {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   The "watch it stitch" call to action.

   Overlays the static preview the way a video poster frame carries a play
   button. This is the discoverable entry point; #stitch-sim-toggle in the
   panel header is the secondary one and the way back out.
--------------------------------------------------------------------------- */

.stitch-sim-cta {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
  transition: background 0.15s ease, transform 0.15s ease;
}

.stitch-sim-cta:hover,
.stitch-sim-cta:focus-visible {
  background: #0b5ed7;
  transform: translateY(-1px);
}

.stitch-sim-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.75rem;
  padding-left: 0.12rem; /* optically centre the triangle */
}

.stitch-sim-cta-text {
  white-space: nowrap;
}

/* The design summary used to sit under the old full-panel call to action.
   As a corner pill there is no room for it, so it moves to the tooltip. */
.stitch-sim-cta-sub {
  display: none;
}

.stitch-sim-cta.d-none {
  display: none !important;
}

@media (max-width: 575.98px) {
  .stitch-sim-cta {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
  }

  .stitch-sim-cta-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.65rem;
  }
}

/* ---------------------------------------------------------------------------
   Simulator in a modal (account page) and its trigger on a design card.
--------------------------------------------------------------------------- */

.stitch-sim-modal-body {
  position: relative;
  height: min(70vh, 620px);
}

.stitch-sim-modal-body .stitch-sim-panel {
  height: 100%;
}

.stitch-sim-modal-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--bs-secondary-color, #6c757d);
}

.stitch-sim-modal-status.d-none {
  display: none !important;
}

/* Sits in the bottom-right of a design card's preview, the way a play badge
   sits on a video thumbnail. The wrapper is what makes it positionable. */
.design-preview-wrap {
  position: relative;
  display: block;
}

.stitch-sim-card-play {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding-left: 0.15rem; /* optically centre the triangle */
  border: 0;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}

.stitch-sim-card-play:hover,
.stitch-sim-card-play:focus-visible {
  background: #0b5ed7;
  transform: scale(1.08);
}

/* ---------------------------------------------------------------------------
   Suppressing the preview's click-to-enlarge affordance.

   #embroidery-preview-container owns a hover treatment for enlarging the still
   preview: a dark tint (::after), a 60px magnifier badge (::before, z-index 5)
   and a scale/shadow lift. The badge sits above the simulator's own call to
   action and the simulator's canvas, so hovering either one shows a greyed-out
   zoom icon over the top of it.

   Whenever the simulator owns this surface — its CTA is up, or it is open —
   all of that is switched off. When the simulator is unavailable (a file we
   cannot parse) none of these classes are set and the panel behaves exactly as
   it always did.
--------------------------------------------------------------------------- */

#embroidery-preview-container.stitch-sim-cta-visible,
#embroidery-preview-container.stitch-sim-open {
  cursor: default;
}

#embroidery-preview-container.stitch-sim-cta-visible:hover,
#embroidery-preview-container.stitch-sim-open:hover {
  box-shadow: none;
  transform: none;
}

#embroidery-preview-container.stitch-sim-cta-visible::before,
#embroidery-preview-container.stitch-sim-cta-visible::after,
#embroidery-preview-container.stitch-sim-open::before,
#embroidery-preview-container.stitch-sim-open::after {
  content: none;
}

/* Explicit affordance for click-to-enlarge, since the container's own hover
   magnifier is switched off above. Sits in the opposite corner from the play
   pill. Deliberately a sibling of the CTA rather than a child: digitize.js's
   enlarge handler ignores clicks inside #stitch-sim-cta, and this one needs to
   reach it. */
.stitch-sim-expand {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 0.8rem;
  cursor: zoom-in;
  transition: background 0.15s ease;
}

.stitch-sim-expand:hover,
.stitch-sim-expand:focus-visible {
  background: rgba(15, 23, 42, 0.78);
}

.stitch-sim-expand.d-none {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Simulator as a page of its own (templates/stitch_simulator.html)

   Same panel, but nothing else is competing for the viewport, so it gets a
   generous fixed box rather than the download step's preview-sized one. The
   panel needs a resolved height — it lays itself out as a flex column against
   its container — so this cannot be left to the content.
--------------------------------------------------------------------------- */

.stitch-sim-standalone {
  height: min(68vh, 640px);
}

@media (max-width: 575.98px) {
  .stitch-sim-standalone {
    height: 440px;
  }

  /* The panel-wide phone rule drops the colour legend and the stitch-count line
     because the download step's preview box has no room for them. Here it does,
     and they are most of what a visitor opened a stranger's file to find out —
     so this page opts back in, with the legend capped and scrollable. */
  .stitch-sim-standalone .stitch-sim-legend {
    display: flex;
    max-height: 2.6rem;
  }

  .stitch-sim-standalone .stitch-sim-stats {
    display: inline;
  }
}