/* ============================================================
   TikTok Comment Generator.

   Controls on the left, canvas on the right, stacking on a phone
   with the preview first so a change is visible while you make it.
   ============================================================ */

.tkf-cmt { margin: 1.5rem 0; }

/* The tool needs more room than a prose column gives it, but the column is
   left aligned inside a wider shell rather than centred, so the usual
   margin-left:50% breakout lands off the left edge. Grow to the right only. */
@media (min-width: 76rem) {
  .tkf-cmt { width: min(1120px, calc(100vw - 6rem)); }
}

.tkf-cmt-heading { font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.2; margin: 0 0 .4rem; }
.tkf-cmt-lede { margin: 0 0 1.2rem; color: var(--tkf-ink-2, #55525C); font-size: .95rem; }

.tkf-cmt-shell {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 60rem) {
  /* Preview first: on a phone the controls push it off-screen otherwise. */
  .tkf-cmt-shell { grid-template-columns: 1fr; }
  .tkf-cmt-stage { order: -1; }
}

/* ---------------- controls ---------------- */

.tkf-cmt-panel {
  background: var(--tkf-surface, #fff);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  border-radius: var(--tkf-radius, 16px);
  padding: 1.15rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}

.tkf-cmt-group { display: flex; flex-direction: column; gap: .45rem; }

/* display:flex beats the browser's [hidden] rule, so say it explicitly. */
.tkf-cmt-group[hidden] { display: none; }

.tkf-cmt-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tkf-muted, #8A8B91);
}

.tkf-cmt-row { display: flex; gap: .5rem; align-items: stretch; }

.tkf-cmt-input,
.tkf-cmt-area {
  width: 100%;
  font: inherit; font-size: .95rem;
  padding: .55rem .7rem;
  color: inherit;
  background: var(--tkf-paper, #FBF7FE);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  border-radius: 10px;
}

.tkf-cmt-area { resize: vertical; min-height: 5rem; line-height: 1.45; }

.tkf-cmt-input:focus,
.tkf-cmt-area:focus { outline: 2px solid var(--tkf-violet, #9B23D4); outline-offset: 1px; }

.tkf-cmt-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  background: var(--tkf-paper, #FBF7FE);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  border-radius: 10px;
  color: var(--tkf-muted, #8A8B91);
  transition: color .15s, background .15s;
}

.tkf-cmt-icon svg { width: 20px; height: 20px; }
.tkf-cmt-icon.is-on { color: #20D5EC; background: #20d5ec1a; border-color: #20d5ec55; }

/* ---------------- segmented buttons ---------------- */

.tkf-cmt-seg {
  display: flex;
  padding: 3px;
  gap: 3px;
  background: var(--tkf-paper, #FBF7FE);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  border-radius: 999px;
}

.tkf-cmt-segbtn {
  flex: 1 1 0;
  padding: .45rem .5rem;
  font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--tkf-muted, #8A8B91);
  background: transparent;
  border: 0; border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.tkf-cmt-segbtn.is-on { background: var(--tkf-violet, #9B23D4); color: #fff; }

/* ---------------- emoji ---------------- */

.tkf-cmt-emoji { display: flex; flex-wrap: wrap; gap: .25rem; }

.tkf-cmt-emojibtn {
  width: 2rem; height: 2rem;
  font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
  background: var(--tkf-paper, #FBF7FE);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.tkf-cmt-emojibtn:hover { border-color: var(--tkf-hairline, #E7D8F2); }

.tkf-cmt-count { margin: 0; font-size: .76rem; color: var(--tkf-muted, #8A8B91); }

/* ---------------- buttons ---------------- */

.tkf-cmt-btns { display: flex; flex-wrap: wrap; gap: .4rem; }

.tkf-cmt-btn {
  padding: .5rem .8rem;
  font: inherit; font-size: .84rem; font-weight: 700;
  color: inherit;
  background: var(--tkf-paper, #FBF7FE);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  border-radius: 999px;
  cursor: pointer;
}

.tkf-cmt-btn:hover { border-color: var(--tkf-violet, #9B23D4); }
.tkf-cmt-btn--quiet { color: var(--tkf-muted, #8A8B91); }

.tkf-cmt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.tkf-cmt-mini { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; color: var(--tkf-muted, #8A8B91); }

.tkf-cmt-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.tkf-cmt-cta {
  flex: 1 1 auto;
  padding: .7rem 1.1rem;
  font: inherit; font-size: .92rem; font-weight: 800;
  color: #fff;
  background: var(--tkf-violet, #9B23D4);
  border: 0; border-radius: 999px;
  cursor: pointer;
}

.tkf-cmt-cta:hover { filter: brightness(1.07); }

.tkf-cmt-hint,
.tkf-cmt-fine,
.tkf-cmt-note { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--tkf-muted, #8A8B91); }
.tkf-cmt-note.is-ok { color: #0d6b44; }
.tkf-cmt-note.is-warn { color: #9c2a3e; }

/* ---------------- preview ---------------- */

.tkf-cmt-stage { display: flex; flex-direction: column; gap: .5rem; }

/* The chequerboard is how someone can see that the export really is
   transparent, rather than white on a white page. */
.tkf-cmt-canvaswrap {
  padding: 1.2rem;
  border-radius: var(--tkf-radius, 16px);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  background-color: #cfcfd6;
  background-image:
    linear-gradient(45deg, #a9a9b4 25%, transparent 25%, transparent 75%, #a9a9b4 75%),
    linear-gradient(45deg, #a9a9b4 25%, transparent 25%, transparent 75%, #a9a9b4 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  display: grid; place-items: center;
  overflow: auto;
}

.tkf-cmt-canvas { width: 100%; max-width: 760px; height: auto; display: block; }

/* Light-on-dark comment text needs a dark chequerboard behind it or the
   preview is white on near-white. The exported PNG is unaffected. */
.tkf-cmt.is-darkstage .tkf-cmt-canvaswrap {
  background-color: #3a3a44;
  background-image:
    linear-gradient(45deg, #2b2b33 25%, transparent 25%, transparent 75%, #2b2b33 75%),
    linear-gradient(45deg, #2b2b33 25%, transparent 25%, transparent 75%, #2b2b33 75%);
}

.tkf-cmt-stagenote { margin: 0; font-size: .78rem; color: var(--tkf-muted, #8A8B91); }

@media (prefers-reduced-motion: reduce) {
  .tkf-cmt-icon, .tkf-cmt-segbtn { transition: none; }
}

/* Select, matching the pill buttons it sits beside. */
.tkf-cmt-select {
  padding: .5rem 1.6rem .5rem .7rem;
  font: inherit; font-size: .84rem; font-weight: 700;
  color: inherit;
  background: var(--tkf-paper, #FBF7FE);
  border: 1px solid var(--tkf-hairline, #E7D8F2);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8B91' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 10px;
}

.tkf-cmt-select--wide { flex: 1 1 auto; min-width: 0; }
.tkf-cmt-select:focus { outline: 2px solid var(--tkf-violet, #9B23D4); outline-offset: 1px; }

/* Inside the button row the select should sit beside the buttons, not claim
   a row of its own. */
.tkf-cmt-btns .tkf-cmt-select { flex: 0 1 auto; max-width: 9rem; }