/* Pick and reveal engine (engine-u15-deck-choice.js). Tokens for surfaces and ink, so dark mode works.
   Flag and option fills are fixed brand colors chosen to keep white text at 4.5:1 or better in both modes. */
.tool.cg {
  scroll-margin-top: calc(var(--nav-h, 80px) + 12px);
  --red: #C8323A; --beige: #E2C690; --beige-ink: #3B2A0C; --green: #1D7F55;
  --opt-a: #7B2CBF; --opt-b: #B8235A;
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  gap: 14px;
}
.tool.cg button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Head: packs + mode */
.tool .cg-head { display: flex; flex-direction: column; gap: 10px; }
.tool .cg-packs { gap: 6px; }
.tool .cg-packs button { flex: none; min-height: 38px; padding: 0 14px; }
.tool .cg-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: rgb(var(--ink) / .06); gap: 4px; }
.tool .cg-seg button {
  min-height: 40px; border-radius: 12px; font-size: 14px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .62);
  background: transparent; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tool .cg-seg button[aria-pressed="true"] { background: var(--surface); color: rgb(var(--ink)); box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 2px 8px rgb(var(--accent) / .1); }
.tool .cg-banner { font-size: 15px; line-height: 22px; font-weight: 750; color: rgb(var(--ink) / .75); padding: 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--accent) / .25); }
.tool .cg-banner[hidden] { display: none !important; }

/* Progress: one segment per card, colored by your pick */
.tool .cg-dots { display: flex; gap: 4px; justify-content: center; margin: 2px 0 -2px; }
.tool .cg-dots li { flex: 0 1 26px; min-width: 8px; height: 6px; border-radius: 3px; background: rgb(var(--ink) / .1); transition: background-color .25s ease, transform .25s var(--ease-out); }
.tool .cg-dots li.is-now { background: rgb(var(--ink) / .3); transform: scaleY(1.35); }
.tool .cg-dots li[data-p="r"] { background: var(--red); }
.tool .cg-dots li[data-p="y"] { background: var(--beige); }
.tool .cg-dots li[data-p="g"] { background: var(--green); }
.tool .cg-dots li[data-p="x"] { background: rgb(var(--accent)); }

.tool .cg-play { display: flex; flex-direction: column; gap: 12px; }
.tool .cg-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: -6px 0 -8px; }
.tool .cg-count { white-space: nowrap; display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .55); font-variant-numeric: tabular-nums; }
.tool .cg-tag { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: rgb(var(--ink) / .07); color: rgb(var(--ink) / .6); }
.tool .cg-tools { display: flex; gap: 2px; }
.tool .cg-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; background: transparent; color: rgb(var(--ink) / .6);
  transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out);
}
@media (hover: hover) { .tool .cg-icon:hover:not(:disabled) { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); } }
.tool .cg-icon:active:not(:disabled) { transform: scale(.92); }
.tool .cg-icon:disabled { opacity: .3; }
.tool .cg-icon[aria-pressed="true"] { color: #E0347E; }
.tool .cg-icon[aria-pressed="true"] .tool-icon path { fill: currentColor; }
.tool .cg-icon.is-done { color: var(--green); }
.tool .cg-setup { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: var(--surface); }
.tool .cg-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool .cg-label { font-size: 15px; font-weight: 850; color: rgb(var(--ink)); }
.tool .cg-step { display: flex; align-items: center; gap: 2px; border-radius: 22px; background: rgb(var(--ink) / .06); }
.tool .cg-pcount { min-width: 36px; text-align: center; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .cg-sym { font-size: 24px; line-height: 1; font-weight: 700; }
.tool .cg-names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .cg-names .cg-turn { grid-column: 1 / -1; }
.tool .cg-names input { min-height: 44px; font-size: 16px; }
.tool .cg-turn { text-align: center; font-size: 16px; font-weight: 850; color: var(--link); }

/* Flags: the scenario card */
.tool .cg-card {
  position: relative; min-height: 210px; padding: 28px 24px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform .35s var(--ease-out), opacity .2s ease, box-shadow .25s ease; will-change: transform;
}
.tool .cg-card:active { cursor: grabbing; }
.tool .cg-q { font-size: 24px; line-height: 32px; font-weight: 850; letter-spacing: -.012em; color: rgb(var(--ink)); text-wrap: balance; }
.tool .cg-stamp {
  position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 10px; font-size: 14px; line-height: 20px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  border: 2.5px solid currentColor; transform: rotate(8deg) scale(.9); opacity: 0; transition: opacity .2s ease, transform .3s var(--ease-spring);
}
.tool .cg-card[data-p] .cg-stamp, .tool .cg-card[data-drag="r"] .cg-stamp, .tool .cg-card[data-drag="g"] .cg-stamp { opacity: 1; transform: rotate(8deg) scale(1); }
.tool .cg-card[data-drag="r"] .cg-stamp::after { content: 'Red'; }
.tool .cg-card[data-drag="y"] .cg-stamp::after { content: 'Beige'; }
.tool .cg-card[data-drag="y"] .cg-stamp { opacity: 1; color: #A27A2C; }
.tool .cg-card[data-drag="y"] { box-shadow: 0 0 0 3px var(--beige), var(--shadow); }
.tool .cg-card[data-drag="g"] .cg-stamp::after { content: 'Green'; }
.tool .cg-card[data-drag="r"] .cg-stamp { left: 14px; right: auto; transform: rotate(-8deg); }
.tool .cg-card[data-p="r"], .tool .cg-card[data-drag="r"] { box-shadow: 0 0 0 3px var(--red), var(--shadow); }
.tool .cg-card[data-p="y"] { box-shadow: 0 0 0 3px var(--beige), var(--shadow); }
.tool .cg-card[data-p="g"], .tool .cg-card[data-drag="g"] { box-shadow: 0 0 0 3px var(--green), var(--shadow); }
.tool .cg-card[data-p="r"] .cg-stamp, .tool .cg-card[data-drag="r"] .cg-stamp { color: var(--red); }
.tool .cg-card[data-p="y"] .cg-stamp { color: #A27A2C; }
.tool .cg-card[data-p="g"] .cg-stamp, .tool .cg-card[data-drag="g"] .cg-stamp { color: var(--green); }
.tool .cg-card[data-p="m"] .cg-stamp, .tool .cg-card[data-p="n"] .cg-stamp { color: var(--link); }
.tool .cg-card[data-p] { padding-top: 52px; }
.tool .cg-card[data-p] { cursor: default; animation: cg-settle .4s var(--ease-spring); }
@keyframes cg-settle { from { transform: scale(.97); } to { transform: none; } }

.tool .cg-after { display: flex; flex-direction: column; gap: 12px; }
.tool .cg-flags-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cg-flags-row:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.tool .cg-flag {
  min-height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px;
  font-size: 16px; line-height: 20px; font-weight: 850; color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .1);
  transition: transform .16s var(--ease-out), filter .15s ease;
}
.tool .cg-flag[data-f="r"] { background: var(--red); }
.tool .cg-flag[data-f="y"] { background: var(--beige); color: var(--beige-ink); }
.tool .cg-flag[data-f="g"] { background: var(--green); }
.tool .cg-flag[data-f="m"] { background: var(--opt-a); }
.tool .cg-flag[data-f="n"] { background: var(--surface); color: rgb(var(--ink)); box-shadow: inset 0 0 0 2px rgb(var(--ink) / .12); }
.tool .cg-flag:active { transform: scale(.96); filter: brightness(.95); }
@media (hover: hover) { .tool .cg-flag:hover { filter: brightness(1.06); } }
.tool .cg-flag-ic { flex: none; }
.tool .cg-hint { font-size: 13px; line-height: 18px; font-weight: 650; color: rgb(var(--ink) / .5); text-align: center; }
@media (hover: hover) and (pointer: fine) { .tool .cg-hint { display: none; } }

.tool .cg-nav { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.tool .cg-nav .cg-next { flex: 1; min-height: 52px; }
.tool .cg-skip { margin-left: auto; min-height: 44px; padding: 0 14px; border-radius: 22px; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .6); background: transparent; }
@media (hover: hover) { .tool .cg-skip:hover { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); } }

.tool .cg-reveal { display: flex; flex-direction: column; gap: 10px; animation: card-in .35s var(--ease-out) both; }
.tool .cg-take { padding: 14px 16px; border-radius: 18px; background: var(--surface); font-size: 16px; line-height: 23px; font-weight: 600; color: rgb(var(--ink) / .85); box-shadow: inset 4px 0 0 rgb(var(--accent)); }
.tool .cg-take[data-p="r"] { box-shadow: inset 4px 0 0 var(--red); }
.tool .cg-take[data-p="y"] { box-shadow: inset 4px 0 0 var(--beige); }
.tool .cg-take[data-p="g"] { box-shadow: inset 4px 0 0 var(--green); }
.tool .cg-take b { font-weight: 900; color: rgb(var(--ink)); }
.tool .cg-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool .cg-vs[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.tool .cg-vs[data-n="4"], .tool .cg-vs[data-n="5"], .tool .cg-vs[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
.tool .cg-pill { min-width: 0; overflow: hidden; }
.tool .cg-pill small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .cg-pill { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: var(--surface); font-size: 15px; line-height: 20px; font-weight: 850; color: rgb(var(--ink)); box-shadow: inset 0 0 0 2px rgb(var(--ink) / .08); text-align: left; }
.tool .cg-pill small { font-size: 12px; line-height: 16px; font-weight: 750; color: rgb(var(--ink) / .55); }
.tool .cg-pill[data-p="r"] { box-shadow: inset 0 0 0 2px var(--red); }
.tool .cg-pill[data-p="y"] { box-shadow: inset 0 0 0 2px var(--beige); }
.tool .cg-pill[data-p="g"] { box-shadow: inset 0 0 0 2px var(--green); }
.tool .cg-verdict { font-size: 16px; line-height: 23px; font-weight: 800; color: rgb(var(--ink) / .8); text-align: center; text-wrap: balance; }
.tool .cg-verdict[data-m="y"] { color: var(--green); }

/* Would you rather / this or that: two big halves */
.tool .cg-abcard { display: flex; flex-direction: column; gap: 10px; }
.tool .cg-prefix { font-size: 15px; line-height: 20px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--link); text-align: center; }
.tool .cg-ab { position: relative; display: grid; grid-template-columns: 1fr; gap: 10px; }
.tool .cg-half {
  position: relative; min-height: 132px; padding: 20px 20px 20px 56px; border-radius: 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; text-align: left;
  color: #fff; font-size: 21px; line-height: 28px; font-weight: 850; letter-spacing: -.01em; text-wrap: balance;
  box-shadow: 0 10px 28px rgb(0 0 0 / .14); transition: transform .18s var(--ease-out), opacity .25s ease, filter .25s ease, box-shadow .25s ease;
}
.tool .cg-half[data-x="a"] { background: var(--opt-a); }
.tool .cg-half[data-x="b"] { background: var(--opt-b); }
.tool .cg-half:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .tool .cg-half:hover:not(:disabled) { filter: brightness(1.08); } }
.tool .cg-half:disabled { cursor: default; }
.tool .cg-key { position: absolute; left: 16px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: rgb(255 255 255 / .22); font-size: 13px; font-weight: 900; }
.tool .cg-or {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 22px; display: grid; place-items: center;
  background: var(--surface); color: rgb(var(--ink)); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 4px 14px rgb(0 0 0 / .18);
}
.tool .cg-ab[data-picked] .cg-half[aria-pressed="false"] { color: rgb(var(--ink) / .72); box-shadow: inset 0 0 0 2px rgb(var(--ink) / .08); }
.tool .cg-ab[data-picked] .cg-half[data-x="a"][aria-pressed="false"] { background: color-mix(in srgb, var(--opt-a) 16%, var(--surface)); }
.tool .cg-ab[data-picked] .cg-half[data-x="b"][aria-pressed="false"] { background: color-mix(in srgb, var(--opt-b) 16%, var(--surface)); }
.tool .cg-ab[data-picked] .cg-half[aria-pressed="false"] .cg-key { background: rgb(var(--ink) / .08); }
.tool .cg-ab[data-picked] .cg-or { opacity: 0; }
.tool .cg-key .tool-icon { width: 16px; height: 16px; }
.tool .cg-ab[data-picked] .cg-half[aria-pressed="true"] { animation: cg-settle .4s var(--ease-spring); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px rgb(var(--accent) / .6), 0 12px 30px rgb(0 0 0 / .18); }
.tool .cg-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tool .cg-badges:empty { display: none; }
.tool .cg-badge { font-size: 12px; line-height: 16px; font-weight: 900; padding: 5px 10px; border-radius: 12px; background: var(--surface); color: rgb(var(--ink)); animation: card-in .3s var(--ease-out) both; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .cg-badge[data-i="1"], .tool .cg-badge[data-i="3"], .tool .cg-badge[data-i="5"] { background: rgb(var(--ink)); color: var(--bg); }
.tool .cg-card[data-done] { box-shadow: 0 0 0 3px rgb(var(--accent) / .5), var(--shadow); }
.tool.cg .btn-secondary { box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .12); }

/* Progress row: segments + the Pass the phone toggle */
.tool .cg-progress { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.tool .cg-progress .cg-dots { flex: 1; margin: 0; justify-content: flex-start; }
.tool .cg-progress .cg-dots[hidden] + .cg-modebtn { margin-left: auto; }
.tool .cg-modebtn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 18px;
  font-size: 13.5px; font-weight: 800; color: rgb(var(--ink) / .7); background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1);
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.tool .cg-modebtn:active { transform: scale(.96); }
.tool .cg-modebox { width: 28px; height: 16px; border-radius: 8px; background: rgb(var(--ink) / .18); position: relative; transition: background-color .2s ease; }
.tool .cg-modebox::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: var(--surface); transition: transform .2s var(--ease-out); }
.tool .cg-modebtn[aria-pressed="true"] { color: rgb(var(--ink)); }
.tool .cg-modebtn[aria-pressed="true"] .cg-modebox { background: rgb(var(--accent)); }
.tool .cg-modebtn[aria-pressed="true"] .cg-modebox::after { transform: translateX(12px); }
.tool .cg-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 20px; background: rgb(var(--ink)); color: var(--bg); font-size: 14px; font-weight: 800; transition: opacity .2s ease, transform .25s var(--ease-out);
}
.tool .cg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tool .cg-picks { display: grid; gap: 4px; }
.tool .cg-picks li { display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 21px; }
.tool .cg-picks small { flex: none; min-width: 64px; font-size: 13px; font-weight: 750; color: rgb(var(--ink) / .55); }
.tool .cg-picks b { font-weight: 850; color: rgb(var(--ink)); }
.tool .cg-ab-row { font-size: 15px; line-height: 21px; font-weight: 600; color: rgb(var(--ink) / .55); }
.tool .cg-ab-row b { font-weight: 850; color: rgb(var(--ink)); }
.tool .cg-result { scroll-margin-top: calc(var(--nav-h, 80px) + 12px); }

/* Results */
.tool .cg-top-ab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: -6px 0 -4px; }
.tool .cg-top-ab .cg-tools { justify-self: end; }
.tool .cg-top-ab .cg-prefix { white-space: nowrap; }
.tool .cg-icon[data-label] { width: auto; padding: 0 12px 0 10px; gap: 6px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; }
.tool .cg-icon[data-label]::after { content: attr(data-label); }
.tool .cg-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 280px; padding: 24px; border-radius: 24px; text-align: center; background: var(--surface); box-shadow: var(--shadow); animation: card-in .3s var(--ease-out) both; }
.tool .cg-cover .btn { width: 100%; max-width: 360px; margin-top: 8px; }
.tool .cg-call { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: 15px; line-height: 21px; font-weight: 650; color: rgb(var(--ink) / .85); }
.tool .cg-call small { font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.tool .cg-safety { padding: 12px 14px; border-radius: 16px; font-size: 15px; line-height: 21px; font-weight: 650; color: rgb(var(--ink) / .85); box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .14); }
.tool .cg-actions .tool-actions { flex-direction: row; flex-wrap: wrap; }
.tool .cg-actions .tool-actions .btn-primary, .tool .cg-actions .tool-actions > .btn:first-child { flex: 1 1 100%; }
.tool .cg-actions .tool-actions { gap: 8px; }
.tool .cg-actions .tool-actions .btn-secondary { flex: 1 1 0; min-width: 0; width: auto; min-height: 48px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
.tool .cg-all-row { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px !important; }
.tool .cg-all-row .cg-row-q { font-size: 15px; line-height: 21px; font-weight: 700; }
.tool .cg-all-row .cg-icon { flex: none; }
.tool .cg-next-games { display: grid; gap: 8px; }
.tool .cg-game { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); text-decoration: none; transition: transform .16s var(--ease-out); }
.tool .cg-game:active { transform: scale(.98); }
.tool .cg-game b { font-size: 16px; line-height: 22px; font-weight: 850; color: rgb(var(--ink)); }
.tool .cg-game span { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .6); }
@media (min-width: 600px) { .tool .cg-next-games { grid-template-columns: 1fr 1fr; } .tool .cg-next-games .cg-h { grid-column: 1 / -1; } }
.tool .cg-result { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.tool .cg-result.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .cg-eyebrow { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tool .cg-score { display: flex; align-items: center; gap: 16px; }
.tool .cg-ring {
  --p: 0; flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(rgb(var(--accent)) calc(var(--p) * 1%), rgb(var(--ink) / .08) 0); animation: cg-ring .9s var(--ease-out) both;
}
.tool .cg-ring b { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 24px; font-weight: 950; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes cg-ring { from { --p: 0; } }
.tool .cg-sub { font-size: 15px; line-height: 22px; font-weight: 600; color: rgb(var(--ink) / .7); }
.tool .cg-h { font-size: 15px; font-weight: 900; color: rgb(var(--ink)); margin-top: 4px; }
.tool .cg-list { display: grid; gap: 8px; }
.tool .cg-list > li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface-2); }
.tool .cg-row-q { font-size: 16px; line-height: 22px; font-weight: 800; color: rgb(var(--ink)); }
.tool .cg-ask { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--link); }
.tool .cg-mine { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; line-height: 21px; font-weight: 650; color: rgb(var(--ink) / .75); }
.tool .cg-mine .tool-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.tool .cg-bar { display: flex; height: 40px; border-radius: 14px; overflow: hidden; gap: 3px; }
.tool .cg-bar span { min-width: 0; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff; transition: flex-grow .6s var(--ease-out); }
.tool .cg-bar span[data-p="r"] { background: var(--red); }
.tool .cg-bar span[data-p="y"] { background: var(--beige); color: var(--beige-ink); }
.tool .cg-bar span[data-p="g"] { background: var(--green); }
.tool .cg-actions { display: flex; flex-direction: column; gap: 10px; }
.tool .cg-send { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.tool .cg-send .btn { min-width: 168px; }
.tool .cg-more { border-radius: 16px; background: var(--surface-2); }
.tool > .cg-more { background: var(--surface); }
.tool .cg-more summary { min-height: 48px; padding: 13px 16px; font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; color: rgb(var(--ink)); }
.tool .cg-more summary::-webkit-details-marker { display: none; }
.tool .cg-more summary::after { content: '+'; float: right; font-weight: 900; color: rgb(var(--ink) / .45); }
.tool .cg-more[open] summary::after { content: '\2212'; }
.tool .cg-more > ol { padding: 0 10px 10px; }
.tool .cg-more .cg-list > li { background: var(--surface); }
.tool > .cg-more .cg-list > li { background: var(--surface-2); }

@media (min-width: 600px) {
  .tool .cg-head { gap: 12px; }
  .tool .cg-seg { width: 360px; align-self: center; }
  .tool .cg-groups { width: 320px; align-self: flex-start; }
  .tool .cg-head .cg-packs { flex: 1 1 auto; min-width: 0; }
  .tool .cg-ab { grid-template-columns: 1fr 1fr; }
  .tool .cg-half { min-height: 168px; padding: 52px 24px 22px; align-items: center; justify-content: center; text-align: center; }
  .tool .cg-key { left: 50%; top: 16px; margin: 0 0 0 -15px; }
  .tool .cg-badges { justify-content: center; }
  .tool .cg-half { flex-direction: column; }
  .tool .cg-card { min-height: 190px; }
  .tool .cg-q { font-size: 28px; line-height: 36px; }
  .tool .cg-flag { min-height: 64px; font-size: 17px; }
}
@media (max-width: 599px) {
  .tool .cg-packs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; scroll-padding: 16px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tool .cg-packs::-webkit-scrollbar { display: none; }
  .tool .cg-packs button { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
  .tool .cg-send { grid-template-columns: 1fr; }
  .tool .cg-send .btn { min-width: 0; }
  .tool .cg-q { font-size: 22px; line-height: 30px; }
  .tool .cg-card { min-height: 150px; padding: 22px 20px; }
  .tool .cg-half { font-size: 19px; line-height: 26px; min-height: 92px; padding-top: 14px; padding-bottom: 14px; }
  .tool .cg-prefix { font-size: 13px; line-height: 18px; }
  .tool .cg-abcard { gap: 6px; }
  .tool .cg-nav .btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .cg-card, .tool .cg-half, .tool .cg-reveal, .tool .cg-badge, .tool .cg-ring, .tool .cg-stamp, .tool .cg-result.is-new { animation: none !important; transition: opacity .15s ease !important; }
}
@media (prefers-color-scheme: dark) {
  .tool .cg-card, .tool .cg-result, .tool .cg-cover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), var(--shadow); }
  .tool.cg .btn-secondary { box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .22); }
  .tool.cg { --red: #D23C44; --green: #1E8A5C; }
  .tool .cg-card[data-p="y"] .cg-stamp { color: var(--beige); }
}
@media (max-width: 599px) { .tool .cg-top-ab .cg-tag { display: none; } }

/* 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 .cg-progress { flex-wrap: wrap; }
  .tool .cg-top-ab { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .tool .cg-top-ab .cg-tools { margin-left: auto; }
}