/* The sample screens' layout; colours, type and the kit parts' look come from theme/theme.css and ui/ui.css. */
body { margin: 0 auto; max-width: 40rem; padding: 0 var(--pad) 2rem; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--pad); }
h1 { font-size: 1.4rem; }
input { padding: .5rem; flex: 1; min-width: 10rem; }
#items { list-style: none; padding: 0; }
#items li button { width: 100%; text-align: left; margin: .25rem 0; }
footer { margin-top: 2rem; }

/* an item changed (here or on another device) since the list last showed */
#items li.changed button { border-inline-start: 3px solid var(--accent); }

/* an item's photos and files (@core/files): thumbnails on the list, rows in the edit sheet */
.thumbs { display: inline-flex; gap: .25rem; margin-inline-start: .5rem; vertical-align: middle; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--surface-2, #8882); }
.files { list-style: none; padding: 0; }
.files li { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.files li a { flex: 1; overflow-wrap: anywhere; }
/* the sample options (src/options.js) */
#items.big li button { padding: 1rem .75rem; font-size: 1.15rem; }
#settings label.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#settings label.file { display: inline-block; padding: .5rem .75rem; border: 1px solid currentColor; border-radius: .4rem; cursor: pointer; }
#settings label.file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }