/* REFRM v163 — My projects: instant loading screen, compact Opus-style cards, tidy thumbnails. Loaded last. */

/* ---------- boot loader (dashboard -> My projects) ---------- */
#rf-boot-loader{display:none}
html.rf-boot-projects #rf-boot-loader{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;background:#0a0a0a;color:#f4f4f4;opacity:1;transition:opacity .3s ease}
html.rf-boot-projects #rf-boot-loader.is-leaving{opacity:0;pointer-events:none}
html.rf-boot-projects #landing,html.rf-boot-projects #app{visibility:hidden}
.rf-boot-inner{display:flex;flex-direction:column;align-items:center;gap:16px;font:600 13px/1.2 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#cfcfcf}
.rf-boot-spin{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:#fff;animation:rfSpin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.rf-boot-spin{animation-duration:2.4s}}

/* ---------- thumbnails: sharp frame on a soft blurred backdrop ---------- */
.project-thumb>img.tb-bg,.studio-recent-thumb>img.tb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.1) brightness(.5);transform:scale(1.25);opacity:1;z-index:0}
.project-thumb>img.tb-fg,.studio-recent-thumb>img.tb-fg{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;opacity:0;transition:opacity .35s ease}
.project-thumb>img.tb-fg.is-loaded,.studio-recent-thumb>img.tb-fg.is-loaded{opacity:1}
/* thumbnails saved before v163: 320x200 plates with the 9:16 frame in the middle — show only that frame */
.project-thumb>img.tb-fg.tb-strip,.studio-recent-thumb>img.tb-fg.tb-strip{left:0;right:0;margin:0 auto;width:auto;height:100%;aspect-ratio:9/16;object-fit:cover}
/* hover zoom only on the sharp frame, never the backdrop */
.project-card:hover .project-thumb>img.tb-bg,.studio-recent-card:hover .studio-recent-thumb img.tb-bg{transform:scale(1.25)}
.project-card:hover .project-thumb>img.tb-fg,.studio-recent-card:hover .studio-recent-thumb img.tb-fg{transform:scale(1.04)}
.project-thumb,.studio-recent-thumb{display:grid;place-items:center;background:#0d0d0d}
.project-thumb::after{background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 62%,rgba(0,0,0,.28));z-index:2}
.project-thumb .project-format,.project-thumb .project-retention-chip{z-index:3}

/* ---------- compact cards (desktop/tablet) ---------- */
@media(min-width:601px){
  #projects-grid.projects-grid,#projects-drafts-grid.projects-grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px;align-items:start}
  .project-card{border-radius:14px}
  .project-card .project-thumb,.project-card-project .project-clip-thumb{aspect-ratio:16/9;border-radius:0;max-height:none;height:auto}
  .project-card .project-thumb-play{width:36px;height:36px}
  .project-card .project-thumb-play svg{width:14px;height:14px}
  .project-card-body{padding:10px 12px 12px;gap:0}
  .project-card-title-row h3{font-size:13px;line-height:1.35;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  .project-card-file{font-size:11.5px;line-height:1.4;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8d8d8d}
  .project-card-meta{font-size:10.5px;gap:6px;margin-top:5px}
  .project-card-date{font-size:10.5px;margin:3px 0 0;color:#7c7c7c}
  .project-card-actions{margin-top:9px;padding-top:9px;gap:6px;flex-wrap:nowrap}
  .project-card-actions button{min-height:28px;padding:4px 11px;font-size:11.5px;border-radius:999px}
  .project-card-actions button svg{width:12px;height:12px}
  .project-draft-badge{font-size:7.5px;padding:2px 5px}
  .project-format{font-size:9px;padding:3px 7px}
  .project-retention-chip{font-size:9.5px;padding:3px 7px}
  .project-thumb-placeholder svg{width:26px;height:26px}

  /* clips inside a project: portrait, five-ish per row */
  #project-detail-grid.projects-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
  #project-detail-grid .project-card .project-clip-thumb,#project-detail-grid .project-clip-thumb{aspect-ratio:9/16;max-height:none;height:auto;display:grid}
  #project-detail-grid .project-card-body{padding:9px 10px 10px}
  #project-detail-grid .project-card-title-row h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  #project-detail-grid .project-card-file{white-space:normal;display:-webkit-box;-webkit-line-clamp:1}
  #project-detail-grid .project-card-actions button{min-height:26px;padding:3px 9px;font-size:10.5px}

  /* loading skeletons match the compact cards */
  .rf-skel-card{min-height:0;gap:9px;padding-bottom:12px;border-radius:14px}
  .rf-skel-thumb{aspect-ratio:16/9;border-radius:14px 14px 0 0}
  .rf-skel-line{height:9px;margin:0 12px}
  #project-detail-grid .rf-skel-thumb{aspect-ratio:9/16}
}
/* projects page headline block a little tighter */
.projects-content{padding-top:26px}
.projects-heading-row h1{font-size:clamp(26px,3vw,36px)}
.projects-lede{max-width:640px}

/* studio "Recent projects" use the same tidy thumbnails */
.studio-recent-thumb{position:relative;overflow:hidden}
.studio-recent-thumb>.studio-recent-badge,.studio-recent-thumb>.studio-recent-play{z-index:3}

/* cold open from the dashboard: no entrance animation on the page (the loader fades out over it instead) */
#projects-page.rf-no-enter{animation:none!important}

/* clip grid inside a project: older ID-scoped image rules must not undo the tidy thumbnails */
#project-detail-grid .project-clip-thumb>img.tb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:none}
#project-detail-grid .project-clip-thumb>img.tb-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:none}
#project-detail-grid .project-clip-thumb>img.tb-fg.tb-strip{left:0;right:0;margin:0 auto;width:auto;aspect-ratio:9/16;object-fit:cover}

/* phones: small thumbnail — keep the retention label clear of the play button */
@media(max-width:600px){
  .project-card .project-thumb-play{width:28px;height:28px;align-self:start!important;margin-top:24px}
  .project-card .project-thumb-play svg{width:12px;height:12px}
  .project-thumb .project-retention-chip{font-size:8.5px;padding:2px 5px;left:6px;bottom:6px;max-width:calc(100% - 12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .project-thumb .project-format{font-size:8px;padding:2px 5px}
}