/* Progressive library content is present before JS, then the existing UI takes over. */
body:has(#server-library) #lib-view { display: none; }
#server-library { max-width: 1120px; margin: 0 auto; padding: 130px 24px 64px; color: #0e1e3a; font-family: var(--font-sans, system-ui); line-height: 1.65; }
#server-library h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; margin: 20px 0; }
#server-library h2 { font-size: 22px; line-height: 1.3; }
#server-library a { color: #315f40; text-underline-offset: 4px; }
#server-library img { display: block; width: 100%; max-width: 800px; height: auto; max-height: 55vh; object-fit: contain; margin: 24px 0; }
#server-library .seo-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; margin-top: 32px; }
#server-library article { border-top: 1px solid #ccd2cc; padding-top: 16px; }
#server-library dt { font-weight: 600; }
#server-library dd { margin: 0 0 16px; }
/* The old mobile rules targeted .pm-*; the actual project dialog uses .pjm-*. */
@media (max-width: 700px) {
  .proj-modal .pjm-card { max-width: 100%; min-width: 0; }
  .pjm-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px; }
  .pjm-head .pjm-id, .pjm-head .pjm-type { font-size: 9px; padding: 12px; overflow-wrap: anywhere; }
  .pjm-head .pjm-title-h { grid-column: 1 / 3; grid-row: 2; padding: 0 12px 14px; font-size: 22px; min-width: 0; }
  .pjm-head .pjm-close { grid-column: 3; grid-row: 1 / 3; justify-content: center; padding: 12px; font-size: 0; gap: 0; }
  .pjm-head .pjm-close svg { width: 20px; height: 20px; flex-shrink: 0; }
  .pjm-top-grid { grid-template-columns: minmax(0, 1fr); }
  .pjm-plano { border-right: 0; border-bottom: 1px solid var(--hair-strong); max-height: 280px; }
  .pjm-keydata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pjm-keydata .v { overflow-wrap: anywhere; }
  .pjm-deliv { grid-template-columns: minmax(0, 1fr); }
  .pjm-foot a { min-width: 0; font-size: 10px; letter-spacing: .08em; }
}