/* Unit engine u14 (36 questions, 21 questions, never have I ever). Tokens only, so dark mode works. */
.tool .u14-ring { display: block; }
.tool .u14-ring circle { fill: none; stroke-width: 6; }
.tool .u14-ring-bg { stroke: rgb(var(--ink) / .08); }
.tool .u14-ring-fg { stroke: rgb(var(--accent)); stroke-linecap: round; transition: stroke-dashoffset .3s linear; }

.tool .u14-timer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tool .u14-timer-face { position: relative; display: grid; place-items: center; }
.tool .u14-time-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tool .u14-time { font-size: 32px; line-height: 36px; font-weight: 950; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .u14-time-sub { font-size: 11px; line-height: 16px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink) / .5); max-width: 96px; text-align: center; }
.tool .u14-timer.is-done .u14-ring-fg { stroke: rgb(var(--ink) / .25); }
.tool .u14-timer-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.tool .u14-timer-actions .btn { flex: none; width: auto; min-width: 120px; height: 48px; }
.tool .u14-mini {
  min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .7);
  background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); transition: transform .2s var(--ease-out), background-color .15s ease;
}
.tool .u14-mini:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .tool .u14-mini:hover { background: var(--surface-2); } }

.tool .u14-ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.tool .u14-ticks i { display: block; height: 6px; border-radius: 3px; background: rgb(var(--ink) / .1); transition: background-color .25s ease; }
.tool .u14-ticks i.is-done { background: rgb(var(--accent)); }
.tool .u14-ticks i.is-cur { background: rgb(var(--accent) / .45); }

.tool .u14-copy .tool-icon { width: 20px; height: 20px; }
.tool .u14-copy.is-copied { box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .u14-names input { min-height: 44px; }

/* Card change: a short slide in the direction of travel. Exits are instant so tapping fast never queues motion. */
.tool .u14-in-next { animation: u14-next .32s var(--ease-out) both; }
.tool .u14-in-back { animation: u14-back .32s var(--ease-out) both; }
.tool .u14-in-fade { animation: u14-fade .32s var(--ease-out) both; }
@keyframes u14-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes u14-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes u14-fade { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool .u14-in-next, .tool .u14-in-back, .tool .u14-in-fade { animation: none; } .tool .u14-ring-fg { transition: none; } }

.tool button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tool .btn:focus-visible, .tool .u14-mini:focus-visible, .tool button:focus-visible { outline: 3px solid rgb(var(--accent) / .55); outline-offset: 2px; }

/* Primary action wide on the right, Back small on the left, on every screen size. */
.tool .tool-actions.u14-actions { flex-direction: row-reverse; flex-wrap: nowrap; }
.tool .tool-actions.u14-actions .btn-primary { flex: 1 1 auto; width: auto; }
.tool .tool-actions.u14-actions .btn-secondary { flex: none; width: auto; padding: 0 22px; }
.tool .u14-names { grid-template-columns: 1fr 1fr; }
.tool .u14-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tool .u14-bars i { display: block; height: 6px; border-radius: 3px; background: rgb(var(--ink) / .1); overflow: hidden; }
.tool .u14-bars b { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--ramp); transition: width .35s var(--ease-out); }
.tool .u14-more { border-radius: 16px; background: var(--surface); }
.tool .u14-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 16px; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .85); cursor: pointer; list-style: none; border-radius: 16px; }
.tool .u14-more > summary::-webkit-details-marker { display: none; }
.tool .u14-more > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease-out); opacity: .5; }
.tool .u14-more[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.tool .u14-more > div, .tool .u14-more > ol { padding: 4px 16px 16px; }
.tool .u14-ibtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; color: rgb(var(--ink) / .75); background: transparent; transition: background-color .15s ease, color .15s ease, transform .2s var(--ease-out); }
.tool .u14-ibtn:active { transform: scale(.96); }
.tool .u14-ibtn[aria-pressed="true"] { color: #D02F7A; }
.tool .u14-ibtn[aria-pressed="true"] .tool-icon path { fill: currentColor; }
.tool .u14-ibtn-l { display: none; font-size: 14px; line-height: 20px; font-weight: 800; }
@media (min-width: 600px) { .tool .u14-ibtn { padding: 0 14px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); } .tool .u14-ibtn-l { display: inline; } }
@media (hover: hover) and (pointer: fine) { .tool .u14-ibtn:hover { background: var(--surface-2); color: rgb(var(--ink)); } }
.tool .u14-keys { display: none; text-align: center; font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(var(--ink) / .6); }
@media (hover: hover) and (pointer: fine) { .tool .u14-keys { display: block; } }
/* Scrolling chip rows: fade the right edge so it is clear there is more. Wrap on wider screens. */
.tool .u14-scroll { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
@media (min-width: 600px) { .tool .u14-scroll { flex-wrap: wrap !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; -webkit-mask-image: none; mask-image: none; } }
.tool .btn:disabled { opacity: .45; pointer-events: none; }
.tool .u14-back { flex: none; width: 56px !important; padding: 0 !important; }
.tool .u14-back .tool-icon { width: 22px; height: 22px; }
.tool .u14-note { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--surface); }
.tool .u14-note p { flex: 1; font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .75); }
.tool .u14-note button { flex: none; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; color: rgb(var(--ink) / .6); }
.tool .u14-follow { font-size: 15px; line-height: 22px; font-weight: 750; color: var(--link); }
@media (prefers-color-scheme: dark) {
  .tool .tool-card { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1), 0 8px 32px rgb(0 0 0 / .35); }
  .tool .u14-actions .btn-secondary { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .3); }
}
.tool .u14-ibtn-show .u14-ibtn-l { display: inline; }