/* Private group identity uses the existing shell grid and controls. */
.packs-main { display: grid; gap: 1.15rem; overflow-wrap: anywhere; }
.packs-main .app-page-heading { margin-bottom: .25rem; }
.pack-card { padding: 1.25rem; border: 1px solid var(--ft-border, #eadfeb); border-radius: 1.25rem; background: var(--ft-surface, #fff); box-shadow: 0 4px 18px #65477906; }
.pack-card h2 { font-size: 1.15rem; line-height: 1.45; margin: 0 0 .75rem; }
.pack-card p { margin: .5rem 0 1rem; }
.pack-card small, .pack-hint { color: var(--ft-muted, #66586e); font-size: .875rem; }
.pack-list { display: grid; gap: 1rem; }
.pack-list-card { display: flex; gap: 1rem; align-items: start; }
.pack-list-card h2 { margin-top: .75rem; }
.pack-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; background: #efe4fa; color: #735186; border-radius: 1rem; font-size: 1.4rem; font-weight: 750; overflow: hidden; }
.pack-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pack-avatar--large { width: 5rem; height: 5rem; margin-top: -3rem; position: relative; border: 4px solid #fff; border-radius: 1.4rem; }
.pack-badge { display: inline-block; border: 1px solid #e2d4ed; border-radius: 2rem; color: #6f467e; background: #faf6ff; font-size: .75rem; padding: .25rem .65rem; }
.pack-cover { height: 8rem; background: linear-gradient(115deg,#f2dded,#e8e3fa 65%,#faf0dc); overflow: hidden; display: grid; place-items: center; }
.pack-cover > span svg { width: 4rem; height: 4rem; color: #9971aa; opacity: .6; }
.pack-cover img { height: 100%; width: 100%; object-fit: cover; }
.pack-identity { padding: 0; overflow: hidden; }
.pack-identity__body { padding: 1.25rem; }
.pack-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.pack-tabs a { border-radius: 1rem; padding: .65rem .85rem; min-height: 44px; color: #694674; background: #fff; text-decoration: none; }
.pack-tabs a[aria-current] { background: #eee1f7; font-weight: 700; }
.pack-form { display: grid; gap: 1rem; }
.pack-form label, .pack-upload, [data-pack-capture] label, .pack-card > label { display: grid; gap: .4rem; }
.pack-form input:not([type=checkbox]):not([type=hidden]), .pack-form textarea, .pack-form select, [data-pack-token], [data-pack-link] { width: 100%; min-width: 0; border: 1px solid #bcaec5; border-radius: .75rem; padding: .75rem; background: #fff; color: #352840; font-size: 1rem; }
.pack-form textarea { resize: vertical; }
.pack-form .ft-button { justify-self: start; }
.pack-upload { min-width: 0; border: 1px solid #e7deeb; padding: 1rem; border-radius: 1rem; margin: 0; }
.pack-upload input[type=file] { padding: .35rem; font-size: .875rem; }
.pack-upload__preview { max-width: 100%; width: 9rem; height: 7rem; object-fit: cover; border-radius: .75rem; }
.pack-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.pack-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-block: .5rem; }
.pack-confirm { display: flex; align-items: start; gap: .5rem; font-size: .875rem; }
.pack-confirm input { margin-top: .25rem; min-width: 1.1rem; }
.pack-members, .pack-invites { list-style: none; padding: 0; margin: 0; }
.pack-members li { display: flex; gap: .75rem; padding-block: 1rem; border-bottom: 1px solid #eee7f1; }
.pack-members li > div { min-width: 0; flex: 1; }
.pack-members small { display: block; margin-top: .2rem; }
.pack-member-avatar { background: #f4ebfa; color: #80618e; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; }
.pack-member-avatar svg { width: 1.3rem; }
.pack-members details { margin-top: .6rem; }
.pack-members summary, .pack-actions summary { cursor: pointer; min-height: 44px; padding-block: .6rem; }
.pack-invites li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .75rem; }
.pack-invite { border-top: 1px solid #eee7f1; padding-block: .75rem; }
.pack-empty { text-align: center; padding-block: 2.5rem; }
.pack-empty__flower { display: inline-grid; width: 3rem; height: 3rem; color: #a270a0; margin-bottom: 1rem; }
.pack-card blockquote { margin: 1rem 0; padding: 1rem; background: #faf6fd; border-inline-start: 3px solid #b997ca; }
@media (min-width: 48rem) { .pack-card { padding: 1.5rem; } .pack-identity { padding: 0; } .pack-cover { height: 10rem; } .pack-identity__body { padding: 1.5rem; } }
@media (prefers-reduced-motion: no-preference) { .pack-tabs a { transition: background .15s; } }
/* The board reuses feed cards at the same main-column width. */
.pack-compose{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.pack-compose h2{margin:0}.packs-main .question-card{margin-bottom:1rem}
.pack-share-hint{display:block;font-size:.75rem;color:var(--color-text-muted,#62606c)}
.composer-destination{padding:1rem;margin-bottom:1rem;background:#faf5fc;border-radius:1rem}
.composer-destination label{display:block;font-weight:650;margin-bottom:.5rem}
.composer-destination select{max-width:100%;width:100%}.composer-destination p{margin:.5rem 0 0}
.pack-local-answer{border-top:1px solid #eee;padding:1rem 0}.pack-local-answer p{overflow-wrap:anywhere}
@media(max-width:599px){.pack-identity .pack-cover{height:100px}.pack-identity__body>p:first-of-type{margin:.5rem 0}.pack-compose{align-items:flex-start;flex-direction:row;flex-wrap:wrap}}
/* Invite Center uses one native form view, enhanced as a modal or bottom sheet. */
.pack-primary-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pack-primary-actions .ft-button { display: inline-flex; gap: .6rem; align-items: center; }
.pack-section-title, .pack-hub-invites > h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.pack-hub-invites .pack-invites { display: grid; gap: .85rem; }
.pack-invites .pack-hub-invite { padding: 1.15rem; justify-content: start; align-items: start; gap: .85rem; }
.pack-hub-invite__body { min-width: 0; flex: 1; }
.pack-hub-invite h3 { margin: .6rem 0 .4rem; font-size: 1.1rem; line-height: 1.35; }
.pack-hub-invite p { margin: .4rem 0 .65rem; }
.pack-hub-invite .pack-actions { gap: .4rem .75rem; }
.pack-hub-invite .pack-inline-form { margin-block: .2rem; }
.pack-hub-invite .pack-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.pack-invite-center { min-width: 0; }
.pack-invite-center__heading { margin-bottom: 1.15rem; }
.pack-invite-center h2 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.35; }
.pack-invite-center__heading p { margin: 0; color: #66586e; line-height: 1.6; }
.pack-invite-channels { display: grid; gap: .65rem; }
.pack-invite-channel { border: 1px solid #e6ddea; border-radius: 1rem; background: #fff; overflow: clip; min-width: 0; }
.pack-invite-channel summary, .pack-invite-channel--disabled { display: flex; gap: .75rem; align-items: center; padding: .85rem; min-height: 72px; }
.pack-invite-channel summary { cursor: pointer; list-style: none; }
.pack-invite-channel summary::-webkit-details-marker { display: none; }
.pack-invite-channel summary > span:nth-child(2), .pack-invite-channel--disabled > span:nth-child(2) { min-width: 0; flex: 1; }
.pack-invite-channel strong, .pack-invite-channel small { display: block; }
.pack-invite-channel strong { font-size: 1rem; color: #352840; }
.pack-invite-channel small { margin-top: .2rem; color: #66586e; font-size: .8125rem; line-height: 1.45; }
.pack-invite-channel__icon { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; display: grid; place-items: center; color: #755184; background: #f4edf7; border-radius: .8rem; }
.pack-invite-channel summary > svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: #765e82; }
.pack-invite-channel[open] { border-color: #b58bc7; }
.pack-invite-channel[open] summary > svg { transform: rotate(180deg); }
.pack-invite-channel--disabled { background: #faf8fb; }
.pack-invite-channel--disabled .pack-invite-channel__icon { background: #f0edf2; color: #756b7a; }
.pack-invite-channel__form { padding: 0 1rem 1rem; gap: .65rem; }
.pack-invite-channel__form > label, .pack-resend .pack-form > label { font-weight: 650; }
.pack-invite-channel__form .pack-hint { margin: 0; line-height: 1.55; }
.pack-resend summary { min-height: 44px; cursor: pointer; padding-block: .6rem; }
.pack-resend .pack-form { padding: .5rem 0 1rem; gap: .65rem; }
.pack-invite-open { overflow: hidden; }
.pack-invite-dialog { position: fixed; inset: auto 0 0; margin: 0 auto; border: 1px solid #e3dbe9; border-radius: 1.5rem 1.5rem 0 0; padding: 1.25rem 1rem max(1.25rem, env(safe-area-inset-bottom)); width: min(100%, 35rem); max-width: 100%; max-height: 90vh; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; background: #fff; color: #352840; box-shadow: 0 12px 70px #21132c33; box-sizing: border-box; }
.pack-invite-dialog::backdrop { background: #21132c70; }
.pack-invite-dialog__close { float: right; position: sticky; top: 0; width: 44px; height: 44px; display: grid; place-items: center; margin: -.3rem -.2rem .4rem .6rem; border: 0; border-radius: 50%; color: #453749; background: #f7f1fa; cursor: pointer; z-index: 1; }
.pack-invite-dialog .pack-invite-center__heading { padding-top: .3rem; }
.pack-invite-dialog .pack-invite-center__heading h2 { padding-right: 2.6rem; }
.pack-invite-dialog .pack-invite-channels { clear: both; }
.pack-invite-dialog :focus-visible, .pack-invite-center :focus-visible { outline: 3px solid #8a4eaa; outline-offset: 3px; }
.pack-first-steps { background: linear-gradient(130deg, #fff7fb, #f6f1ff); }
.pack-first-steps .pack-actions { margin-top: 1rem; }
.pack-first-steps .ft-button { display: inline-flex; gap: .5rem; align-items: center; }
@media (min-width: 48rem) { .pack-invite-dialog { inset: 0; margin: auto; border-radius: 1.5rem; max-height: min(85dvh, 52rem); padding: 1.5rem; } }
@media (max-width: 359px) { .pack-invites .pack-hub-invite { gap: .65rem; padding: 1rem; } .pack-hub-invite > .pack-avatar { width: 2.5rem; height: 2.5rem; border-radius: .75rem; } .pack-invite-dialog { padding-inline: .8rem; } .pack-invite-channel summary, .pack-invite-channel--disabled { padding: .75rem; gap: .6rem; } }

/* PACZKI UX FIX 002: discoverability and a conversation-first board. */
.app-header-packs { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ft-muted); border-radius: 50%; }
.app-header-packs[aria-current] { background: #efe4fa; color: #694674; }
.app-header-packs:focus-visible { outline: 2px solid var(--ft-primary); outline-offset: 2px; }
@media(min-width:64rem) { .app-header-packs { display: none; } }
.profile-packs { margin-block: 1.25rem; }
.profile-packs-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.profile-pack { display: flex; gap: .85rem; align-items: center; padding: .75rem; border-radius: .9rem; text-decoration: none; color: var(--ft-ink); }
.profile-pack:hover { background: #faf5fd; }
.profile-pack > span:last-child { min-width: 0; }
.profile-pack strong { display: block; overflow-wrap: anywhere; }
.profile-pack small { display: block; margin-top: .2rem; }
.profile-secondary { margin-block: 1rem; color: var(--ft-muted); font-size: .875rem; }
.profile-secondary summary { cursor: pointer; padding-block: .75rem; }
.profile-secondary a { display: inline-flex; min-height: 44px; align-items: center; }
.pack-board-header { padding: 1rem; }
.pack-board-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: .8rem; margin-bottom: .8rem; }
.pack-board-identity { display: flex; gap: .85rem; align-items: center; }
.pack-board-identity > div { min-width: 0; }
.pack-board-identity h1 { font-size: clamp(1.25rem,3vw,1.75rem); line-height: 1.3; margin: 0; }
.pack-board-identity p { color: var(--ft-muted); font-size: .8125rem; margin: .25rem 0 0; }
.pack-board-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .7rem; }
.pack-board-actions > a, .pack-more > summary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .65rem; border-radius: .75rem; color: #694674; font-size: .8125rem; text-decoration: none; }
.pack-board-actions [aria-current] { background: #efe4fa; font-weight: 650; }
.pack-more { margin-left: auto; position: relative; }
.pack-more > summary { cursor: pointer; list-style: none; min-width: 44px; }
.pack-more > summary::-webkit-details-marker { display: none; }
.pack-more__menu { position: absolute; z-index: 5; right: 0; width: min(17rem,calc(100vw - 3rem)); background: #fff; border: 1px solid var(--ft-border); padding: 1rem; border-radius: 1rem; box-shadow: var(--ft-shadow-card); }
.pack-more__menu > a { display: flex; min-height: 44px; align-items: center; }
.packs-main [data-private-content] { display: grid; gap: 1rem; }
.packs-main .pack-compose { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem; padding: 1rem; }
.pack-compose h2 { margin: 0; }
.pack-compose .ft-button { display: inline-flex; gap: .4rem; align-items: center; }
.pack-conversation-link { display: inline-flex; gap: .3rem; align-items: center; min-height: 44px; font-size: .8125rem; }
.packs-main .question-card__body p:first-child { margin-top: .75rem; }

.pack-list-card .pack-avatar { position: relative; overflow: hidden; }
.pack-list-card .pack-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pack-help { margin-block: .75rem 1rem; font-size: .8125rem; color: var(--ft-muted); }
.pack-help summary { cursor: pointer; min-block-size: 2.75rem; display: flex; align-items: center; gap: .5rem; color: var(--ft-ink); }
.pack-help summary::after { content: '+'; }
.pack-help details[open] summary::after { content: '−'; }
.pack-help p { max-inline-size: 65ch; }
.pack-upload--cover .pack-upload__preview { width: 100%; max-width: none; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
@media (min-width: 48rem) { .pack-board-cover, .pack-upload--cover .pack-upload__preview { aspect-ratio: 4 / 1; } }

.pack-benefits { padding-inline-start: 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem 1.25rem; }

/* Create form: native uploads with a local identity preview. */
.pack-create-card { padding: 1rem; }
.pack-create-form { gap: 1rem; }
.pack-create-identity { border: 1px solid var(--ft-border); border-radius: 1rem; overflow: hidden; background: #fff; }
.pack-create-photo { min-width: 0; margin: 0; padding: 0; border: 0; }
.pack-create-photo__canvas { position: relative; overflow: hidden; background: linear-gradient(120deg, #efe4fc, #fce4ef 65%, #fff0e1); }
.pack-create-photo--cover { position: relative; }
.pack-create-photo--cover .pack-create-photo__canvas { height: 8rem; }
.pack-create-photo__placeholder { display: grid; gap: .4rem; justify-items: center; align-content: center; height: 100%; color: #78548c; font-size: .875rem; }
.pack-create-photo__placeholder svg { width: 1.75rem; height: 1.75rem; }
.pack-create-photo__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.pack-create-photo__tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pack-create-photo__picker { position: relative; display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; max-width: 100%; margin: 0; font-size: .875rem; color: #694674; font-weight: 650; }
.pack-create-photo__picker input[type=file] { padding: .4rem; font-size: .8125rem; }
.pack-create-form.is-enhanced .pack-create-photo__picker { background: #f4ebfa; border: 1px solid #e2d4ed; border-radius: .75rem; padding: .5rem .75rem; cursor: pointer; }
.pack-create-form.is-enhanced .pack-create-photo__picker input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; cursor: pointer; }
.pack-create-photo__picker:focus-within { outline: 3px solid var(--ft-focus, #6d3fab); outline-offset: 3px; }
.pack-create-photo__remove { min-height: 44px; min-width: 44px; padding: .5rem .6rem; border: 0; border-radius: .65rem; background: #fff; color: #694674; font-size: .875rem; cursor: pointer; }
.pack-create-photo--cover .pack-create-photo__body { display: grid; gap: 0; padding: .5rem .75rem; background: #fcf9fe; border-bottom: 1px solid var(--ft-border); }
.pack-create-form.is-enhanced .pack-create-photo--cover:not(.is-invalid) .pack-create-photo__body { position: absolute; right: .65rem; bottom: .65rem; padding: 0; border: 0; background: transparent; }
.pack-create-form.is-enhanced .pack-create-photo--cover .pack-create-photo__picker { background: #fff; }
.pack-create-photo--cover .pack-create-photo__status:not([role=alert]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pack-create-form.is-enhanced .pack-create-photo--cover:not(.is-invalid) + .pack-create-photo--avatar { position: relative; margin-top: -1rem; }
.pack-create-form.is-enhanced .pack-create-photo--avatar .pack-create-photo__canvas { border: 4px solid #fff; box-sizing: content-box; }
.pack-create-form.is-enhanced .pack-create-photo--avatar .pack-create-photo__body { padding-top: .75rem; }
.pack-create-photo--cover .pack-create-photo__tools { justify-content: flex-end; }
.pack-create-photo--cover .pack-create-photo__placeholder { padding: .75rem; }
.pack-create-form.is-enhanced .pack-create-photo--cover .pack-create-photo__placeholder { padding-bottom: 4rem; }
.pack-create-photo--avatar { display: flex; align-items: center; gap: .85rem; padding: .85rem; }
.pack-create-photo--avatar .pack-create-photo__canvas { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; }
.pack-create-photo--avatar .pack-create-photo__canvas svg { width: 2rem; height: 2rem; }
.pack-create-photo--avatar .pack-create-photo__body { flex: 1; min-width: 0; }
.pack-create-card .pack-create-photo__title { margin: 0 0 .35rem; font-size: .9375rem; font-weight: 650; }
.pack-create-photo__title small { display: inline-block; font-size: .75rem; font-weight: 400; margin-left: .2rem; }
.pack-create-card .pack-create-photo__status { margin: .35rem 0 0; color: var(--ft-muted); font-size: .8125rem; line-height: 1.45; }
.pack-create-card .pack-create-photo__status:empty { display: none; }
.pack-create-card .pack-create-photo__status[role=alert] { color: #a01749; }
.pack-create-photo [hidden] { display: none !important; }
.pack-create-field { font-weight: 650; }
.pack-create-field__label { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; justify-content: space-between; }
.pack-create-field__label small { font-size: .75rem; font-weight: 400; color: var(--ft-muted); }
.pack-create-field textarea { min-height: 5rem; }
.pack-create-card .pack-create-privacy { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--ft-muted); }
.pack-create-help { border-block: 1px solid var(--ft-border); font-size: .8125rem; line-height: 1.6; color: var(--ft-muted); }
.pack-create-help summary { min-height: 44px; padding-block: .65rem; cursor: pointer; color: var(--ft-ink); }
.pack-create-help p { margin: .3rem 0 .75rem; }
.pack-create-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.pack-create-actions > a { min-height: 44px; display: inline-flex; align-items: center; }
.pack-create-actions .ft-button { flex: 1; }
@media (min-width: 48rem) {
 .pack-create-card { padding: 1.5rem; }
 .pack-create-photo--cover .pack-create-photo__canvas { height: 10rem; }
 .pack-create-photo--avatar { padding: 1rem; }
 .pack-create-photo--avatar .pack-create-photo__canvas { flex-basis: 5rem; width: 5rem; height: 5rem; }
 .pack-create-actions .ft-button { flex: initial; }
}

/* Approved compact layouts: keep the full cover, bring the board and actions forward. */
.pack-list-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pack-list-heading .pack-section-title { margin: 0; }
.pack-list-heading .ft-button { font-size: .875rem; }
.pack-list-card { display: block; padding: 0; overflow: hidden; }
.pack-list-card__link { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem; min-height: 44px; color: var(--ft-ink); text-decoration: none; }
.pack-list-card__link > div { min-width: 0; flex: 1; }
.pack-list-card__link h2 { margin: .5rem 0 .25rem; color: var(--ft-primary); }
.pack-list-card__link p { margin: .3rem 0 .6rem; }
.pack-list-card__link:hover { background: var(--ft-surface-soft, #fff9fd); }
.pack-list-card__link:focus-visible { outline: 3px solid var(--ft-focus, #6d3fab); outline-offset: -3px; border-radius: 1.25rem; }
.pack-list + .pack-help { margin: 0; }
.pack-help { font-size: .875rem; line-height: 1.6; }
.pack-help details > p { margin: .5rem 0; }
.pack-board-header .pack-help { margin: 0; }
.pack-board-identity .pack-avatar { width: 3rem; height: 3rem; }
.pack-board-identity h1 { font-size: clamp(1.25rem, 3vw, 1.65rem); }
.pack-board-actions { margin-top: .55rem; }
.pack-board-actions > a { font-size: .875rem; }
.pack-board-actions .pack-help summary { font-size: .875rem; }
.pack-plan-context { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .7rem; }
.pack-plan-context > a { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 650; text-decoration: none; }
.pack-plan-context .pack-help { flex-basis: 100%; margin: 0; }
.pack-plan-context .pack-help summary { font-size: .875rem; }
.packs-main .pack-compose { gap: .65rem; margin-bottom: 0; }
.packs-main .pack-compose h2 { font-size: 1.05rem; }
.pack-plan-entry { display: grid; gap: .3rem; align-items: start; }
.pack-plan-entry .ft-button { justify-content: center; }
.pack-plan-capacity { display: block; color: var(--ft-muted); font-size: .8125rem; line-height: 1.45; text-align: center; }
.pack-invite-channel small { font-size: .875rem; }
@media(min-width:48rem) { .pack-list-card__link { padding: 1.4rem; } }

.pack-guest { max-inline-size: 44rem; }
.pack-guest > ul { display: grid; gap: .65rem; padding-inline-start: 1.25rem; margin-block: 1.5rem; }