/* ==========================================================================
   Meme generator — niu-lai.net
   Layout intent: on mobile the canvas sits on top and every control lands in
   the thumb zone underneath. On desktop the canvas is sticky so the preview
   never scrolls out of view while you fiddle with the controls.
   ========================================================================== */

.gen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--sp-4);
  align-items: start;
}
@media (max-width: 900px) {
  .gen { grid-template-columns: 1fr; }
}

/* --- canvas side -------------------------------------------------------- */
.gen__stage { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 900px) { .gen__stage { position: static; } }

.gen__canvas-frame {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-2);
}
#memeCanvas {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background-color: var(--bg-alt);
  background-image: conic-gradient(#ded8c9 25%, #f7f3e9 0 50%, #ded8c9 0 75%, #f7f3e9 0);
  background-size: 28px 28px;
}

.gen__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.gen__actions .btn--wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .gen__actions { grid-template-columns: 1fr; } }

.gen__status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  min-block-size: 1.3em;
  text-align: center;
}
.gen__privacy { font-size: var(--step--1); color: var(--ink-faint); text-align: center; }

/* --- controls side ------------------------------------------------------ */
.gen__controls { display: flex; flex-direction: column; gap: var(--sp-4); }

.ctrl { display: flex; flex-direction: column; gap: var(--sp-2); }
.ctrl__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}
.ctrl__val { color: var(--gold); font-variant-numeric: tabular-nums; }

.ctrl input[type="text"] {
  inline-size: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-hard);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.ctrl input[type="text"]::placeholder { color: var(--ink-faint); }

.ctrl input[type="range"] {
  inline-size: 100%;
  accent-color: var(--gold);
  block-size: 22px;
}

.ctrl__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.switch { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--step--1); color: var(--ink-dim); }
.switch input { accent-color: var(--gold); inline-size: 16px; block-size: 16px; }
.ctrl__hint { margin: 0; color: var(--ink-faint); font-size: var(--step--1); }

/* --- pack tabs ------------------------------------------------------------ */
.pack-tabs { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.pack-tab {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  padding: 8px 10px;
  border: 1px solid var(--border-hard);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  text-align: center;
}
.pack-tab[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
/* No opacity trick: that silently drops contrast below AA when the parent
   is unselected (ink-dim on surface) as well as when it's selected
   (on-gold on gold) — inherit full-strength currentColor instead and let
   the smaller size alone carry the visual hierarchy. */
.pack-tab .sub { display: block; font-size: 0.68rem; font-weight: 400; }

/* --- template picker ---------------------------------------------------- */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  max-block-size: 340px;
  overflow-y: auto;
  padding: 2px;
}
@media (max-width: 900px) { .tpl-grid { grid-template-columns: repeat(6, 1fr); max-block-size: 260px; } }
@media (max-width: 600px) { .tpl-grid { grid-template-columns: repeat(4, 1fr); } }

.tpl {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background-color: var(--surface-2);
  background-image: conic-gradient(#ded8c9 25%, #f7f3e9 0 50%, #ded8c9 0 75%, #f7f3e9 0);
  background-size: 14px 14px;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.tpl img { inline-size: 100%; aspect-ratio: 1/1; object-fit: cover; }
.tpl:hover { border-color: var(--border-hard); }
.tpl[aria-pressed="true"] { border-color: var(--gold); }

/* --- caption chips ------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--gold); }

/* --- upload ------------------------------------------------------------- */
.upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px dashed var(--border-hard);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.upload:hover { border-color: var(--gold); color: var(--ink); }
.upload input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

/* --- how-it-works steps ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); counter-reset: step; }
@media (max-width: 780px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block-start: var(--sp-2);
  border-block-start: 2px solid var(--gold);
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; }
.step p { font-size: var(--step--1); color: var(--ink-dim); }