/* Hallmark · shape: app screen · genre: editorial · theme: Atelier (deal 2/3, seed fam-private-invite-only-phone-9eba·e000526b·2026-11-06·r0), palette swapped for the fam brand sheet found in pre-flight
 * nav: a top bar with the fam name and a three-stop tab bar at the thumb · signature: the collection hung as a print wall, justified rows under a wall label · states: loading, empty, error, full
 * axes: light/geometric-sans/warm · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, a phone list is a phone list; the wall-label meta and attributed hearts are what no feed has */
/* Hallmark · waive 1 · Poppins is the brand's own display face (fam_app.mds/notes/mvp-buildout-2026-07-25.md, Brand) · the wordmark and titles match the printed brand sheet */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- shell ---------- */
html { height: 100%; }
body { min-height: 100%; font-size: var(--text-md); color: var(--color-ink); }
.app { width: 100%; max-width: 40rem; margin-inline: auto; min-height: 100dvh; display: flex; flex-direction: column; }
.view { flex: 1; padding: 0 var(--space-md) calc(var(--tabs-height) + env(safe-area-inset-bottom, 0px) + var(--space-xl)); }
.view--bare { padding-bottom: var(--space-xl); }
.noscript { padding: var(--space-lg); }

.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--bar-height); padding: env(safe-area-inset-top, 0px) var(--space-md) 0; background: var(--color-paper); }
.bar__fam { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bar__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__mark { font-weight: 900; letter-spacing: -0.06em; color: var(--color-signal); }
.bar__count { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.2; }
.bar__back { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-xs) 0 0; margin-left: calc(-1 * var(--space-xs)); border: 0; background: none; color: var(--color-ink); text-decoration: none; font-weight: 500; border-radius: var(--radius-input); }
.bar__back svg { width: 22px; height: 22px; }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); letter-spacing: -0.06em; color: var(--color-signal); line-height: 1; }
.wordmark--big { font-size: var(--text-3xl); }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-nav); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); max-width: 40rem; margin-inline: auto; padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3xs); min-height: 48px; border: 0; background: none; color: var(--color-muted); font-size: var(--text-xs); text-decoration: none; border-radius: var(--radius-input); }
.tab svg { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--color-ink); }
.tab:active { transform: translateY(1px); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-focus); border-color: var(--color-focus); }
.btn--block { width: 100%; }
.btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.icon-btn::before { content: ""; position: absolute; inset: -4px; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--color-paper-2); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.link { position: relative; display: inline-flex; align-items: center; min-height: 32px; background: none; border: 0; padding: 0; color: var(--color-ink); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; cursor: pointer; border-radius: 2px; }
.link::before { content: ""; position: absolute; inset: -6px; }
.link:hover { color: var(--color-ink-2); }
.link:active { transform: translateY(1px); }
.link:disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn, .icon-btn, .tab { transition: background-color var(--dur-short) linear; } }

.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.field__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.field__help--error { color: var(--color-error); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-card); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.input::placeholder, .textarea::placeholder { color: var(--color-muted); }
.input:hover, .select:hover, .textarea:hover { background: var(--color-paper-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-error); }
.textarea { min-height: 6rem; padding: var(--space-sm) var(--space-md); resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: var(--space-xl); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23615d55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-sm) center; background-size: 20px; }
.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }

/* ---------- surfaces ---------- */
.card { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); }
.wash { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-sage); color: var(--color-sage-ink); }
.rule { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: var(--space-lg) 0 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.meta { font-size: var(--text-sm); color: var(--color-muted); }
.meta b { font-weight: 500; color: var(--color-ink-2); }
.hd { padding: var(--space-lg) 0 var(--space-md); }
.hd h1 { font-size: var(--text-2xl); }
.hd h1 + .meta { margin-top: var(--space-2xs); }
.album__desc { margin-top: var(--space-2xs); line-height: 1.45; max-width: 60ch; color: var(--color-ink-2); overflow-wrap: break-word; }
.album__desc + .meta { margin-top: var(--space-2xs); }
.album-desc__label { margin-top: var(--space-md); }
.album__edit { min-height: 32px; font-size: inherit; color: inherit; }
.album__form { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); }
.album__form-acts { display: flex; align-items: center; gap: var(--space-md); }
.hd--tight { padding: var(--space-xs) 0 var(--space-sm); }

.av { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--av-0); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0; flex-shrink: 0; }
.av--1 { background: var(--av-1); } .av--2 { background: var(--av-2); } .av--3 { background: var(--av-3); } .av--4 { background: var(--av-4); } .av--5 { background: var(--av-5); } .av--6 { background: var(--av-6); } .av--7 { background: var(--av-7); }
.av--sm { width: 24px; height: 24px; font-size: var(--text-xs); }
.avs { display: inline-flex; }
.avs .av { box-shadow: 0 0 0 2px var(--color-paper); }
.avs .av + .av { margin-left: calc(-1 * var(--space-2xs)); }

/* ---------- photo rows (the print wall) ---------- */
.rows { display: flex; flex-direction: column; gap: var(--space-2xs); }
.row { display: flex; gap: var(--space-2xs); }
.singles { display: flex; flex-direction: column; gap: var(--space-sm); }
.photo__cap { margin-top: var(--space-xs); line-height: 1.45; max-width: 60ch; overflow-wrap: break-word; }
a.icon-btn { text-decoration: none; }
.photo__acts { display: flex; align-items: center; gap: var(--space-2xs); margin: var(--space-3xs) 0 0 calc(-1 * var(--space-xs)); }
.lovers { display: inline-flex; }
.av--xs { width: 22px; height: 22px; font-size: 0.625rem; }
.replies { display: flex; flex-direction: column; }
.replies__more { align-self: flex-start; min-height: 32px; color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.reply { display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-2xs) 0; }
.reply--nested { margin-left: 0; padding-bottom: 0; }
.reply__body { min-width: 0; flex: 1; }
.reply__line { font-size: var(--text-sm); line-height: 1.4; max-width: 60ch; overflow-wrap: break-word; padding-top: var(--space-3xs); }
.reply__name { font-weight: 600; margin-right: var(--space-3xs); }
.reply__meta { display: flex; gap: var(--space-sm); align-items: center; font-size: var(--text-xs); color: var(--color-muted); }
.reply__act { min-height: 28px; font-size: var(--text-xs); color: var(--color-muted); text-decoration: none; }
.tile { position: relative; display: block; flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: var(--radius-img); overflow: hidden; background: var(--color-paper-2); cursor: pointer; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile--missing { display: flex; align-items: center; justify-content: center; padding: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.tile__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-scrim); color: var(--color-paper); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }

/* ---------- home ---------- */
/* Album card: the cover carries the title so it never reads as a second heading under the fam name. */
.coll { margin: var(--space-xs) 0 var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); overflow: hidden; }
.coll__open { position: relative; display: block; color: inherit; text-decoration: none; }
.coll__open:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.cover { display: grid; gap: 2px; aspect-ratio: 16 / 10; background: var(--color-paper-2); }
.cover--2 { grid-template-columns: 1fr 1fr; }
.cover--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cover--3 .cover__tile:first-child { grid-row: 1 / 3; }
.cover--empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; color: var(--color-muted); font-size: var(--text-sm); }
.cover__tile { position: relative; overflow: hidden; background: var(--color-paper-3); }
.cover__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coll__over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-2xl) var(--space-md) var(--space-sm); background: linear-gradient(to top, var(--color-scrim), transparent); color: var(--color-paper); pointer-events: none; }
.cover--empty + .coll__over { position: static; padding-top: var(--space-sm); background: none; color: var(--color-ink); }
.coll__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1.15; overflow-wrap: break-word; }
.coll__sub { font-size: var(--text-sm); }
.coll__foot { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); }
.coll__meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll__add { flex: none; min-height: 36px; padding: 0 var(--space-sm); }
.coll__add svg { width: 18px; height: 18px; }
.coll .avs .av { box-shadow: 0 0 0 2px var(--color-card); }

/* ---------- collection detail ---------- */
.batch { padding: var(--space-xs) 0 var(--space-sm); }
.hd + .batch { padding-top: 0; }
.batch__head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
/* The buttons keep their 40px tap area but should not make the header line taller than the text. */
.batch__head .icon-btn { margin-block: calc(-1 * var(--space-2xs)); }
.batch__who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch__name { font-weight: 600; }
.heart { color: var(--color-ink-2); }
.heart[aria-pressed="true"] { color: var(--color-signal); }
.composer { display: flex; gap: var(--space-xs); align-items: flex-end; padding: var(--space-xs) 0 var(--space-sm); }
.composer .input { min-height: 44px; }
.composer .btn { min-height: 44px; }
.composer--nested { margin-left: var(--space-xl); }

/* ---------- add photos ---------- */
.picker { display: flex; align-items: center; gap: var(--space-md); }
.picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.picker__btn { position: relative; }
.picker input:focus-visible + .picker__btn { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.picked { display: flex; flex-direction: column; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.picked__item { display: flex; flex-direction: column; gap: var(--space-xs); }
.picked__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-img); background: var(--color-paper-2); }
.picked__name { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border-radius: var(--radius-img); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; padding: var(--space-md); }
.picked__name[hidden] { display: none; }
.picked__cap { min-height: 48px; padding-block: var(--space-sm); resize: vertical; field-sizing: content; }
.audience svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.audience { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-sage); color: var(--color-sage-ink); font-size: var(--text-sm); line-height: 1.4; }
.progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--color-accent); transform-origin: left; transition: transform var(--dur-short) linear; }

/* ---------- people ---------- */
.people { border-top: var(--rule-hair) solid var(--color-ink); }
.person { display: flex; align-items: center; gap: var(--space-md); min-height: 64px; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.person__name { font-weight: 600; }
.invite-url { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); font-size: var(--text-sm); overflow-wrap: anywhere; color: var(--color-ink-2); }

/* ---------- join ---------- */
.join { padding-top: var(--space-xl); }
.join h1 { font-size: var(--text-2xl); margin-top: var(--space-lg); }
.join .lead { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* ---------- states ---------- */
.empty { padding: var(--space-xl) var(--space-md); text-align: left; display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.empty h2 { font-size: var(--text-xl); }
.empty p { color: var(--color-ink-2); }
.error { padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-signal-soft); color: var(--color-ink); line-height: 1.45; }
.skeleton { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-lg); }
.sk { border-radius: var(--radius-img); background: var(--color-paper-2); }
.sk--title { width: 55%; height: 28px; }
.sk--row { width: 100%; height: 180px; }
.sk--line { width: 70%; height: 16px; }
.status { position: fixed; left: 50%; bottom: calc(var(--tabs-height) + var(--space-md) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); box-shadow: var(--shadow-card); }

/* ---------- viewer ---------- */
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-dark); color: var(--color-dark-ink); }
.viewer::backdrop { background: var(--color-dark); }
.viewer__strip { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: calc(var(--bar-height) + env(safe-area-inset-top, 0px)) 0 calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
/* The photo with its actions and description right underneath, as on the album page. */
.viewer__fig { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 64rem; margin: auto 0; }
.viewer__fig img { display: block; max-width: 100%; max-height: calc(100dvh - var(--bar-height) - 9.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); width: auto; height: auto; object-fit: contain; }
.viewer__below { align-self: stretch; padding: var(--space-xs) var(--space-md) 0; }
.viewer__below .photo__acts { margin-left: calc(-1 * var(--space-xs)); }
.viewer__cap { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.45; color: var(--color-dark-ink); max-width: 60ch; overflow-wrap: break-word; }
.viewer__meta { margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-dark-muted); }
.viewer__none { padding: var(--space-xl) var(--space-md); color: var(--color-dark-muted); font-size: var(--text-sm); text-align: center; }
.viewer .avs .av { box-shadow: 0 0 0 2px var(--color-dark); }
.viewer__top { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); }
.viewer__count { flex: 1; font-size: var(--text-sm); color: var(--color-dark-muted); font-variant-numeric: tabular-nums; }
.viewer .icon-btn { color: var(--color-dark-ink); }
.viewer .icon-btn:hover { background: var(--color-dark-hover); }
.viewer .heart[aria-pressed="true"] { color: var(--color-signal); }

@media (min-width: 40rem) {
  .view { padding-inline: var(--space-lg); }
  .tabs { border-inline: var(--rule-hair) solid var(--color-rule); }
}