/* Unit engine u12 (engine-u12-deck-crush.js): crush, talking stage and first date decks. Tokens only, so dark mode works.
   The table mode is dark on purpose in both themes (glanced at under a table), so it keeps its own fixed night palette. */
.tool.u12 { gap: 12px; }

/* Stage stepper: one segmented row, scrolls sideways when the stages do not fit */
.tool .u12-seg {
  display: flex; gap: 2px; padding: 4px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.tool .u12-seg::-webkit-scrollbar { display: none; }
.tool .u12-seg button {
  flex: 1 0 auto; min-height: 40px; padding: 0 14px; border-radius: 18px; scroll-snap-align: center;
  font-size: 14px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .62); background: transparent; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .16s ease;
}
.tool .u12-seg button:hover { color: rgb(var(--ink)); }
.tool .u12-seg button:active { transform: scale(.96); }
.tool .u12-seg button[aria-checked="true"] { background: rgb(var(--ink)); color: var(--bg); }
.tool .u12-hint { font-size: 13px; line-height: 18px; font-weight: 650; color: rgb(var(--ink) / .55); margin: -4px 4px 0; }

/* Tone chips: one row that scrolls; the "Topics to skip" toggle sits at its end */
.tool .u12-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 2px 24px; }
.tool .u12-chips::-webkit-scrollbar { display: none; }
.tool .u12-chips button { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; }
.tool .u12-chip-btn { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .14) !important; background: transparent !important; color: rgb(var(--ink) / .7) !important; }
.tool .u12-chip-btn::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 4px; background: rgb(var(--ink) / .25); vertical-align: 1px; }
.tool .u12-chip-btn.is-on { color: rgb(var(--ink)) !important; }
.tool .u12-chip-btn.is-on::before { background: rgb(var(--accent)); }
.tool .u12-skip { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: var(--surface); }
.tool .u12-skip .tool-chips button[aria-pressed="true"] { text-decoration: line-through; text-decoration-thickness: 2px; }

/* The card */
.tool .u12-stage { position: relative; touch-action: pan-y; }
.tool .u12-card {
  display: flex; flex-direction: column; gap: 14px; min-height: 248px; padding: 18px 20px 12px; border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px rgb(var(--ink) / .06); outline: 0;
  transition: transform .35s var(--ease-out); user-select: none; -webkit-user-select: none;
}
.tool .u12-card:focus-visible { box-shadow: var(--shadow), 0 0 0 3px rgb(var(--accent) / .55); }
.tool .u12-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-right: -10px; }
.tool .u12-meta { font-size: 12px; line-height: 16px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--link); white-space: pre; }
.tool .u12-icons { display: flex; gap: 2px; }
.tool .u12-q { font-size: 25px; line-height: 32px; font-weight: 850; letter-spacing: -.015em; color: rgb(var(--ink)); text-wrap: pretty; flex: 1; }
.tool .u12-loop { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgb(var(--ink) / .07); }
.tool .u12-loop p { font-size: 15px; line-height: 21px; font-weight: 650; color: rgb(var(--ink) / .72); }
.tool .u12-loop small { display: block; margin-bottom: 2px; font-size: 11px; line-height: 14px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink) / .42); }
.tool .u12-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -4px -8px 0 0; }
.tool .u12-pill {
  margin-right: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 20px;
  background: var(--surface-2); color: var(--link); font-size: 14px; font-weight: 800; transition: background-color .15s ease, transform .16s ease;
}
.tool .u12-pill .tool-icon { width: 17px; height: 17px; }
.tool .u12-pill:active { transform: scale(.96); }
.tool .u12-pill.is-done { background: rgb(var(--accent) / .18); }
.tool .u12-text-btn { min-height: 36px; padding: 0 8px; border-radius: 12px; font-size: 13px; font-weight: 750; color: rgb(var(--ink) / .45); background: transparent; transition: color .15s ease, background-color .15s ease; }
.tool .u12-text-btn:hover { color: rgb(var(--ink) / .8); background: rgb(var(--ink) / .05); }
.tool .u12-card.is-empty .u12-q { font-size: 18px; line-height: 26px; color: rgb(var(--ink) / .6); }
.tool .u12-card.is-empty .u12-card-foot, .tool .u12-card.is-empty .u12-icons { visibility: hidden; }
.tool .u12-in-r { animation: u12-in-r .32s var(--ease-out) both; }
.tool .u12-in-l { animation: u12-in-l .32s var(--ease-out) both; }
@keyframes u12-in-r { from { opacity: 0; transform: translateX(24px) scale(.98); filter: blur(2px); } }
@keyframes u12-in-l { from { opacity: 0; transform: translateX(-24px) scale(.98); filter: blur(2px); } }

/* Icon buttons (44px hit area) */
.tool .u12-icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 20px; background: transparent;
  color: rgb(var(--ink) / .55); transition: background-color .15s ease, color .15s ease, transform .16s ease; position: relative;
}
.tool .u12-icon::after { content: ""; position: absolute; inset: -2px; }
.tool .u12-icon:hover { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); }
.tool .u12-icon:active { transform: scale(.92); }
.tool .u12-icon:disabled { opacity: .35; pointer-events: none; }
.tool .u12-icon .tool-icon { width: 21px; height: 21px; }
.tool .u12-icon.is-done { color: var(--link); }
.tool .u12-fav[aria-pressed="true"] { color: #E0347E; }
.tool .u12-fav[aria-pressed="true"] .tool-icon path { fill: currentColor; }
.tool .u12-fav.is-new { animation: u12-pop .4s var(--ease-out); }
@keyframes u12-pop { 40% { transform: scale(1.22); } }

/* Thumb row: back, next, table mode */
.tool .u12-controls { display: flex; align-items: center; gap: 10px; }
.tool .u12-round { width: 56px; height: 56px; border-radius: 28px; background: var(--surface); color: rgb(var(--ink) / .8); box-shadow: 0 1px 2px rgb(var(--ink) / .06); }
.tool .u12-round:hover { background: var(--surface); }
.tool .u12-next { flex: 1; min-height: 56px; font-size: 17px; }
.tool .u12-progress { display: flex; flex-direction: column; gap: 8px; }
.tool .u12-bar { height: 4px; border-radius: 2px; background: rgb(var(--ink) / .08); overflow: hidden; }
.tool .u12-bar span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--ramp); transition: width .35s var(--ease-out); }
.tool .u12-status { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; font-weight: 750; color: rgb(var(--ink) / .5); font-variant-numeric: tabular-nums; }
.tool .u12-streak { color: var(--link); }
.tool .u12-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgb(var(--ink)); color: var(--bg); font-size: 14px; font-weight: 750; animation: card-in .25s var(--ease-out) both; }
.tool .u12-undo span { color: inherit; font-size: 14px; }
.tool .u12-undo button { min-height: 36px; padding: 0 12px; border-radius: 12px; background: transparent; color: inherit; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }

/* Partner link and saved */
.tool .u12-more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool .u12-wide { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; font-size: 15px; }
.tool .u12-wide .tool-icon { width: 18px; height: 18px; flex: none; }
.tool .u12-saved { padding: 12px; border-radius: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.tool .u12-saved-list { display: grid; gap: 6px; }
.tool .u12-saved-list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 12px; border-radius: 14px; background: var(--surface-2); font-size: 15px; line-height: 21px; }
.tool .u12-saved-list li span { flex: 1; }
.tool .u12-saved-list .u12-saved-empty { background: transparent; padding: 4px; color: rgb(var(--ink) / .55); }
.tool .u12-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--surface); font-size: 14px; line-height: 20px; font-weight: 700; }
.tool .u12-banner .tool-icon { width: 18px; height: 18px; flex: none; color: var(--link); margin-top: 1px; }
.tool .u12-cta .tool-cta { margin-top: 4px; }

/* Copy all and Print above the full list in the article */
.u12-list-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 16px; }

/* Table mode */
html.u12-locked { overflow: hidden; }
.u12-table {
  --night: #0B0414; --night-ink: 233 220 255;
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background: var(--night); color: rgb(var(--night-ink));
  -webkit-tap-highlight-color: transparent; cursor: pointer; animation: u12-fade .2s ease both; touch-action: pan-y; overscroll-behavior: contain;
}
.u12-table[hidden] { display: none; }
@keyframes u12-fade { from { opacity: 0; } }
.u12-t-top { display: flex; justify-content: space-between; align-items: center; }
.u12-t-meta { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: .04em; color: rgb(var(--night-ink) / .45); white-space: pre; }
.u12-table button { font: inherit; border: 0; cursor: pointer; color: inherit; }
.u12-t-close, .u12-t-back { min-height: 44px; padding: 0 16px; border-radius: 22px; background: rgb(var(--night-ink) / .08); font-size: 15px !important; font-weight: 750 !important; color: rgb(var(--night-ink) / .75) !important; }
.u12-t-body { max-width: 560px; width: 100%; margin: 0 auto; }
.u12-t-q { margin: 0 0 16px; font-size: 21px; line-height: 29px; font-weight: 750; color: rgb(var(--night-ink) / .92); text-wrap: pretty; }
.u12-t-q.is-new { animation: u12-rise .3s var(--ease-out) both; }
@keyframes u12-rise { from { opacity: 0; transform: translateY(6px); } }
.u12-t-loop p { margin: 0 0 8px; font-size: 15px; line-height: 21px; font-weight: 600; color: rgb(var(--night-ink) / .5); }
.u12-t-loop small { font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--night-ink) / .35); }
.u12-t-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.u12-t-back { justify-self: start; }
.u12-t-next {
  width: 132px; height: 132px; border-radius: 66px; font-size: 19px !important; font-weight: 900 !important; color: #fff !important;
  background: radial-gradient(circle at 50% 30%, #A65BE8, #4A1680); box-shadow: 0 0 48px rgb(167 60 255 / .28);
  transition: transform .16s ease;
}
.u12-t-next:active { transform: scale(.95); }
.u12-t-tip { justify-self: end; max-width: 90px; text-align: right; font-size: 12px; line-height: 16px; font-weight: 700; color: rgb(var(--night-ink) / .3); }
.u12-table button:focus-visible { outline: 2px solid rgb(var(--night-ink) / .7); outline-offset: 3px; }

@media (max-width: 599px) {
  .tool .u12-chips { margin: 0 -16px; padding: 2px 16px; }
  .tool .u12-q { font-size: 23px; line-height: 30px; }
  .tool .u12-controls { flex-direction: row; }
  .tool .u12-controls .btn { width: auto; }
  .tool .u12-more .btn { width: auto; }
  .tool .u12-wide { font-size: 14px; padding: 0 8px; }
}
@media (hover: none) { .tool .u12-icon:hover, .tool .u12-text-btn:hover { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .tool .u12-in-r, .tool .u12-in-l, .u12-t-q.is-new, .u12-table, .tool .u12-fav.is-new, .tool .u12-undo { animation: none; }
  .tool .u12-card, .tool .u12-bar span { transition: none; }
}
@media print {
  .tool.u12, .u12-list-actions, .nav, .site-footer, .cta-card, .tool-callout { display: none !important; }
}

/* Round 2: fades on rows that scroll, ten-as-a-list, copy-first decks, lowercase toggle, toast */
.tool .u12-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tool .u12-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.tool .u12-fade-l.u12-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.tool .u12-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tool .u12-icons { flex: none; }
.tool .u12-text-btn { min-height: 44px; padding: 0 10px; color: rgb(var(--ink) / .62); }
.tool .u12-round.is-gone { display: none; }
.tool .u12-copy-big span, .tool .u12-next-2 span { white-space: nowrap; }
.tool .u12-wide span { white-space: nowrap; }
.tool .u12-status > span { display: flex; gap: 10px; align-items: center; }
.tool .u12-links { gap: 4px !important; }
.tool .u12-link {
  min-height: 32px; padding: 0 8px; border-radius: 10px; background: transparent; font-size: 13px; font-weight: 800; color: var(--link);
  text-decoration: none; display: inline-flex; align-items: center; transition: background-color .15s ease;
}
.tool .u12-link:hover { background: rgb(var(--ink) / .05); }
.tool .u12-ten-list { display: grid; gap: 6px; counter-reset: ten; }
.tool .u12-ten-list li { counter-increment: ten; display: flex; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); font-size: 15px; line-height: 21px; }
.tool .u12-ten-list li::before { content: counter(ten); flex: none; width: 20px; font-weight: 900; color: var(--link); font-variant-numeric: tabular-nums; }
.tool .u12-copy-big { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tool .u12-copy-big .tool-icon { width: 19px; height: 19px; }
.tool .u12-next-2 { flex: 0 0 auto !important; min-width: 104px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 14px 0 18px; }
.tool .u12-next-2 .tool-icon { width: 18px; height: 18px; }
.tool .u12-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 20px; background: transparent; font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .6); }
.tool .u12-toggle-dot { width: 26px; height: 16px; border-radius: 8px; background: rgb(var(--ink) / .14); position: relative; transition: background-color .2s ease; }
.tool .u12-toggle-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: var(--surface); transition: transform .2s var(--ease-out); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.tool .u12-toggle[aria-pressed="true"] { color: rgb(var(--ink)); }
.tool .u12-toggle[aria-pressed="true"] .u12-toggle-dot { background: rgb(var(--accent)); }
.tool .u12-toggle[aria-pressed="true"] .u12-toggle-dot::after { transform: translateX(10px); }
.tool .u12-card-foot .u12-toggle:first-child { margin-right: auto; }
.tool .u12-toast { position: relative; align-self: center; padding: 10px 16px; border-radius: 18px; background: rgb(var(--ink)); color: var(--bg); font-size: 14px; font-weight: 800; animation: card-in .25s var(--ease-out) both; }
.tool .u12-toast[hidden] { display: none; }

/* Table mode, round 2: bigger text, one-line hint above a lighter Next */
.u12-t-q { font-size: 27px; line-height: 35px; }
.u12-t-loop p { font-size: 16px; line-height: 23px; color: rgb(var(--night-ink) / .62); }
.u12-t-loop small { color: rgb(var(--night-ink) / .6); }
.u12-t-foot { grid-template-columns: 1fr auto 1fr; grid-template-areas: "tip tip tip" "back next pad"; row-gap: 14px; }
.u12-t-tip { grid-area: tip; justify-self: center; max-width: none; text-align: center; color: rgb(var(--night-ink) / .45); }
.u12-t-back { grid-area: back; }
.u12-t-next { grid-area: next; justify-self: center; width: 240px; max-width: 56vw; height: 64px; border-radius: 32px; font-size: 18px !important; box-shadow: 0 0 32px rgb(167 60 255 / .22); }
@media (max-width: 599px) { .tool .u12-status { flex-wrap: wrap; } }
@media (min-width: 600px) {
  .tool .u12-card { min-height: 280px; padding: 22px 28px 14px; }
  .tool .u12-q { font-size: 30px; line-height: 38px; }
  .tool .u12-loop { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Round 3: the main buttons stay in reach on a phone, every stage fits, actions grouped */
.tool .u12-seg .u12-short { display: none; }
@media (max-width: 479px) {
  .tool .u12-seg:has(.u12-short) button { padding: 0 8px; flex: 1 1 auto; min-width: 0; font-size: 13px; }
  .tool .u12-seg .u12-short { display: inline; }
  .tool .u12-seg .u12-long { display: none; }
}
.tool .u12-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.tool .u12-fade-l.u12-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 64px), transparent); }
.tool .u12-table-btn { width: auto !important; padding: 0 16px 0 14px; display: inline-flex !important; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .85); }
.tool .u12-table-btn .tool-icon { width: 19px; height: 19px; }
.tool .u12-more { grid-template-columns: 1fr 1fr; }
.tool .u12-more .u12-wide { min-height: 44px; font-size: 14px; }
.tool .u12-more a.u12-wide { color: rgb(var(--ink)); text-decoration: none; }
.tool .u12-more .u12-wide[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgb(var(--accent) / .6); }
.tool .u12-text-btn { color: rgb(var(--ink) / .7); text-decoration: underline; text-decoration-color: rgb(var(--ink) / .2); text-underline-offset: 3px; }
/* Round 4: no sticky bar (it covered the card). The first phone screen fits the card and its buttons instead. */
@media (max-width: 599px) {
  .tool.u12 { gap: 10px; }
  .tool .u12-hint { display: none; }
  .tool .u12-card { min-height: 0; gap: 10px; padding: 16px 18px 6px; }
  .tool .u12-q { font-size: 22px; line-height: 29px; }
  .tool .u12-loop { gap: 6px; padding-top: 10px; }
  .tool .u12-loop p { font-size: 14px; line-height: 20px; }
  .tool .u12-card-top { min-height: 36px; }
  .tool .u12-chips button { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .tool .u12-seg button { min-height: 38px; }
}
@media (min-width: 600px) { .tool .u12-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none !important; mask-image: none !important; } }
.u12-t-loop p { font-size: 18px; line-height: 26px; color: rgb(var(--night-ink) / .72); }
.u12-t-tip { color: rgb(var(--night-ink) / .6); }
.tool .u12-chip-btn::before { display: none; }
.tool .u12-chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.tool .u12-chip-btn .tool-icon { width: 16px; height: 16px; }
[data-u12-list] li small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 600; opacity: .62; }
.u12-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.u12-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); font-size: 14px; font-weight: 750; text-decoration: none; color: rgb(var(--ink)); }
[data-u12-list] h3 { scroll-margin-top: 88px; }
.tool .u12-toast { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; z-index: 2; box-shadow: 0 6px 20px rgb(0 0 0 / .18); animation: u12-toast .22s var(--ease-out) both; }
@keyframes u12-toast { from { opacity: 0; transform: translate(-50%, 6px); } }

/* Round 5: visible "more" arrow on rows that scroll, one secondary button plus a quiet link row, dark mode edges */
.tool .u12-rowwrap { position: relative; }
.tool .u12-row-more {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center;
  background: var(--surface); color: rgb(var(--ink) / .75); box-shadow: 0 2px 8px rgb(var(--ink) / .14); transition: transform .16s ease;
}
.tool .u12-row-more:active { transform: translateY(-50%) scale(.92); }
.tool .u12-row-more .tool-icon { width: 16px; height: 16px; }
.tool .u12-seg + .u12-row-more { right: 2px; }
.tool .u12-more { grid-template-columns: 1fr; }
.tool .u12-linkrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: -4px; }
.tool .u12-linkrow .u12-link { min-height: 40px; font-size: 14px; text-decoration: underline; text-decoration-color: rgb(var(--accent) / .35); text-underline-offset: 3px; }
.tool .u12-linkrow .u12-link[aria-expanded="true"] { background: rgb(var(--ink) / .06); }
@media (min-width: 600px) { .tool .u12-card { min-height: 0; } .tool .u12-row-more { display: none; } }
.u12-t-back { min-height: 56px !important; min-width: 88px; }
@media (prefers-color-scheme: dark) {
  .tool .u12-card { box-shadow: var(--shadow), 0 0 0 1px rgb(255 255 255 / .1); }
  .tool .u12-loop small { color: rgb(var(--ink) / .6); }
}
[data-u12-list] ol.q-list { gap: 4px; }
[data-u12-list] ol.q-list li { padding-top: 8px; padding-bottom: 8px; }
.tool .u12-row-more::before { content: ""; position: absolute; right: 100%; top: -4px; bottom: -4px; width: 20px; pointer-events: none; }
.tool .u12-rowwrap:has(.u12-row-more:not([hidden])) .u12-chips { padding-right: 44px; }

/* Reflow at 320 px (WCAG 1.4.10): rows wrap instead of pushing past the screen edge. Wider screens are unchanged. */
@media (max-width: 374px) {
  .tool .u12-controls { flex-wrap: wrap; }
}
/* 600 to 899 px (tablets, 200% zoom): site.css makes every .btn 100% wide there; the fixed-size Next pill must keep its own width. */
@media (max-width: 899px) { .tool .u12-controls .btn { width: auto; } }