/* The screens around the feed: my albums, a new album, sharing, settings, the trash, the link and the QR code. */
.i-forward{--i:url(/icons/arrow-right.svg)}
.i-lock{--i:url(/icons/lock.svg)}
.i-users{--i:url(/icons/users.svg)}
.i-link{--i:url(/icons/link-2.svg)}
.i-copy{--i:url(/icons/copy.svg)}
.i-qr{--i:url(/icons/qr-code.svg)}
.i-folder{--i:url(/icons/folder-up.svg)}
.i-add-photo{--i:url(/icons/image-plus.svg)}
.i-invite{--i:url(/icons/user-plus.svg)}
.i-send{--i:url(/icons/send.svg)}
.i-reset{--i:url(/icons/rotate-ccw.svg)}
.i-image{--i:url(/icons/image.svg)}
.center{text-align:center}
label.selected-only{display:none}
.download-selected .selected-only{display:flex}
/* A radio is a chip; the input lies over all of it, so a tap lands on the input itself. */
fieldset.choice{min-width:0;margin:0;padding:0;border:0}
fieldset.choice legend{padding:0;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--muted)}
fieldset.choice>label:not(.check)+label:not(.check){margin-top:.75rem}
fieldset.choice>label.check{display:inline-flex;min-height:0;margin:0 .5rem .5rem 0}
/* The chips' own margin under the last row would add to the space after them. */
fieldset.choice:has(>label.check){margin-bottom:-.5rem}
fieldset.choice>p{margin:0 0 .75rem}
input[type=radio]{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
input[type=radio]+span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1.125rem;font-weight:500;background:var(--card);border:1px solid var(--field);border-radius:var(--r-2xl)}
input[type=radio]:checked+span{color:var(--bg);background:var(--text);border-color:var(--text)}
input[type=radio]:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.panel{margin-top:1rem;padding:1.25rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-3xl)}
.panel h2{font-size:1.25rem}
.panel>.stack:first-child{margin-top:0}
.panel>.stack:last-child{margin-bottom:0}
.option{display:grid;gap:.25rem;padding:.25rem 1rem;border:1px solid var(--line);border-radius:var(--r-2xl)}
.panel>.option,.panel>.check+.choice{margin-top:.75rem}
.option>p{margin:0 0 .75rem;font-size:.875rem}
progress{appearance:none;-webkit-appearance:none;width:100%;height:.75rem;border:0;border-radius:999px;background:var(--surface);overflow:hidden}
progress::-webkit-progress-bar{background:var(--surface)}
progress::-webkit-progress-value{background:var(--primary);border-radius:999px}
progress::-moz-progress-bar{background:var(--primary);border-radius:999px}
/* My albums: the newest album large, the others as 4:5 cards with who sees them, and a tile for a new one. */
.welcome{padding-top:4rem;text-align:center}
.welcome p{margin:1rem 0 2rem;font-size:1.125rem;color:var(--muted)}
/* Privacy policy and terms (decision 57): text to read, the languages as links above it. The title's longest word fits 360 px. */
.legal h1{font-size:min(2.25rem,7.5vw)}
.legal h2{margin-top:2rem}
.legal li{margin:.375rem 0}
.langs,.legal-links{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.langs{margin-bottom:1rem}
.langs a,.legal-links a{display:inline-flex;align-items:center;min-height:2.75rem}
.langs a[aria-current]{color:var(--text);font-weight:600;text-decoration:none}
.legal-links{margin-top:2rem;font-size:.875rem}
.welcome .legal-links{justify-content:center}
.album-card{display:block;color:var(--text);text-decoration:none}
.album-card .cover{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--surface);border-radius:var(--r-3xl);box-shadow:var(--shadow-soft)}
.album-card .cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.album-card:hover .cover img{transform:scale(1.04)}
.album-card .cover>.i{position:absolute;left:50%;top:50%;width:2.5rem;height:2.5rem;color:var(--muted);translate:-50% -50%}
.album-card .title{margin:.75rem 0 0;font-size:1.125rem;line-height:1.35}
/* Parts wrap whole; a dot that starts a line is clipped. */
.facts{display:flex;flex-wrap:wrap;margin-left:-1em;clip-path:inset(0 0 0 1em)}
.facts>span{position:relative;padding-left:1em}
/* The dot is for the eye: the empty alternative keeps it from screen readers; browsers without one take the first content. */
.facts>span::before{content:"·";content:"·"/"";position:absolute;left:0;width:1em;text-align:center}
.glass-chip,.dark-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;font-size:.875rem;font-weight:500;border-radius:999px}
.glass-chip{position:absolute;white-space:nowrap;overflow:hidden;left:.75rem;top:.75rem;max-width:calc(100% - 1.5rem);color:var(--text);background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.dark-chip,.hero .glass-chip{position:static;color:var(--on-ink);background:var(--glass-dark);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
.glass-chip .i{width:1rem;height:1rem}
.album-card.hero{position:relative;margin-top:2rem;overflow:hidden;color:var(--on-ink);background:var(--ink);border-radius:var(--r-4xl);box-shadow:var(--shadow-lift)}
.mosaic{display:grid;gap:.25rem;height:27rem}
.mosaic.three{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.mosaic>.frame{min-height:0}
.mosaic.three>:first-child{grid-row:span 2}
.mosaic>:first-child img{transition:transform .7s}
.hero:hover .mosaic>:first-child img{transform:scale(1.02)}
.album-card.hero::after{content:"";position:absolute;inset:0;background:var(--scrim);pointer-events:none}
.hero-text{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.5rem}
.chips-row{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-text h2{margin:.75rem 0 0;font-size:min(2.25rem,10vw);line-height:1.1}
.hero-text p{margin-top:.5rem;margin-bottom:0;font-size:1.125rem}
.hero-open{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.25rem;font-weight:500;color:var(--ink);background:var(--on-ink);border-radius:999px}
.albums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem;margin:2rem 0 0;padding:0;list-style:none}
.large .albums{grid-template-columns:1fr}
.albums>li{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.albums>li:nth-child(2){animation-delay:60ms}
.albums>li:nth-child(3){animation-delay:120ms}
.albums>li:nth-child(n+4){animation-delay:180ms}
.new-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;aspect-ratio:4/5;padding:1rem;font-weight:500;text-align:center;color:var(--muted);text-decoration:none;border:2px dashed var(--line);border-radius:var(--r-3xl);transition:color .15s,border-color .15s}
.new-tile:hover{color:var(--primary);border-color:var(--primary)}
.new-tile .plus{display:grid;place-items:center;width:3.5rem;height:3.5rem;background:var(--surface);border-radius:50%}
.new-tile .i{width:1.75rem;height:1.75rem}
.page>h2{margin-top:3.5rem}
/* A new album: the steps, where the photos come from, then the suggested album to check (PRD, screen 2). */
.steps{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;font-size:.875rem;font-weight:500;color:var(--muted);list-style:none}
.steps li{padding:.25rem .75rem;background:var(--surface);border-radius:999px}
.steps [aria-current]{color:var(--bg);background:var(--text)}
.sources{display:grid;gap:.75rem}
.source,a.source{justify-content:flex-start;gap:1rem;width:100%;padding:1rem;text-align:left;border-radius:var(--r-2xl)}
.tile-icon{display:grid;place-items:center;flex:none;width:3rem;height:3rem;background:var(--surface);border-radius:var(--r-xl)}
.tile-icon .i{width:1.5rem;height:1.5rem}
#details{display:grid;gap:1.25rem;align-content:start}
#cover{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-4xl);box-shadow:var(--shadow-lift)}
#details input[name=title]{min-height:3.5rem;font:600 1.5rem/1.2 var(--display);letter-spacing:-.015em}
.place-now{margin:0 0 .5rem;font-weight:500}
#place>.chips{margin-top:.75rem}
/* Sharing (PRD, screen 9): the link to copy, requests on top, people with their rights. */
.url-box{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;padding:.375rem;color:var(--muted);background:var(--bg);border:1px solid var(--field);border-radius:var(--r-2xl)}
/* The inset is the icon's, so the button that wraps under the link on a phone stands evenly in the box. */
.url-box>.i{margin-left:.625rem}
.url-box input{flex:100 1 8rem;width:auto;min-width:0;min-height:2.75rem;padding:0;font-weight:500;text-overflow:ellipsis;background:none;border:0;box-shadow:none}
.url-box button{flex:1 0 auto;min-height:2.75rem;padding:0 1rem;color:var(--bg);background:var(--text);border-color:transparent;border-radius:var(--r-xl)}
.panel>.row{margin-top:.75rem}
#pin-state:empty{display:none}
.fold{margin-top:1rem}
.fold>summary{display:flex;align-items:center;min-height:3rem;font-weight:500;color:var(--primary);list-style:none;cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.people{display:grid;gap:.25rem;margin:0;padding:0;list-style:none}
.people>li{display:grid;gap:.5rem;padding:.5rem 0}
.people .who{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;min-width:0}
/* On a phone the role goes under the name. */
.people .who>b{flex:1 1 calc(100% - 3rem);min-width:0;font-weight:500;overflow-wrap:break-word}
.people .who>.role{margin-left:3rem}
.people .avatar~.muted{flex-basis:100%;padding-left:3rem;font-size:.875rem}
.people .fold{margin:0}
.people .fold>summary{color:var(--text);font-weight:400}
.fold>summary>.who{flex:1}
.people .fold>.stack{margin:.75rem 0 .25rem}
.people>li>.stack{margin:0}
.avatar.invited{color:var(--muted);background:var(--surface)}
.role{padding:.125rem .75rem;font-size:.875rem;font-weight:500;background:var(--surface);border-radius:999px}
#requests li{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:1rem;background:var(--primary-soft);border-radius:var(--r-2xl)}
#requests .who{flex:1}
/* Where the answers wrap under each other, each takes the whole width: a borderless one would hang off its padding. */
#requests .row>*{flex:1 1 auto}
#requests button{width:auto;min-height:2.75rem}
#requests .secondary{background:none;border-color:transparent}
#members>li+li{border-top:1px solid var(--line)}
/* An invitation's links stand under its words, apart enough to read as two. */
#members>li>.row{gap:0 1.5rem;padding-left:3rem}
/* The trash. */
.trashed{grid-template-columns:4rem 1fr;align-items:center}
.trashed img{width:4rem;height:4rem;object-fit:cover;background:var(--surface);border-radius:var(--r-xl)}
.trashed .who{display:grid}
.trashed button{grid-column:1/-1}
/* The list is the card itself, and .people, which comes later, takes the card's margin and padding away. */
#trash.panel{margin-top:1rem;padding:.5rem 1.25rem}
#trash>li{gap:.75rem .875rem;padding:.75rem 0}
#trash>li+li{border-top:1px solid var(--line)}
/* The link page (PRD, screen 10): the album cover with its name on it, then the name to enter. */
.cover-card{position:relative;margin-bottom:1.5rem;overflow:hidden;color:var(--on-ink);background:var(--ink);border-radius:var(--r-4xl);box-shadow:var(--shadow-lift)}
/* Without the width, max-height would narrow it through the ratio. */
.cover-card .frame{width:100%;aspect-ratio:4/5;max-height:60vh}
.cover-card::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.cover-card>div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.5rem}
.cover-card h1{margin:.75rem 0 0}
.narrow>button+#signin{margin-top:1.5rem}
#accept{margin-top:1rem}
.qr{width:min(80vw,20rem);height:auto;margin-top:1rem;padding:1rem;background:#fff;border-radius:var(--r-3xl);box-shadow:var(--shadow-soft)}
/* Moving photos from another disk (PRD, screen 13): future albums with a picture from the disk, then how they fill. */
.i-loader{--i:url(/icons/loader-circle.svg)}
.i-done{--i:url(/icons/circle-check.svg)}
.import h2{margin:0}
.spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem}
.spread>p{margin:0}
.waiting{display:flex;align-items:center;gap:.75rem}
.waiting small,.future small,.source small{display:block;font-size:.875rem;font-weight:400;color:var(--muted)}
.waiting .i-loader,.future .i-loader{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.futures{display:grid;margin:0;padding:0;list-style:none}
.futures>li+li{border-top:1px solid var(--line)}
.future{display:flex;align-items:center;gap:.875rem;padding:.5rem 0;color:var(--text);text-decoration:none}
.future>span:nth-child(2){flex:1;min-width:0}
.future b{display:block;font-weight:500;overflow-wrap:anywhere}
.future>.thumb{position:relative;display:grid;place-items:center;flex:none;width:3.5rem;height:3.5rem;overflow:hidden;background:var(--surface);border-radius:var(--r)}
.thumb .i{color:var(--muted)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.future>.i-done{color:var(--success)}
@media (min-width:640px){
.large .albums{grid-template-columns:repeat(2,minmax(0,1fr))}
.sources{grid-template-columns:repeat(2,minmax(0,1fr))}
.trashed{grid-template-columns:4rem 1fr auto}
.trashed button{grid-column:auto;width:auto}
.people .who>b{flex-basis:8rem}
.people .who>.role{margin-left:0}
}
@media (min-width:768px){
.legal h1{font-size:3rem}
.albums{grid-template-columns:repeat(3,minmax(0,1fr))}
.mosaic{height:30.5rem}
.hero-text{padding:2.5rem}
.hero-text h2{font-size:3.75rem}
.new-album{max-width:64rem}
#details.with-cover{grid-template-columns:1.1fr 1fr;column-gap:2rem}
#details.with-cover>#cover{grid-row:1/span 7}
#details.with-cover>:not(#cover){grid-column:2}
}
@media (min-width:1024px){
.albums{grid-template-columns:repeat(4,minmax(0,1fr))}
.large .albums{grid-template-columns:repeat(3,minmax(0,1fr))}
}