/* Free tools (eulogy-writer.php), Oct 2026: a form card, the editable draft, a gentle next step, then the guide. */
.tl .card { padding: 26px 26px 24px; }
.tl-form .field label { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); }
.tl-opt { font-weight: 400; color: var(--ink-soft); }
.tl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.tl-form textarea { min-height: 160px; line-height: 1.55; }
.tl-pick { border: 0; padding: 0; margin: 0 0 18px; }
.tl-pick legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; color: var(--ink); }
.tl-pick label { display: inline-flex; margin: 0 6px 8px 0; cursor: pointer; }
.tl-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tl-pick span { padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(40, 32, 22, .14); background: #fff; font-size: .9rem; transition: border-color .15s ease, background .15s ease; }
.tl-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.tl-pick input:focus-visible + span { outline: 2px solid var(--sage-700); outline-offset: 2px; }
.tl-status { margin: 12px 0 0; font-size: .92rem; color: var(--ink-soft); min-height: 1.3em; }

.tl-result { margin-top: 22px; }
.tl-res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.tl-res-head h2 { margin: 0; font-size: 1.5rem; }
.tl-left { font-size: .85rem; color: var(--ink-soft); }
.tl-text { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(40, 32, 22, .12); background: #FFFDF9; font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; line-height: 1.75; color: #1F2329; resize: vertical; min-height: 320px; }
.tl-text:focus { outline: 2px solid var(--sage-500); border-color: transparent; }
.tl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tl-revise { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(40, 32, 22, .08); }
.tl-revise-h { margin: 0 0 10px; font-weight: 700; font-size: .95rem; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chip { border: 1.5px solid rgba(40, 32, 22, .14); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink); }
.tl-chip:hover { border-color: var(--sage-500); }
.tl-chip:disabled, .tl-actions button:disabled { opacity: .55; cursor: progress; }
.tl-own { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tl-own input { flex: 1 1 240px; min-width: 0; border: 1.5px solid var(--sage-200); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .95rem; background: #fff; }
.tl-support { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #EEF4FA; font-size: .93rem; line-height: 1.55; }

.tl-next { margin-top: 22px; padding: 22px 24px; border-radius: 20px; background: #0B0E14; color: rgba(233, 237, 242, .78); box-shadow: 0 22px 48px -30px rgba(11, 14, 20, .6); background-image: radial-gradient(420px 200px at 10% 110%, rgba(192, 138, 82, .25), transparent 70%); }
.tl-next-h { margin: 0 0 6px; font-family: var(--display); font-size: 1.3rem; color: #F2F4F7; }
.tl-next p { margin: 0 0 14px; max-width: 60ch; line-height: 1.6; }
.tl-next .btn-dark { background: #F4F6F8; color: #12161E; }

.tl-guide { margin-top: 56px; }
.tl-guide h2 { margin: 0 0 12px; }
.tl-guide h3 { margin: 30px 0 10px; font-size: 1.25rem; }
.tl-guide p, .tl-guide li { color: #2F3A48; line-height: 1.7; }
.tl-guide ol, .tl-guide ul { margin: 0 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-guide details.faq { margin-top: 10px; }
.tl-care { margin-top: 30px; padding: 16px 18px; border-radius: 14px; background: #EEF4FA; font-size: .95rem; }
.tl-care a { text-decoration: underline; }
@media (max-width: 560px) {
  .tl .card { padding: 20px 16px; }
  .tl-text { padding: 16px; font-size: 1.05rem; }
  .tl-actions .btn-dark, .tl-actions .btn-ghost { flex: 1 1 auto; text-align: center; }
}
.tl-more { margin-top: 30px; font-size: .95rem; color: var(--ink-soft); }
.tl-more a { color: var(--sage-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(63, 110, 158, .35); }
.tl-guide blockquote, .tl-guide em { color: inherit; }