/* THE Project card (CARD-SYSTEM.md section 1) — the one stylesheet for assets/dc/project-card.js, on every surface.
   Sean's card: 16:9 media, stage pill top-left (+ turnaround chip), health/New top-right, and ONE bottom row:
   submitter photo · name (all remaining width, one line) · format · version · tier · editor photo.
   Sized by container queries so the same markup fits a ~200px board column, the ~260px StudioChat panel and the
   ~290px dashboard feed without wrapping or overlap. */
.cbpc-wrap{position:relative;width:100%;min-width:0;user-select:none;-webkit-user-select:none;}
.cbpc{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:15px;overflow:hidden;cursor:pointer;isolation:isolate;container-type:inline-size;
 background:linear-gradient(150deg,color-mix(in srgb,var(--cbpc-stage,#98a2b3) 30%,#1a2233),#0c111b 80%);
 border:1px solid rgba(16,40,90,.09);box-shadow:0 1px 2px rgba(16,40,90,.06),0 18px 40px -26px rgba(16,40,90,.32);
 transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s;
 font-family:'SF Pro Text',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:subpixel-antialiased;font-synthesis:none;color:#fff;}
.cbpc *{box-sizing:border-box;margin:0;}
.cbpc sf-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:0;}
.cbpc:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(10,16,28,.16),0 26px 52px -26px rgba(10,16,28,.5);}
.cbpc:focus-visible{outline:2px solid #4da3ff;outline-offset:2px;}
/* Stage tints (Sean's): what shows beneath the poster while it loads, and alone when there is no footage. */
.cbpc[data-stage="Queue"]{background:linear-gradient(150deg,#243043,#0e1420);}
.cbpc[data-stage="Active"]{background:linear-gradient(150deg,#1b3a63,#0c1730);}
.cbpc[data-stage="Review"]{background:linear-gradient(150deg,#4a3a12,#1a1408);}
.cbpc[data-stage="Revisions"]{background:linear-gradient(150deg,#1e3f52,#0b1a24);}
.cbpc[data-stage="Approved"]{background:linear-gradient(150deg,#1c4a34,#0a1f16);}
.cbpc-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s ease;}
.cbpc[data-poster="loaded"] .cbpc-thumb{opacity:1;}
.cbpc-shim{position:absolute;inset:0;display:none;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 70%);background-size:200% 100%;animation:cbpcshim 1.3s ease-in-out infinite;}
.cbpc[data-poster="loading"] .cbpc-shim{display:block;}
@keyframes cbpcshim{0%{background-position:-160% 0}100%{background-position:260% 0}}
@media (prefers-reduced-motion:reduce){.cbpc-shim{animation:none;}.cbpc,.cbpc:hover{transition:none;transform:none;}}
.cbpc-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,0) 38%,rgba(0,0,0,0) 50%,rgba(10,16,28,.72));}
/* chips on the media: one glass style */
.cbpc-stage,.cbpc-eta,.cbpc-clock,.cbpc-meta,.cbpc-status{display:inline-flex;align-items:center;height:19px;border-radius:999px;color:#fff;white-space:nowrap;
 background:rgba(10,14,22,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.26);}
.cbpc-top{position:absolute;top:9px;left:9px;right:9px;display:flex;align-items:center;gap:4px;min-width:0;pointer-events:none;}
.cbpc-stage{flex:0 1 auto;min-width:0;overflow:hidden;gap:5px;padding:0 8px;font:500 8.5px/1 'SF Pro Text',-apple-system,sans-serif;letter-spacing:.05em;text-transform:uppercase;}
.cbpc-dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--cbpc-stage,#98a2b3);box-shadow:0 0 6px var(--cbpc-stage,#98a2b3);}
.cbpc-eta{flex:0 0 auto;gap:4px;padding:0 7px;font:600 8.5px/1 'SF Pro Text',-apple-system,sans-serif;font-variant-numeric:tabular-nums;}
.cbpc-eta sf-icon{font-size:8px;}
/* live turnaround clock (staff only): worked time against the expected turnaround, amber past 75%, red past 100% */
.cbpc-clock{flex:0 1 auto;min-width:0;overflow:hidden;gap:4px;padding:0 7px;font:600 8.5px/1 'SF Pro Text',-apple-system,sans-serif;font-variant-numeric:tabular-nums;}
.cbpc-clock sf-icon{font-size:8px;}
.cbpc-clock[data-level="close"]{background:rgba(201,162,0,.82);border-color:rgba(255,226,130,.5);}
.cbpc-clock[data-level="over"]{background:rgba(208,69,63,.86);border-color:rgba(255,168,163,.5);}
.cbpc-flag{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border-radius:999px;font:600 9px/1 'SF Pro Text',-apple-system,sans-serif;font-variant-numeric:tabular-nums;color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.35);}
.cbpc-flag sf-icon{font-size:8px;}
.cbpc-flag--new{font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:#04121f;background:#5ddb8a;}
.cbpc-status{position:absolute;top:34px;left:9px;max-width:calc(100% - 18px);overflow:hidden;text-overflow:ellipsis;padding:0 8px;font:600 8.5px/1 'SF Pro Text',-apple-system,sans-serif;}
/* file details (codec · resolution · fps) sit just above the bottom row */
.cbpc-meta{position:absolute;left:10px;bottom:35px;max-width:calc(100% - 20px);height:17px;padding:0 8px;overflow:hidden;text-overflow:ellipsis;font:600 8.5px/1 'SF Pro Text',-apple-system,sans-serif;letter-spacing:.02em;border-color:rgba(255,255,255,.22);background:rgba(10,14,22,.52);}
/* THE bottom row: exactly six things in one line. The name takes every pixel the others do not. */
.cbpc-foot{position:absolute;left:10px;right:10px;bottom:9px;display:flex;align-items:center;gap:6px;min-width:0;}
.cbpc-av{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
 background:linear-gradient(160deg,#3a9bff,#0a6fe0);border:1.5px solid rgba(255,255,255,.85);color:#fff;font:600 8px/1 'SF Pro Display','SF Pro Text',-apple-system,sans-serif;}
.cbpc-av sf-icon{font-size:10px;}
.cbpc-av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.cbpc-av--none{background:rgba(10,14,22,.42);border:1.5px dashed rgba(255,255,255,.7);color:rgba(255,255,255,.88);}
.cbpc-av--none sf-icon{font-size:9px;}
.cbpc-name{flex:1 1 auto;min-width:0;font:600 12px/1.2 'SF Pro Display','SF Pro Text',-apple-system,sans-serif;letter-spacing:-.012em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cbpc-tags{flex:0 0 auto;display:flex;align-items:center;gap:2px;}
.cbpc-tag{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:13px;padding:0 4px;border-radius:999px;font:600 6.5px/1 'SF Pro Text',-apple-system,sans-serif;font-variant-numeric:tabular-nums;color:#fff;background:rgba(255,255,255,.18);white-space:nowrap;letter-spacing:.01em;}
.cbpc-tag[data-kind="version"]{background:rgba(255,255,255,.24);}
.cbpc-tag--missing{color:rgba(255,255,255,.62);background:rgba(255,255,255,.1);}
/* compact: board columns and the StudioChat panel (≤250px) — smaller tags + photos, the name keeps the rest */
@container (max-width:250px){
 .cbpc-foot{left:8px;right:8px;bottom:7px;gap:4px;}
 .cbpc-av{width:18px;height:18px;font-size:7px;border-width:1.25px;}
 .cbpc-av sf-icon{font-size:9px;} .cbpc-av--none sf-icon{font-size:8px;}
 .cbpc-name{font-size:11px;}
 .cbpc-tags{gap:2px;}
 .cbpc-tag{min-width:15px;height:12px;padding:0 3px;font-size:6px;}
 .cbpc-top{top:7px;left:7px;right:7px;} .cbpc-flag{top:7px;right:7px;}
 .cbpc-stage,.cbpc-eta,.cbpc-flag{height:17px;} .cbpc-stage{padding:0 7px;font-size:8px;}
 .cbpc-meta{left:8px;bottom:31px;}
}
@container (min-width:360px){
 .cbpc-foot{left:12px;right:12px;bottom:11px;gap:7px;}
 .cbpc-av{width:24px;height:24px;font-size:9px;}
 .cbpc-name{font-size:13.5px;}
 .cbpc-tag{min-width:20px;height:14px;padding:0 5px;font-size:7px;}
 .cbpc-stage,.cbpc-eta,.cbpc-flag{height:21px;} .cbpc-stage{font-size:9.5px;}
 .cbpc-meta{left:12px;bottom:42px;}
}
/* right-click menu (React card only) */
.cbpc-mscrim{position:fixed;inset:0;z-index:90;}
.cbpc-menu{position:absolute;z-index:91;width:200px;padding:5px;background:#141a27;border:1px solid rgba(160,190,255,.18);border-radius:12px;box-shadow:0 24px 60px -22px rgba(0,0,0,.8);animation:cbpcmenu .14s ease both;}
@keyframes cbpcmenu{from{opacity:0;transform:scale(.96) translateY(-3px)}to{opacity:1;transform:none}}
.cbpc-mi{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;cursor:pointer;text-align:left;font:600 12px/1 'SF Pro Text',-apple-system,sans-serif;color:#eef4ff;}
.cbpc-mi:hover{background:rgba(140,160,200,.14);}
.cbpc-mi>span:not(.cbpc-mdot){flex:1;}
.cbpc-mi sf-icon{display:inline-flex;width:16px;height:1em;font-size:12px;color:#b6c3d9;}
.cbpc-mi .cbpc-mi-chev{font-size:8px;opacity:.5;} .cbpc-mi .cbpc-mi-on{font-size:10px;color:#4da3ff;}
.cbpc-msub{margin:4px 2px 2px;padding-top:5px;border-top:1px solid rgba(160,190,255,.12);}
.cbpc-mhead{padding:2px 8px 5px;font:600 8px/1 'SF Pro Text',-apple-system,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7e8ca6;}
.cbpc-mdot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;}
html.cslight .cbpc{border-color:rgba(16,40,90,.12);box-shadow:0 1px 2px rgba(16,40,90,.08),0 18px 40px -26px rgba(16,40,90,.38);}
