/* Files page and its Overview tile (project-files.js). Cards, buttons, tabs and the dialog come from workspace.css and
   design-preview.css; colours and type come from tokens.css; widths use the shared breakpoints. */
.pf-help{margin:4px 0 0;color:var(--dim);font-size:var(--text-xs);line-height:var(--leading-relaxed)}
.pf-note{margin:6px 2px 24px;max-width:760px}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.pf-pill{display:inline-flex;align-items:center;border-radius:20px;padding:3px 9px;background:var(--panel);color:var(--dim);font-size:var(--text-2xs);font-weight:700;line-height:var(--leading-snug);white-space:nowrap}
.pf-pill.ok{background:var(--ev-ok-bg);color:var(--ev-ok)}
.pf-pill.warn{background:var(--ev-warn-bg);color:var(--ev-warn)}
.pf-pill.info{background:var(--ev-info-bg);color:var(--ev-info)}

/* Overview tile */
.pf-tile .ev-card-body{display:grid;gap:14px}
.pf-tile-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pf-count{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--ev-radius);background:var(--panel2);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.pf-count:hover{border-color:var(--line2);background:var(--panel)}
.pf-count b{font-size:var(--text-xl);line-height:1;min-width:22px}
.pf-count span{font-size:var(--text-xs);font-weight:600;line-height:var(--leading-snug)}
.pf-tile-thumbs{display:flex;gap:8px;overflow:hidden}
.pf-tile-thumbs img{width:88px;height:64px;object-fit:cover;border-radius:6px;background:var(--panel);flex:none}
.pf-tile-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--text-xs);color:var(--dim)}
.pf-tile-foot .ev-btn{margin-left:auto}

/* Files page */
.pf-tabs{margin:0 0 18px;border-bottom:1px solid var(--line)}
.pf-group .ev-card-head p{max-width:560px}
.pf-photos{list-style:none;margin:0;padding:18px 21px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.pf-photo{display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:var(--ev-radius);background:var(--panel2)}
.pf-photo img{width:100%;aspect-ratio:4/3;max-width:100%;object-fit:cover;border-radius:6px;background:var(--panel)}
.pf-photo-copy{display:grid;gap:5px;min-width:0}
.pf-photo-copy b{font-size:var(--text-xs);overflow-wrap:anywhere;line-height:var(--leading-snug)}
.pf-photo-copy small{color:var(--dim);font-size:var(--text-2xs)}
.pf-photo-actions,.pf-doc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pf-photo-actions .ev-btn{min-height:var(--btn-h-sm);padding:5px 12px;font-size:var(--text-xs)}
.pf-photo.in-markup{background:var(--panel)}
.ev-btn.quiet.pf-remove{color:var(--ev-bad)}
.pf-move select{width:100%;min-height:36px;padding:6px 8px;border:1px solid var(--field-border);border-radius:6px;background:var(--panel2);color:var(--ink);font:inherit;font-size:var(--text-xs)}
.pf-slot{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;width:100%;height:100%;min-height:150px;padding:14px;border:1px dashed var(--line2);border-radius:var(--ev-radius);background:var(--panel);color:var(--accentText);text-align:left;font:inherit;cursor:pointer}
.pf-slot:hover{border-color:var(--accent)}
.pf-slot svg{width:20px;height:20px}
.pf-slot b{font-size:var(--text-ui)}
.pf-slot small{color:var(--dim);font-size:var(--text-2xs);line-height:var(--leading-snug)}
.pf-docs{list-style:none;margin:0;padding:4px 21px 12px}
.pf-doc{display:grid;grid-template-columns:44px minmax(0,1fr) 200px auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.pf-doc:first-child{border-top:0}
.pf-doc img,.pf-ext{width:44px;height:36px;border-radius:5px;object-fit:cover;background:var(--panel)}
.pf-ext{display:grid;place-items:center;color:var(--dim);font-size:var(--text-2xs);font-weight:800;letter-spacing:.04em}
.pf-doc-copy{display:grid;gap:2px;min-width:0}
.pf-doc-copy b{font-size:var(--text-xs);overflow-wrap:anywhere}
.pf-doc-copy small{color:var(--dim);font-size:var(--text-2xs)}
.pf-doc-actions .ev-btn{min-height:var(--btn-h-sm);padding:5px 12px;font-size:var(--text-xs)}

/* Backup line under the tabs: where the files stand, with the backup button */
.pf-backup{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;align-items:center;margin:0 0 18px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--ev-radius);background:var(--panel2);color:var(--dim);font-size:var(--text-xs);line-height:var(--leading-relaxed)}
.pf-backup>svg{width:20px;height:20px;color:var(--accentText)}
.pf-backup p{margin:0;max-width:72ch}
.pf-backup b{color:var(--ink)}
.pf-backup.due{background:var(--ev-warn-bg)}
.pf-backup.due>svg{color:var(--ev-warn)}

/* Add files: where does this go? */
.pf-dialog{width:620px;max-height:92dvh}
.pf-dialog h3{margin:4px 0 10px;font-size:var(--text-ui)}
.pf-dialog h3+.pf-menu-list{margin-bottom:20px}
.pf-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-menu-item{display:grid;gap:3px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--ev-radius);background:var(--panel2);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.pf-menu-item:hover{border-color:var(--accent);background:var(--ev-info-bg)}
.pf-menu-item b{font-size:var(--text-ui)}
.pf-menu-item small{color:var(--dim);font-size:var(--text-2xs);line-height:var(--leading-snug)}

@media (max-width:1100px){
 .pf-tile-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pf-doc{grid-template-columns:44px minmax(0,1fr) auto}
 .pf-doc .pf-move{grid-column:2/-1}
}
@media (max-width:700px){
 .pf-backup{grid-template-columns:auto minmax(0,1fr)}
 .pf-backup .ev-btn{grid-column:1/-1;width:100%}
 .pf-photos{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}
 .pf-photo{padding:6px}
 .pf-slot{min-height:120px;padding:10px}
 .pf-docs{padding:4px 14px 10px}
 .pf-doc{grid-template-columns:44px minmax(0,1fr)}
 .pf-doc .pf-move,.pf-doc .pf-doc-actions{grid-column:2/-1}
 .pf-menu-list{grid-template-columns:1fr}
 .pf-tile-foot .ev-btn{margin-left:0;width:100%}
}