/* Apology language quiz: apology builder. Engine styles in engine-u04-quiz-languages.css. */
.tool .ap-form { display: grid; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); }
.tool .ap-form .tool-chips button { min-height: 44px; padding: 0 14px; font-size: 14px; }
.tool .ap-draft { display: grid; gap: 10px; padding: 18px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.tool .ap-draft p { font-size: 17px; line-height: 26px; font-weight: 650; color: rgb(var(--ink) / .85); padding-left: 14px; box-shadow: inset 3px 0 0 rgb(var(--dim) / .5); }
.tool .ap-draft p.is-lead { font-weight: 800; color: rgb(var(--ink)); box-shadow: inset 4px 0 0 rgb(var(--dim)); }
@media (min-width: 600px) { .tool .ap-form { grid-template-columns: 1fr 1fr; } .tool .ap-form > :first-child, .tool .ap-form > :nth-child(3) { grid-column: 1 / -1; } }
.tool .ap-tips { display: grid; gap: 6px; }
.tool .ap-tips li { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .6); padding-left: 14px; position: relative; }
.tool .ap-tips li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 3px; background: rgb(var(--accent)); }
.tool .ap-blank { padding: 0 6px; border-radius: 6px; background: rgb(var(--accent) / .16); color: var(--link); font-weight: 800; box-shadow: inset 0 -2px 0 rgb(var(--accent) / .5); }