/* ==========================================================================
   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); }

/* --- meme format glossary: real examples ---------------------------------
   A few glossary entries (title-swap mashups, the hand-drawn poster) are
   better shown than described — real fan-made images, not the generator's
   own output, embedded for illustration/commentary. Always a 2-up grid —
   image + caption stay a compact, consistent pair rather than one giant
   inline image; click a thumbnail to see it full-size in the lightbox. */
.gloss__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-2);
  margin-block: var(--sp-2) var(--sp-3);
  max-inline-size: 480px;
}
.gloss__gallery figure { margin: 0; }
.gloss__gallery a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
  cursor: zoom-in;
}
.gloss__gallery a:hover { border-color: var(--gold); }
/* No forced aspect-ratio crop: these are posters and screenshots with
   real, different shapes — a square crop would cut the title text off
   the bottom of the taller ones. Grid rows just end up uneven heights,
   which is fine at 2-up. */
.gloss__gallery img { inline-size: 100%; block-size: auto; display: block; }
.gloss__gallery figcaption {
  margin-block-start: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  text-align: center;
}
@media (max-width: 460px) { .gloss__gallery { grid-template-columns: 1fr; max-inline-size: 260px; } }

/* --- lightbox: click any gallery thumbnail to see it full-size ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(10, 8, 5, 0.88);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-inline-size: min(92vw, 900px);
  max-block-size: 88vh;
  inline-size: auto;
  block-size: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(0, 0, 0, 0.6); }