/* Part C: signed-in shell, Home, Post a memory, archive upgrades. v2 poster look tokens come from account.css. */
:root{--c-shimmer-a:var(--shimmer-a);--c-shimmer-b:var(--shimmer-b);--c-dark:var(--fill)} /* legacy names, now the tokens (Day and Night) */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shell on the Shop theme (Nov 8): the header, the 6A pill bar (the only thing that floats), the account menu and the
   8B laptop column from 1024 px. body.c-shell is set while the shell runs; body.desk mirrors the 1024 px query for
   screens that widen from script, and #shell-views is an inline-size container named "views". Values: tokens.css. */
body.c-shell{background:var(--bg);color:var(--ink)}
.c-shell main{padding:0;max-width:none}
.c-shell header{position:relative;z-index:3;display:flex;align-items:center;gap:var(--s1);min-height:56px;margin:0;padding:var(--s1) calc(var(--gutter) - var(--s2));border:0;border-bottom:1px solid var(--line);background:var(--bg)}
.c-shell header .wordmark{order:1;justify-self:auto;margin-right:auto;padding:0 var(--s2);min-height:var(--tap);font:400 var(--fs-wordmark)/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent}
.c-shell header .wordmark:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r-control)}
.c-shell header nav{order:4;display:contents}
.c-shell #sign-out{display:none}
#app-nav:empty{display:none}
.c-shell #shell-views{container:views/inline-size;min-height:calc(100svh - 57px);padding:0;overflow-x:clip}
.c-view{display:block}
/* The four tabs (Home, Archive, Inbox, You) stay laid out while another tab shows (fixed, off to the side, invisible), so their photos
   stay decoded and come back at once, and a swipe can bring the next one in beside the page (shell.js sets its
   top, translate and visibility while the finger is down). Other views are display:none when hidden, as before. */
.c-view.c-tab[hidden]{display:block!important;position:fixed;top:0;left:0;width:100%;visibility:hidden;pointer-events:none;translate:-500vw 0}
/* Header (round-2 board 2B): Events at the start, the wordmark centred on the screen, the view's one action (.c-slot)
   and Friends at the end. No tap flash, a ring only for the keyboard, hover only with a mouse. */
.c-shell .h-actions{display:flex;align-items:center;gap:0;margin:0}
.c-shell .h-start{order:0}
.c-shell .h-end{order:3}
@media (max-width:1023px){
 .c-shell header .wordmark{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;display:flex;align-items:center}
 .c-shell header .c-slot{margin-left:auto}
 .c-shell header:not(:has(.c-slot:not([hidden]))) .h-end{margin-left:auto}
}
.c-shell .h-action{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 var(--s2);border-radius:var(--r-control);font:500 var(--fs-label)/1 var(--label);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.c-shell .h-action:focus{outline:none}
.c-shell .h-action:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.c-shell .h-badge{position:static;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--badge);color:var(--on-badge);font:500 var(--fs-label-s)/18px var(--label);letter-spacing:0;text-align:center}
.c-shell .h-badge[hidden]{display:none}
.c-shell .h-badge{transition:scale var(--t-release) var(--spring-bounce)}
@starting-style{.c-shell .h-badge{scale:.3}}
/* HEADER.look 'icon': a 22 px line icon on phones (the word stays for screen readers), the badge on its corner. */
.c-shell .h-icon{display:grid;place-items:center;width:24px;height:24px}
.c-shell .h-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c-shell .is-icons .h-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-shell .is-icons .h-action{justify-content:center;padding:0}
.c-shell .is-icons .h-badge{position:absolute;top:5px;right:3px;min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:16px;box-shadow:0 0 0 2px var(--bg)}
.c-shell header .c-slot{order:2;display:flex;align-items:center}
.c-shell header .c-slot[hidden]{display:none}
.c-shell .c-slot .btn{min-height:36px;margin:4px 0;padding:0 var(--s3);font-size:var(--fs-label)}
@media (hover:hover){
 .c-shell .h-action:hover{background:var(--fill)}
}
/* The round You button beside the pill bar reads like the other tabs: off, a ring and initial in the bar's muted
   text on the dark bar; filled (the pill colour) only while You is the page. Day and Night share the bar tokens. */
/* Nov 9, Zach: "there shouldn't be a ring around the profile, and the letter is off-centred." No ring in any state
   (the button's edge, the on-state inset ring, the face's outline, the dark band round a smaller face); a ring only
   for keyboard focus. The face fills the round button: off, the initial in the bar's muted text; on (You is the
   page), the initial in the pill colour, a photo at full strength. The initial is centred on its capital height, not
   the font's line box, so it sits in the exact middle. */
.btn-pill-bar>a.c-you,.btn-pill-bar>a.c-you[aria-current="page"]{box-shadow:none;outline:0}
.btn-pill-bar>a.c-you::after{display:none}
.btn-pill-bar>a.c-you:focus-visible{outline:2px solid var(--bar-pill);outline-offset:2px}
.btn-pill-bar>a.c-you .c-you-face{width:100%;outline:0;line-height:1;background:transparent;color:var(--bar-pill)}
/* Trim only reaches a block's own lines (a grid's text item ignores it), so the face becomes a block centred with align-content. */
@supports (text-box:trim-both cap alphabetic) and (align-content:center){.btn-pill-bar>a.c-you .c-you-face{display:block;align-content:center;text-align:center;text-box:trim-both cap alphabetic}}
.btn-pill-bar>a.c-you:not([aria-current="page"]) .c-you-face{color:var(--bar-text)}
.btn-pill-bar>a.c-you:not([aria-current="page"]) .c-you-face img{opacity:.75}
.btn-pill-bar>a.c-you .c-you-face{transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
/* You (round-2 board 2B): the fourth tab. Who you are, a line about you, roles, your postcards; ≡ opens Settings. */
.u-page{display:grid;gap:var(--s6);max-width:560px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s7)}
.u-head{display:flex;align-items:center;gap:var(--s4)}
.u-who{flex:1}
.u-menu{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none;align-self:flex-start;display:grid;place-items:center;width:var(--tap);height:var(--tap);margin:calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0 0;border-radius:var(--r-control);color:var(--ink)}
.u-menu svg{width:24px;height:24px}
.u-menu:active{transform:scale(.95)}
.u-menu:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.u-who{display:grid;gap:var(--s1);min-width:0}
.u-who .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-section{display:grid;gap:var(--s3)}
.u-section h2{margin:0}
.u-rows{border-top:1px solid var(--line)}
.u-rows>li{padding:0}
.u-row{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:var(--s2) 0;font:var(--fs-body)/1.35 var(--sans);color:var(--ink)}
.u-row .grow{display:grid;gap:2px}
.u-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-control)}
.u-chevron{flex:none;display:grid;place-items:center;width:8px;color:var(--muted)}
.u-chevron svg{width:8px;height:14px}
/* You profile (4A, Nov 9): a line about you, event roles, your postcards. */
.u-about{display:grid;gap:var(--s3)}
.u-bio{all:unset;box-sizing:border-box;cursor:text;-webkit-tap-highlight-color:transparent;display:block;width:100%;min-height:44px;padding:var(--s2) 0;font:var(--fs-body)/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.u-bio:hover{border-bottom-color:var(--line)}
.u-bio.is-empty{color:var(--muted)}
.u-bio:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-control)}
.u-bio-field{display:grid;gap:var(--s1)}
.u-bio-input{min-height:72px;resize:none;line-height:1.4}
.u-count{justify-self:end}
/* Settings (≡ on You, Nov 9): grouped rows on the sheet; Sign out last, one quiet red line of text. */
.u-out{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;justify-self:start;min-height:var(--tap);display:flex;align-items:center;font:var(--fs-body)/1.35 var(--sans);color:var(--danger);transition:transform var(--t-fast) var(--ease)}
.u-out:active{transform:scale(.95)}
.u-out:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-control)}
.u-theme .chip-row{flex-wrap:nowrap}
.u-settings .sheet-body{display:grid;gap:var(--s5);padding-top:var(--s2)}
.u-set-group{display:grid;gap:var(--s1)}
.u-set-group>h3{margin:0}
.u-set-group .u-rows{border-top:1px solid var(--line)}
.u-set-group .u-rows>li{border-bottom:1px solid var(--line)}
.u-row .u-row-value{color:var(--muted);font-size:var(--fs-label-l)}
.u-row .u-row-note{color:var(--muted);font-size:var(--fs-label-l);line-height:1.35}
.u-row.is-static{cursor:default}
.u-row-end{margin-left:auto;color:var(--muted);text-align:right;white-space:nowrap}
.u-row.u-danger .u-row-label{color:var(--danger)}
.u-set-mounted:empty{display:none}
.u-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
@media (min-width:761px){.u-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.u-card{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;display:block;aspect-ratio:var(--ar,1);background:var(--fill);border-radius:var(--r-photo);overflow:hidden;transition:transform .2s var(--ease)}
.u-card:active{transform:scale(.95)}
.u-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.u-card.skeleton{aspect-ratio:3/4;border-radius:var(--r-photo)}
.u-card-photo{display:block;width:100%;height:100%;border-radius:var(--r-photo)}
.u-card-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.u-card,.u-bio{transition:none}.u-card:active{transform:none}}
/* Phones and tablets: room under every page for the pill bar. */
@media (max-width:1023px){
 .c-shell #shell-views{padding-bottom:calc(var(--bar-h) + var(--s6) + env(safe-area-inset-bottom,0px))}
 /* ctx.tabBar(false) (select mode, a chat on phones): the bar slides away, as .btn-pill-bar.is-off. */
 body.c-tabs-off #app-nav.btn-pill-bar{transform:translate(calc(-50% + var(--you-shift)),calc(100% + 24px));opacity:0;pointer-events:none}
 /* Scrolling down compacts the bar toward the bottom edge, as Instagram's (shell.js barScroll): scaled about the
    centre of the pill and You button together, on a quick spring; the slide away (.is-off) keeps its own timing. */
 .c-shell #app-nav.btn-pill-bar.c-bar-scroll{transform-origin:calc(50% - var(--you-shift)) 100%;transition:transform 260ms var(--spring),opacity 260ms var(--ease)}
 .c-shell #app-nav.btn-pill-bar.c-bar-scroll.is-off,body.c-tabs-off #app-nav.btn-pill-bar.c-bar-scroll{transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)}
 .c-shell #app-nav.btn-pill-bar.is-mini:not(.is-off){transform:translate(calc(-50% + var(--you-shift)),calc(var(--s4) * .6)) scale(.82);opacity:.82}
 /* The swipe pager (shell.js) reads horizontal drags itself; the browser keeps vertical scroll and pinch zoom.
    Sideways scrollers inside (chip rows) are their own scroll containers and still pan. */
 .c-shell #shell-views{touch-action:pan-y pinch-zoom}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){body.c-tabs-off #app-nav.btn-pill-bar{transform:translateX(calc(-50% + var(--you-shift)))}}
@media (max-width:380px){.c-shell .h-action{padding:0 6px;letter-spacing:.06em}}
/* 8B laptops: a left column (wordmark, Home / Archive / Inbox / You, Events, Friends, the view's action), the content wide to its right, sheets as a right-side panel (components.css). */
@media (min-width:1024px){
 .c-shell{--rail:240px}
 .c-shell header{position:fixed;inset:0 auto 0 0;width:var(--rail);flex-direction:column;align-items:stretch;gap:var(--s1);padding:var(--s5) var(--s3) var(--s4);border-bottom:0;border-right:1px solid var(--line);overflow-y:auto}
 .c-shell header .wordmark{order:0;margin:0 0 var(--s5);padding:0 var(--s3);display:flex;align-items:center}
 .c-shell header nav{order:1;display:block}
 .c-shell #app-nav.btn-pill-bar,.c-shell #app-nav.btn-pill-bar.is-off{position:static;transform:none;opacity:1;pointer-events:auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0;border-radius:0;background:transparent}
 .c-shell #app-nav .pill-ind{display:none}
 .c-shell #app-nav.btn-pill-bar>a{justify-content:flex-start;gap:var(--s2);padding:0 var(--s3);border-radius:var(--r-control);font-size:var(--fs-label-l);color:var(--muted)}
 .c-shell #app-nav.btn-pill-bar>a[aria-current="page"]{background:var(--fill);color:var(--ink)}
 .c-shell #app-nav.btn-pill-bar>a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
 .c-shell #app-nav.btn-pill-bar .badge{position:static;margin-left:auto;background:var(--ink);box-shadow:none}
 /* You is a row like the others here, its avatar small beside the word. */
 .c-shell #app-nav.btn-pill-bar>a.c-you{position:relative;inset:auto;width:100%;height:auto;min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-control);background:transparent;box-shadow:none}
 .c-shell #app-nav.btn-pill-bar>a.c-you[aria-current="page"]{background:var(--fill)}
 .c-shell #app-nav>a.c-you::after{display:none}
 .c-shell #app-nav .c-you-face{width:22px;font-size:11px;background:var(--ink);color:var(--on-ink)}
 .c-shell #app-nav .c-you-label{display:inline}
 .c-shell header .h-actions{order:2;flex-direction:column;align-items:stretch;gap:2px}
 .c-shell header .h-start{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
 .c-shell .h-action{justify-content:flex-start;padding:0 var(--s3);font-size:var(--fs-label-l);color:var(--muted)}
 .c-shell .h-badge{margin-left:auto}
 .c-shell .is-icons .h-action{justify-content:flex-start;gap:var(--s3);padding:0 var(--s3)}
 .c-shell .is-icons .h-word{position:static;width:auto;height:auto;overflow:visible;clip:auto}
 .c-shell .is-icons .h-badge{position:static;box-shadow:none;margin-left:auto}
 .c-shell .h-icon{width:20px;height:20px}.c-shell .h-icon svg{width:20px;height:20px}
 .c-shell header .c-slot{order:3;flex-direction:column;align-items:stretch;margin-top:var(--s4)}
 .c-shell .c-slot .btn{min-height:var(--tap);margin:0;font-size:var(--fs-label-l)}
 .c-shell main{margin-left:var(--rail)}
 .c-shell .toast{left:calc(50% + var(--rail) / 2);bottom:var(--s5)}
 .c-shell #shell-views{min-height:100svh}
 @media (hover:hover){.c-shell #app-nav.btn-pill-bar>a:hover,.c-shell .h-action:hover{color:var(--ink)}}
}
/* Events and Friends sheets (createSheet): the shared .sheet, over web-home.css's older .h-sheet rules, which load later.
   The close is its own top row, right, a label; the dialog takes focus on open, so no ring shows until the keyboard arrives. */
dialog.sheet.h-sheet{margin:0;padding:var(--s2) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom,0px));border:1px solid var(--line);border-bottom:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--bg);color:var(--ink);font-family:var(--sans);animation:none}
dialog.sheet.h-sheet .sheet-close.h-close{position:static;display:flex;width:max-content;margin:0 calc(-1 * var(--s3)) 0 auto;padding:0 var(--s3);border-radius:var(--r-control);font:500 var(--fs-label)/1 var(--label);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
dialog.sheet.h-sheet .sheet-body{padding-top:var(--s1)}
@media (min-width:761px){dialog.sheet.h-sheet{width:min(480px,calc(100% - 2*var(--gutter)));max-height:86vh;padding:var(--s4) var(--s5) var(--s5);border-bottom:1px solid var(--line);border-radius:var(--r-sheet)}}
@media (min-width:1024px){dialog.sheet.h-sheet{width:min(440px,100%);height:100%;max-height:none;padding:var(--s5);border:0;border-left:1px solid var(--line);border-radius:0}dialog.sheet.h-sheet .sheet-close.h-close{margin-top:calc(-1 * var(--s2))}}
@media (prefers-reduced-motion:reduce){.c-shell .h-action,.c-shell .h-badge{transition:none}}

/* Shimmer while data loads; photos fade in once decoded. */
.c-shimmer{background:linear-gradient(90deg,var(--c-shimmer-a) 0%,var(--c-shimmer-b) 50%,var(--c-shimmer-a) 100%) 0 0/200% 100%;animation:c-shimmer 1.5s linear infinite}
.c-shimmer.loaded{animation:none;background:var(--fill)}
@keyframes c-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.c-img{opacity:0;transition:opacity .3s var(--ease)}
.c-img.ready{opacity:1}

/* Home (board 2B): the newest friend's memory as the poster, then a contact sheet. */
.c-feed{display:flex;flex-direction:column}
.c-memory{position:relative;height:min(78svh,60vw);min-height:420px;background:var(--c-dark);overflow:hidden}
.c-memory .c-photo{position:absolute;inset:0}
.c-memory .c-photo img{width:100%;height:100%;object-fit:cover;display:block}
.c-memory .c-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(30,28,34,.86),rgba(30,28,34,.6) 22%,rgba(30,28,34,.22) 42%,rgba(30,28,34,0) 60%)}
.c-memory-text{position:absolute;left:40px;right:40px;bottom:32px;z-index:1;max-width:640px;color:var(--on-photo);text-shadow:var(--photo-text-shadow);display:grid;gap:8px}
.c-memory-text p{margin:0;color:inherit;line-height:inherit}
.c-who,.c-with{font:13px/1.4 var(--v2-mono);letter-spacing:.04em}
.c-caption{font:400 clamp(28px,4vw,48px)/1.06 var(--serif);text-wrap:balance}
.c-memory .c-link{color:var(--on-photo)}
.c-skeleton{height:min(78svh,60vw)}
.c-skeleton .c-photo{position:absolute;inset:0}
.c-sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:2px 0 60px}
.c-sheet-tile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:0;transition:transform .2s var(--ease)}
.c-sheet-tile:active{transform:scale(.95)}
.c-sheet-tile:focus-visible{outline:2px solid var(--v2-ink);outline-offset:-2px}
.c-sheet-photo{aspect-ratio:1;overflow:hidden;display:block}
.c-sheet-photo img{width:100%;height:100%;object-fit:cover;display:block}
.c-sheet-meta{min-height:32px;padding:8px 10px;font:11px var(--v2-mono);letter-spacing:.06em;color:var(--v2-ink)}
.c-more{height:1px}
@media (max-width:760px){
 .c-memory,.c-skeleton{height:min(70svh,110vw)}
 .c-sheet{grid-template-columns:repeat(2,1fr)}
}

/* First screen for a new account (board 3B): the blank first print. */
.c-home-empty{min-height:calc(100svh - 96px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;padding:24px 20px 60px}
.c-firstprint{all:unset;box-sizing:border-box;cursor:pointer;width:min(300px,100%);display:grid;gap:8px;padding:12px 12px 18px;background:var(--v2-card);box-shadow:0 22px 44px -26px rgba(30,28,34,.75);transform:rotate(-1.5deg);transition:transform .25s var(--ease)}
.c-firstprint:hover{transform:rotate(-.5deg)}
.c-firstprint:active{transform:rotate(-1.5deg) scale(.95)}
.c-firstprint:focus-visible{outline:2px solid var(--v2-ink);outline-offset:6px}
.c-firstprint-photo{aspect-ratio:4/3;display:grid;place-items:center;background:var(--fill);color:var(--v2-muted)}
.c-firstprint-photo svg{display:block;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.c-firstprint-title{font:400 26px/1.1 var(--serif);margin-top:6px}
.c-firstprint-body{font:13px/1.5 var(--v2-mono);color:var(--v2-muted)}
.c-home-side{display:grid;gap:6px;max-width:300px}
.c-home-title{margin:0;font:400 clamp(32px,4vw,44px)/1.05 var(--serif);text-wrap:balance}
.c-fine{margin:0 0 6px;font:13px/1.5 var(--v2-mono);color:var(--v2-muted)}
.c-link{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font:13px var(--v2-mono);color:var(--v2-ink);text-decoration:underline;text-underline-offset:4px;transition:opacity .2s var(--ease)}
.c-link:active{transform:scale(.95)}
.c-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.c-link:disabled{opacity:.5;cursor:default}
.c-primary{min-height:48px;border:0;background:var(--v2-ink);color:var(--v2-cream);font:14px var(--v2-mono);padding:0 22px;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease)}
.c-primary:hover{background:#2b2a33}
.c-primary:active{transform:scale(.95)}
.c-primary:disabled{opacity:.6;cursor:default}

/* Archive: month headings in the grid, jump menu, progress, drop target. */
#library-view .c-month-grid .c-month{grid-column:1/-1;margin:0;padding:28px 40px 12px;font:13px var(--v2-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v2-ink);background:var(--v2-cream);scroll-margin-top:16px}
#library-view .c-month-grid .c-month span{color:var(--v2-muted)}
#month-jump{min-height:44px;border:1px solid var(--line);background:var(--v2-card);color:var(--v2-ink);font:13px var(--v2-mono);padding:0 10px}
#library-view .c-month-grid{order:4}
#library-view #load-more{order:5}
.c-progress{order:3;height:3px;margin:0 40px;background:var(--line);overflow:hidden}
.c-progress i{display:block;height:100%;width:0;background:var(--v2-ink);transition:width .3s var(--ease)}
#library-view .empty .c-empty-title{font:400 44px/1.05 var(--serif);margin:0 0 8px}
#library-view .empty .c-primary{justify-self:center;margin-top:8px}
.c-drop{position:fixed;inset:12px;z-index:60;display:none;place-items:center;border:2px dashed var(--v2-ink);background:color-mix(in srgb,var(--bg) 92%,transparent);pointer-events:none}
.c-drop p{font:400 32px var(--serif);color:var(--v2-ink);margin:0;padding:0 20px;text-align:center}
body.c-dropping .c-drop{display:grid}
@media (hover:none),(pointer:coarse){.c-desktop-only{display:none}}

/* Post a memory: a sheet on phones, a card on desktop. */
.c-compose{width:min(560px,100%);max-width:100%;max-height:100%;margin:auto;padding:0;border:0;background:var(--v2-cream);color:var(--v2-ink);box-shadow:0 30px 80px -30px rgba(30,28,34,.7)}
.c-compose::backdrop{background:var(--scrim)}
.c-compose-form{display:grid;gap:8px;padding:0 24px 28px}
.c-compose-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -24px;padding:8px 12px 8px 24px;background:var(--v2-cream)}
.c-compose-head h2{margin:0;font:400 28px var(--serif)}
.c-close{min-width:44px;min-height:44px;border:0;background:transparent;font:28px/1 var(--serif);color:var(--v2-ink);cursor:pointer}
.c-compose-photo{position:relative;aspect-ratio:3/2;max-height:46svh;display:grid;place-items:center;background:var(--fill);overflow:hidden}
.c-compose-photo.vertical{aspect-ratio:4/5}
.c-compose-photo img{width:100%;height:100%;object-fit:contain;background:var(--c-dark)}
.c-compose-source{display:flex;gap:20px;flex-wrap:wrap}
.c-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));grid-auto-rows:max-content;align-content:start;gap:4px;max-height:280px;overflow:auto;padding:2px}
.c-picker-note{grid-column:1/-1}
.c-compose input[readonly]{background:transparent;border-style:dashed}
.c-pick{aspect-ratio:1;border:0;padding:0;overflow:hidden;cursor:pointer;transition:transform .2s var(--ease)}
.c-pick:active{transform:scale(.95)}
.c-pick:focus-visible{outline:2px solid var(--v2-ink);outline-offset:2px}
.c-pick img{width:100%;height:100%;object-fit:cover;display:block}
.c-label{margin-top:10px;font:12px var(--v2-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v2-muted)}
.c-compose textarea,.c-compose input[type=date],.c-compose input:not([type]){width:100%;min-height:48px;border:1px solid var(--line);background:var(--v2-card);color:var(--v2-ink);font:16px/1.4 var(--v2-sans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);padding:12px 14px;border-radius:0}
.c-year-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.c-year-row[hidden],.c-compose [hidden]{display:none}
#compose-year{min-height:48px;min-width:160px;border:1px solid var(--line);background:var(--v2-card);color:var(--v2-ink);font:16px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding:0 12px;border-radius:0}
#compose-year:focus-visible{outline:2px solid var(--v2-ink);outline-offset:1px}
.c-compose textarea{resize:vertical;font-family:var(--serif);font-size:20px}
.c-compose textarea:focus-visible,.c-compose input:focus-visible{outline:2px solid var(--v2-ink);outline-offset:1px}
.c-audience,.c-tags{margin:10px 0 0;padding:0;border:0;display:grid;gap:4px}
.c-audience legend,.c-tags legend{padding:0;margin-bottom:6px;font:12px var(--v2-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v2-muted)}
.c-choice{display:flex;gap:12px;align-items:flex-start;min-height:56px;padding:10px 12px;background:var(--v2-card);cursor:pointer}
.c-choice input,.c-tag input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--v2-ink);flex:none}
.c-choice span{display:grid;gap:2px}
.c-choice strong{font-weight:500}
.c-choice small{font:12px/1.4 var(--v2-mono);color:var(--v2-muted)}
.c-tag-list{display:flex;flex-wrap:wrap;gap:6px}
.c-tag{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:var(--v2-card);cursor:pointer}
.c-tags:disabled{opacity:.45}
.c-compose-error{margin:6px 0 0;color:var(--danger);font:13px/1.45 var(--v2-mono)}
.c-compose-error:empty,.c-compose-status:empty{display:none}
.c-compose-status{margin:6px 0 0;font:13px var(--v2-mono);color:var(--v2-muted)}
.c-compose-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:10px}
.c-compose-actions .c-primary{flex:1 1 200px}

@media (max-width:760px){
 .c-memory-text{left:20px;right:20px;bottom:24px}
 #library-view .c-month-grid .c-month{padding:22px 20px 10px}
 .c-progress{margin:0 20px}
 .c-compose{width:100%;height:100%;max-height:100svh;margin:0}
 .c-compose-form{padding:0 20px calc(28px + env(safe-area-inset-bottom,0px))}
 .c-compose-head{margin:0 -20px;padding-left:20px}
 .c-home-empty{gap:28px;padding-top:12px}
}
@media (prefers-reduced-motion:reduce){
 .c-shimmer{animation:none}
 .c-img,.c-progress i,.c-firstprint,.c-primary,.c-link,.c-nav,#app-nav{transition:none!important}
}

/* Memories-first archive (Part C, board defaults 1A 2A 3A 4A). */
/* Shared with Part A's sign-in: the landing page's phone cover. */
:root{--archives-cover-mobile:url('/landing-photos/mobile/03fd455b0443f76ed9848fadca96f613.jpg')}
.c-mem{position:relative;min-height:calc(100svh - 96px);padding:0 40px 120px;display:grid;align-content:start;gap:14px;max-width:760px;margin:0 auto}
.c-mem-top{display:flex;justify-content:flex-end}
.c-mem-sources{display:grid;gap:10px}
.c-mem-sources-small{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.c-mem-list{display:grid;gap:18px}
.c-mem-eyebrow{margin:14px 0 -4px;font:12px var(--v2-mono);letter-spacing:.1em;color:var(--v2-ink)}
.c-mem-card{background:var(--v2-card);padding:10px 10px 12px;box-shadow:0 18px 34px -24px rgba(30,28,34,.8);display:grid;gap:6px}
.c-mem-open{all:unset;box-sizing:border-box;cursor:pointer;display:block;transition:transform .2s var(--ease)}
.c-mem-open:active{transform:scale(.98)}
.c-mem-open:focus-visible{outline:2px solid var(--v2-ink);outline-offset:3px}
.c-mem-collage{display:grid;gap:3px;aspect-ratio:3/2;overflow:hidden}
.c-mem-collage.c-n2{grid-template-columns:2fr 1fr}
.c-mem-collage.c-n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.c-mem-collage.c-n3 .c-mem-cell:first-child{grid-row:1/3}
.c-mem-cell{display:block;overflow:hidden;min-height:0}
.c-mem-cell img{width:100%;height:100%;object-fit:cover;display:block}
.c-mem-title{margin:4px 0 0;font:400 24px/1.1 var(--serif);color:var(--v2-ink);text-wrap:balance}
.c-mem-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font:11px var(--v2-mono);letter-spacing:.04em;color:var(--v2-muted)}
.c-mem-share{min-height:44px;min-width:72px;border:1px solid var(--line);background:transparent;color:var(--v2-ink);font:12px var(--v2-mono);cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease)}
.c-mem-share:hover{background:var(--fill)}
.c-mem-share:active{transform:scale(.95)}
.c-mem-line{display:block;height:20px;width:60%}
.c-mem-empty{min-height:calc(100svh - 160px);display:grid;align-content:end;gap:14px;padding-bottom:40px;max-width:420px}
.c-mem-hello{margin:0;font:400 clamp(38px,6vw,52px)/1.02 var(--serif);color:var(--v2-ink);text-wrap:balance}
.c-source{min-height:52px;border:1px solid var(--line);background:transparent;color:var(--v2-ink);font:14px var(--v2-mono);cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease)}
.c-source.c-source-main{background:var(--v2-ink);color:var(--v2-cream);border-color:var(--v2-ink)}
.c-source:active{transform:scale(.95)}
.c-source:focus-visible{outline:2px solid var(--v2-ink);outline-offset:3px}
.c-source-slot{display:grid}
.c-source-slot .c-source{width:100%}
.c-mem-fine{margin:0;font:12px/1.5 var(--v2-mono);color:var(--v2-muted)}
.c-mem-pill{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:35;width:min(520px,calc(100% - 32px));display:grid;gap:8px;padding:12px 14px;background:var(--v2-ink);color:var(--v2-cream);font:12px/1.4 var(--v2-mono)}
.c-mem-pill .c-mem-bar{margin:0;background:color-mix(in srgb,var(--v2-cream) 20%,transparent)}
.c-mem-pill .c-mem-bar i{background:var(--v2-cream)}

/* Phones: Home, Archive and Inbox share the workspace's cream (Zach, Nov 5); the old landing-photo backdrop is gone. */
@media (max-width:760px){
 .c-mem{padding:0 16px calc(110px + env(safe-area-inset-bottom,0px))}
 .c-mem-empty{min-height:calc(100svh - 120px);padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
 .c-mem-title{font-size:21px}
 .c-mem-pill{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

/* Whole photos (Zach, Nov 3): never cropped. Frames reserve a ratio, then take the photo's own. */
.c-whole{position:relative;display:block;width:100%;max-height:78svh;overflow:hidden;background:var(--fill)}
.c-whole.loaded{background:transparent}
.c-whole img{display:block;width:100%;height:100%;object-fit:contain}
/* Home: the poster is a print, the whole photo with its words underneath. */
.c-memory{height:auto;min-height:0;background:var(--v2-card);padding:12px 12px 16px;box-shadow:0 18px 34px -24px rgba(30,28,34,.8);display:grid;gap:12px;margin:0 auto 18px;width:min(900px,100%)}
.c-memory .c-photo{position:relative;inset:auto}
.c-memory .c-photo::after{display:none}
.c-memory .c-photo img{object-fit:contain}
.c-memory-text{position:static;max-width:none;color:var(--v2-ink);text-shadow:none;padding:0 4px}
.c-who,.c-with{color:var(--v2-muted)}
.c-caption{font-size:clamp(24px,3vw,34px)}
.c-memory .c-link{color:var(--v2-ink)}
.c-feed{padding:0 40px}
.c-sheet{width:min(900px,100%);margin:0 auto;padding:2px 0 60px}
.c-sheet-photo{background:var(--fill)}
.c-sheet-photo img{object-fit:contain}
.c-skeleton{height:auto;aspect-ratio:3/2;width:min(900px,calc(100% - 80px));margin:0 auto}
/* Memories: whole lead photo, then a strip of uncropped thumbnails. */
.c-mem-lead{max-height:62svh}
.c-mem-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:3px}
.c-mem-strip .c-mem-cell{aspect-ratio:1;background:var(--fill)}
.c-mem-strip .c-mem-cell img{object-fit:contain}
/* Your posts, and Part D's conversation photo: whole photo too. */
.archive-item img{object-fit:contain}
.d-photo.d-photo img{object-fit:contain} /* beats social.css, which loads later */
@media (max-width:760px){.c-feed{padding:0 16px}.c-sheet{padding:2px 16px 60px}.c-skeleton{width:calc(100% - 32px)}}
/* Letterbox grounds stay paper-toned once loaded (the generic loaded shimmer is dark). */
.c-sheet-photo.c-shimmer.loaded,.c-mem-cell.c-shimmer.loaded,.c-whole.c-shimmer.loaded{background:var(--fill)}
.c-sheet{gap:10px}
.c-sheet-tile{background:var(--v2-card);padding:6px 6px 0;box-shadow:0 12px 24px -18px rgba(30,28,34,.8)}

/* ---- Luma-spirited pass (Zach's picks 1B 2A 3A 4A 5A, Nov 3) ---- */
:root{--c-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--c-fill:var(--fill)}
/* 5A: plain system type for the interface; Newsreader stays for titles; mono only for dates and links. */
body:has(#workspace:not([hidden])) :is(.c-link,.c-primary,.c-source,.c-mem-share,.c-mem-eyebrow,.c-mem-fine,.c-fine,.c-mem-pill,.c-sheet-meta,.c-who,.c-with,.c-label,.c-choice small,.c-audience legend,.c-tags legend,.c-compose-status,.c-compose-error,.c-firstprint-body,#month-jump,#library-view .library-tools,#library-view .library-tools button,#library-view .c-month-grid .c-month,#library-view .empty p,#upload-status,.viewer button,.viewer-top,.share-panel label,.share-panel .fine,.share-panel #share-status){font-family:var(--c-ui)}
body:has(#workspace:not([hidden])) :is(.c-date,.c-who time,.c-tile,#viewer-date,.share-panel #share-url){font-family:var(--v2-mono)}
.c-mem-eyebrow{font-size:13px;font-weight:600;letter-spacing:0;color:var(--v2-muted);padding-bottom:6px;border-bottom:1px solid var(--line);margin:18px 0 -2px}
#library-view .c-month-grid .c-month{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.c-who,.c-with{font-size:13px;letter-spacing:0}
.c-who span{font-weight:600}
.c-primary,.c-source,.c-mem-share{border-radius:999px}
.c-primary,.c-source{font-weight:600;font-size:15px}
.c-mem-share{min-width:64px;padding:0 14px;font-size:13px;font-weight:500;border:0;background:var(--c-fill)}
.c-mem-card,.c-memory,.c-sheet-tile{border-radius:14px}
.c-whole,.c-mem-strip .c-mem-cell,.c-sheet-photo{border-radius:10px}
.c-compose{border-radius:16px}
.c-compose textarea,.c-compose input[type=date],.c-compose input:not([type]){border:0;background:var(--c-fill);border-radius:10px}
/* 3A: fact row under the memory title. */
.c-mem-meta{align-items:center}
.c-fact{display:flex;gap:10px;align-items:center;min-width:0}
.c-tile{flex:none;width:40px;height:40px;border-radius:9px;background:var(--c-fill);display:grid;place-content:center;text-align:center;line-height:1;color:var(--v2-ink)}
.c-tile small{font-size:9px;letter-spacing:.04em;color:var(--v2-muted)}
.c-tile b{font-size:15px;font-weight:400;margin-top:2px}
.c-fact-lines{display:grid;gap:2px;min-width:0}
.c-fact-lines .c-date{font-size:12.5px;color:var(--v2-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-fact-lines small{font:13px var(--c-ui);color:var(--v2-muted)}
@media (max-width:760px){
 /* 4A: Share opens the viewer as a bottom sheet. */
 .viewer.c-sheet-mode{inset:auto 0 0 0;height:auto;max-height:92svh;overflow:auto;border-radius:18px 18px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--v2-card);box-shadow:0 -18px 40px -18px rgba(30,28,34,.6)}
 .viewer.c-sheet-mode::backdrop{background:var(--scrim)}
 .viewer.c-sheet-mode::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 4px;flex:none}
 .viewer.c-sheet-mode .viewer-stage img{max-height:32svh;border-radius:10px}
 .viewer.c-sheet-mode #viewer-share,.viewer.c-sheet-mode #viewer-book{display:none}
 .viewer.c-sheet-mode .share-panel{width:100%;padding:0;background:transparent}
 .viewer.c-sheet-mode.c-picking .viewer-stage{display:none}
}
/* Fixes from the 375 px check. */
.c-fact-lines .c-date{white-space:normal;overflow:visible}
@media (max-width:760px){
 .viewer.c-sheet-mode .viewer-stage{flex:none}
}
@media (max-width:760px){.c-mem-empty{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}}

/* Home as postcards (boards 6A/7A, 3A): a centered stack on the app's white, the contact sheet under it. */
.c-stack{display:grid;gap:14px;justify-items:center;padding:8px 0 24px}
.c-stack-count{margin:0;font:11px var(--v2-mono);letter-spacing:.1em;color:var(--v2-muted)}
.c-skeleton-card{padding:12px 0 24px}
.c-skeleton-photo{width:min(100%,520px);aspect-ratio:3/2;border-radius:2px}
.c-own-line{margin:8px 0 0;font:400 22px/1.2 var(--serif);color:var(--v2-ink);text-align:center}
.c-own-send{border-radius:999px;min-height:48px}
.c-own-fine{text-align:center}
.c-memory-top{display:flex;align-items:center;min-height:44px;padding:0 0 8px}
/* Room under the pills for the floating tab bar on phones (as .c-mem does). */
@media (max-width:760px){.c-memory-view,.c-feed{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}
.c-memory-status:empty{display:none}
.c-mem-posted{background:transparent;box-shadow:none;padding:0}
.c-mem-posted .pc{width:100%}
.archive-open{all:unset;display:block;width:100%;cursor:pointer}
.archive-open:hover{background:transparent}
.archive-open:focus-visible{outline:2px solid var(--v2-ink);outline-offset:4px}
/* The first screen after joining (board 2A, Shop theme Nov 8): white, one ask, the device's button, a sample print. */
body:has(#first-photo:not([hidden])){background:var(--bg);color:var(--ink)}
body:has(#first-photo:not([hidden])) header{display:flex;align-items:center;min-height:56px;padding:var(--s1) var(--gutter);border:0;border-bottom:1px solid var(--line);background:var(--bg)}
body:has(#first-photo:not([hidden])) header .wordmark{font:400 var(--fs-wordmark)/1 var(--serif);color:var(--ink);text-shadow:none}
body:has(#first-photo:not([hidden])) :is(nav,#sign-out){display:none}
body:has(#first-photo:not([hidden])) main{padding:0 var(--gutter);max-width:1120px}
.first-photo{min-height:calc(100svh - 57px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:var(--s7);padding:var(--s6) 0 var(--s7)}
.first-photo-copy{display:grid;gap:var(--s4);max-width:520px}
.first-photo h1:focus{outline:none}
.first-sub{max-width:42ch}
.first-sources{display:grid;gap:var(--s2);margin-top:var(--s2);max-width:360px}
.first-google[hidden]{display:none}
/* The slot's own idle control is replaced by "From Google Photos"; its status line and hand-off link stay. */
.first-google-slot .gp[data-idle]{display:none}
.first-years{display:grid;gap:var(--s2);margin-top:var(--s2)}
.first-chips[hidden]{display:none}
.first-chip{min-width:56px;justify-content:center}
.first-chip[aria-expanded=true]{background:var(--fill)}
.first-copied:empty{display:none}
.first-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.first-sample{justify-self:end;width:100%}
@media (max-width:760px){
 .first-photo{grid-template-columns:1fr;gap:var(--s5);align-content:start;padding:var(--s5) 0 var(--s6)}
 .first-photo .display{font-size:40px}
 .first-sample{order:-1;justify-self:start;width:min(200px,52vw)}
 .first-sources{max-width:none}
 .first-more .first-scan{flex:1}
}
/* Scan an old print: the crop step. The photo whole on a dark ground, four 44 px corner handles. */
.scan{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:max(12px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));background:var(--c-dark);color:#f7f5f1;box-sizing:border-box}
.scan[open]{display:flex;flex-direction:column;gap:12px}
.scan::backdrop{background:var(--c-dark)}
.scan-head{display:flex;align-items:center;justify-content:space-between}
.scan-head h2{margin:0;font:400 24px var(--serif);color:#f7f5f1}
.scan-close{min-width:44px;min-height:44px;border:0;background:transparent;color:#f7f5f1;font:28px/1 var(--serif);cursor:pointer}
.scan-close:hover{background:transparent}
.scan-stage{position:relative;align-self:center;max-width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.scan-photo{display:block;max-width:100%;max-height:calc(100svh - 230px);width:auto;height:auto}
.scan-quad{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.scan-quad polygon{fill:rgba(247,245,241,.08);stroke:#f7f5f1;stroke-width:3;vector-effect:non-scaling-stroke}
.scan-handle{position:absolute;width:44px;height:44px;min-width:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:grab;touch-action:none}
.scan-handle::after{content:'';position:absolute;inset:12px;border-radius:50%;background:#f7f5f1;box-shadow:0 0 0 2px rgba(30,28,34,.6)}
.scan-handle:hover{background:transparent}
.scan-handle.active{cursor:grabbing}
.scan-handle.active::after,.scan-handle:focus-visible::after{inset:8px}
.scan-handle:focus-visible{outline:2px solid #f7f5f1;outline-offset:0}
.scan-help{margin:0;text-align:center;font:13px var(--v2-mono);color:rgba(247,245,241,.75)}
.scan-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.scan-btn{min-height:48px;padding:0 20px;border:1px solid rgba(247,245,241,.45);border-radius:999px;background:transparent;color:#f7f5f1;font:500 15px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;transition:transform .15s var(--ease)}
.scan-btn:hover{background:rgba(247,245,241,.08)}
.scan-btn:active{transform:scale(.95)}
.scan-btn:disabled{opacity:.5;cursor:default}
.scan-use,.scan-use:hover{background:#f7f5f1;color:#2b2a27;border-color:#f7f5f1}
.scan-btn:focus-visible,.scan-close:focus-visible{outline:2px solid #f7f5f1;outline-offset:3px}
.scan-status{margin:0;min-height:18px;text-align:center;font:13px var(--v2-mono);color:rgba(247,245,241,.85)}