/* Attachment style quiz (attachment-style-quiz.js). Tokens only, so dark mode works. */
.tool.att .u5-stage { min-height: 420px; }
.tool .att-q { gap: 18px; }
.tool .att-bar { height: 8px; }
.tool .att-bar > span { transition: width .3s var(--ease-out); }
.tool .att-statement { min-height: 102px; display: flex; align-items: center; font-size: 26px; line-height: 34px; font-weight: 850; letter-spacing: -.015em; text-wrap: pretty; color: rgb(var(--ink)); }
.tool .att-scale { display: grid; gap: 8px; }
.tool .att-opt {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 16px 8px 10px; border-radius: 18px; text-align: left;
  background: var(--surface); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08);
  transition: box-shadow .15s ease, background-color .15s ease, transform .16s var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tool .att-opt:active { transform: scale(.98); }
.tool .att-num { flex: none; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--surface-2); font-size: 14px; font-weight: 900; color: rgb(var(--ink) / .7); font-variant-numeric: tabular-nums; transition: background-color .15s ease, color .15s ease; }
.tool .att-lab { flex: 1; font-size: 17px; line-height: 22px; font-weight: 750; }
/* A dot that grows toward "very like me", so the scale reads at a glance. */
.tool .att-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--accent) / .25); }
.tool .att-opt:nth-child(1) .att-dot { transform: scale(.72); }
.tool .att-opt:nth-child(2) .att-dot { transform: scale(.82); }
.tool .att-opt:nth-child(3) .att-dot { transform: scale(.95); }
.tool .att-opt:nth-child(4) .att-dot { transform: scale(1.15); background: rgb(var(--accent) / .45); }
.tool .att-opt:nth-child(5) .att-dot { transform: scale(1.4); background: rgb(var(--accent) / .7); }
.tool .att-opt[aria-checked="true"] { background: rgb(var(--accent) / .14); box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .att-opt[aria-checked="true"] .att-num { background: rgb(var(--accent)); color: var(--surface); }
@media (hover: hover) { .tool .att-opt:hover { box-shadow: inset 0 0 0 2px rgb(var(--accent) / .45); } }

/* Map: worry (anxiety) goes up, need for space (avoidance) goes right. */
.tool .att-map { position: relative; aspect-ratio: 1 / 1; max-height: 420px; width: 100%; align-self: center; max-width: 420px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.tool .att-map::before, .tool .att-map::after { content: ''; position: absolute; background: rgb(var(--ink) / .1); }
.tool .att-map::before { left: 50%; top: 12px; bottom: 12px; width: 1px; }
.tool .att-map::after { top: 50%; left: 12px; right: 12px; height: 1px; }
.tool .att-quad { position: absolute; width: 50%; height: 50%; display: flex; padding: 14px; font-size: 14px; line-height: 18px; font-weight: 850; letter-spacing: .01em; color: rgb(var(--ink) / .62); transition: color .3s ease; }
.tool .att-quad.is-on { color: var(--link); }
.tool .att-tl { left: 0; top: 0; background: rgb(var(--accent) / .04); }
.tool .att-tr { right: 0; top: 0; justify-content: flex-end; background: rgb(var(--accent) / .07); }
.tool .att-bl { left: 0; bottom: 0; align-items: flex-end; }
.tool .att-br { right: 0; bottom: 0; justify-content: flex-end; align-items: flex-end; background: rgb(var(--accent) / .04); }
.tool .att-mapwrap { display: grid; grid-template-columns: 20px minmax(0, 420px); grid-template-rows: auto auto; gap: 6px 8px; justify-content: center; }
.tool .att-mapwrap .att-map { grid-column: 2; grid-row: 1; }
.tool .att-axis { font-size: 12px; line-height: 14px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ink) / .65); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.tool .att-axis::after { content: ''; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgb(var(--ink) / .2), rgb(var(--ink) / .05)); }
.tool .att-axis-y { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-start; flex-direction: row-reverse; }
.tool .att-axis-y::after { width: 2px; height: auto; background: linear-gradient(0deg, rgb(var(--ink) / .2), rgb(var(--ink) / .05)); }
.tool .att-axis-x { grid-column: 2; grid-row: 2; flex-direction: row-reverse; }
.tool .att-axis-x::after { background: linear-gradient(270deg, rgb(var(--ink) / .2), rgb(var(--ink) / .05)); }
.tool .att-title { font-size: 40px; line-height: 46px; font-weight: 950; letter-spacing: -.03em; color: rgb(var(--ink)); margin: -8px 0 0; text-wrap: balance; outline: 0; }
.tool .att-pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; animation: att-pin .5s var(--ease-out) var(--d) both; }
.tool .att-pin::before { content: ''; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 0 6px rgb(var(--accent) / .22), 0 4px 12px rgb(0 0 0 / .15); }
.tool .att-pin b { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 10px; background: rgb(var(--accent)); color: var(--surface); font-size: 12px; line-height: 16px; font-weight: 850; }
.tool .att-pin.is-them::before { background: rgb(var(--ink)); box-shadow: 0 0 0 6px rgb(var(--ink) / .15), 0 4px 12px rgb(0 0 0 / .15); }
.tool .att-pin.is-them b { background: rgb(var(--ink)); }
.tool .att-pin.is-up b { top: auto; bottom: 16px; }
.tool .att-pin.is-ghost::before { background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--accent) / .6); }
.tool .att-pin.is-ghost b { background: transparent; color: rgb(var(--ink) / .5); }
@keyframes att-pin { from { opacity: 0; transform: translateY(-12px) scale(.6); } }

.tool .att-loop { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: rgb(214 70 110 / .1); }
.tool .att-loop.is-good { background: rgb(31 157 98 / .12); }
.tool .att-loop b { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ink) / .7); }
.tool .att-loop p { font-size: 16px; line-height: 24px; font-weight: 650; }
.tool .att-pair { box-shadow: var(--shadow), inset 0 0 0 2px rgb(var(--accent) / .35); }

@media (max-width: 599px) {
  .tool .att-statement { font-size: 23px; line-height: 31px; min-height: 124px; }
  .tool .att-title { font-size: 34px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .tool .att-pin { animation: none; } }

.tool .att-top { display: flex; flex-direction: column; gap: 16px; }
.tool .att-toptext { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 760px) {
  .tool .att-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .tool .att-top .att-mapwrap { grid-template-columns: 20px minmax(0, 1fr); }
}

.tool .att-mid { position: absolute; left: 50%; top: 8px; transform: translateX(5px); font-size: 11px; line-height: 14px; font-weight: 850; color: rgb(var(--ink) / .7); }
.tool .att-brand { position: absolute; right: 14px; bottom: 34px; font-size: 11px; line-height: 14px; font-weight: 850; letter-spacing: .04em; color: rgb(var(--ink) / .6); }
.tool .att-people { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .att-person { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface); }
.tool .att-person b { font-size: 12px; line-height: 16px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .att-person + .att-person b { color: rgb(var(--ink) / .7); }
.tool .att-person span { font-size: 17px; line-height: 22px; font-weight: 900; color: rgb(var(--ink)); }
.tool .att-person small { font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(var(--ink) / .7); font-variant-numeric: tabular-nums; }
.tool .att-others { display: grid; gap: 8px; }
.tool .att-other { border-radius: 16px; background: var(--surface-2); }
.tool .att-other summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 850; color: rgb(var(--ink)); }
.tool .att-other summary::-webkit-details-marker { display: none; }
.tool .att-other summary::after { content: '+'; flex: none; width: 24px; text-align: center; font-size: 22px; font-weight: 700; color: var(--link); transition: transform .2s var(--ease-out); }
.tool .att-other[open] summary::after { transform: rotate(45deg); }
.tool .att-other > :not(summary) { padding: 0 16px; }
.tool .att-other > ul { padding-bottom: 16px; }
.tool .att-seg { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.tool .att-seg button { padding: 6px 4px; line-height: 18px; }

.tool .att-mapcol { display: flex; flex-direction: column; gap: 12px; }
.tool .att-imgrow { justify-content: center; }
.tool .att-imgrow .btn { flex: 0 0 auto; width: auto; height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 599px) { .tool .att-mapwrap { grid-template-columns: 20px minmax(0, 300px); } }

.tool .att-meaning { margin-top: -6px; font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .75); }
.tool .att-anchor { text-align: center; }
.tool .att-imgrow { align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.tool .att-imgrow .u5-linkbtn { align-self: center; }
@media (max-width: 599px) { .tool .att-imgrow { flex-direction: row; } .tool .att-result .att-map { aspect-ratio: 4 / 3; } }

.tool .att-aka { margin-top: -10px; font-size: 15px; line-height: 20px; font-weight: 750; color: rgb(var(--ink) / .7); }
.tool .att-tonight { padding: 12px 14px; border-radius: 16px; background: var(--surface); font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .85); }
.tool .att-tonight b { color: var(--link); font-weight: 850; }
.tool .att-cap { font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(var(--ink) / .72); text-align: center; }
.tool .att-quotewrap { display: flex; flex-direction: column; gap: 4px; }
.tool .att-tr { text-align: right; max-width: 50%; }
@media (max-width: 599px) { .tool.is-asking .att-statement { flex: 1 1 auto; } }