/* Culprit picker pile (Coop, 26 Oct 2026 12:27 "implement this" + 12:28 click-to-cycle + 12:30 neon only on Myself).
   Shared by the Myself page picker (neon glass renders, grey unless selected) and the landing page picker
   (Organisations, Law firms, Universities: the existing card icons, assets/culprit-icons/). Prefix nc-.
   Generated by /workspace/handoff-build/neon_culprits.py (runs last in build.py). Source: handoff-build/neon_culprits/.
   - The big card is a real button: click, tap, Enter or Space sends it to the back of the pile and brings the next culprit forward.
   - Lit = the front card only. Every other card in the pile is grey. Cross-fade 0.25s to lit, then one gentle flicker (one dip).
   - Hover: a slight lift only, no colour. prefers-reduced-motion: instant swaps, no toss, no flicker. */
.nc { --nc-ink: #1D1D1F; --nc-body: #2A2A2E; --nc-note: #5E5E63; --nc-hair: #E6E2DA; --nc-focus: #C2410C; --nc-accent: #B4300F;
  --nc-card: #FFFFFF; --nc-card-edge: rgba(29, 29, 31, 0.06); --nc-w: clamp(260px, 30vw, 420px); }
.nc[data-ground="dark"] { --nc-ink: #FFFFFF; --nc-body: #FFFFFF; --nc-note: #FFFFFF; --nc-hair: rgba(255, 255, 255, 0.16); --nc-focus: #FFC21A;
  --nc-accent: #FFC21A; --nc-card: #1C1C1E; --nc-card-edge: rgba(255, 255, 255, 0.08); }

/* ---------- panel: the pile + caption ---------- */
.nc-panel { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.nc-pile { position: relative; width: var(--nc-w); height: var(--nc-w); margin: 28px 34px 0 0; }
.nc-btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; border-radius: 26px; -webkit-tap-highlight-color: transparent; }
.nc-btn:focus { outline: none; }
.nc-card { position: absolute; inset: 0; display: block; border-radius: 26px; background: var(--nc-card);
  box-shadow: 0 0 0 1px var(--nc-card-edge), 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 40px rgba(60, 50, 30, 0.10);
  transform-origin: 50% 85%; transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; will-change: transform; }
.nc[data-ground="dark"] .nc-card { box-shadow: 0 0 0 1px var(--nc-card-edge), 0 18px 40px rgba(0, 0, 0, 0.45); }
.nc-card[data-pos="0"] { z-index: 20; transform: none; }
.nc-card[data-pos="1"] { z-index: 19; transform: translate(18px, -14px) rotate(4deg) scale(0.955); }
.nc-card[data-pos="2"] { z-index: 18; transform: translate(34px, -26px) rotate(8deg) scale(0.91); }
.nc-card[data-pos="far"] { z-index: 1; transform: translate(34px, -26px) rotate(8deg) scale(0.91); opacity: 0; }
/* hover / focus: a slight lift of the front card only, no colour change */
.nc-btn:hover .nc-card[data-pos="0"] { transform: translateY(-6px); }
.nc-btn:focus-visible .nc-card[data-pos="0"] { outline: 3px solid var(--nc-focus); outline-offset: 4px; }
/* the toss: the front card swings out to the left, then tucks in behind the pile */
@keyframes nc-toss {
  0%   { transform: none; z-index: 21; opacity: 1; }
  45%  { transform: translate(-62%, 8%) rotate(-14deg) scale(0.94); z-index: 21; opacity: 1; }
  55%  { transform: translate(-62%, 8%) rotate(-14deg) scale(0.94); z-index: 0; opacity: 1; }
  100% { transform: translate(34px, -26px) rotate(8deg) scale(0.91); z-index: 0; opacity: 0; }
}
.nc-card.nc-toss { animation: nc-toss 0.6s cubic-bezier(.3, .7, .3, 1) both; transition: none; }

/* art: grey underneath, lit on top (pixel-aligned), lit only on the front card */
.nc-art { position: absolute; inset: 6%; display: block; }
.nc-art img, .nc-art picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nc-art img { object-fit: contain; }
.nc-lit { opacity: 0; transition: opacity 0.25s ease-out; }
.nc-card[data-pos="0"] .nc-lit { opacity: 1; }
@keyframes nc-flicker { 0% { opacity: 1; } 35% { opacity: 0.55; } 60% { opacity: 1; } 100% { opacity: 1; } }
.nc-card.nc-flick .nc-lit { animation: nc-flicker 0.45s ease-in-out 0.25s 1 both; }
/* icon mode (landing page): the card icons; behind the front card they are greyed out */
.nc[data-mode="icon"] .nc-art { inset: 20%; }
.nc[data-mode="icon"] .nc-card:not([data-pos="0"]) .nc-art { filter: grayscale(1); opacity: 0.45; }
.nc[data-mode="icon"] .nc-art { transition: opacity 0.25s, filter 0.25s; }

/* a quiet cue that the card turns over: a small round "next" badge on the front card */
.nc-cue { position: absolute; right: 14px; bottom: 14px; z-index: 30; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(247, 245, 240, 0.92); color: var(--nc-ink);
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.10); pointer-events: none; transition: transform 0.2s; }
.nc[data-ground="dark"] .nc-cue { background: rgba(11, 11, 12, 0.85); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.nc-btn:hover .nc-cue { transform: translateY(-6px); }

.nc-cap { margin-top: 26px; min-height: 9.6em; }
.nc-cap-name { margin: 0; font-size: 17px; font-weight: 600; color: var(--nc-accent); }
.nc-cap-type { margin: 6px 0 0; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--nc-ink); }
.nc-cap-line { margin: 10px auto 0; max-width: 460px; font-size: 18px; line-height: 1.5; color: var(--nc-note); }

/* ---------- list ---------- */
.nc-label { margin: 28px 0 14px; font-size: 16px; font-weight: 700; color: #4A4A4F; }
.nc[data-ground="dark"] .nc-label { color: #FFFFFF; }
.nc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nc-hair); }
.nc-list li { border-bottom: 1px solid var(--nc-hair); }
.nc-row { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 0; width: 100%; min-height: 56px;
  padding: 14px 40px 14px 34px; border: 0; border-radius: 12px; background: transparent; color: var(--nc-ink); font: inherit; text-align: left; cursor: pointer; }
.nc-row:hover { background: rgba(29, 29, 31, 0.03); }
.nc-row:focus-visible { outline: 3px solid var(--nc-focus); outline-offset: -3px; }
/* marker: an empty ring; selected = a solid ball (shape change, not colour alone) + bold name + a left bar */
.nc-row::before { content: ""; position: absolute; left: 9px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid #8A8680; }
.nc-row[aria-pressed="true"]::before { border: 0; background: var(--aal-dot, radial-gradient(circle at 34% 30%, #B9B9BB, #5A5B5F 75%)); transform: scale(1.2); }
.nc-row[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--nc-ink); }
.nc-row[aria-pressed="true"] { background: rgba(29, 29, 31, 0.035); }
.nc-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--nc-body); }
.nc-type { font-size: 16px; color: var(--nc-note); }
.nc-row[aria-pressed="true"] .nc-name { font-weight: 800; color: var(--nc-ink); }
.nc-row[aria-pressed="true"] .nc-type { font-weight: 700; color: var(--nc-accent); }
.nc-chev { position: absolute; right: 12px; top: 50%; margin-top: -10px; color: #8A8680; }
.nc-row[aria-pressed="true"] .nc-chev { color: var(--nc-ink); }
.nc-more { margin: 22px 0 0; font-size: 16px; color: var(--nc-note); }

/* landing page: reuse the .pk grid (intro + list on the right, the pile on the left) */
.pk.nc-home .nc-panel { grid-area: stage; align-self: center; }
.pk.nc-home .nc-pick { grid-area: list; }
.pk.nc-home .nc-label { margin-top: 6px; }

@media (max-width: 900px) {
  .nc { --nc-w: min(300px, calc(100vw - 110px)); }
  .nc-pile { margin-right: 34px; }
}
@media (max-width: 600px) {
  .nc-name { font-size: 19px; }
  .nc-type { font-size: 15px; }
  .nc-row { min-height: 52px; padding-top: 12px; padding-bottom: 12px; }
  .nc-cap-type { font-size: 30px; }
  .nc-cap { min-height: 8.6em; }
}
@media (forced-colors: active) {
  .nc-row[aria-pressed="true"]::before { background: Highlight; forced-color-adjust: none; }
  .nc-row[aria-pressed="true"]::after { background: Highlight; forced-color-adjust: none; }
  .nc-btn:focus-visible .nc-card[data-pos="0"] { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .nc *, .nc *::before, .nc *::after { animation: none !important; transition: none !important; }
  .nc-btn:hover .nc-card[data-pos="0"], .nc-btn:hover .nc-cue { transform: none; }
}

/* ---------- Myself page: neon glass straight on black, no card, no pile (Coop, 26 Oct 2026 12:57) ----------
   Only the selected character is on stage: lit over its pixel-aligned grey, glowing on #121012 (the pack README's ground for
   neon glass). A click, tap, Enter or Space on the character (button "Show next culprit") swaps to the next culprit: the old one
   fades out while the new one cross-fades grey -> lit in 0.25s, then one gentle flicker. No toss. All text white or yellow. */
.mc-section.nc[data-ground="dark"] {
  --nc-ink: #FFFFFF; --nc-body: #FFFFFF; --nc-note: #FFFFFF; --nc-accent: #FEE21F; --nc-focus: #FEE21F; --nc-hair: rgba(255, 255, 255, 0.16);
  --mc-text: #FFFFFF; --mc-body: #FFFFFF; --mc-note: #FFFFFF; --mc-accent: #FEE21F; --mc-focus: #FEE21F; --mc-hair: rgba(255, 255, 255, 0.16);
  background: #121012; color: #FFFFFF; color-scheme: dark; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nc[data-mode="neon"] .nc-pile { margin: 8px 0 0; }
.nc[data-mode="neon"] .nc-card { background: none; box-shadow: none; transform: none; transition: opacity 0.25s ease-out, transform 0.3s ease-out; }
.nc[data-mode="neon"] .nc-card:not([data-pos="0"]) { opacity: 0; visibility: hidden; transition: opacity 0.25s ease-out, visibility 0s linear 0.25s; }
.nc[data-mode="neon"] .nc-card[data-pos="0"] { opacity: 1; visibility: visible; }
.nc[data-mode="neon"] .nc-art { inset: 0; }
.nc[data-mode="neon"] .nc-cue { right: 4px; bottom: 4px; background: rgba(18, 16, 18, 0.85); color: #FFFFFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.mc-section.nc[data-ground="dark"] .mc-lead { color: #FFFFFF; }
.mc-section.nc[data-ground="dark"] .nc-label { color: #FFFFFF; }
.mc-section.nc[data-ground="dark"] .nc-row:hover { background: rgba(255, 255, 255, 0.05); }
.mc-section.nc[data-ground="dark"] .nc-row[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); }
.mc-section.nc[data-ground="dark"] .nc-row::before { border-color: #A8A4A6; }
.mc-section.nc[data-ground="dark"] .nc-row[aria-pressed="true"]::before { background: #FFFFFF; }
.mc-section.nc[data-ground="dark"] .nc-chev { color: #A8A4A6; }
.mc-section.nc[data-ground="dark"] .nc-row[aria-pressed="true"] .nc-chev { color: #FFFFFF; }
.mc-section.nc[data-ground="dark"] .mc-more a { color: #FEE21F; }
@media (max-width: 900px) { .nc[data-mode="neon"] { --nc-w: min(320px, calc(100vw - 60px)); } .nc[data-mode="neon"] .nc-pile { margin-right: 0; } }