/* app.css · app-specific layout on top of the Cut & Keep kit. Tokens only; loaded after base.css. */

.back-link { margin-top: var(--space-2); }
.column { width: 100%; }
.column--narrow { max-width: var(--width-narrow); }
.column--list { max-width: var(--width-list); }
.column--reading { max-width: var(--width-reading); }

/* Standalone ghost buttons line up with the text above them */
.empty > .btn--ghost, .list-done .btn--ghost, .shop-aside .btn--ghost { padding-inline: 0; }

/* Library */
.library-results > .chip-row { margin-top: var(--space-3); }
.library-grid--continued { margin-top: var(--grid-gap-y); }
.card-slot { display: contents; }
.poll-status { --cluster-gap: var(--space-2); }

.load-more { display: grid; justify-items: center; gap: var(--space-6); margin-top: var(--grid-gap-y); }
.load-more__skeletons { display: none; width: 100%; }
.load-more.htmx-request .load-more__skeletons { display: grid; }
.load-more.htmx-request > .btn { visibility: hidden; }

/* Recipe detail */
.detail--reel { --media-ratio: var(--ratio-reel); }
.detail--post { --media-ratio: var(--ratio-post); }
.detail__pick { display: flex; flex: 1 1 auto; }
.detail__pick > .btn { flex: 1 1 auto; }
.detail__remove { padding-inline: 0; }
.method__steps .steps__text { color: var(--color-text); max-width: var(--measure); }

/* Review sheet as a page (no JS) */
.review__body { display: flex; flex-direction: column; gap: var(--space-4); }
.review__foot { margin-top: var(--space-6); }
@media (max-width: 37.4375em) {   /* like the sheet: stacked, full width, primary on top */
  .review__foot { flex-direction: column-reverse; align-items: stretch; }
  .review__foot .btn { width: 100%; }
}
.review__clear { padding-inline: 0; }

/* Shopping list */
.shop-tools { --cluster-gap: var(--space-2); }
.shop-aside__title { margin-top: 0; }
.shop-aside > form { align-self: flex-start; }
.list-done { padding-block: var(--space-2) var(--space-6); }
.list-save { margin-top: var(--space-4); }
.list-empty { padding-block: var(--space-4); }
.list-item:target { animation: wash var(--dur-slower) var(--ease-out); }

/* Account */
.account { display: flex; flex-direction: column; gap: var(--space-10); padding-bottom: var(--space-8); }
.account > section { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.account .detail__section-title { align-self: stretch; }
.account__action { padding-inline: 0; }
.chip[aria-pressed="false"] .chip__check { display: none; }

/* Sign-in and linking */
.connect { padding-block: var(--space-10) var(--space-16); }
.login { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-10) var(--space-16); }
.login__form { display: flex; flex-direction: column; gap: var(--space-4); }
.login__or { margin-block: 0; }
.login__toggle { align-self: flex-start; padding-inline: 0; }