/*
 * 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.
 */

:root { color-scheme: light dark; --muted: #777; --accent: #b4532a; }
body { font: 16px/1.5 system-ui, sans-serif; max-width: 42rem; margin: 0 auto; padding: 0 1rem 3rem; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #8884; }
.brand { font-weight: 700; text-decoration: none; color: var(--accent); }
form:not(.inline) { display: grid; gap: .4rem; max-width: 24rem; }
form.inline, .inline { display: inline; }
.alert { color: #c33; }
.notice { color: #393; }
.meta { color: var(--muted); margin: 0; }
.item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #8882; }
.item h3 { margin: 0; }
.thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: .25rem; }
.claim { margin: .25rem 0; color: var(--accent); }
input[readonly] { width: 100%; }
dt { font-weight: 600; }
dd { margin: 0 0 .5rem; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #8884; font-size: .875rem; }