/* The three picture makers on the Pictures screen — next/makers.v1.js (2026-10-04) */
.mk-wrap { margin-top: 2rem; }
.mk-h { font-size: 1.55rem; margin-bottom: .2rem; }
.mk-sub { margin-bottom: 1rem; }
.mk-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.mk-card { max-width: 54rem; }
.mk-card textarea { min-height: 0; }
.mk-under { margin: -.7rem 0 1rem; }
.mk-label { font-weight: 500; margin-bottom: .35rem; }

/* "Write 3 for me" and its suggestions */
.mk-ai { margin: -.4rem 0 1rem; align-items: center; }
.mk-pick-hint { margin-bottom: .5rem; }
.mk-opts { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.mk-opt { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: .8rem 1rem; line-height: 1.45; }
.mk-opt:hover, .mk-opt:focus-visible { border-color: var(--accent); }
.mk-opt b { display: block; font-size: 1.05rem; }
.mk-opt span { display: block; color: var(--ink-mid); margin-top: .2rem; }
.mk-opt.mk-sel { border-color: var(--accent); background: var(--accent-soft); }

/* how the post will read */
.mk-preview { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: .8rem 1rem; min-height: 3rem; margin-bottom: 1.2rem; }
.mk-empty { color: var(--ink-mid); font-style: italic; }
.mk-link { color: var(--accent); word-break: break-all; }

/* Customize the picture */
.mk-fold { margin: .4rem 0 1.2rem; }
.mk-fold summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.mk-fold[open] summary { margin-bottom: .7rem; }
.mk-sum { display: block; font-weight: 400; color: var(--ink-mid); font-size: .92rem; margin-top: .15rem; }
.mk-font-prev { font-size: 1.6rem; line-height: 1.3; padding: .4rem .9rem; margin: -.6rem 0 .3rem; border: 1px solid var(--ink-faint);
  border-radius: 10px; background: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-font-use { margin-bottom: .4rem; }

/* make it, and what came back */
.mk-quota { margin-bottom: .5rem; }
.mk-quota:empty { display: none; }
.mk-go { margin: .4rem 0 .8rem; }
.mk-result img { width: 100%; max-width: 560px; height: auto; }

@media (max-width: 760px) {
  .mk-go .btn-big { width: 100%; }
  .mk-ai .btn { width: 100%; }
  .mk-result .kit-btns .btn { flex: 1 1 100%; }
  .mk-font-prev { font-size: 1.35rem; }
}