/* Files in pages (B5). Colors and fonts come from style.css. */

/* A picture in Read: as wide as the page at most, full size on a tap. */
.embed-img { display: block; width: fit-content; max-width: 100%; margin: 8px 0; border-radius: 10px; overflow: hidden; }
.embed-img img { display: block; max-width: 100%; max-height: 70vh; height: auto; }
.embed-img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Any other file: a card with its name, its size and Open. */
.file-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 100%; margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.file-card .file-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.file-card .file-size { color: var(--soft); font-size: 14px; }
.file-card .primary { text-decoration: none; }

/* Dropping a file on the page. */
.body.dropping { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 8px; }

/* The file page. */
.file-view { max-width: 960px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 16px) 24px 40px; }
.file-view .title { overflow-wrap: anywhere; }
.file-view #open { text-decoration: none; }
.file-view .full { display: block; width: fit-content; max-width: 100%; margin: 8px 0 0; }
.file-view .full img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 699px) {
  .file-view { padding: calc(env(safe-area-inset-top) + 12px) 16px 40px; }
}