/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Minimal functional styling — visual polish is a follow-up (ce-frontend-design). */
:root { --gap: 1rem; --fg: #2b2b2b; --muted: #777; --line: #e6e3dd; --accent: #b08968; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); margin: 0; line-height: 1.5; }
a { color: var(--accent); }
.flash { padding: .6rem 1rem; margin: 0; }
.flash.notice { background: #eef7ee; }
.flash.alert { background: #fdecea; }

/* Auth / profile — centered card */
.auth, .profile { max-width: 26rem; margin: 4rem auto; padding: 0 1rem; }
.auth input[type=email], .profile input[type=text] { width: 100%; padding: .6rem; font-size: 1rem; margin: .5rem 0; }
.auth input[type=submit], .profile input[type=submit] { padding: .6rem 1rem; font-size: 1rem; cursor: pointer; }

/* Gallery */
.gallery { max-width: 70rem; margin: 0 auto; padding: 1rem; }
.gallery__header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--line); }
.gallery__empty { color: var(--muted); text-align: center; padding: 3rem 0; }

/* Uploader */
.uploader { margin: 1rem 0; }
.dropzone { display: block; border: 2px dashed var(--line); border-radius: .5rem; padding: 1.5rem; text-align: center; color: var(--muted); cursor: pointer; }
.uploader.is-dragover .dropzone { border-color: var(--accent); background: #faf6f1; }
.upload-list { list-style: none; padding: 0; }
.upload-row { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; }
.upload-progress { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.upload-progress > [data-role=bar] { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.upload-row.is-done .upload-progress > [data-role=bar] { width: 100%; }
.upload-row.is-failed { color: #c0392b; }

/* Feed — responsive masonry-ish grid */
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); margin-top: 1rem; }
.media-item { border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; display: flex; flex-direction: column; }
.media-item__body img, .media-item__body video { width: 100%; height: auto; display: block; }
.media-item__placeholder { aspect-ratio: 1; display: grid; place-items: center; color: var(--muted); background: #f6f4f0; }
.media-item__download { display: grid; place-items: center; gap: .25rem; padding: 1.5rem; text-decoration: none; }
.media-item__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem; font-size: .85rem; color: var(--muted); }
.media-item__uploader-email { font-size: .75rem; }
.load-older { display: inline-block; margin: 1.5rem auto; }
.linkish { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }