/* The media library dialog. Loaded by the editor and by every screen that picks an image from
   the library (the site icon in the settings), so it does not rely on editor.css. */
.media-dialog{padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
.media-dialog::backdrop{background:#172e2966}
.media-dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
.media-dialog .panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.media-launch{margin-top:14px;white-space:normal}
.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
.media-heading h2{margin:0}
.media-heading .eyebrow{margin-bottom:8px}
.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.media-tools label{margin-top:10px}
.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
.media-card strong{font-size:12px;overflow-wrap:anywhere}
.media-card span{font-size:11px;color:var(--muted)}
.media-details{padding-left:22px;border-left:1px solid var(--line)}
.media-details button,.media-details a{margin-top:12px;display:block}
.media-details input{font-size:13px}
.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
.media-footer label{margin:0;font-size:12px}
#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
#media-status{font-size:12px;margin-block:15px}
.media-dialog> .panel-hint{margin-top:20px}
.media-details>p{font-size:12px}
@media(max-width:767px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}