/* ============================================================
 * PIO Synthesis Lab - layout tweak   (pure ASCII on purpose)
 * ------------------------------------------------------------
 * Scope : html.pio-synth-on   (added at runtime by pio-synth-tweak.v1.js
 *                              only while the synthesis page is mounted)
 *         => affects the synthesis page only, zero side effects elsewhere
 * Goal  : boss request - required-material cards 3 per row
 *         (they used to be 1 per row, wasting space)
 * v2 fix: cards in one row are now EXACTLY the same height and the
 *         thumbnails start / end at the same y.
 *         v1 measured defect (375px, real Chrome):
 *           row2  boxTop spread 14.3px, card height spread 25.6px,
 *                 thumbnail height spread 39.9px  -> looked crooked
 *         cause  : the header text height differed per card (a 2-line
 *                  name and the "(0/2)" line pushed the image down)
 *         cure   : every text block gets a FIXED height, so the header
 *                  is the same 54px on every card, and every thumbnail
 *                  area is the same square -> tops AND bottoms line up.
 *         px is used on purpose (not rem) so the layout cannot drift
 *         when uni-app rescales the page root font-size per device.
 * v3 2026-10-09 : per-recipe opening time -> a locked recipe card gets a
 *                 "not open" pill (see .pio-recipe-lock-tag below).
 * NOTE  : every rule that overrides the app's own scoped CSS carries
 *         !important, because the app injects its CSS at runtime.
 * ============================================================ */

/* ---- material cards : 3 per row, equal height per row ---- */
html.pio-synth-on .ingredients-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;   /* <- cards in one row share a height */
  width: 100% !important;
  box-sizing: border-box !important;
}

html.pio-synth-on .ing-slot {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 8px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ---- header : fixed 54px block on every card
        series 12 + name 28 + count 14 = 54 ---- */
html.pio-synth-on .ing-header {
  display: block !important;
  margin-bottom: 6px !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
}
html.pio-synth-on .ing-name-box {
  display: block !important;
}
html.pio-synth-on .ing-series {
  display: block !important;
  font-size: 9px !important;
  line-height: 12px !important;
  height: 12px !important;          /* one line; a longer name gets ... */
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
html.pio-synth-on .ing-name {
  display: block !important;
  font-size: 11px !important;
  line-height: 14px !important;
  height: 28px !important;          /* up to 2 lines */
  overflow: hidden !important;
  word-break: break-all !important;
}
html.pio-synth-on .ing-count {
  display: block !important;
  font-size: 11px !important;
  line-height: 14px !important;
  height: 14px !important;
  color: #a6a6c8 !important;
}

/* ---- thumbnail area : identical square on every card
        => tops AND bottoms line up ---------------------------- */
html.pio-synth-on .ing-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 2.5rem !important;    /* fallback for very old WebViews */
}
html.pio-synth-on .ing-items > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
html.pio-synth-on .item-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 2.5rem !important;
  box-sizing: border-box !important;
}
html.pio-synth-on .plus {
  font-size: 1rem !important;
}

/* ---- notice bar shown while synthesis is not open yet ---- */
.pio-synth-banner {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(255, 137, 6, 0.12);
  border: 1px solid rgba(255, 137, 6, 0.5);
  border-radius: 10px;
  color: #ffb454;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  word-break: break-all;
}

/* ---- grey out the "start synthesis" button while locked ---- */
html.pio-synth-locked .synth-btn {
  opacity: 0.45 !important;
  filter: grayscale(0.6) !important;
}

/* ---- per-recipe lock : pill on a recipe card that is still closed ---- */
html.pio-synth-on .recipe-card {
  position: relative !important;
}
html.pio-synth-on .recipe-card.pio-recipe-lock {
  opacity: 0.55 !important;
}
html.pio-synth-on .recipe-card.pio-recipe-lock > * {
  pointer-events: none !important;
}
html.pio-synth-on .pio-recipe-lock-tag {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 5 !important;
  padding: 3px 6px !important;
  background: rgba(255, 137, 6, 0.95) !important;
  color: #1a1a2e !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: bold !important;
  border-radius: 8px 0 8px 0 !important;
  pointer-events: none !important;
}

/* ---- tiny self-made toast (does not rely on uni.showToast) ---- */
#pio-synth-toast {
  position: fixed;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  max-width: 78%;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 8px;
  z-index: 30000;
  text-align: center;
}