/* Fancy Text — the text card (sticky, so the input stays in reach while the
   list scrolls) over one card per style group whose rows are the styles, each
   copied on tap (layout from styles/components/form.css). The input is a
   large styles/components/editor.css pane; only the sticky backdrop and the
   style rows' inner grid are the page's own. */

/* ── Input ────────────────────────────────────────────────────────────────*/
.ft-hero {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-bottom: var(--space-1);
  background: linear-gradient(var(--bg) 70%, transparent);
}

textarea.ft-input {
  min-height: 56px;
  resize: none;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.4;
}

/* ── Style rows ───────────────────────────────────────────────────────────
   Each row is a <button>: reset the native chrome, keep the row geometry,
   and lay the name, the output and the copy chip on a grid. */
.ft-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  text-align: start;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background var(--duration-snap) var(--ease-standard);
}
/* The card does not clip, so the first and last rows carry its corners for
   their hover fill. */
.ft-row:first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.ft-row:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.ft-row:hover { background: var(--bg-hover); }
.ft-row:active { background: var(--bg-hover-strong); }
.ft-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ft-row__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ft-row__out {
  font-size: 21px;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ft-list--placeholder .ft-row__out { color: var(--text-quaternary); }

.ft-row__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-elev-2);
  opacity: 0.4;
  transition: opacity var(--duration-snap) var(--ease-standard), color var(--duration-snap) var(--ease-standard);
}
.ft-row:hover .ft-row__copy,
.ft-row:focus-visible .ft-row__copy { opacity: 1; }
/* flash() marks the label it relabels; the chip wears the confirmation. */
.ft-row__copy:has(.is-done) {
  opacity: 1;
  color: var(--success);
  border-color: var(--success-soft);
  background: var(--success-soft);
}
.ft-row__copy svg { display: block; }

/* Touch / no-hover devices: always show the copy chip */
@media (hover: none) {
  .ft-row__copy { opacity: 1; }
}

@media (max-width: 560px) {
  .ft-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label copy"
      "out   out";
  }
  .ft-row__label { grid-area: label; align-self: center; }
  .ft-row__copy { grid-area: copy; }
  .ft-row__out { grid-area: out; font-size: 20px; }
}

.embedded textarea.ft-input { font-size: 18px; }