/* Org / firm / uni culprit cards (Coop, 26 Oct 2026 20:09-20:22). Calm single-row carousel; each card uses the reference card
   design (reference-v2-coop-2021.png, coop-2021.pdf): accent border, pale accent gradient top half with the neon-light icon
   (matt grey ball), white lower half with uppercase accent label, name, short accent rule, one-line description. 20:28 (Coop): collector-card shape, portrait 5:7, about 224px wide.
   All cards greyed until the user interacts; hover / keyboard focus lights a card; click / tap selects it (stays lit).
   Text on white: ink #1D1D1F 16.8:1, muted #5E5E63 6.5:1, grey label #6B6B70 5.3:1, red label #C8102E 5.9:1,
   orange label #C2410C 5.2:1, yellow-card label darkened to amber #946200 5.2:1 (brand yellow #FFC21A is 1.6:1).
   Generated by /workspace/handoff-build/org_culprit_cards.py (source org_culprit_cards/org-culprit-cards.css). */
.occ{--occ-gap:20px;--occ-grey:#E3E0DA;--occ-ease:cubic-bezier(.2,.6,.2,1)}
.occ [data-tone="red"]{--occ-c:#C8102E;--occ-t:#C8102E;--occ-top:#FBE3E6;--occ-glow:rgba(200,16,46,.16)}
.occ [data-tone="orange"]{--occ-c:#E8571C;--occ-t:#C2410C;--occ-top:#FDE6D9;--occ-glow:rgba(232,87,28,.16)}
.occ [data-tone="yellow"]{--occ-c:#FFC21A;--occ-t:#946200;--occ-top:#FFF3CF;--occ-glow:rgba(255,194,26,.24)}
/* 20:28 (Coop): heading and intro centred */
.occ-intro{max-width:820px;margin-inline:auto;text-align:center}
.occ-intro .pk-h,.occ-intro h2{margin-inline:auto;text-align:center;text-wrap:balance}
.occ-intro .pk-lead{max-width:34em;margin:16px auto 0;text-align:center}
/* 20:32 (Coop): the view shows exactly 3 full centred cards + a half card at each edge (4 card widths + 4 gaps);
   big matt grey triangles outside the view move the row one card. Track padding (half a card + a gap) lets the first
   and last cards reach the full middle positions; triangles look disabled at the ends (no loop). */
.occ-car{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px}
.occ-view{container-type:inline-size;flex:0 1 calc(4 * 232px + 4 * var(--occ-gap));min-width:0;overflow:hidden;
  -webkit-mask-image:none}
.occ-track{--occ-w:calc((100cqw - 4 * var(--occ-gap)) / 4);list-style:none;margin:0;padding:14px calc(var(--occ-w) / 2 + var(--occ-gap)) 22px;
  display:flex;align-items:stretch;gap:var(--occ-gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.occ-track::-webkit-scrollbar{display:none}
.occ-slide{flex:0 0 var(--occ-w);width:var(--occ-w);scroll-snap-align:center;display:flex}
.occ-tri{all:unset;box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;width:64px;height:96px;border-radius:12px;
  color:#7C7C80;cursor:pointer;transition:color .2s}
.occ-tri svg{display:block;width:40px;height:56px}
.occ-tri:hover:not([aria-disabled="true"]){color:#5E5E63}
.occ-tri:focus-visible{outline:3px solid var(--ink,#1D1D1F);outline-offset:2px}
.occ-tri[aria-disabled="true"]{color:#D3D1CC;cursor:default}
.occ-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;aspect-ratio:5 / 7;background:#fff;border:3px solid var(--occ-grey);border-radius:16px;
  overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink,#1D1D1F);box-shadow:0 0 0 rgba(0,0,0,0);
  transition:border-color .3s var(--occ-ease),box-shadow .3s var(--occ-ease)}
.occ-band{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 42%;border-bottom:1px solid #EEEBE5;background:#F7F6F4}
.occ-band::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s var(--occ-ease);
  background:radial-gradient(ellipse 45% 60% at 50% 48%,var(--occ-glow),rgba(255,255,255,0) 75%),linear-gradient(180deg,#fff 0%,var(--occ-top) 100%)}
.occ-ico{position:relative;display:block;width:62px;height:62px;filter:grayscale(1);opacity:.42;transition:filter .3s var(--occ-ease),opacity .3s var(--occ-ease)}
.occ-body{display:flex;flex-direction:column;padding:14px 16px 16px;flex:1;min-height:0}
.occ-eye{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6B6B70;transition:color .3s var(--occ-ease)}
.occ-name{margin-top:6px;font-size:19px;line-height:1.15;font-weight:500;letter-spacing:-.01em;color:var(--ink,#1D1D1F)}
.occ-rule{display:block;width:28px;height:3px;border-radius:2px;margin:10px 0 10px;flex:none;background:#D6D3CD;transition:background-color .3s var(--occ-ease)}
.occ-desc{font-size:14px;line-height:1.42;color:#3A3A3E}
/* lit: hover, keyboard focus, or selected */
.occ-card:hover,.occ-card:focus-visible,.occ-card[aria-pressed="true"]{border-color:var(--occ-c);box-shadow:0 8px 28px var(--occ-glow)}
.occ-card:hover .occ-band::before,.occ-card:focus-visible .occ-band::before,.occ-card[aria-pressed="true"] .occ-band::before{opacity:1}
.occ-card:hover .occ-ico,.occ-card:focus-visible .occ-ico,.occ-card[aria-pressed="true"] .occ-ico{filter:none;opacity:1}
.occ-card:hover .occ-eye,.occ-card:focus-visible .occ-eye,.occ-card[aria-pressed="true"] .occ-eye{color:var(--occ-t)}
.occ-card:hover .occ-rule,.occ-card:focus-visible .occ-rule,.occ-card[aria-pressed="true"] .occ-rule{background:var(--occ-c)}
.occ-card:focus-visible{outline:3px solid var(--ink,#1D1D1F);outline-offset:3px}
@media (max-width:760px){
  /* mobile: 1 full card + a half card each side; smaller triangles sit over the half cards */
  .occ{--occ-gap:12px}
  .occ-car{margin:28px -20px 0;gap:0}
  .occ-view{flex:1 1 auto}
  .occ-track{--occ-w:calc((100cqw - 2 * var(--occ-gap)) / 2);padding-inline:calc(var(--occ-w) / 2 + var(--occ-gap))}
  .occ-tri{position:absolute;top:50%;z-index:2;width:40px;height:64px;margin-top:-32px;background:rgba(247,245,240,.88)}
  .occ-tri--prev{left:4px}.occ-tri--next{right:4px}.sc-page .occ-tri--prev{left:24px}.sc-page .occ-tri--next{right:24px}
  .occ-tri svg{width:24px;height:34px}
  .occ-band{flex-basis:38%}
  .occ-ico{width:52px;height:52px}
  .occ-body{padding:12px 13px 13px}
  .occ-eye{font-size:10px;letter-spacing:.08em}
  .occ-name{font-size:17px;margin-top:4px}
  .occ-rule{margin:8px 0}
  .occ-desc{font-size:13px;line-height:1.38}
}
@media (prefers-reduced-motion:reduce){
  .occ-card,.occ-band::before,.occ-ico,.occ-eye,.occ-rule,.occ-tri{transition:none}
  .occ-track{scroll-behavior:auto}
}
@media (forced-colors:active){.occ-card[aria-pressed="true"]{border-color:Highlight}}
/* 20:31 (Coop): cards perfectly even: one size, equal gaps, one baseline, no tilt / offset / stagger */
.occ-track{align-items:stretch}
.occ-slide,.occ-card{transform:none;rotate:none;translate:none;margin:0}
@media (forced-colors:active){.occ-tri{color:ButtonText}.occ-tri[aria-disabled="true"]{color:GrayText}}