/* Pomario Kitchen: the cellar as the hub (docs/specs/2026-10-10-kitchen-cellar-design.md).
   The scene's wood, glass and wall are the art's own colours; everything around it uses the fl-* tokens. */
.kc-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }

/* ---- the scene: a kitchen wall with the cellar, the counter with the basket, the fridge and the freezer ---- */
.kc-scene { position: relative; background: #EADFC8; border-radius: var(--fl-r-hero); padding: 10px; box-shadow: var(--fl-sh);
  background-image: linear-gradient(rgba(255,253,246,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,253,246,.35) 1px, transparent 1px);
  background-size: 22px 22px; background-position: 0 100%; }
.kc-cellar { background: #6B4528; border-radius: 20px 20px 10px 10px; padding: 0 9px 10px; box-shadow: inset 0 0 0 2px #573620, 0 10px 22px rgba(58,40,20,.28); }
.kc-crown { display: flex; min-height: 34px; align-items: center; justify-content: center; height: 34px; margin: 0 -9px 7px; border-radius: 18px 18px 0 0;
  background: linear-gradient(#83573A, #6B4528); border-bottom: 3px solid #4E301B; }
.kc-plaque { background: #F2E6C4; color: #3B2A1A; border-radius: 7px; padding: 3px 12px; font: 600 13px var(--fl-display); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(90,60,30,.4), 0 2px 0 rgba(0,0,0,.18); }
.kc-plaque b { font-weight: 700; font-size: 16px; }
/* the whole kitchen fits one phone screen: the hero (the cellar, or the fridge and freezer) is capped and scrolls inside */
.kc-cellar-in { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 8px; padding: 6px 6px 0;
  background-color: #563A27; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1.5px, transparent 1.5px 52px), linear-gradient(rgba(0,0,0,.18), transparent 24px);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.28); scrollbar-width: thin; scrollbar-color: #A8743F transparent; }
.kc-shelf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 3px; padding: 0 2px; background-repeat: repeat; background-size: 240px var(--rh); }
.kc-shelf + .kc-shelf { margin-top: 2px; }
.kc-jar { flex: none; width: var(--w); height: var(--rh); display: flex; align-items: flex-end; justify-content: center; padding: 0 0 9px; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kc-jar svg { display: block; overflow: visible; transition: transform .16s ease-out; }
.kc-jar:hover svg { transform: translateY(-3px); }
.kc-jar:active svg { transform: translateY(-1px) scale(.97); }
.kc-jar:focus-visible { outline: 2px solid var(--fl-lime); outline-offset: -2px; border-radius: 8px; }
.kc-more { align-self: center; color: var(--fl-cream); font: 700 15px var(--fl-display); padding: 0 10px 12px; }
.kc-chalk { margin: 0; width: 100%; padding: 30px 12px 0; align-self: flex-start; text-align: center; color: rgba(255,253,246,.88); font: 600 16px var(--fl-display); }
.kc-bare { min-height: var(--rh); }
.kc-lbl { font-family: var(--fl-display); font-weight: 700; fill: #3B2A1A; }
.kc-lbl-m { font-weight: 600; fill: #6B5338; }
.kc-ready svg { filter: drop-shadow(0 0 5px rgba(163,230,53,.95)); }

/* the counter: the basket on its wooden top, the two cabinets beside it */
.kc-counter { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.kc-basket { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; text-align: start; -webkit-tap-highlight-color: transparent; }
.kc-basket .kc-bk { display: block; width: 100%; max-width: 170px; max-height: 84px; height: auto; margin: 0 auto -2px; transition: transform .16s ease-out; }
.kc-basket:hover .kc-bk { transform: translateY(-2px); }
.kc-basket::after { content: ""; display: block; order: 2; height: 12px; border-radius: 4px 4px 0 0; background: linear-gradient(#CE9C63 0 3px, #A8743F 3px); }
.kc-bfigs { order: 3; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 5px 7px; background: #9A6B40; border-radius: 0 0 10px 10px; }
.kc-basket:not(:has(.kc-bfigs))::after { border-radius: 4px; height: 14px; }
.kc-bfig { flex: none; max-width: 100%; display: inline-flex; align-items: center; gap: 3px; min-width: 0; background: var(--fl-card); border-radius: 999px; padding: 2px 6px 2px 5px; font: 700 10.5px var(--fl-ui); color: var(--fl-ink); white-space: nowrap; }
.kc-bfig i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.kc-bfig span { overflow: hidden; text-overflow: ellipsis; }
.kc-bfig b { font: 700 11.5px var(--fl-display); }
.kc-bfig.more { padding: 3px 9px; }
.kc-basket:focus-visible, .kc-thumb:focus-visible { outline: 2px solid var(--fl-leaf); outline-offset: 3px; border-radius: 12px; }
/* the other place, small, on the counter */
.kc-thumb { flex: none; width: 66px; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kc-thumb svg { display: block; width: 100%; height: auto; transition: transform .16s ease-out; }
.kc-thumb:hover svg { transform: translateY(-3px); }
.kc-thumb-n { font: 700 11px var(--fl-display); fill: var(--fl-ink); }
.kc-scene[data-place="cellar"] .kc-thumb[data-kthumb="cellar"], .kc-scene[data-place="cold"] .kc-thumb[data-kthumb="cold"] { display: none; }

/* ---- the switch and the hero: one place at a time, the other waiting beside it ---- */
.kc-places { display: flex; width: 100%; box-sizing: border-box; margin: 0 0 8px; }
.kc-places { padding: 3px; }
.kc-places button, .kc-places button.on { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-size: 13px; padding: 7px 8px; }
.kc-places button span { overflow: hidden; text-overflow: ellipsis; }
.kc-places button b { font: 700 14px var(--fl-display); }
.kc-places button:not(.on):hover { background: rgba(103,160,58,.14); }
.kc-stage { position: relative; height: clamp(250px, calc(43vh + 6px), 500px); overflow: hidden; border-radius: 20px 20px 10px 10px; touch-action: pan-y; }
.kc-track { display: flex; width: 200%; height: 100%; direction: ltr; transition: transform .4s cubic-bezier(.3,.8,.25,1); }
.kc-pane { width: 50%; height: 100%; flex: none; direction: initial; transition: transform .4s cubic-bezier(.3,.8,.25,1), opacity .4s; }
.kc-scene[data-place="cold"] .kc-track { transform: translateX(-50%); }
.kc-scene[data-place="cold"] .kc-pane[data-pane="cellar"], .kc-scene[data-place="cellar"] .kc-pane[data-pane="cold"] { transform: scale(.86); opacity: .35; }
.kc-pane .kc-cellar { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }

/* ---- the fridge and freezer: one tall appliance, freezer on top, fridge below, a door on each ----
   The furniture is drawn like the cellar's planks: shelf tiles repeating under every row, always at least their own number of
   shelves, so the containers stand on them and an empty fridge still looks like a fridge. The open fridge door shows its bins. */
.kc-fz { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; padding: 6px; margin: 0 3% 0 18%; border-radius: 20px 20px 12px 12px;
  background: linear-gradient(90deg, #E9E3D5, #F7F3EA 18%, #F4EFE4 80%, #E2DACA); box-shadow: inset 0 0 0 2px #CFC6B2, 0 10px 22px rgba(58,40,20,.22); }
.kc-comp { position: relative; border-radius: 14px; }
.kc-comp-z { flex: 0 0 43%; }
.kc-comp-f { flex: 1; min-height: 0; }
.kc-int { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; padding: 20px 6px 6px; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; }
/* the shelves scroll inside when full; the drawers stay at the bottom, always in view */
.kc-shelfwrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* the freezer: frost at the edges */
.kc-zint { background: linear-gradient(#DCE9F1, #EEF4F8); box-shadow: inset 0 3px 10px rgba(60,90,110,.25), inset 0 0 0 3px rgba(255,255,255,.7), inset 0 0 14px 4px rgba(255,255,255,.75); }
/* the fridge: a light strip at the top */
.kc-fint { background: linear-gradient(#FFFDF6, #F1ECE0); box-shadow: inset 0 3px 10px rgba(80,70,50,.2); }
.kc-strip { position: absolute; top: 5px; left: 24%; right: 24%; height: 4px; border-radius: 3px; background: #FFF6D6; box-shadow: 0 0 10px 3px rgba(255,240,190,.9); pointer-events: none; }
.kc-cplaque { position: absolute; top: 3px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 5px; font: 800 11px var(--fl-ui); color: #5A6A73; z-index: 1; }
.kc-fint .kc-cplaque { color: #6B6A5A; }
.kc-cplaque b { font: 700 13px var(--fl-display); color: var(--fl-ink); }
/* shelves: full width, fixed heights, containers standing on the line and filling left to right */
.kc-shelves { flex: none; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-end; min-height: calc(var(--rh) * var(--rows));
  background-repeat: repeat-y; background-size: 100% var(--rh); }
.kc-shelves .kc-jar { height: var(--rh); padding: 0 1px 7px; box-sizing: border-box; }
.kc-bin .kc-jar { padding-bottom: 6px; }
/* drawers: a front panel with its handle, the containers standing inside, their tops showing above the front */
.kc-drawer { flex: none; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 38px; border-radius: 8px 8px 10px 10px; background: rgba(150,180,195,.14); box-shadow: inset 0 0 0 1px rgba(150,180,195,.35); }
.kc-dr-in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 2px; padding: 4px 8px 0; min-height: 22px; }
.kc-dr-in { max-height: 34px; overflow: hidden; }
.kc-dr-in .kc-jar { height: auto; padding: 0 0 2px; margin-bottom: -10px; }
.kc-dr-front { position: relative; z-index: 1; height: 18px; border-radius: 6px 6px 9px 9px; background: linear-gradient(rgba(234,244,248,.86), rgba(214,228,236,.93)); box-shadow: inset 0 1px 0 #FFFFFF, 0 -1px 0 rgba(120,150,165,.5), 0 2px 3px rgba(40,60,72,.12); display: grid; place-items: center; }
.kc-dr-handle { width: 32%; height: 5px; border-radius: 3px; background: linear-gradient(#9FB5C4, #7C93A3); }
.kc-fint .kc-drawer { background: rgba(160,200,210,.12); }
.kc-fint .kc-dr-front { background: linear-gradient(rgba(240,248,246,.82), rgba(220,234,232,.92)); }
.kc-fint .kc-dr-handle { background: linear-gradient(#B9B19C, #978F7A); }
.kc-crispers { flex: none; display: flex; gap: 6px; }
.kc-crispers .kc-drawer { flex: 1; min-width: 0; }
/* the inside of the fridge door: its bins, seen beside the cabinet once the door has swung open */
.kc-doorin { position: absolute; top: 0; bottom: 0; right: calc(100% + 4px); width: 54px; border-radius: 12px 4px 4px 12px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(90deg, #E2DACA, #F1ECE1); box-shadow: inset 0 0 0 1.5px #D2C9B5, -3px 4px 10px rgba(58,40,20,.14);
  transform-origin: 100% 50%; transform: perspective(600px) rotateY(60deg); opacity: 0; transition: opacity .1s; pointer-events: none; }
.kc-comp-z .kc-doorin { background: linear-gradient(90deg, #CFDCE5, #E3ECF2); box-shadow: inset 0 0 0 1.5px #A9BDCA, -3px 4px 10px rgba(40,60,72,.14); }
.kc-doorbins { overflow-y: auto; scrollbar-width: none; padding: 8px 3px 4px; }
.kc-fz.open .kc-doorin { opacity: 1; transform: perspective(600px) rotateY(18deg); pointer-events: auto; transition: transform .28s ease-out .3s, opacity .12s linear .3s; }
/* the interior light comes up as the door swings open */
.kc-light { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity .45s ease-out .12s;
  background: radial-gradient(ellipse at 50% 0, rgba(255,247,214,.85), rgba(255,247,214,0) 70%); }
.kc-fz.open .kc-light { opacity: .7; }
/* the doors: hinged on the left, swung open in 3D */
.kc-door { position: absolute; inset: 0; z-index: 2; border: 0; margin: 0; padding: 0; cursor: pointer; border-radius: 14px; transform-origin: 0 50%;
  transform: perspective(900px) rotateY(0deg); transition: transform .45s cubic-bezier(.45,.05,.3,1), box-shadow .45s; backface-visibility: visible;
  background: linear-gradient(90deg, #F2EDE1, #FBF8F1 30%, #F6F2E8); box-shadow: inset 0 0 0 1.5px #D2C9B5, 0 2px 4px rgba(58,40,20,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; -webkit-tap-highlight-color: transparent; }
.kc-comp-z .kc-door { background: linear-gradient(90deg, #DCE7EE, #EDF3F7 30%, #E6EEF3); box-shadow: inset 0 0 0 1.5px #A9BDCA, 0 2px 4px rgba(40,60,72,.14); }
.kc-handle { position: absolute; top: 18%; bottom: 18%; inset-inline-start: 10px; width: 7px; border-radius: 4px; background: linear-gradient(90deg, #A9A291, #D9D3C3); }
.kc-comp-z .kc-handle { background: linear-gradient(90deg, #8FA6B5, #C8D7E1); }
.kc-dlbl { font: 800 12px var(--fl-ui); color: #66735F; letter-spacing: .02em; }
.kc-dn { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--fl-card); box-shadow: inset 0 0 0 1.5px #C9BFA8; font: 700 24px var(--fl-display); color: var(--fl-ink); }
.kc-fz.open .kc-door { transform: perspective(900px) rotateY(-104deg); box-shadow: inset 0 0 0 1.5px #D2C9B5, -10px 0 18px rgba(58,40,20,.15); pointer-events: none; }
.kc-fz.open .kc-door { opacity: 0; transition: transform .45s cubic-bezier(.45,.05,.3,1), opacity .1s linear .36s; }
.kc-fz.open .kc-comp-f .kc-door { transition-delay: .08s; }
/* the inside of an open door is its plain liner: the label and the count turn away with it */
.kc-door > * { transition: opacity .18s ease-out .12s; }
.kc-fz.open .kc-door > * { opacity: 0; }
.kc-fz.open .kc-door { background: linear-gradient(90deg, #E6DFD0, #F1ECE1); }
.kc-fz.open .kc-comp-z .kc-door { background: linear-gradient(90deg, #D2DFE7, #E3ECF2); }
/* the contents pop in as the doors open (once; the animation never loops) */
@keyframes kc-popin { from { opacity: 0; transform: translateY(8px) scale(.7); } }
.kc-fz.opening .kc-item svg { animation: kc-popin .34s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(.32s + min(var(--i), 24) * 30ms); }
.kc-scene:not([data-place="cold"]) .kc-pane[data-pane="cold"] *, .kc-scene[data-place="cold"] .kc-pane[data-pane="cellar"] * { pointer-events: none; }

/* the page under the scene */
.kc-acts { gap: 10px; }
.kc-rows .fl-li-l { font-size: 16px; }
.kc-rn { font: 700 17px var(--fl-display); color: var(--fl-ink); }
.kc-chev { color: #C8C0A8; font-weight: 800; font-size: 18px; }
.kc-fig { font: 700 14px var(--fl-display); color: var(--fl-ink); white-space: nowrap; }

/* ---- motion: jars filling, leaving, glass returning and sliding in, bubbles, the ribbon ---- */
@keyframes kc-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kc-pop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes kc-leave { to { transform: translateY(-30px) scale(.9); opacity: 0; } }
@keyframes kc-back { from { opacity: 0; transform: translateY(-16px); } }
@keyframes kc-in { from { opacity: 0; transform: translateX(52px); } }
@keyframes kc-bub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .95; } 100% { transform: translateY(calc(-1 * var(--bh))); opacity: 0; } }
@keyframes kc-sway { 50% { transform: rotate(5deg); } }
@keyframes kc-glow { 50% { filter: drop-shadow(0 0 1px rgba(163,230,53,.3)); } }
@keyframes kc-flash { from { background: rgba(163,230,53,.45); } }
.kc-new .kc-liq { transform-box: fill-box; transform-origin: 50% 100%; animation: kc-rise .75s cubic-bezier(.3,.7,.3,1) both; animation-delay: var(--d); }
.kc-new .kc-paper, .kc-new .kc-lid { animation: kc-pop .36s ease-out both; animation-delay: calc(var(--d) + .6s); }
.kc-leave svg { animation: kc-leave .45s ease-in forwards; }
.kc-return svg { animation: kc-back .55s cubic-bezier(.2,1.3,.4,1) both; }
.kc-slide svg { animation: kc-in .6s cubic-bezier(.2,1,.3,1) both; animation-delay: var(--d); }
.kc-bub { transform-box: fill-box; animation: kc-bub 2.6s ease-in 2; animation-delay: var(--bd); }
.kc-ribbon { transform-box: fill-box; transform-origin: 30% 20%; animation: kc-sway 3.4s ease-in-out 2; }
.kc-ready svg { animation: kc-glow 2.2s ease-in-out 3; }
.kc-focus { animation: kc-flash 1.6s ease-out; background: rgba(163,230,53,.14); }
@media (prefers-reduced-motion: reduce) {
  .kc-scene *, .kc-sheet *, .kc-page * { animation: none !important; transition: none !important; }
  /* an instant switch: the doors stand open */
  .kc-scene[data-place="cold"] .kc-fz .kc-door { transform: perspective(900px) rotateY(-104deg); pointer-events: none; }
  .kc-scene[data-place="cold"] .kc-fz .kc-light { opacity: .7; }
  .kc-scene[data-place="cold"] .kc-fz .kc-door { opacity: 0; }
  .kc-scene[data-place="cold"] .kc-fz .kc-doorin { opacity: 1; transform: perspective(600px) rotateY(18deg); pointer-events: auto; }
}

/* ---- sheets ---- */
.kc-headr { display: flex; align-items: center; gap: 10px; flex: none; }
.kc-sheet .fl-sheethead .fl-h2 { text-wrap: balance; }
.kc-dots { display: inline-flex; gap: 4px; }
.kc-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--fl-inset); }
.kc-dots i.on { background: var(--fl-ink); }
.kc-dots i.done { background: var(--fl-leaf); }
.kc-step-h { margin: 6px 2px 12px; font: 600 19px var(--fl-display); color: var(--fl-ink); }
.kc-empty-s { margin: 12px 2px; font-size: 15px; color: var(--fl-ink); line-height: 1.45; }
.kc-search { margin: 10px 0 8px; }
.kc-chips { display: flex; gap: 6px; }
.kc-chips.scroll { overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; margin: 0 -2px; }
.kc-chips.scroll::-webkit-scrollbar { display: none; }
.kc-chips.wrap { flex-wrap: wrap; }
.kc-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: var(--fl-card); color: var(--fl-moss); border-radius: 999px; padding: 8px 14px; font: 800 13px var(--fl-ui); box-shadow: var(--fl-sh-btn); -webkit-tap-highlight-color: transparent; }
.kc-chip:hover { background: var(--fl-green-soft); }
.kc-chip.on, .kc-chip.on:hover { background: var(--fl-ink); color: var(--fl-cream); }
.kc-chip.crop { padding: 4px 13px 4px 5px; }
.kc-chip b { font: 700 14px var(--fl-display); }
.kc-subh { margin: 12px 4px 8px; }

/* Make something: the recipe cards and tonight's dishes */
.kc-rcards { display: flex; flex-direction: column; gap: 8px; }
.kc-rcard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; border: 0; cursor: pointer; background: var(--fl-card); border-radius: 22px; padding: 8px 14px 8px 10px; box-shadow: var(--fl-sh); transition: box-shadow .15s ease; }
.kc-rcard:hover { box-shadow: var(--fl-sh-float); }
.kc-rcard:active { transform: scale(.99); }
.kc-rart { flex: none; width: 40px; display: flex; justify-content: center; }
.kc-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kc-rmain b { font: 600 17px var(--fl-display); color: var(--fl-ink); line-height: 1.2; }
.kc-rchips { display: flex; flex-wrap: wrap; gap: 5px; }
.kc-rfig { flex: none; font: 700 17px var(--fl-display); color: var(--fl-ink); white-space: nowrap; }
.kc-dishes { display: flex; flex-direction: column; gap: 8px; }
.kc-dish { background: var(--fl-card); border-radius: 22px; box-shadow: var(--fl-sh); }
.kc-dish-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; cursor: pointer; text-align: start; padding: 10px 14px 10px 10px; border-radius: 22px; }
.kc-dish-h:hover { background: rgba(103,160,58,.06); }
.kc-dish-h b { flex: 1; min-width: 0; font: 600 17px var(--fl-display); color: var(--fl-ink); }
.kc-dglyphs { display: flex; flex: none; }
.kc-dglyphs svg + svg { margin-inline-start: -9px; }
.kc-dmin { flex: none; font: 700 13px var(--fl-ui); color: var(--fl-moss); background: var(--fl-green-soft); border-radius: 999px; padding: 3px 10px; }
.kc-dish-b { padding: 0 16px 14px; }
.kc-dish-b p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--fl-ink); }

/* Make it */
.kc-ins { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kc-in { display: flex; align-items: center; gap: 10px; background: var(--fl-card); border-radius: 20px; padding: 8px 10px; box-shadow: var(--fl-sh); }
.kc-in-n { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kc-in-n b { font: 800 15px var(--fl-ui); color: var(--fl-ink); }
.kc-step { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.kc-step button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fl-inset); color: var(--fl-ink); font: 800 18px var(--fl-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kc-step button:last-child { background: var(--fl-moss); color: #fff; }
.kc-step button:hover { filter: brightness(.95); }
.kc-step button:disabled { opacity: .4; cursor: default; }
.kc-step b { min-width: 2.2ch; text-align: center; font: 700 18px var(--fl-display); color: var(--fl-ink); }
.kc-step.big button { width: 40px; height: 40px; }
.kc-step.big b { font-size: 21px; min-width: 3.6ch; }
.kc-step.big small { font: 700 12px var(--fl-ui); color: var(--fl-muted); margin-inline-start: 3px; }
.kc-mini-cellar { background: #563A27; border-radius: 18px; padding: 8px 8px 4px; margin-bottom: 12px; max-height: 320px; overflow-y: auto; box-shadow: inset 0 4px 10px rgba(0,0,0,.25); }
.kc-pickname { color: rgba(255,253,246,.9); font: 700 12.5px var(--fl-ui); margin: 4px 4px 10px; }
.kc-pick.on svg { filter: drop-shadow(0 0 5px rgba(163,230,53,.95)); }
.kc-addrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kc-confirm { display: flex; justify-content: center; padding: 4px 0 14px; }
.kc-sheet .fl-tiles + .fl-input, .kc-sheet .fl-tiles ~ .fl-input { margin-top: 12px; }

/* the app's own dropdown, as a pill */
.kc-dd { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border: 0; cursor: pointer; background: var(--fl-card); color: var(--fl-ink); border-radius: 999px; padding: 9px 14px; font: 700 14px var(--fl-ui); box-shadow: var(--fl-sh-btn); }
.kc-dd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-dd:hover { background: var(--fl-green-soft); }
.kc-dd-menu .kc-dd-h { padding: 9px 12px 3px; font: 800 12px var(--fl-ui); color: var(--fl-moss); }
.kc-dd-menu .dd-opt:hover, .kc-clist .dd-opt:hover { background: rgba(103,160,58,.16); }

/* the jar sheet and the empty glass */
.kc-jarhead { display: flex; justify-content: center; align-items: flex-end; margin: 2px auto 14px; padding: 0 30px 8px; width: max-content; border-bottom: 9px solid #A8743F; border-radius: 0 0 4px 4px; box-shadow: 0 3px 0 #6E4524; }
.kc-acts2 { margin: 14px 0 4px; flex-wrap: wrap; gap: 8px; }
.kc-seg button { padding: 6px 10px; font-size: 12.5px; }
.kc-seg button:not(.on):hover { background: rgba(103,160,58,.14); }
.kc-mini { display: inline-flex; justify-content: center; align-items: flex-end; width: 30px; flex: none; }
.kc-mini svg { display: block; }
.kc-when { color: var(--fl-moss); font-weight: 700; font-size: 13px; }

/* Add */
.kc-atiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.kc-atile { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--fl-card); border-radius: 24px; padding: 18px 12px 16px; box-shadow: var(--fl-sh); text-align: center; transition: box-shadow .15s ease; }
.kc-atile:hover { box-shadow: var(--fl-sh-float); }
.kc-atile b { font: 600 16px var(--fl-display); color: var(--fl-ink); line-height: 1.25; }
.kc-aart { height: 78px; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px 6px; border-bottom: 6px solid #A8743F; }
.kc-boughtart { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px; min-height: 96px; margin: 6px 0 12px; padding: 10px 10px 4px; border-radius: 18px; background: #563A27; border-bottom: 10px solid #A8743F; }
.kc-combo { position: relative; margin-bottom: 12px; }
.kc-combo .fl-input { margin-top: 6px; }
.kc-clist { margin-top: 6px; max-height: 260px; overflow-y: auto; padding: 4px; background: var(--fl-card); border-radius: 18px; box-shadow: var(--fl-sh-float); }
.kc-copt { justify-content: flex-start !important; gap: 10px; border-radius: 12px; }
.kc-sheet .fl-list + .fl-pills, .kc-sheet .fl-list + div > .kc-dd, .kc-sheet .fl-group > div > .kc-dd { margin-top: 10px; }
.kc-sheet .fl-group > .fl-pills { margin-top: 2px; }

@media (min-width: 900px) {
  .kc-page { max-width: 1120px; }
  .kc-scene { display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-rows: auto 1fr; gap: 0 16px; align-items: start; padding: 16px; }
  .kc-places { grid-column: 1; max-width: 520px; }
  .kc-stage { grid-column: 1; height: 440px; zoom: 1.25; }
  .kc-counter { grid-column: 2; grid-row: 1 / 3; flex-direction: column-reverse; align-items: center; margin-top: 0; gap: 18px; padding-top: 30px; }
  .kc-basket { width: 100%; flex: none; }
  .kc-thumb { width: 104px; }
  .kc-basket .kc-bk { max-width: 250px; max-height: none; }
  .kc-bfig { font-size: 12.5px; padding: 3px 9px 3px 7px; }
  .kc-bfig b { font-size: 14px; }
  .kc-acts { max-width: 520px; }
  .kc-rows { max-width: 520px; }
  /* on a wide screen the fridge keeps a fridge's shape - narrow and centred - so its containers fill its shelves instead of
     standing small in a cabinet as wide as the cellar */
  .kc-fz { width: min(100% - 70px, 330px); margin: 0 auto; left: 30px; }
  .kc-doorin { width: 62px; }
}


/* rows in the Kitchen's sheets keep their art beside the name, never above it */
.kc-sheet .fl-li-l { flex-wrap: nowrap; }
.kc-sheet .fl-li-l > span:not(.kc-mini):not(.fl-chip) { min-width: 0; }
.kc-sheet .fl-li-r { max-width: 62%; flex-wrap: wrap; justify-content: flex-end; }
.kc-sheet .kc-when { flex: none; }
/* a row whose control is wider than the phone allows takes a line of its own under its label */
.kc-sheet .fl-li.kc-wrap { flex-wrap: wrap; }
.kc-sheet .fl-li.kc-wrap .fl-li-r { max-width: none; margin-inline-start: auto; }

/* Put up with no empty jars or containers: one plain line and the way to add them */
.kc-needjars { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--fl-card); border-radius: 20px; padding: 16px; box-shadow: 0 4px 14px rgba(58,50,32,.06); }
.kc-needjars p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fl-ink); }

/* the cellar's small motions play a few times when it opens, then rest: an endless loop kept a phone restyling the page every frame */

/* on a phone the basket's figures stand beside it on the counter, so the hero keeps the height a fridge needs */
@media (max-width: 899px) {
  .kc-basket { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .kc-basket .kc-bk { width: 44%; max-width: 150px; margin: 0 0 -2px; order: 1; }
  .kc-bfigs { order: 2; flex: 1; min-width: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; background: none; padding: 0 0 6px 6px; border-radius: 0; }
  .kc-basket::after { order: 3; flex: 0 0 100%; border-radius: 4px; height: 13px; }
}