:root { --ink: #1c1b1a; --muted: #6b6762; --line: #dedad4; --accent: #b5432a; --paper: #faf8f5; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); }
header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); background: #fff; }
header nav { display: flex; gap: 1rem; align-items: center; }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--accent); text-decoration: none; }
main { max-width: 52rem; margin: 0 auto; padding: 1.2rem; }
h1 { font-size: 1.6rem; margin: 1.4rem 0 .6rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .92em; }
.flash { background: #fff4d6; border: 1px solid #ecd28a; padding: .6rem .8rem; border-radius: .4rem; }
form.card { display: grid; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; max-width: 30rem; }
form.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0; }
form.inline { display: inline; }
label { display: grid; gap: .25rem; }
label.check { display: flex; gap: .5rem; align-items: center; }
input, select { font: inherit; padding: .5rem .6rem; border: 1px solid #bdb8b0; border-radius: .35rem; background: #fff; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
button, .button { font: inherit; cursor: pointer; padding: .55rem 1rem; border: 0; border-radius: .35rem; background: var(--accent); color: #fff; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: none; color: var(--accent); padding: 0 .2rem; text-decoration: underline; }
button.danger { color: #9b1c1c; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; }
ul.cards { list-style: none; padding: 0; display: grid; gap: .4rem; }
ul.cards li { background: #fff; border: 1px solid var(--line); border-radius: .4rem; padding: .6rem .8rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; margin: 1rem 0; }
figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: .4rem; overflow: hidden; }
figure img { width: 100%; height: 9rem; object-fit: cover; display: block; background: #eee; }
figcaption { padding: .4rem .5rem; font-size: .85rem; word-break: break-word; }
ol.queue { list-style: none; padding-left: 0; display: grid; gap: .4rem; counter-reset: place; }
ol.queue li { counter-increment: place; display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: .4rem; padding: .4rem .6rem; }
ol.queue li::before { content: counter(place); flex: none; min-width: 1.2rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
ol.queue img { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: .25rem; background: #eee; }
ol.queue .item { flex: 1; min-width: 0; position: relative; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: .7rem; row-gap: .15rem; align-items: center; }
ol.queue .item img { grid-row: 1 / span 2; }
ol.queue .what { min-width: 0; overflow-wrap: anywhere; }
ol.queue .tools { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
ol.queue .tools > button.link { font-size: 1.15rem; line-height: 1; padding: .2rem .35rem; text-decoration: none; }
details { margin: .8rem 0; }

/* Who is signed in: the address in a badge, the way out under it. */
header nav.who { flex-direction: column; align-items: flex-end; gap: .2rem; }
.badge { display: inline-flex; align-items: center; gap: .5rem; max-width: min(19rem, 62vw); padding: .22rem .85rem .22rem .28rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: .92rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.badge:hover, .badge:focus-visible { border-color: var(--accent); }
.badge .initial { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.badge .address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A library's pictures, large. */
a.zoom { display: block; cursor: zoom-in; }
body.viewing { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 20; background: rgba(12, 11, 10, .95); display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer button { position: absolute; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 1.7rem; line-height: 1; }
.viewer button:hover { background: rgba(0, 0, 0, .75); }
.viewer-close { top: .8rem; right: .8rem; }
.viewer-prev { left: .6rem; top: 50%; transform: translateY(-50%); }
.viewer-next { right: .6rem; top: 50%; transform: translateY(-50%); }
.viewer.single .viewer-prev, .viewer.single .viewer-next { display: none; }
.viewer-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.8rem 3.6rem .7rem; text-align: center; color: #fff; font-size: .9rem; text-shadow: 0 1px 3px #000; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }

/* The ways to set a picture aside, under one word. */
/* (The list opens across the row it belongs to, so that it never leaves the screen.) */
details.menu { display: inline-block; margin: 0 0 0 auto; }
details.menu > summary { display: inline; cursor: pointer; color: #9b1c1c; text-decoration: underline; list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .choices { position: absolute; right: 0; left: 0; z-index: 5; margin: .3rem 0 0 auto; max-width: 21rem; display: grid; background: #fff; border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); overflow: hidden; }
.choice { display: block; width: 100%; text-align: left; padding: .6rem .8rem; border-radius: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .95rem; }
.choice:last-child { border-bottom: 0; }
button.choice:hover { background: var(--paper); }
.choice small { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.choice.danger { color: #9b1c1c; }
.choice.off { color: var(--muted); cursor: not-allowed; }