/* ── CHARACTER CREATOR ──────────────────────────────────────────────── */

.ch-panel { margin-bottom: 0; }
.ch-note { margin: 8px 0; line-height: 1.45; }
.ch-finish { display: flex; flex-direction: column; width: 100%; }

/* ── art styles ── */
.ch-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 700px) { .ch-styles { grid-template-columns: repeat(3, 1fr); } }
.ch-style {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; text-align: left;
  background: var(--speech-fill); color: var(--ink);
  border: 2px solid var(--ink-line); border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  cursor: pointer; font-family: var(--f-body);
}
.ch-style:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--panel-shadow); }
.ch-style.is-on { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--riso-yellow); }
.ch-style.is-on .ch-style-sub { color: rgba(255,255,255,0.72); }
.ch-style-name { font-family: var(--f-head); font-weight: 700; font-size: 15px; }
.ch-style-sub { font-size: 11px; color: var(--newsprint-mute); line-height: 1.3; }

.ch-desc { width: 100%; resize: vertical; line-height: 1.5; }

/* ── output templates ── */
/* The picture IS the explanation here, so the cards are image-led and big
   enough to actually read a turnaround at a glance. */
.ch-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .ch-templates { grid-template-columns: repeat(3, 1fr); } }
.ch-tpl {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 8px; overflow: hidden; text-align: left;
  background: var(--paper-2); color: var(--ink);
  border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  cursor: pointer; font-family: var(--f-body);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ch-tpl:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--panel-shadow); }
.ch-tpl.is-on {
  border-color: var(--riso-pink-ink);
  box-shadow: var(--shadow-harder);
  transform: translate(-1px, -1px);
}
/* White plate behind the sample: every reference is drawn on white, so letting
   the paper texture show through would misrepresent the output. */
.ch-tpl-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; display: block;
  border-bottom: 2px solid var(--ink-line);
}
.ch-tpl-name { font-family: var(--f-head); font-weight: 700; font-size: 13px; padding: 5px 8px 0; }
.ch-tpl-sub { font-size: 10px; color: var(--newsprint-mute); padding: 0 8px; line-height: 1.3; }

/* ── result ── */
.ch-status, .ch-result { margin-top: 12px; }
.ch-out {
  width: 100%; max-width: 460px; margin: 0 auto; display: block;
  background: #fff; cursor: zoom-in;
  border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}
.ch-result-actions { gap: 8px; margin-top: 10px; justify-content: center; }
@media (min-width: 900px) { .ch-right { position: sticky; top: 84px; align-self: start; } }