/* Love language test: compatibility chart, gesture lookup, give vs receive. Engine styles in engine-u04-quiz-languages.css. */
.tool .ll-chart-out { display: flex; flex-direction: column; }

.tool .ll-look { display: grid; gap: 8px; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.tool .ll-look li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--surface); }
.tool .ll-look li p { font-size: 15px; line-height: 22px; font-weight: 600; color: rgb(var(--ink) / .7); }
.tool .ll-look-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tool .ll-look-head b { font-size: 16px; line-height: 22px; font-weight: 850; }
.tool .ll-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tool .ll-tag { font-size: 12px; line-height: 16px; font-weight: 850; padding: 3px 8px; border-radius: 10px; background: rgb(var(--dim) / .14); color: rgb(var(--dim)); }
.tool .ll-tag.is-also { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--dim) / .35); }
.tool .ll-none { font-size: 15px; font-weight: 650; }
.tool .ll-give .tool-chips button { min-height: 36px; padding: 0 12px; font-size: 14px; }
.tool .ll-give-msg { font-size: 15px; line-height: 22px; font-weight: 650; }
.tool .ll-give-msg:empty { display: none; }
@media (prefers-color-scheme: dark) { .tool .ll-tag { color: rgb(var(--dim)); } }

.tool .ll-grid-wrap { padding: 8px; border-radius: 20px; background: var(--surface); }
.tool .ll-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.tool .ll-grid th { font-size: 12px; line-height: 15px; font-weight: 850; color: rgb(var(--dim)); text-align: center; padding: 2px 0 4px; overflow-wrap: anywhere; }
.tool .ll-grid tr > th:first-child { width: 56px; text-align: left; padding-right: 2px; }
.tool .ll-corner { font-size: 10px; line-height: 12px; color: rgb(var(--ink) / .5); font-weight: 750; }
.tool .ll-grid td { padding: 0; }
.tool .ll-grid button { width: 100%; min-height: 52px; padding: 4px 2px; border-radius: 12px; background: rgb(var(--ink) / .045); color: rgb(var(--ink) / .8); font-size: 10px; line-height: 12px; font-weight: 750; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; letter-spacing: -.01em; transition: background-color .2s ease, transform .16s var(--ease-out); }
.tool .ll-grid button:active { transform: scale(.95); }
.tool .ll-grid button.is-mirror { background: rgb(var(--accent) / .08); }
.tool .ll-grid button[aria-pressed="true"] { background: rgb(var(--accent)); color: #fff; }
.tool .ll-grid button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .tool .ll-grid button:hover:not([aria-pressed="true"]) { background: rgb(var(--accent) / .14); } }
@media (min-width: 600px) { .tool .ll-grid th { font-size: 14px; } .tool .ll-grid tr > th:first-child { width: 84px; } .tool .ll-grid button { min-height: 56px; font-size: 13px; line-height: 16px; } }
@media (prefers-color-scheme: dark) { .tool .ll-grid button[aria-pressed="true"] { color: #12061F; } }