/* ── Introduction card maker ─────────────────────────────────────────────────────────
   Theme tokens, header and buttons all come from /styles.css; this file only
   describes the parts unique to this page. The card itself is painted on a
   canvas by card.js, so nothing here styles the artwork — only the room it
   sits in and the controls beside it. */

.ic-page {
  background: var(--c-wash);
}

/* The typeface the card artwork is set in. Self-hosted rather than fetched
   from Google, because canvas will not wait for a webfont: if the face has not
   arrived by the time we draw, it silently substitutes a default one and the
   downloaded PNG ships in the wrong font. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: block;
}

.l-intro {
  padding: 3.5rem 1.5rem 5rem;
}

.l-intro__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.l-intro__title {
  font-size: 2rem;
  color: var(--c-pink);
  /* Carries the gap before the card on its own. The paragraph that used to sit
     under it held this spacing and has since been dropped, which left the
     heading sitting straight on top of the stage. */
  margin-bottom: 3.5rem;
}

/* The forced break reads well on a wide screen but strands a short second line
   on a phone, where the heading already wraps on its own. */
@media (max-width: 560px) {
  .l-intro__title br { display: none; }
}

.l-intro__text {
  color: var(--c-body);
  max-width: 580px;
  margin: 0 auto 2.75rem;
}

.l-intro__back {
  margin-top: 2.5rem;
  font-size: 0.88rem;
}

.l-intro__back a {
  color: var(--c-pink);
  font-weight: 700;
}

.c-intro {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  text-align: left;
}

/* ── Stage ─────────────────────────────────────────────────────────────── */

.c-intro__stage {
  flex: 1 1 600px;
  min-width: 0;
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
}

.c-intro__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1063 / 650;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(229, 48, 125, 0.13);
  cursor: grab;
  /* Dragging the photo must not scroll the page on a touch screen. */
  touch-action: none;
}

.c-intro__canvas.is-dragging { cursor: grabbing; }

.c-intro__canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.c-intro__stagebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.c-intro__panel {
  flex: 0 0 340px;
  max-width: 340px;
}

.c-intro__block {
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--c-border);
}

.c-intro__block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.c-intro__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--c-pink);
  margin: 0 0 0.85rem;
}

.c-intro__count {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.c-intro__count.is-full { color: var(--c-pink); }

.c-intro__hint {
  font-size: 0.78rem;
  color: var(--c-muted);
  margin: 0.55rem 0 0;
  line-height: 1.55;
}

.c-intro__stagebar .c-intro__hint {
  flex: 1 1 auto;
  margin: 0;
}

/* ── Fields ────────────────────────────────────────────────────────────── */

.c-intro__field {
  display: block;
  margin-bottom: 0.7rem;
}

.c-intro__field > span {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--c-body);
  margin-bottom: 0.28rem;
}

.c-intro__row {
  display: flex;
  gap: 0.6rem;
}

.c-intro__row .c-intro__field {
  flex: 1 1 0;
  min-width: 0;
}

.c-intro__input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: #fff;
  color: var(--c-body);
  font: inherit;
  font-size: 0.86rem;
  transition: border-color 0.15s ease;
}

.c-intro__input:focus {
  outline: none;
  border-color: var(--c-pink);
}

.c-intro__input::placeholder { color: var(--c-dash); }

.c-intro__textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.5;
}

.c-intro__search { margin-bottom: 0.6rem; }

/* ── Colourways ────────────────────────────────────────────────────────── */

.c-intro__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.c-intro__swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.c-intro__swatch:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.c-intro__swatch[aria-checked="true"] {
  border-color: var(--c-pink);
}

/* ── Photo ─────────────────────────────────────────────────────────────── */

/* .c-btn was written for an <a>, so a <button> wearing it still carries the
   browser's own border, background and padding — which showed up as a grey
   box around the pill. Same reset the twibbon page uses. */
.c-intro__file,
.c-intro__download {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.c-intro__file:focus-visible .c-btn__link,
.c-intro__download:focus-visible .c-btn__link {
  outline: 3px solid var(--c-pink);
  outline-offset: 3px;
}

/* Kept in the layout but unreachable: the visible button forwards to it. */
.c-intro__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-intro__zoom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

/* Label, slider, readout and Reset is four things in one row. On a narrow
   phone the slider would be squeezed to a stub, so it keeps a floor and the
   row wraps instead. */
.c-intro__zoom input[type="range"] {
  flex: 1 1 120px;
  min-width: 110px;
  accent-color: var(--c-pink);
}

.c-intro__zoomlabel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  text-transform: uppercase;
}

/* Small secondary control, used for Reset and Hapus. */
.c-intro__tool {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  background: #fff;
  color: var(--c-body);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.c-intro__tool:hover {
  border-color: var(--c-pink);
  color: var(--c-pink);
}

/* ── Oshi picker ───────────────────────────────────────────────────────── */

.c-intro__picked {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 54px;
  padding: 0.5rem;
  margin-bottom: 0.7rem;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
}

.c-intro__picked:empty::after {
  content: 'Belum ada oshi dipilih.';
  align-self: center;
  padding: 0.35rem 0.2rem;
  font-size: 0.76rem;
  color: var(--c-muted);
}

.c-intro__chip {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.c-intro__chip img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.c-intro__chip::after {
  content: '\00d7';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--c-pink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.c-intro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 0.4rem;
  max-height: 296px;
  overflow-y: auto;
  padding: 0.2rem;
}

.c-intro__pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem 0.1rem 0.3rem;
  border: 0;
  border-radius: 11px;
  background: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.c-intro__pick:hover { background: var(--c-wash); }

.c-intro__pick[aria-pressed="true"] {
  background: var(--c-wash);
  outline: 2px solid var(--c-pink);
}

.c-intro__pick:disabled:not([aria-pressed="true"]) {
  opacity: 0.28;
  cursor: not-allowed;
}

.c-intro__pick img {
  width: 44px;
  height: 44px;
  display: block;
}

.c-intro__pick span {
  font-size: 0.54rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-muted);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.c-intro__empty {
  grid-column: 1 / -1;
  padding: 1rem 0.3rem;
  font-size: 0.78rem;
  color: var(--c-muted);
  text-align: center;
}

/* ── Download ──────────────────────────────────────────────────────────── */

.c-intro__download { width: 100%; }


.c-intro__status {
  min-height: 1.1rem;
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-pink);
  text-align: center;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .c-intro {
    flex-direction: column;
    gap: 2rem;
  }

  .c-intro__stage {
    position: static;
    width: 100%;
    flex: 1 1 auto;
  }

  .c-intro__panel {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .l-intro { padding: 2.5rem 1rem 3.5rem; }

  .l-intro__title {
    font-size: 1.6rem;
    margin-bottom: 2.25rem;
  }

  .c-intro__row { flex-direction: column; gap: 0; }
  .c-intro__grid { max-height: 240px; }

  /* Comfortable tap targets, and a font size iOS will not zoom into on
     focus — anything under 16px makes Safari scale the whole page. */
  .c-intro__input {
    font-size: 16px;
    padding: 0.6rem 0.75rem;
  }

  .c-intro__tool { padding: 0.5rem 0.9rem; }

  /* The picked-oshi chips and the picker tiles both grow a little, so they
     are not a two-finger operation. */
  .c-intro__chip { width: 42px; height: 42px; }
  .c-intro__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .c-intro__pick img { width: 48px; height: 48px; }
}

/* Live zoom percentage. Tabular figures so the row does not jitter as the
   slider moves through 99% / 100% / 101%. */
.c-intro__zoomval {
  flex: 0 0 auto;
  min-width: 3.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Shown only while the comment would not fit the white box. The card still
   renders, with the tail ellipsised rather than allowed to run off the edge,
   so this warns rather than blocks. */
.c-intro__warn {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: var(--c-wash);
  border: 1.5px solid var(--c-pink-light);
  color: var(--c-pink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

.c-intro__warn-icon {
  flex: 0 0 auto;
  /* Nudged down so the triangle sits on the first line of text, not above it. */
  margin-top: 0.05rem;
}