/* Calm Games · choosers (engine/chooser.js): a strip of instrument buttons, popovers of picture buttons, a caption row
   that names whatever is under the pointer, and one pin per popover. Tokens and motion: styles/shell.css, docs/cg/MOTION-RULES.md. */
.cgc-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; font: var(--chrome); color: var(--g-ink); }
.cgc-strip.tight .cgc-label, .cgc-strip.tight .cgc-chev { display: none; }
.cgc-wrap { position: relative; flex: none; }

/* ── triggers ── */
.cgc-trig { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 9px; justify-content: center;
  border: 1px solid var(--hair); border-radius: var(--r-btn); background: var(--g-panel); color: var(--g-ink); font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color var(--t-hover) var(--e-out), border-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.cgc-trig:active { transform: scale(.96); }
.cgc-wrap.open .cgc-trig { background: var(--surface-2); border-color: color-mix(in srgb, var(--g-ink) 30%, transparent); }
@media (hover: hover) and (pointer: fine) { .cgc-trig:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--g-ink) 24%, transparent); } }
.cgc-face { display: inline-flex; align-items: center; gap: 7px; pointer-events: none; white-space: nowrap; }
.cgc-face svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cgc-face .cgc-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cgc-face .cgc-flag { font-size: 19px; line-height: 1; }
.cgc-chev { width: 12px; height: 12px; margin-right: -2px; color: var(--g-ink-2); transition: transform var(--t-enter) var(--e-out); }
.cgc-wrap.open .cgc-chev { transform: rotate(180deg); }
.cgc-badge { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--g-ink); color: var(--g-panel); box-shadow: 0 0 0 2px var(--g-bg, var(--g-panel)); pointer-events: none; }
.cgc-badge svg { width: 9px; height: 9px; fill: currentColor; }

/* ── popover: grows from its button, exits faster than it enters, a hover bridge spans the gap ── */
.cgc-pop { position: absolute; top: calc(100% + 8px); left: 50%; translate: calc(-50% + var(--dx, 0px)) 0; z-index: 30; width: max-content; padding: 8px;
  background: var(--g-panel); color: var(--g-ink); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift);
  transform-origin: var(--ox, 50%) -8px; animation: cgc-in var(--t-enter) var(--e-out); }
.cgc-pop::before { content: ""; position: absolute; left: -8px; right: -8px; top: -12px; height: 12px; }
.cgc-pop.leaving { animation: cgc-out var(--t-exit) var(--e-out) forwards; pointer-events: none; }
@keyframes cgc-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
@keyframes cgc-out { to { opacity: 0; transform: translateY(2px); } }
.cgc-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), auto); gap: 4px; justify-content: center; }

/* ── options: no text inside except a one-word name under an icon ── */
.cgc-opt { position: relative; display: grid; place-items: center; align-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 6px;
  border: 0; border-radius: var(--r-btn); background: transparent; color: var(--g-ink-2); font: inherit; cursor: pointer;
  animation: cgc-item var(--t-enter) var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 22ms);
  transition: background-color var(--t-hover) var(--e-out), color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out), box-shadow var(--t-hover) var(--e-out); }
@keyframes cgc-item { from { opacity: 0; transform: translateY(5px); } }
.cgc-pop.keyed, .cgc-pop.keyed .cgc-opt, .cgc-pop.keyed .cgc-seg { animation: none; }
.cgc-opt:active { transform: scale(.96); }
.cgc-opt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-enter) var(--e-out); }
.cgc-opt[aria-checked="true"] { color: var(--g-ink); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--g-ink); }
.cgc-opt.picked { animation: cgc-picked 220ms var(--e-out); }
@keyframes cgc-picked { 45% { transform: scale(.95); } }
@media (hover: hover) and (pointer: fine) {
  .cgc-opt:hover { background: var(--surface-2); color: var(--g-ink); }
  .cgc-opt:hover svg { transform: translateY(-1px) scale(1.06); }
}
.cgc-name { font-size: 12px; line-height: 1.15; white-space: nowrap; }

/* tiles: icon over a one-word name (modes) */
.cgc-tile .cgc-opt { width: 84px; min-height: 64px; padding: 9px 4px 8px; }
/* words: a game's own list (fromSelect) — a pop of pill buttons, one short name each, the detail lives in the caption.
   The trigger shows the whole name and no caret: it is a button, not a dropdown */
.cgc-from { display: inline-flex; flex: none; }
.cgc-from .cgc-face .cgc-label { max-width: none; }
.cgc-word .cgc-grid { display: flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: min(336px, calc(100vw - 40px)); justify-content: flex-start; }
.cgc-word .cgc-opt { min-width: 0; min-height: 36px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--g-ink) 20%, transparent); border-radius: 999px; }
.cgc-word .cgc-name { font-size: 13px; }
.cgc-word .cgc-opt[aria-checked="true"] { background: var(--g-ink); border-color: var(--g-ink); color: var(--g-panel); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .cgc-word .cgc-opt:not([aria-checked="true"]):hover { border-color: color-mix(in srgb, var(--g-ink) 45%, transparent); } }
/* chips: the same list laid inline inside a panel that is already open */
.cgc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cgc-chips .cgc-chip { min-height: 34px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--g-ink, currentColor) 22%, transparent); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  animation: cgc-item var(--t-enter, 220ms) var(--e-out, ease-out) backwards; animation-delay: calc(var(--i, 0) * 18ms);
  transition: background-color var(--t-hover, 80ms) var(--e-out, ease-out), border-color var(--t-hover, 80ms) var(--e-out, ease-out), color var(--t-hover, 80ms) var(--e-out, ease-out), transform var(--t-press, 100ms) var(--e-out, ease-out); }
.cgc-chips .cgc-chip:active { transform: scale(.96); }
.cgc-chips .cgc-chip[aria-checked="true"] { background: var(--g-ink, #333); border-color: var(--g-ink, #333); color: var(--g-panel, #fff); }
.cgc-chips .cgc-chip.picked { animation: cgc-picked 220ms var(--e-out, ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cgc-chips .cgc-chip:not([aria-checked="true"]):hover { border-color: color-mix(in srgb, var(--g-ink, currentColor) 45%, transparent); background: color-mix(in srgb, var(--g-ink, currentColor) 6%, transparent); }
}
@media (pointer: coarse) { .cgc-chips .cgc-chip { min-height: 44px; } }
/* swatches: tiny globes painted in each style */
.cgc-swatch .cgc-opt { width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.cgc-swatch .cgc-opt[aria-checked="true"] { background: transparent; box-shadow: 0 0 0 2px var(--g-panel), 0 0 0 3.5px var(--g-ink); }
.cgc-swatch .cgc-opt .cgc-globe { width: 42px; height: 42px; stroke: none; }
.cgc-globe .land { transition: transform 300ms var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .cgc-swatch .cgc-opt:hover { background: transparent; }
  .cgc-swatch .cgc-opt:hover .cgc-globe { transform: scale(1.08); }
  .cgc-swatch .cgc-opt:hover .cgc-globe .land, .cgc-trig:hover .cgc-globe .land { transform: translateX(-5px); }
}
.cgc-trig .cgc-globe { width: 24px; height: 24px; stroke: none; }
/* flags: one country per button */
.cgc-flag .cgc-grid { max-height: min(46vh, 300px); overflow: auto; overscroll-behavior: contain; padding: 2px; }
.cgc-flag .cgc-opt { width: 46px; height: 40px; min-height: 40px; padding: 0; font-size: 24px; line-height: 1; color: inherit; }

/* switches: icon only; a lamp under the icon lights when on; a dot marks a pinned one */
.cgc-switch { width: 54px; height: 54px; padding-bottom: 10px; }
.cgc-switch::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px;
  background: var(--hair); transform: scaleX(.5); transition: transform var(--t-enter) var(--e-out), background-color var(--t-enter) var(--e-out); }
.cgc-switch[aria-pressed="true"] { color: var(--g-ink); background: color-mix(in srgb, var(--g-ink) 7%, transparent); }
.cgc-switch[aria-pressed="true"]::after { background: var(--g-accent, var(--g-ink)); transform: scaleX(1); }
.cgc-switch[aria-pressed="false"] svg { opacity: .62; }
.cgc-switch.flip svg { animation: cgc-flip 240ms var(--e-out); }
@keyframes cgc-flip { 40% { transform: scale(.82); } }
.cgc-dot { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity var(--t-hover) var(--e-out); }
.is-pinned > .cgc-dot { opacity: .85; }
.cgc-seg { grid-column: 1 / -1; display: flex; gap: 2px; margin-top: 2px; padding: 2px; border: 1px solid var(--hair); border-radius: var(--r-btn);
  animation: cgc-item var(--t-enter) var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.cgc-seg.is-pinned { border-color: color-mix(in srgb, var(--g-ink) 40%, transparent); }
.cgc-segopt { flex: 1; min-height: 40px; animation: none; }
.cgc-segopt svg { width: 30px; height: 18px; }
.cgc-segopt[aria-checked="true"] { color: var(--g-ink); background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--g-ink); }

/* ── caption: the name and one line of what it does, for whatever is under the pointer; the pin acts on that ── */
.cgc-cap { contain: inline-size; display: flex; align-items: center; gap: 6px; margin: 8px -8px -8px; padding: 4px 4px 4px 12px; min-height: 44px;
  border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.3; color: var(--g-ink-2); }
.cgc-cap-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cgc-pin { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-btn); background: transparent;
  color: var(--g-ink-2); cursor: pointer; transition: background-color var(--t-hover) var(--e-out), color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.cgc-pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transform: rotate(35deg); transition: transform var(--t-enter) var(--e-out); }
.cgc-pin[aria-pressed="true"] { color: var(--g-ink); }
.cgc-pin[aria-pressed="true"] svg { fill: currentColor; transform: none; }
.cgc-pin:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .cgc-pin:hover { background: var(--surface-2); color: var(--g-ink); } .cgc-pin:hover svg { transform: rotate(12deg); } .cgc-pin[aria-pressed="true"]:hover svg { transform: rotate(-8deg); } }

/* ── stepper: − n + in one capsule ── */
.cgc-stepper { display: inline-flex; align-items: stretch; height: 38px; flex: none; border-radius: var(--r-btn); background: var(--g-panel); overflow: hidden;
  outline: 1px solid var(--hair); outline-offset: -1px; }   /* an outline, not a border: the buttons get the full height */
.cgc-step { width: 32px; border: 0; background: transparent; color: var(--g-ink-2); font: 500 18px/1 var(--chrome-font, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif); cursor: pointer;
  transition: background-color var(--t-hover) var(--e-out), color var(--t-hover) var(--e-out); }
.cgc-step:active:not(:disabled) { background: var(--surface-2); }
.cgc-step:disabled { color: color-mix(in srgb, var(--g-ink-2) 35%, transparent); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .cgc-step:hover:not(:disabled) { background: var(--surface-2); color: var(--g-ink); } }
.cgc-num { display: grid; place-items: center; min-width: 30px; padding: 0 2px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--g-ink); cursor: default; }
.cgc-num.up { animation: cgc-up 220ms var(--e-out); }
.cgc-num.down { animation: cgc-down 220ms var(--e-out); }
@keyframes cgc-up { from { opacity: .2; transform: translateY(7px); } }
@keyframes cgc-down { from { opacity: .2; transform: translateY(-7px); } }
.cgc-pin-inline { width: 30px; height: auto; border-left: 1px solid var(--hair); border-radius: 0; }
.cgc-pin-inline svg { width: 13px; height: 13px; }

@media (pointer: coarse) {
  .cgc-trig, .cgc-stepper { height: 44px; }
  .cgc-trig { min-width: 44px; }
  .cgc-step { width: 44px; }
  .cgc-segopt { min-height: 44px; }
  .cgc-flag .cgc-opt { height: 44px; min-height: 44px; width: 46px; }
  .cgc-word .cgc-opt { min-height: 44px; }
  .cgc-pin { width: 44px; height: 44px; }
  .cgc-pin-inline { width: 44px; height: auto; }
}
@media (max-width: 520px) {
  .cgc-strip { gap: 5px; }
  .cgc-face .cgc-label { max-width: 92px; }
  .cgc-tile .cgc-opt { width: 74px; }
  .cgc-tile .cgc-grid { grid-template-columns: repeat(4, auto); }
}
@media (prefers-reduced-motion: reduce) {
  .cgc-pop, .cgc-opt, .cgc-chip, .cgc-seg, .cgc-num.up, .cgc-num.down, .cgc-switch.flip svg, .cgc-opt.picked { animation: none; }
}