/* Smoothie King · Fruit Up. The recipe catalog: chapter tabs, compact tiles, and the recipe page sheet.
   Motion is transform/opacity only on the Fruit Up spring curve. */

/* ---------- chapter tabs ---------- */
.cat { position: relative; }
.cat-anchor { display: block; height: 0; scroll-margin-top: calc(var(--topbar-h) + 12px); }
.cat-bar { margin: 0 calc(-1 * var(--gutter)) 0; padding-top: 10px; padding-bottom: 10px; }
.cat-tabs { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow: visible; padding: 2px 0; }
.cat-tab { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 7px 0 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 700 13.5px/1 var(--body); cursor: pointer; white-space: nowrap; transition: transform .18s var(--spring), background-color .18s, color .18s, border-color .18s, opacity .18s; will-change: transform; }
@media (min-width: 1020px) {
  .cat-tabs { flex-wrap: nowrap; justify-content: space-between; }
  .cat-tab { flex: 1 1 auto; gap: 5px; padding: 0 6px 0 9px; font-size: clamp(11.5px, 1.02vw, 13.5px); }
}
.cat-tab:active { transform: scale(.96); }
.cat-tab-num { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.cat-tab i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(0, 0, 0, .1); }
.cat-tab-count { min-width: 22px; padding: 4px 6px; border-radius: 999px; background: var(--muted-surface); color: var(--text-2); font: 500 11px/1 var(--mono); text-align: center; }
.cat-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-tab[aria-selected="true"] .cat-tab-num { color: rgba(255, 255, 255, .75); }
.cat-tab[aria-selected="true"] .cat-tab-count { background: rgba(255, 255, 255, .18); color: #fff; }
.cat-tab[aria-selected="true"] i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.cat-tab.is-empty { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .cat-tab:hover { border-color: var(--primary); } }

.cat-filter { margin: 12px 0 0; padding: 11px 13px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.cat-filter .chips { margin-top: 0; display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 0; }
.cat-filter .chip { min-height: 34px; padding: 0 10.5px; font-size: 12.5px; gap: 6px; }
.cat-filter .count { margin-top: 8px; }
.cat-filter .count:empty { display: none; margin-top: 0; }

/* ---------- chapter panels + tile grid ---------- */
.cat-panel { outline: none; }
.cat-panel[hidden] { display: none; }
.cat.is-ready .cat-panel:not(.is-active) { display: none; }
.cat-panel.cat-in { animation: cat-rise .42s var(--spring) both; }
@keyframes cat-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.cat-head { display: grid; gap: 6px; margin: 18px 0 16px; }
.cat-head .eyebrow { margin: 0; }
.cat-head h3 { font: 400 clamp(30px, 4.2vw, 44px)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--primary); }
html[data-theme="dark"] .cat-head h3 { color: #f5f2ea; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .cat-head h3 { color: #f5f2ea; } }
.cat-head p { margin: 0; max-width: 62ch; color: var(--text-2); font-size: 16px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.cat-empty { display: grid; justify-items: start; gap: 10px; padding: 22px; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--text-2); }
.cat-empty[hidden] { display: none; }
.cat-empty p { margin: 0; }

.tile { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; text-align: left; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; font: inherit; transition: transform .22s var(--spring), box-shadow .22s var(--spring), border-color .22s; will-change: transform; -webkit-tap-highlight-color: transparent; }
.tile[hidden] { display: none; }
.tile:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--blend) 55%, var(--border)); }
  .tile:hover .tile-cup { transform: translate3d(0, -2px, 0) rotate(-3deg); }
  .tile:active { transform: scale(.97); }
}
.tile-art { display: grid; place-items: center; height: 108px; background: radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--blend) 42%, transparent), transparent 72%), color-mix(in srgb, var(--blend) 14%, var(--surface)); }
.tile .tile-cup { width: auto; height: 86px; aspect-ratio: 120 / 150; overflow: visible; transition: transform .35s var(--spring); }
.tile .tile-cup.glass-svg { aspect-ratio: 100 / 175; height: 90px; }
.tile-text { display: grid; gap: 5px; padding: 10px 12px 12px; min-width: 0; }
.tile-meta { display: flex; align-items: center; gap: 6px; }
.tile-num { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile-new { padding: 3px 6px; border-radius: 999px; background: var(--action); color: #fff; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; font: 800 15px/1.2 var(--body); letter-spacing: -.01em; color: var(--text); }
.tile-fruits { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tile-dots { display: flex; flex: none; padding-left: 1px; }
.tile-dots i { width: 10px; height: 10px; margin-right: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.tile-fnames { min-width: 0; margin-left: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--text-2); }
@media (min-width: 1000px) { .tile-art { height: 120px; } .tile .tile-cup { height: 96px; } .tile .tile-cup.glass-svg { height: 100px; } }
@media (max-width: 639px) {
  .tile-art { height: 90px; }
  .tile .tile-cup { height: 72px; }
  .tile .tile-cup.glass-svg { height: 78px; }
  .tile-text { gap: 4px; padding: 9px 11px 11px; }
  .cat-head { margin: 14px 0 12px; }
  .cat-head p { font-size: 15px; }
}
@media (max-width: 380px) { .tile-text { padding: 9px 10px 11px; } .tile-name { font-size: 14px; } }

/* ---------- the recipe page sheet ---------- */
html.cat-lock, html.cat-lock body { overflow: hidden; }
.cat-dialog { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px; }
.cat-dialog[hidden] { display: none; }
.cat-backdrop { position: absolute; inset: 0; background: rgba(7, 17, 11, .6); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); opacity: 0; transition: opacity .32s var(--spring); }
.cat-dialog.is-open .cat-backdrop { opacity: 1; }
.cat-sheet { position: relative; display: flex; flex-direction: column; width: min(940px, 100%); height: min(800px, calc(100dvh - 48px)); background: var(--bg); border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); overflow: hidden; outline: none; opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); transition: transform .44s var(--spring), opacity .3s var(--spring); will-change: transform, opacity; }
.cat-dialog.is-open .cat-sheet { opacity: 1; transform: none; }
.cat-grab { display: none; }
.cat-sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cat-where { flex: 1; min-width: 0; display: grid; gap: 4px; margin: 0; }
.cat-where-ch { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dark); }
.cat-where-page { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/1.2 var(--body); color: var(--text); }
.cat-close svg { width: 20px; height: 20px; }
.cat-stage { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.cat-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.cat-flip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 40%; min-height: 50px; padding: 0 16px 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; transition: transform .18s var(--spring), background-color .18s, border-color .18s, opacity .18s; will-change: transform; }
.cat-next { padding: 0 12px 0 16px; text-align: right; }
.cat-flip svg { flex: none; width: 20px; height: 20px; color: var(--action); }
.cat-flip span { display: grid; gap: 3px; min-width: 0; }
.cat-flip small { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cat-flip b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px/1.2 var(--body); }
.cat-flip:not(:disabled):active { transform: scale(.96); }
.cat-flip:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cat-flip:not(:disabled):hover { border-color: var(--primary); background: var(--primary-soft); } }
.cat-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; }
.cat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: transform .3s var(--spring), background-color .3s; }
.cat-dots i.on { background: var(--action); transform: scale(1.4); }

/* the page itself (pre-rendered .card, restyled as a book page) */
.cat-dialog .rpage { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; min-height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; content-visibility: visible; contain-intrinsic-size: none; background: linear-gradient(90deg, color-mix(in srgb, var(--blend) 12%, var(--surface)) 0 250px, transparent 250px); transition: none; }
.cat-dialog .rpage:hover { transform: none; box-shadow: none; }
.cat-dialog .rp-art { position: sticky; top: 0; align-self: start; display: grid; place-items: center; padding: 36px 30px; }
.cat-dialog .rp-art .cupwrap { width: 176px; padding: 0; filter: drop-shadow(0 18px 22px rgba(20, 26, 22, .16)); }
.cat-dialog .jcard .rp-art .cupwrap { width: 140px; }
.cat-dialog .rp-body { gap: 12px; padding: 28px 30px 34px; }
.cat-dialog .rpage .meta { flex-wrap: wrap; }
.cat-dialog .rpage h3 { font: 400 clamp(32px, 4.4vw, 48px)/.98 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--primary); }
html[data-theme="dark"] .cat-dialog .rpage h3 { color: #f5f2ea; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .cat-dialog .rpage h3 { color: #f5f2ea; } }
.rp-label { margin: 6px 0 0; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dark); }
.cat-dialog .rpage .ings { gap: 6px; }
.cat-dialog .rpage .ings li { font-size: 16px; color: var(--text); }
.cat-dialog .rpage .ings i { width: 12px; height: 12px; }
.cat-dialog .rpage .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cat-dialog .rp-how { margin-top: 8px; padding-top: 4px; border-top: 1px dashed var(--border-strong); }
.cat-dialog .rp-how .rp-label { margin: 10px 0 10px; }
.cat-dialog .rp-how .rd-inner { overflow: visible; }
/* dark mode: keep the chapter tag and the selected how-to tab readable */
html[data-theme="dark"] .cat-dialog .rpage .tag:not(.new), html[data-theme="dark"] .cat-dialog .rd-tab[aria-selected="true"] { color: var(--accent); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .cat-dialog .rpage .tag:not(.new), html:not([data-theme="light"]) .cat-dialog .rd-tab[aria-selected="true"] { color: var(--accent); } }

.cat-dialog .rpage.flip-next { animation: cat-page-next .4s var(--spring) both; }
.cat-dialog .rpage.flip-prev { animation: cat-page-prev .4s var(--spring) both; }
.cat-dialog .rpage.nudge-l { animation: cat-nudge-l .42s var(--spring); }
.cat-dialog .rpage.nudge-r { animation: cat-nudge-r .42s var(--spring); }
@keyframes cat-page-next { from { opacity: 0; transform: translate3d(44px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes cat-page-prev { from { opacity: 0; transform: translate3d(-44px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes cat-nudge-l { 0%, 100% { transform: none; } 35% { transform: translate3d(-14px, 0, 0); } }
@keyframes cat-nudge-r { 0%, 100% { transform: none; } 35% { transform: translate3d(14px, 0, 0); } }

/* phones: a bottom sheet that fills the screen, safe areas respected */
@media (max-width: 720px) {
  .cat-dialog { padding: 0; place-items: end stretch; }
  .cat-sheet { width: 100%; height: calc(100dvh - 10px - env(safe-area-inset-top)); border-radius: 24px 24px 0 0; border-bottom: 0; opacity: 1; transform: translate3d(0, 100%, 0); transition: transform .46s var(--spring); }
  .cat-grab { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong); }
  .cat-sheet-head { padding: 16px 10px 10px 18px; }
  .cat-dialog .rpage { grid-template-columns: minmax(0, 1fr); background: none; }
  .cat-dialog .rp-art { position: static; padding: 18px 0 10px; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--blend) 26%, transparent), transparent 72%), color-mix(in srgb, var(--blend) 10%, var(--surface)); }
  .cat-dialog .rp-art .cupwrap { width: 108px; }
  .cat-dialog .jcard .rp-art .cupwrap { width: 84px; }
  .cat-dialog .rp-body { padding: 18px 18px 26px; }
  .cat-dialog .rpage .actions .btn { flex: 1 1 auto; }
  .cat-sheet-foot { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .cat-flip { max-width: 42%; min-height: 48px; padding: 0 12px 0 8px; }
  .cat-next { padding: 0 8px 0 12px; }
  .cat-flip b { font-size: 13px; }
}
@media (max-width: 480px) {
  .cat-dots { display: none; }
  .cat-flip { max-width: calc(50% - 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-tab, .tile, .tile .tile-cup, .cat-flip, .cat-backdrop, .cat-sheet, .cat-dots i { transition-duration: .01ms !important; }
  .cat-panel.cat-in, .cat-dialog .rpage.flip-next, .cat-dialog .rpage.flip-prev, .cat-dialog .rpage.nudge-l, .cat-dialog .rpage.nudge-r { animation: none !important; }
  .tile:hover, .tile:hover .tile-cup { transform: none; }
}