/* After First Date Text Builder: numbered steps, each with a why line, its own pickers, one bubble, copy and "another". */
.tool .wd-sug button { font-size: 14px; }
.tool .wd-tight { gap: 8px; }
.tool .wd-out { display: flex; flex-direction: column; gap: 20px; padding: 16px; border-radius: 24px; background: var(--surface-2); }
.tool .wd-step { display: flex; flex-direction: column; gap: 10px; }
.tool .wd-when { display: flex; align-items: flex-start; gap: 10px; }
.tool .wd-wt { display: flex; flex-direction: column; gap: 2px; }
.tool .wd-wt b { font-size: 15px; line-height: 20px; font-weight: 900; color: rgb(var(--ink)); }
.tool .wd-wt span { font-size: 14px; line-height: 19px; font-weight: 650; color: rgb(var(--ink) / .72); }
.tool .wd-dot { width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: rgb(var(--ink)); color: var(--surface); flex: 0 0 auto; margin-top: -1px; }
.tool .wd-pick { display: flex; flex-direction: column; gap: 8px; }
.tool .wd-again svg { width: 16px; height: 16px; }
.tool .wd-again { font-variant-numeric: tabular-nums; }
.tool .wd-out .tk-row.tk-me { padding-left: 8px; }
.tool .tk-under { flex-direction: row-reverse; }
.tool mark.wd-fill { background: rgb(255 255 255 / .18); color: inherit; border-radius: 5px; padding: 0 2px; }
.tool .wd-signs { display: grid; gap: 2px; }
.tool .wd-sign { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 2px 4px; border-radius: 12px; font-size: 15px; font-weight: 700; color: rgb(var(--ink) / .88); cursor: pointer; }
.tool .wd-sign.is-flag { color: rgb(var(--ink) / .88); }
.tool .wd-sign.is-flag span::before { content: 'Red flag: '; font-weight: 850; color: #C0237A; }
.tool .wd-sign input { width: 22px; height: 22px; accent-color: #7923C0; flex: 0 0 auto; }
.tool .wd-signout { font-size: 15px; line-height: 22px; font-weight: 750; color: rgb(var(--ink)); }
.tool .wd-use { align-self: flex-start; min-height: 44px; }
.tool .wd-extras.is-one { grid-template-columns: 1fr; }
@media (prefers-color-scheme: dark) { .tool .wd-sign.is-flag span::before { color: #FF8FC8; } }
@media (max-width: 599px) {
  .tool .wd-out { padding: 12px; margin: 0 -4px; }
  .tool .wd-out .tool-chips.tk-scroll { margin: 0 -12px; padding: 2px 12px 4px; }
  .tool .wd-use { width: 100%; }
}
.tool .wd-n { font-weight: 700; color: rgb(var(--ink) / .6); }
/* Round 3: outcome chips as an even 2x2 grid; yellow flag */
.tool .wd-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .wd-outcomes button { width: 100%; padding: 0 8px; }
.tool .wd-sign.is-yellow span::before { content: 'Yellow flag: '; font-weight: 850; color: #A86A00; }
@media (prefers-color-scheme: dark) { .tool .wd-sign.is-yellow span::before { color: #FFC857; } }
@media (max-width: 599px) { .tool .tool-row.wd-extras { grid-template-columns: 1.4fr 1fr; } }
@media (prefers-color-scheme: dark) { .tool input::placeholder { color: rgb(var(--ink) / .6); } }

/* Round 7: "if" steps for Not for me, sign actions, 44px tabs */
.tool .wd-only { margin: 4px 0 -8px; font-size: 13px; line-height: 18px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .6); }
.tool .wd-step.is-if .wd-dot { width: 10px; height: 10px; margin: 6px 7px 0; background: rgb(var(--ink) / .3); }
.tool .wd-sign-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tool[data-tool="what-to-text-after-a-first-date"] .tk-tabs button { min-height: 44px; }
.tool .wd-wt span { color: rgb(var(--ink) / .8); }