/* A tool's draft, written on its own page without an account (tools.js): under the form's button, inside the form's
   box, with the buttons in the form's own row. Plain text as the model wrote it, its line breaks kept. */
.tool-draft { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.tool-draft-text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; }
.tool-draft-text:empty { display: none; }
.tool-draft .tool-go { margin: 0; }
/* Under a finished draft: why an account, and its button (tools.js, the hook). A plain box like the form's own. */
.tool-hook { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.tool-hook[hidden] { display: none; }
.tool-hook p, .tool-hook ul { margin: 0; }
.tool-hook-head { font-size: 19px; font-weight: 600; color: var(--ink); }
.tool-hook-why { color: var(--body); }
.tool-hook ul { padding-left: 1.2em; display: grid; gap: 4px; color: var(--body); }
.tool-hook .tool-go { margin-top: 4px; }
.tool-hook-note { font-size: 14px; color: var(--muted); }