/* Project Graphics — Control Center
 * Path: /control-plane/public/assets/project-graphic.css
 * Description: Authored project images on cards and a compact project masthead.
 * Author: Polite Platform Team
 * Date: 2026-10-20T21:01:04Z
 * Generated by: GPT-6 Codex
 */
.project-card { padding: 0; overflow: hidden; }
.project-card-body { padding: 22px; display: grid; gap: 12px; }
.project-card-body h3 { font-size: 20px; line-height: 1.3; margin: 0; }
.project-card-body > p { margin: 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.project-card-body .project-meta { display: grid; gap: 9px; margin: 0; font-size: 13px; }
.project-card-body .badge { font-size: 12px; padding: 4px 7px; }
.project-card:hover { border-color: var(--accent); }
.project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.project-card-graphic { margin: 0; aspect-ratio: 16 / 5; background: var(--surface-raised); overflow: hidden; }
.project-card-graphic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-card-graphic[hidden] { display: none; }
#project-masthead.has-title-card { border-radius: 9px; overflow: visible; }
/* Round the artwork itself so the Add menu can extend below the masthead. */
#project-masthead.has-title-card :is(.project-strip-hero, .project-strip-media, .project-strip-shade) { border-radius: inherit; }
#project-masthead:has(.project-add[open]) { position: relative; z-index: 30; }
#project-masthead.has-title-card .project-strip-hero { min-height: 142px; padding: 16px 22px; display: block; }
#project-masthead .project-identity-flags { display: flex; gap: 8px; align-items: center; position: relative; z-index: 1; margin-bottom: 10px; }
#project-masthead .project-strip-status { border-radius: 5px; font-size: 11px; padding: 4px 8px; }
#project-masthead .project-strip-status::before { display: none; }
#project-masthead .project-strip-footer { display: grid; gap: 8px; }
#project-masthead .project-strip-title { text-align: left; max-width: none; padding-right: 0; }
#project-masthead .project-context-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }
#project-masthead.has-title-card .project-strip-shade { background: linear-gradient(90deg, rgba(10,10,14,.85), rgba(10,10,14,.36)), linear-gradient(0deg, rgba(10,10,14,.65), transparent); }
#project-masthead.has-title-card .project-context-line { color: rgba(255,255,255,.9); }
#project-masthead.has-title-card .project-strip-row { min-height: 0; padding: 0; background: transparent; backdrop-filter: none; }
#project-masthead.has-title-card .project-strip-summary { color: rgba(255,255,255,.85); }
@media (max-width: 560px) {
  .project-card-body { padding: 18px; }
  #project-masthead.has-title-card .project-strip-hero { min-height: 166px; padding: 16px; }
}

.project-graphic-form { margin: 20px 0; display: grid; grid-template-columns: minmax(160px, 250px) minmax(0, 1fr); align-items: start; gap: 16px; }
.project-graphic-picker { min-width: 0; }
.project-graphic-picker .piper-card { margin: 0; padding: 0; border: 0; background: none; }
.project-graphic-picker .piper-artwork-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; }
.project-graphic-picker .piper-artwork-row > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.project-graphic-picker .piper-artwork-row select { width: 100%; min-width: 0; }
.project-graphic-picker .piper-artwork-preview { display: none; }
.project-graphic-picker .piper-artwork-actions { flex-wrap: wrap; }
.project-graphic-crop { grid-column: 1 / -1; }
.project-graphic-crop > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text-dim); }
.project-graphic-crop > summary::before { content: "▸"; margin-right: 8px; }
.project-graphic-crop[open] > summary::before { content: "▾"; }
.project-graphic-preview { width: 100%; aspect-ratio: 16 / 5; background: var(--surface-raised, #222); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; display: grid; place-items: center; }
.project-graphic-preview-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-graphic-preview-image[hidden] { display: none; }
.project-graphic-empty { color: var(--text-dim); padding: 16px; }
.project-graphic-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.project-graphic-details .form-field:first-child { grid-column: 1 / -1; }
.project-graphic-details input { min-height: 44px; width: 100%; }
@media (max-width: 560px) { .project-graphic-details, .project-graphic-form { grid-template-columns: minmax(0,1fr); } .project-graphic-preview { max-width: 280px; } }