/* Grocery Aisles 4 Us main screen: a bright aisle you stand in, and a dark strip along the bottom that is you.
   Portrait-first: everything here has to read on a phone held upright. */
:root {
  --wall: #EAF6F1;
  --floor: #CFE7DD;
  --shelf: #FFFFFF;
  --plank: #D9B48A;
  --plank-d: #B98A5A;
}
body { overflow: hidden; }
#app { height: 100%; display: flex; flex-direction: column; }

/* ---------------- top bar ---------------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--ink); color: #fff; border-bottom: 3px solid var(--mito); flex-wrap: wrap; min-height: 54px; }
.topbar .logo { font-size: 20px; }
.player-chip { display: flex; align-items: center; gap: 7px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 999px; padding: 5px 12px 5px 8px; color: #fff; font-size: 13px; max-width: 240px; }
.player-chip:hover { background: var(--ink-3); }
#playerText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-chip { background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13px; min-width: 6.4em; text-align: center; }
.meters { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.meters .m { display: flex; align-items: center; gap: 6px; font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: #B9BDE8; }
.meters .m b { font-size: 13px; color: #fff; min-width: 1.8em; }
.topbar .mbar { width: 74px; height: 8px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 999px; overflow: hidden; }
.topbar .mbar div { height: 100%; border-radius: 999px; transition: width 0.4s ease; background: linear-gradient(90deg, #E0A526, #E8505B); }
.topbar .m.wp .mbar div { background: linear-gradient(90deg, #2A6FB0, #5FD3FF); }
.topbar .m.hp .mbar div { background: linear-gradient(90deg, var(--mito-d), var(--mito)); }
.topbar .m.bad b { color: #FF9A9A; }
.lvl-chip { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: #fff; padding: 2px 4px; font-size: 12.5px; }
.ring { --p: 0%; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--tag) var(--p), var(--ink-3) 0); display: inline-block; position: relative; }
.ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
.bar-btns { display: flex; gap: 6px; }
#btnNotes { position: relative; }
.toasts { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(400px, calc(100% - 32px)); }

/* ---------------- layout ---------------- */
.home { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.stage { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.aisle { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--wall) 0 72%, var(--floor) 72% 100%); }
.aisle-head { display: flex; gap: 10px; align-items: center; padding: 10px 16px 6px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; padding: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: flex; align-items: center; gap: 6px; border: 1px solid #BFD9CE; background: #fff; border-radius: 999px; padding: 6px 12px 6px 9px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tab .te { font-size: 17px; line-height: 1; }
.tab .tp { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.tab:hover { border-color: var(--ink-3); }
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab.on .tp { color: var(--tag); }
.tab.done .tp::after { content: " ✓"; color: var(--good); }
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
.tab.menu { background: #FFF6D1; border-color: #F1D595; }
.tab.menu.on { background: var(--mito); color: #fff; border-color: var(--mito-d); }
#search.aisle-search { width: 180px; flex: none; padding: 8px 12px; border: 1px solid #BFD9CE; border-radius: 999px; font: inherit; font-size: 13.5px; background: #fff; }
.ribbon { margin: 0 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); padding: 6px 12px; background: rgba(255,255,255,0.7); border-radius: 10px; min-height: 32px; }
.ribbon i { font-style: normal; color: var(--warn); font-weight: 700; font-size: 11.5px; }
.ribbon .rib-c { font-size: 12px; font-weight: 700; color: var(--ink); }
.ribbon.ask { background: var(--mito); color: #fff; font-size: 14px; justify-content: flex-start; }
.ribbon.ask b { font: 14px var(--f-display); letter-spacing: 0.02em; }
.ribbon.day { background: var(--ink); color: #D9DCFF; justify-content: flex-start; }
.ribbon.day b { color: #fff; }
/* swapping a door's plate: whose plate, what a tap does, and how to leave */
.ribbon.ask.swap { background: var(--ink); border-left: 8px solid var(--lane, var(--mito)); justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; }
.ribbon.swap .rib-lane { font: 14px var(--f-display); letter-spacing: 0.02em; }
.ribbon.swap .rib-slot { font: 700 11.5px var(--f-mono); font-style: normal; color: #A2A7D8; letter-spacing: 0.04em; }
.ribbon.swap .rib-help { flex: 1 1 260px; font-size: 13px; color: #D9DCFF; order: 4; }
.ribbon.swap .rib-what { color: #FFD447; font-weight: 700; }
.ribbon.swap.replacing { box-shadow: 0 0 0 3px #FFD447; }
.ribbon.swap .rib-btn.back { margin: 0; background: #fff; color: var(--ink); padding: 6px 14px; min-height: 32px; font-size: 13px; }
.ribbon.swap .rib-btn.back:hover { background: #FFE7A3; }
.rib-btn.cancel { background: #FFD447; order: 5; min-height: 32px; padding: 6px 14px; }
.shelves.replacing .prod:not(.usual) .prod-main { cursor: copy; }
.shelves.replacing .prod:not(.usual) .pack { outline: 2px dashed rgba(23,26,58,0.5); outline-offset: 4px; }
.shelves.replacing .prod:not(.usual):hover .pack { outline: 3px dashed #FFD447; outline-offset: 4px; }
body.swapping .tag.q { display: none; }
body.swapping .tab { position: relative; }
/* a tab that holds food from the plate: a dot with a dark ring, so it shows on the white tab too */
body.swapping .tab.has::after { content: ""; position: absolute; top: -3px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #FFD447; box-shadow: 0 0 0 2px var(--ink); }
.tab .tab-has { display: none; }
body.swapping .tab.has .tab-has { display: block; }
.plate-cap { display: none; font: 700 11px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #A2A7D8; margin: 0 0 4px 2px; align-items: center; gap: 4px 10px; justify-content: space-between; flex-wrap: wrap; }
.plate-cap b { color: #fff; font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.plate-cap em { font-style: normal; color: #FFD447; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 12px; }
.plate-cap .cap-btns { display: inline-flex; gap: 6px; }
.plate-cap .cap-btn { border: 1px solid #A2A7D8; background: transparent; color: #fff; border-radius: 999px; padding: 3px 12px; min-height: 26px; font: 700 12px var(--f-body); letter-spacing: 0; text-transform: none; }
.plate-cap .cap-btn:hover { background: #fff; color: var(--ink); }
body.swapping .plate-cap { display: flex; }
.you .pchip .pc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.swapping .you .plate > .pchip { max-width: 100%; }
.you .pchip button { flex: none; }
.you .pchip button.pc-swap { width: auto; padding: 0 9px; height: 22px; border-radius: 999px; background: #FFE7A3; font-size: 12px; margin: 0 2px; white-space: nowrap; }
.you .pchip button.pc-swap[aria-pressed="true"] { background: #FFD447; box-shadow: 0 0 0 2px var(--ink); }
.you .pchip.replacing { box-shadow: 0 0 0 3px #FFD447; }
.fx-vs { color: #C9CCF0; }
/* keyboard focus on the light aisle and white chips: the global yellow ring only shows on the dark strip */
.aisle button:focus-visible, .aisle input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.ribbon.swap button:focus-visible { outline-color: #FFD447; box-shadow: none; }
.you .pchip button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.you .plate-cap .cap-btn:focus-visible { outline-color: #FFD447; }
.rib-btn { margin-left: auto; border: 0; background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; }

.shelf-wrap { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.nav { flex: none; width: 44px; border: 0; background: none; font-size: 40px; color: var(--ink-3); line-height: 1; }
.nav:hover { color: var(--mito); }
.shelves { flex: 1; min-width: 0; overflow-y: auto; padding: 4px 0 16px; touch-action: pan-y; }
.shelves.locked { pointer-events: none; filter: saturate(0.5); opacity: 0.55; }
.shelves.slide-l { animation: slideL 0.28s ease; }
.shelves.slide-r { animation: slideR 0.28s ease; }
@keyframes slideL { from { transform: translateX(40px); opacity: 0.2; } }
@keyframes slideR { from { transform: translateX(-40px); opacity: 0.2; } }
.sign { width: fit-content; margin: 0 auto 6px; background: var(--ink); color: #fff; border-radius: 0 0 12px 12px; padding: 5px 18px 7px; display: flex; gap: 10px; align-items: baseline; box-shadow: 0 3px 0 rgba(23,26,58,0.18); }
.sign-n { color: var(--tag); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.sign-t { font: 15px var(--f-display); letter-spacing: 0.03em; }
.shelf-row { display: flex; justify-content: center; gap: 10px; padding: 12px 10px 0; position: relative; margin-bottom: 18px; }
.shelf-row::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -12px; height: 12px; border-radius: 4px; background: linear-gradient(180deg, var(--plank), var(--plank-d)); box-shadow: 0 6px 10px rgba(23,26,58,0.12); }
.empty-shelf { text-align: center; color: var(--muted); padding: 30px 16px; }

/* ---------------- products ---------------- */
.prod { position: relative; width: 132px; flex: none; text-align: center; }
.prod-main { border: 0; background: none; padding: 0 0 8px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 14px; }
.pack { --c: #ccc; width: 84px; height: 96px; border-radius: 10px; background: var(--c); display: grid; place-items: center; position: relative; box-shadow: inset -8px 0 0 rgba(0,0,0,0.10), inset 0 3px 0 rgba(255,255,255,0.35), 0 4px 0 rgba(23,26,58,0.16); transition: transform 0.15s ease; }
.pack-e { font-size: 38px; line-height: 1; width: 58px; height: 58px; border-radius: 12px; background: rgba(255,255,255,0.92); display: grid; place-items: center; }
.pk-can, .pk-cup { width: 66px; border-radius: 16px; }
.pk-bottle, .pk-jug { width: 62px; border-radius: 18px 18px 12px 12px; }
.pk-bottle::before, .pk-jug::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 24px; height: 12px; border-radius: 5px 5px 0 0; background: var(--c); filter: brightness(0.85); }
.pk-bag { border-radius: 14px 14px 10px 10px; border-top: 4px dashed rgba(255,255,255,0.7); }
.pk-jar, .pk-canister, .pk-tub { border-radius: 14px; height: 88px; }
.pk-jar::before, .pk-canister::before, .pk-tub::before { content: ""; position: absolute; top: -6px; left: 8px; right: 8px; height: 9px; border-radius: 5px; background: var(--ink-3); }
.pk-carton, .pk-tray, .pk-block, .pk-bar, .pk-pack, .pk-loaf { height: 78px; width: 96px; }
.pk-loose { background: none; box-shadow: none; }
.pk-loose .pack-e { font-size: 58px; background: none; width: auto; height: auto; filter: drop-shadow(0 5px 0 rgba(23,26,58,0.14)); }
.prod-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ink); max-width: 124px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.prod-main:hover .pack { transform: translateY(-4px) rotate(-2deg); }
.prod-main:active .pack { transform: scale(0.94); }
.prod.on .pack { outline: 3px solid var(--mito); outline-offset: 3px; }
.prod.bump .pack { animation: bumpPack 0.3s ease; }
@keyframes bumpPack { 40% { transform: translateY(-10px) scale(1.06) rotate(3deg); } }
.prod.hl .pack { animation: hlPack 1.1s ease-in-out infinite; }
@keyframes hlPack { 50% { outline: 4px solid var(--tag); outline-offset: 5px; transform: translateY(-3px); } }
.tag { position: absolute; top: 2px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 17px var(--f-display); color: #fff; transform: rotate(9deg); box-shadow: 0 2px 0 rgba(23,26,58,0.25); pointer-events: none; }
.tag.q { background: var(--tag); color: var(--ink); animation: wiggle 2.6s ease-in-out infinite; }
.tag.q.big { position: static; width: 52px; height: 52px; font-size: 28px; flex: none; }
@keyframes wiggle { 0%, 86%, 100% { transform: rotate(9deg); } 90% { transform: rotate(-8deg) scale(1.12); } 95% { transform: rotate(14deg) scale(1.12); } }
.prod.flip .tag { animation: flipTag 0.7s ease; }
@keyframes flipTag { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(90deg) scale(1.5); } 100% { transform: rotateY(0) rotate(9deg) scale(1); } }
.tag.usual-tag { width: auto; min-width: 40px; height: 22px; right: 4px; padding: 0 8px; border-radius: 999px; background: var(--ink); font: 700 11px/22px var(--f-mono); white-space: nowrap; }
.count { position: absolute; top: 0; left: 10px; background: var(--mito); color: #fff; border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 12.5px; box-shadow: 0 2px 0 var(--mito-d); }
.info { position: absolute; right: 12px; top: 72px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-3); font: italic 700 13px Georgia, serif; line-height: 1; padding: 0; }
.info:hover { background: var(--ink); color: #fff; }
.prod.usual .prod-name { max-width: 128px; }

/* ---------------- moments over the shelf ---------------- */
.moment { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px 16px; background: rgba(23,26,58,0.42); overflow-y: auto; }
.moment-card { width: min(680px, 100%); animation: dcIn 0.25s ease; }
.result, .morning { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 18px 50px rgba(10,12,40,0.4); }
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.res-title { font: 17px/1.2 var(--f-display); text-wrap: balance; }
.res-title span { font: 400 13px var(--f-body); color: var(--muted); }
.res-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; }
.res-stats b { display: block; font: 700 19px var(--f-mono); }
.res-stats span { font-size: 11.5px; color: var(--muted); }
.res-rewards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.res-rewards li { background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; animation: popIn 0.4s cubic-bezier(.2,1.4,.4,1) backwards; }
.res-rewards li:nth-child(2) { animation-delay: 0.08s; } .res-rewards li:nth-child(3) { animation-delay: 0.16s; } .res-rewards li:nth-child(4) { animation-delay: 0.24s; } .res-rewards li:nth-child(n+5) { animation-delay: 0.32s; }
.res-rewards li.xp { background: var(--tag); color: var(--ink); font-weight: 700; }
.res-rewards li.disc { background: #E4F4EC; color: var(--ink); border: 1px solid #A9DCC2; }
.res-rewards li[data-card] { background: #F1ECFF; color: var(--ink); border: 1px solid #D8CCFF; cursor: pointer; }
.res-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.res-actions .btn { flex: 1; min-width: 140px; }
.share-input { flex: 1; min-width: 200px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font: 12.5px var(--f-mono); }
.morning h2 { margin: 0 0 8px; font: 22px var(--f-display); }
.morning .m-recap { border: 0; background: var(--paper); }
.btn.big { font-size: 16px; padding: 12px 22px; }
.decision-moment .moment-card { width: min(560px, 100%); }

/* ---------------- you ---------------- */
.you { background: var(--ink); color: #fff; border-top: 3px solid var(--mito); display: grid; grid-template-columns: 150px minmax(0, 1fr) 176px; gap: 8px 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); align-items: center; }
.you-buddy { position: relative; width: 150px; height: 150px; }
#buddy { width: 150px; height: 150px; display: block; }
.you #mitoMini { position: absolute; right: -6px; bottom: 8px; width: 78px; height: 52px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.22); background: var(--mon); }
.you .buddy-name { position: absolute; left: 8px; bottom: 0; transform: none; }
.you-mid { display: grid; gap: 6px; min-width: 0; }
.you .plate { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 36px; padding: 4px 6px; border: 2px dashed rgba(255,255,255,0.25); border-radius: 12px; background: rgba(255,255,255,0.04); }
.you .plate-empty { color: #A2A7D8; font-size: 13px; padding: 0 4px; }
.you .pchip { background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.you .pchip button { border: 0; background: #E7EAF0; color: var(--ink); border-radius: 50%; width: 22px; height: 22px; line-height: 1; padding: 0; font-size: 14px; font-weight: 700; margin: 0; }
.you .pchip button:hover { background: var(--mito); color: #fff; }
.mods-box { display: grid; gap: 3px; }
.you .mods { margin: 0; color: #B9BDE8; }
.you .modchip { background: var(--ink-2); color: #fff; border-color: var(--ink-3); }
.you .modchip.on { background: var(--tag); color: var(--ink); border-color: var(--tag); }
.you .modchip.on small { color: var(--ink-3); }
.strip-chart { position: relative; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--mon-line); background: var(--mon); cursor: pointer; }
#stripChart { width: 100%; height: 100%; display: block; }
.strip-pops { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding: 4px; }
.spop { background: rgba(23,26,58,0.92); color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); white-space: nowrap; animation: popIn 0.3s cubic-bezier(.2,1.4,.4,1); }
.spop.at { position: absolute; transform: translateX(-50%); }
.spop.good { border-color: #5FD39A; color: #B9F3D6; } .spop.bad { border-color: #FF6B6B; color: #FFC2C2; } .spop.warn { border-color: #E0A526; color: #FFE1A3; }
.spop.out { opacity: 0; transition: opacity 0.35s; }
.fx-row { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: #C9CCF0; min-height: 18px; }
.fx-row b { color: #fff; }
.fx-row.good .fx-peak b { color: #8FE6B9; } .fx-row.warn .fx-peak b { color: #FFD27A; } .fx-row.bad .fx-peak b { color: #FF9A9A; }
.fx-row em { font-style: normal; font: 700 11px var(--f-mono); padding: 0 6px; border-radius: 999px; margin-left: 3px; }
.fx-row em.down { background: var(--good); color: #fff; } .fx-row em.up { background: var(--bad); color: #fff; }
.controls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.seg-mini { display: inline-flex; border: 1px solid var(--ink-3); border-radius: 999px; overflow: hidden; }
.seg-mini button { border: 0; background: none; color: #B9BDE8; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.seg-mini button.on { background: #fff; color: var(--ink); }
.tog { border: 1px solid var(--ink-3); background: none; color: #B9BDE8; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.tog.on { background: #DFF6EA; color: var(--ink); border-color: #DFF6EA; }
.tog.debuff.on { background: #FFE0E0; border-color: #FFE0E0; }
.you-act { display: grid; gap: 6px; }
.btn-eat { font: 22px var(--f-display); letter-spacing: 0.03em; padding: 16px 10px; background: var(--mito); color: #fff; border: 0; border-radius: 16px; box-shadow: 0 5px 0 var(--mito-d); }
.btn-eat:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 var(--mito-d); }
.btn-eat:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--mito-d); }
.btn-eat:disabled { background: var(--ink-3); box-shadow: 0 5px 0 var(--ink-2); color: #9EA3D6; cursor: not-allowed; }
.btn.ghost { background: none; border: 1px solid var(--ink-3); color: #D9DCFF; font-size: 13px; padding: 7px 10px; }
.btn.ghost:hover { background: var(--ink-2); border-color: #fff; }

/* ---------------- label sheet bits ---------------- */
.ladder { display: grid; gap: 4px; }
.rung { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; font-size: 13.5px; }
.mystery { display: flex; gap: 12px; align-items: center; background: #FFF6D1; border: 1px solid #F1D595; border-radius: 12px; padding: 12px; font-size: 13.5px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.mbtn { display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px; align-items: center; }
.mbtn span { grid-row: 1 / 3; font-size: 26px; }
.mbtn b { font-size: 14.5px; } .mbtn small { color: var(--muted); font-size: 12px; }
.mbtn:hover { border-color: var(--ink-3); }

/* roomier shelves on big screens */
@media (min-width: 1200px) and (min-height: 760px) {
  .prod { width: 164px; }
  .pack { width: 104px; height: 118px; border-radius: 12px; }
  .pack-e { font-size: 48px; width: 72px; height: 72px; }
  .pk-can, .pk-cup { width: 82px; } .pk-bottle, .pk-jug { width: 76px; }
  .pk-carton, .pk-tray, .pk-block, .pk-bar, .pk-pack, .pk-loaf { height: 96px; width: 118px; }
  .pk-jar, .pk-canister, .pk-tub { height: 108px; }
  .pk-loose .pack-e { font-size: 72px; }
  .prod-name { font-size: 14px; max-width: 156px; }
  .tag { width: 38px; height: 38px; font-size: 20px; right: 14px; }
  .info { top: 90px; right: 16px; width: 26px; height: 26px; }
  .shelf-row { gap: 16px; margin-bottom: 24px; }
  .strip-chart { height: 104px; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .hb-text { display: none; }
  .meters .m span { display: none; }
  .topbar .mbar { width: 54px; }
}
@media (max-width: 760px) {
  body { overflow: hidden; }
  #app { height: 100dvh; }
  .logo-g { display: none; }
  /* top bar: row one is who and where, row two is the meters */
  .topbar { gap: 6px 8px; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; min-height: 0; border-bottom-width: 2px; }
  .topbar .logo { font-size: 15px; }
  body.camp .topbar .brand { display: none; }
  .player-chip { max-width: 150px; min-width: 0; flex: 0 1 auto; padding: 4px 10px 4px 6px; font-size: 12px; order: 1; }
  .day-chip { order: 2; }
  .bar-btns { order: 3; margin-left: auto; gap: 4px; }
  .bar-btns .hbtn { padding: 5px 7px; min-width: 32px; }
  body:not(.camp) .player-chip { max-width: 116px; }
  .clock-chip { order: 5; padding: 2px 8px; font-size: 11.5px; min-width: 5.6em; }
  /* the 200px basis forces the meters onto row two; there they stretch to fill it. The row is never narrower than what it holds: each meter
     keeps the width its own number needs (Mito HP can have four digits) and never shrinks under it, and the three bars share what is left */
  .meters { order: 6; gap: 8px; margin-left: 0; flex: 1 1 200px; min-width: max-content; }
  .meters .m { gap: 4px; flex: 1 0 auto; }
  .meters .m b { min-width: 1.6em; font-size: 12.5px; flex: none; }
  .meters .m span { display: inline; font-size: 0; letter-spacing: 0; }
  .meters .m span::before { font-size: 12px; content: "❤️"; }
  .meters #mHunger span::before { content: "🍽️"; }
  .meters .m.wp span::before { content: "💪"; }
  .topbar .mbar { width: auto; flex: 1; min-width: 12px; max-width: 64px; height: 7px; }
  .lvl-chip { order: 7; padding: 0; }
  .lvl-chip #lvlText { display: none; }
  .ring { width: 22px; height: 22px; }
  .toasts { top: 84px; }

  .aisle-head { padding: 6px 12px 4px; gap: 6px; }
  #search.aisle-search { width: 104px; padding: 6px 10px; font-size: 13px; }
  .tab { padding: 5px 10px 5px 8px; }
  .tab .tn { display: none; }
  .tab.on .tn { display: inline; }
  .ribbon { margin: 0 12px; font-size: 12px; padding: 5px 10px; gap: 4px 8px; min-height: 28px; }
  .ribbon.ask { font-size: 12.5px; }
  .aisle-head, .ribbon { flex: none; }
  .ribbon.ask > span { display: none; }
  /* the swap ribbon keeps its one-line help on a phone (the plain "Tap a food to add it" line is the whole point of it) */
  .ribbon.ask.swap { flex-wrap: wrap; gap: 3px 8px; padding: 5px 8px 5px 10px; }
  .ribbon.swap > span.rib-help { display: block; flex: 1 1 100%; font-size: 12px; line-height: 1.25; order: 4; }
  .ribbon.swap .hl-l, .ribbon.swap .rb-more { display: none; }
  .ribbon.swap .rib-btn.back { padding: 5px 12px; }
  /* replacing: the ribbon is just the instruction and its Cancel */
  .ribbon.swap.replacing { flex-wrap: nowrap; gap: 8px; }
  .ribbon.swap.replacing .rib-btn.back, .ribbon.swap.replacing .rib-lane, .ribbon.swap.replacing .rib-slot { display: none; }
  .ribbon.swap.replacing > span.rib-help { flex: 1 1 auto; order: 1; }
  .ribbon.swap.replacing .rib-btn.cancel { order: 2; margin-left: auto; flex: none; }
  body.swapping .tab .tp { display: none; }
  /* the plate is a short scrolling tray, so a big plate cannot push the shelves off the screen; buttons big enough to hit */
  body.swapping .you .plate { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: clamp(92px, 22vh, 150px); overscroll-behavior: contain; }
  body.swapping .you .pchip { padding: 3px 4px 3px 10px; gap: 4px; }
  body.swapping .you .pchip .pc-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; }
  body.swapping .you .pchip button { width: 28px; height: 28px; font-size: 16px; }
  body.swapping .you .pchip button.pc-swap { width: auto; height: 28px; padding: 0 12px; font-size: 12.5px; }
  body.swapping .fx-row { flex-wrap: wrap; white-space: normal; overflow: visible; }
  body.swapping .fx-row > * { flex: 0 1 auto; }
  /* on a phone the swap view needs the room for the shelves: Buddy steps out, the plate takes the full width */
  body.swapping .you-buddy { display: none; }
  body.swapping .you { grid-template-columns: minmax(0, 1fr); }
  body.swapping .you .plate-cap, body.swapping .you .plate { grid-column: 1; }
  .ribbon.ask .rib-btn { margin-left: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sign { padding: 3px 14px 5px; margin-bottom: 2px; }
  .sign-t { font-size: 13px; }
  .nav { width: 22px; font-size: 28px; }
  .prod { width: 100px; }
  .pack { width: 70px; height: 80px; }
  .pack-e { font-size: 30px; width: 48px; height: 48px; }
  .pk-can, .pk-cup { width: 56px; } .pk-bottle, .pk-jug { width: 52px; }
  .pk-jar, .pk-canister, .pk-tub { height: 74px; }
  .pk-loose .pack-e { font-size: 46px; }
  .pk-carton, .pk-tray, .pk-block, .pk-bar, .pk-pack, .pk-loaf { height: 68px; width: 80px; }
  .prod-name { font-size: 11.5px; max-width: 96px; }
  .tag { right: 4px; width: 28px; height: 28px; font-size: 15px; }
  .info { right: 2px; top: 48px; width: 22px; height: 22px; font-size: 12px; }
  .shelf-row { gap: 4px; padding: 10px 2px 0; margin-bottom: 16px; }

  /* you: Buddy beside the plate, then the forecast and the buttons full width */
  .you { grid-template-columns: 84px minmax(0, 1fr); gap: 5px 8px; padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-top-width: 2px; align-items: start; }
  .you-buddy, #buddy { width: 84px; height: 84px; }
  .you-buddy { grid-column: 1; grid-row: 1; }
  .you #mitoMini { width: 46px; height: 31px; right: -4px; bottom: 2px; border-width: 1px; border-radius: 9px; }
  .you .buddy-name { display: none; }
  .you-mid { display: contents; }
  .you .plate { grid-column: 2; min-height: 34px; align-self: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .you .plate::-webkit-scrollbar { display: none; }
  .you .plate > * { flex: none; }
  .you .plate-empty { font-size: 12.5px; }
  .you .pchip { font-size: 12px; padding: 3px 5px 3px 8px; }
  .mods-box, .strip-chart, .fx-row, .controls, .you-act { grid-column: 1 / -1; }
  .mods-box:empty, .controls:empty, .fx-row.empty { display: none; }
  .you .mods { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .strip-chart { height: 66px; }
  .fx-row { flex-wrap: wrap; gap: 1px 12px; font-size: 12px; min-height: 0; }   /* wraps: a sideways scroll with no scrollbar hid the second reading */
  .fx-pf { display: none; }   /* protein and fiber stay on the label sheet and the plate card; the row keeps the calories */
  .controls { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .controls::-webkit-scrollbar, .fx-row::-webkit-scrollbar, .you .mods::-webkit-scrollbar { display: none; }
  .controls > *, .fx-row > *, .you .mods > * { flex: none; }
  .fx-row > .fx-rds { flex: 1 1 100%; order: 2; display: flex; flex-wrap: wrap; gap: 0 12px; }   /* after the calories: line one is peak, change, calories; the readings follow */
  .you-act { display: flex; gap: 6px; align-items: stretch; }
  .btn-eat { flex: 1.5; font-size: 18px; padding: 10px 8px; border-radius: 14px; }
  .you-act .btn.ghost { flex: 1; font-size: 12px; padding: 4px 8px; line-height: 1.25; }
  .you-act #btnMonitor { flex: none; width: 52px; font-size: 0; }
  .you-act #btnMonitor::before { content: "🔬"; font-size: 20px; }

  /* cards over the shelf */
  .moment { padding: 10px; place-items: start center; }
  .moment.morning-moment, .moment.decision-moment { position: fixed; inset: 0; z-index: 40; background: rgba(23,26,58,0.78); padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .morning .m-actions, .dc .dc-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0 8px; box-shadow: 0 -10px 12px -8px rgba(23,26,58,0.18); }
  .dc .dc-actions { background: #FBFBF7; }
  .result, .morning { padding: 12px 14px; border-radius: 16px; }
  .result { gap: 8px; }
  .res-main { display: grid; gap: 4px; min-width: 0; }
  .res-rewards { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-right: -14px; padding-right: 14px; }
  .res-rewards::-webkit-scrollbar { display: none; }
  .res-rewards li { flex: none; }
  .res-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .res-actions .btn.primary { grid-column: 1 / -1; font-size: 15px; padding: 11px 10px; }
  .res-title { font-size: 15px; }
  .res-read { margin: 2px 0 4px; font-size: 12.5px; }
  .res-stats { gap: 6px; margin: 4px 0 2px; }
  .res-stats b { font-size: 16px; }
  .res-actions .btn { min-width: 0; padding: 8px 4px; font-size: 12.5px; }
}
/* a short phone: with no speech bubble beside the plate, Buddy shrinks a little and the shelves get the height back */
@media (max-width: 760px) and (max-height: 700px) {
  .you { grid-template-columns: 66px minmax(0, 1fr); }
  .you-buddy, #buddy { width: 66px; height: 66px; }
  .you #mitoMini { width: 40px; height: 27px; }
}
/* the monitor on a phone: a two-row header, Mito first, the charts under it */
@media (max-width: 760px) {
  .ff { display: block; overflow-y: auto; }
  .ff-inner { display: block; min-height: 100%; }
  .ff-head { position: sticky; top: 0; z-index: 3; gap: 6px 8px; padding: 8px 12px; align-items: center; }
  .ff-title { order: 1; flex: 1 1 calc(100% - 56px); min-width: 0; }
  .ff-title h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ff-title .eyebrow { font-size: 10px; }
  .ff-sub { display: none; }
  .ff-ctrl { display: contents; }
  .ffx { order: 2; width: 34px; height: 34px; }
  .ff-clock { order: 3; flex: 1 1 150px; min-width: 0; flex-direction: row; gap: 8px; }
  .clock { font-size: 15px; min-width: 5.6em; text-align: left; }
  .sky { flex: 1; width: auto; min-width: 60px; }
  .ffbtn.play { order: 4; width: 34px; padding: 6px 0; }
  .speed { order: 5; }
  .speed button { padding: 6px 8px; font-size: 12px; }
  .ff-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 0; }
  .ff-side, .ff-charts { display: contents; }
  .ff-tabs { order: 1; }
  .mito-stage, .report { order: 2; }
  .cpanel { order: 3; flex: none; height: 104px; }
  .cpanel:first-child { height: 140px; }
  .legend { order: 4; gap: 10px; font-size: 11px; }
  .gauges { order: 5; }
  .feed { order: 6; }
  #mitoBig { height: 170px; }
  .mito-caption { font-size: 13px; min-height: 2.4em; }
  .cunit { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
  .ff .toasts { left: 12px; bottom: 12px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .you { grid-template-columns: 110px minmax(0, 1fr) 160px; }
  .you-buddy, #buddy { width: 110px; height: 110px; }
  .strip-chart { height: 70px; }
  .pack { height: 80px; }
}

/* ---------------- Spike or Flat? ---------------- */
.judge-moment .moment-card { width: min(520px, 100%); }
.judge:not(.rib-btn):not(.studio):not(.st-verdict) { background: #fff; border-radius: 20px; padding: 14px 16px 12px; box-shadow: 0 18px 50px rgba(10,12,40,0.4); color: var(--ink); }   /* the Spike or Flat card (the ribbon's .rib-btn.judge and the video stage's .studio.judge and .st-verdict.judge share the class name and must not inherit it) */
.j-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.j-title { font: 20px var(--f-display); letter-spacing: 0.02em; }
.j-title em { font: italic 400 14px var(--f-body); color: var(--muted); margin: 0 4px; }
.j-prog { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 700; }
.j-streak { background: #FFE8CC; color: #A34A00; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; animation: popIn 0.3s cubic-bezier(.2,1.4,.4,1); }
.j-card { position: relative; margin: 12px 0 10px; background: linear-gradient(180deg, var(--wall), #fff 70%); border: 1px solid #DCEBE4; border-radius: 16px; padding: 18px 14px 14px; text-align: center; cursor: pointer; animation: jIn 0.3s cubic-bezier(.2,1.4,.4,1); }
@keyframes jIn { from { transform: translateX(40px) rotate(2deg); } }
.j-pack { position: relative; display: inline-grid; place-items: center; margin-bottom: 8px; }
.j-pack .pack { width: 96px; height: 110px; border-radius: 12px; }
.j-pack .pack-e { font-size: 44px; width: 66px; height: 66px; }
.j-pack .pk-loose .pack-e { font-size: 66px; }
.j-qty { position: absolute; top: -8px; right: -18px; background: var(--tag); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 16px; font-weight: 700; transform: rotate(8deg); box-shadow: 0 2px 0 rgba(23,26,58,0.25); }
.j-name { font: 20px/1.15 var(--f-display); text-wrap: balance; }
.j-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.35; }
.j-sub b { color: var(--ink); }
.j-reveal { margin-top: 12px; text-align: left; }
#jChart { display: block; width: 100%; height: 96px; border-radius: 10px; border: 1px solid var(--mon-line); }
.j-verdict { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.j-peak { font-size: 34px; font-weight: 700; line-height: 1; color: var(--good); min-width: 2.2em; }
.j-peak.over { color: var(--bad); }
.j-peak.words { font-size: 20px; }   /* a peak that would round onto a line, in words: "over 140" */
.j-word { font: 22px var(--f-display); letter-spacing: 0.03em; }
.j-word.spike { color: #E0702A; } .j-word.flat { color: #2A6FB0; }
.j-res { margin-left: auto; font-weight: 700; font-size: 13.5px; padding: 4px 10px; border-radius: 999px; }
.j-res.ok { background: #DFF6EA; color: #1E6B44; } .j-res.no { background: #FFE0E0; color: #A32B2B; }
.j-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.j-btn { border: 0; border-radius: 16px; padding: 14px 10px 12px; font: 22px var(--f-display); letter-spacing: 0.02em; color: #fff; display: grid; gap: 2px; justify-items: center; box-shadow: 0 5px 0 rgba(0,0,0,0.25); transition: transform 0.08s; }
.j-btn small { font: 600 12px var(--f-body); opacity: 0.9; }
.j-btn.spike { background: linear-gradient(180deg, #FF8A5B, #E0552A); }
.j-btn.flat { background: linear-gradient(180deg, #5FD3FF, #2A6FB0); }
.j-btn:hover { transform: translateY(-2px); }
.j-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.j-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.j-hint { font-size: 11.5px; color: var(--muted); }
.rib-btn.judge { background: var(--ink); color: #fff; }
.rib-btn.judge:hover { background: var(--mito); }
/* results */
.j-rhead { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.j-score { display: flex; align-items: baseline; background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 14px; }
.j-score b { font-size: 40px; line-height: 1; } .j-score span { font-size: 16px; color: #B9BDE8; }
.j-tier { font: 22px var(--f-display); }
.j-rhead p { margin: 2px 0 4px; font-size: 13.5px; color: var(--ink-3); }
.j-rhead small { font-size: 12px; color: var(--muted); }
.j-list { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 3px; max-height: 210px; overflow-y: auto; }
.j-list li { display: grid; grid-template-columns: 24px 1fr minmax(44px, auto) 22px 18px; gap: 6px; align-items: center; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: var(--paper); }
.j-list li.no { background: #FFF1F1; } .j-list li.ok b { color: var(--ink); }
.j-list b { text-align: right; white-space: nowrap; }   /* "just over 140" stays on one line */
.j-surprise { margin: 6px 0 10px; font-size: 13.5px; color: var(--ink-3); }
.j-surprise b { color: var(--ink); }
.j-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.j-actions .btn { flex: 1; min-width: 130px; }
@media (max-width: 760px) {
  .moment.judge-moment { position: fixed; inset: 0; z-index: 40; background: rgba(23,26,58,0.78); padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)); place-items: center; }
  .judge:not(.rib-btn):not(.studio):not(.st-verdict) { padding: 12px 12px 10px; }   /* the Spike or Flat screen; the ribbon's own .rib-btn.judge keeps its button padding */
  .j-pack .pack { width: 84px; height: 96px; }
  .j-name { font-size: 18px; }
  .j-btn { font-size: 20px; padding: 14px 8px 12px; }
  .j-list { max-height: 34vh; }
  .j-actions { position: sticky; bottom: 0; background: #fff; padding-top: 8px; }
}

/* ---------------- reels: odometer, emoji reel, bursts ---------------- */
.odo { display: inline-flex; align-items: flex-start; height: 1em; line-height: 1; overflow: hidden; vertical-align: bottom; }
.odo-pre { line-height: 1; }
.odo-d { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transform: translateY(0); will-change: transform; }
.odo-strip i { display: block; height: 1em; line-height: 1; font-style: normal; text-align: center; }
.odo-d.set { animation: odoSet 0.25s ease; }
@keyframes odoSet { 40% { transform: scale(1.18); } }
.odo-near { animation: odoNear 0.5s ease; }
@keyframes odoNear { 20%, 60% { transform: translateX(-4px) rotate(-2deg); } 40%, 80% { transform: translateX(4px) rotate(2deg); } }
.ereel { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: bottom; }
.ereel-strip { display: flex; flex-direction: column; }
.ereel-strip i { display: block; height: 1em; line-height: 1; font-style: normal; }
.ereel.set { animation: odoSet 0.3s ease; }
.twist-card.spinning > div { filter: blur(5px); opacity: 0.5; transition: filter 0.3s, opacity 0.3s; }
.burst { position: fixed; z-index: 95; pointer-events: none; width: 0; height: 0; }
.burst i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1A8, #F5C04A 55%, #B8860B); box-shadow: 0 0 0 1px rgba(120,80,0,0.35) inset; animation: burstFly 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
.burst.confetti i { border-radius: 2px; width: 9px; height: 14px; background: hsl(var(--h) 85% 60%); box-shadow: none; }
@keyframes burstFly { 0% { transform: translate(-50%, -50%) scale(0.4) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(var(--dx) - 50%), calc(var(--dy) + 90px - 50%)) scale(1) rotate(var(--r)); opacity: 0; } }

/* ---------------- the Snack Machine ---------------- */
.slots-moment .moment-card { width: min(560px, 100%); }
.slots { --cell: 128px; background: linear-gradient(180deg, #2A2F6E, #171A3A); border-radius: 22px; padding: 14px 16px 12px; color: #fff; box-shadow: 0 18px 50px rgba(10,12,40,0.5), inset 0 2px 0 rgba(255,255,255,0.15); }
.sl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sl-title { font: 22px var(--f-display); letter-spacing: 0.02em; color: var(--tag); text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.sl-sub { font-size: 13px; color: #C9CCF0; }
.sl-cab { display: grid; grid-template-columns: 1fr 64px; gap: 12px; align-items: center; }
.sl-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #0C0E26; border-radius: 16px; padding: 10px; border: 3px solid #E0A526; box-shadow: inset 0 0 0 3px #7A4F00, 0 0 24px rgba(224,165,38,0.25); }
.sl-reel { display: grid; gap: 6px; justify-items: center; }
.sl-win { width: 100%; height: var(--cell); overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #E9EBF5, #fff 30%, #fff 70%, #D9DCEC); position: relative; box-shadow: inset 0 8px 10px -8px rgba(0,0,0,0.5), inset 0 -8px 10px -8px rgba(0,0,0,0.5); }
.sl-win::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(224,80,91,0.35); pointer-events: none; }
.sl-strip { display: flex; flex-direction: column; will-change: transform; }
.sl-cell { height: var(--cell); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--ink); padding: 6px 4px; }
.sl-cell .pack { width: 54px; height: 62px; border-radius: 8px; box-shadow: inset -5px 0 0 rgba(0,0,0,0.10), 0 3px 0 rgba(23,26,58,0.16); }
.sl-cell .pack-e { font-size: 26px; width: 40px; height: 40px; border-radius: 9px; }
.sl-cell .pk-loose .pack-e { font-size: 40px; }
.sl-cn { font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-blank { font: 56px var(--f-display); color: #C9CCF0; }
.sl-reel.land .sl-win { animation: slLand 0.35s ease; }
@keyframes slLand { 30% { transform: translateY(4px); } 60% { transform: translateY(-2px); } }
.sl-hold { border: 1px solid #E0A526; background: none; color: var(--tag); border-radius: 999px; padding: 3px 12px; font: 700 11px var(--f-mono); letter-spacing: 0.08em; }
.sl-hold.on { background: var(--tag); color: var(--ink); box-shadow: 0 0 12px rgba(255,212,71,0.6); }
.sl-lever { display: grid; justify-items: center; gap: 4px; }
.sl-pull { position: relative; width: 44px; height: 132px; border: 0; background: none; padding: 0; cursor: pointer; }
.sl-arm { position: absolute; left: 50%; bottom: 10px; width: 10px; height: 100px; margin-left: -5px; border-radius: 6px; background: linear-gradient(90deg, #8E93C4, #D9DCFF 40%, #8E93C4); transform-origin: 50% 100%; transition: transform 0.25s cubic-bezier(.3,1.4,.5,1); }
.sl-knob { position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF9A9A, var(--bad) 55%, #8E2A2A); box-shadow: 0 4px 0 rgba(0,0,0,0.35); transition: transform 0.25s cubic-bezier(.3,1.4,.5,1); z-index: 1; }
.sl-pull::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 30px; height: 14px; margin-left: -15px; border-radius: 6px 6px 3px 3px; background: #3B3F63; }
.sl-pull.down .sl-arm { transform: scaleY(0.25); }
.sl-pull.down .sl-knob { transform: translateY(78px); }
.sl-pull:hover .sl-knob { filter: brightness(1.1); }
.sl-pull-txt { font: 12px var(--f-display); color: var(--tag); letter-spacing: 0.1em; }
.sl-payline { margin: 12px 0 10px; min-height: 40px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px; font-size: 13.5px; color: #C9CCF0; text-align: center; }
.sl-payline b { font: 20px var(--f-display); letter-spacing: 0.04em; color: #fff; }
.sl-payline.hit { background: rgba(255,212,71,0.16); border-style: solid; border-color: var(--tag); color: var(--tag); animation: popIn 0.35s cubic-bezier(.2,1.4,.4,1); }
.sl-payline.hit b { color: var(--tag); text-shadow: 0 0 14px rgba(255,212,71,0.6); }
.sl-payline.jackpot { animation: slJack 0.8s ease 2; }
@keyframes slJack { 50% { background: rgba(255,212,71,0.45); transform: scale(1.03); } }
.sl-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sl-actions .btn { flex: 1; min-width: 130px; }
.sl-actions .btn.link { color: #C9CCF0; flex: none; }
.rib-play { margin-left: auto; display: inline-flex; gap: 6px; }
.rib-play .rib-btn { margin-left: 0; }
.rib-btn.spin { background: #E0A526; color: var(--ink); padding: 4px 9px; }
/* judge extras */
.j-near { display: block; font: 600 12px var(--f-body); color: #A34A00; letter-spacing: 0; }
.j-pot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: #FFF6D1; border: 1px solid #F1D595; font-size: 13.5px; animation: popIn 0.3s cubic-bezier(.2,1.4,.4,1); }
.j-pot > span { flex: 1; }
.j-pot .btn.small { padding: 6px 12px; font-size: 13px; }
.j-pot .btn.ride { background: var(--ink); color: #fff; border-color: var(--ink); }
.j-streak.ride { background: var(--ink); color: var(--tag); }
@media (max-width: 760px) {
  .moment.slots-moment { position: fixed; inset: 0; z-index: 40; background: rgba(23,26,58,0.78); padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)); place-items: center; }
  .slots { --cell: 108px; padding: 12px 12px 10px; }
  .sl-cab { grid-template-columns: 1fr 52px; gap: 8px; }
  .sl-reels { gap: 5px; padding: 8px; }
  .sl-cell .pack { width: 46px; height: 54px; }
  .sl-cell .pack-e { font-size: 22px; width: 34px; height: 34px; }
  .sl-cn { font-size: 10px; }
  .sl-pull { height: 112px; width: 40px; }
  .sl-arm { height: 82px; }
  .sl-pull.down .sl-knob { transform: translateY(62px); }
  .sl-actions .btn { min-width: 0; font-size: 13px; }
}

/* ---------------- the doors: the main screen ---------------- */
.doors, .vitals { display: none; }
body.view-doors .aisle, body.view-doors .you { display: none; }
body.view-doors .doors { display: flex; }
body.view-doors .stage { flex: 1 1 55%; }
body.view-doors .vitals { display: flex; flex: 1 1 45%; }
.doors { flex: 1; min-height: 0; flex-direction: column; background: repeating-linear-gradient(90deg, #F8E9AE 0 28px, #FFF7D2 28px 56px); position: relative; overflow: hidden; }
.hall { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px; }
.hall-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bunting { display: flex; justify-content: space-between; height: 22px; margin: 0 -16px; padding: 2px 4px 0; flex: none; overflow: hidden; border-bottom: 3px solid rgba(23,26,58,0.15); }
.bunting i { flex: none; width: 22px; height: 20px; background: hsl(var(--h) 85% 58%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hall-head { display: flex; align-items: center; padding: 0 2px 4px; flex: none; }
.hall-title { font: 15px var(--f-display); letter-spacing: 0.03em; background: var(--ink); color: #fff; padding: 4px 16px 6px; border-radius: 0 0 12px 12px; white-space: nowrap; }
.dr-row { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; gap: clamp(8px, 1.6vw, 24px); padding-bottom: 2px; position: relative; z-index: 1; }
.door { --c1: #C0392B; --c2: #F6D9D3; position: relative; flex: 0 1 200px; min-width: 0; max-height: 260px; align-self: flex-end; height: 100%; display: flex; flex-direction: column; border: 0; background: none; padding: 0; perspective: 900px; cursor: pointer; text-align: center; font: inherit; color: inherit; }
.dr-num { position: absolute; top: 3px; left: 5px; z-index: 2; width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.dr-sign { flex: none; background: var(--ink); color: #fff; font: 12.5px var(--f-display); letter-spacing: 0.08em; border-radius: 8px 8px 0 0; padding: 4px 6px 3px; }
.dr-frame { position: relative; flex: 1; min-height: 0; border: 5px solid var(--ink); border-top: 0; background: #1B1E4B; }
.dr-behind { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; background: radial-gradient(circle at 50% 40%, #FFF3B0, #F5C04A 62%, #B8860B); }
.dr-plate { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; max-width: 90%; }
.dr-plate i { font-style: normal; font-size: clamp(22px, 3.6vw, 42px); line-height: 1.1; filter: drop-shadow(0 2px 0 rgba(23,26,58,0.18)); }
.dr-peak { font-size: clamp(16px, 2.2vw, 24px); font-weight: 700; color: var(--ink); }
.dr-peak.bad { color: #A32B2B; } .dr-peak.good { color: #1E6B44; }
.dr-leaf { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 0.45s cubic-bezier(.3,1.35,.5,1); background: conic-gradient(var(--c1) 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0) 0 0 / 30px 30px; display: grid; place-items: center; align-content: center; gap: 8px; backface-visibility: hidden; box-shadow: inset 0 0 0 3px rgba(0,0,0,0.14); }
.dr-leaf::after { content: ""; position: absolute; right: 9px; top: 52%; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #B9BDE8 60%, #6B6F9C); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.dr-lane { font-size: clamp(30px, 4.6vw, 56px); background: rgba(255,255,255,0.92); border-radius: 50%; width: 1.55em; height: 1.55em; display: grid; place-items: center; line-height: 1; box-shadow: 0 3px 0 rgba(0,0,0,0.22); }
.dr-emo { background: rgba(255,255,255,0.92); border-radius: 999px; padding: 1px 9px; font-size: 16px; line-height: 1.4; }
.dr-lock { position: absolute; bottom: 8px; font-size: 18px; }
.dr-tag { flex: none; margin-top: 5px; font: 700 12px var(--f-mono); color: var(--ink-3); min-height: 1.4em; }
.dr-tag.good { color: #1E6B44; } .dr-tag.warn { color: #A34A00; } .dr-tag.bad { color: #A32B2B; }
.door:hover:not(:disabled):not(.sel) .dr-leaf { transform: rotateY(-16deg); }
.door.sel .dr-leaf { transform: rotateY(-72deg); }
.door.go .dr-leaf { transform: rotateY(-118deg); }
.door.sel .dr-frame { box-shadow: 0 0 0 4px var(--tag), 0 6px 18px rgba(23,26,58,0.35); clip-path: inset(0 -8px -10px -8px); }
.door.sel .dr-sign { background: var(--tag); color: var(--ink); }
.door.sel .dr-tag { visibility: hidden; }
.door.shut, .door.closed { filter: grayscale(0.8) brightness(0.92); cursor: default; }
.door.edited .dr-sign::after { content: " ✎"; }
.dr-floor { flex: none; height: calc(clamp(46px, 9vh, 92px) + var(--typ-h)); margin: 0 -16px; background: conic-gradient(#F8C6D6 25%, #fff 0 50%, #F8C6D6 0 75%, #fff 0) 0 0 / 46px 46px; border-top: 6px solid #B98A5A; position: relative; z-index: 0; }
@media (min-width: 761px) and (max-height: 520px) { :where(body.has-typ) .dr-floor { height: calc(18px + var(--typ-h)); } }   /* a short, wide window (a phone on its side) with the label strip: little floor, so the doors keep their height (:where keeps the skins' own .hall .dr-floor rules in charge) */
.hall.walking .dr-floor { animation: floorRun 1.1s linear infinite; }
@keyframes floorRun { to { background-position: 46px 0; } }
.d-buddy { position: absolute; left: 50%; bottom: calc(2px + var(--typ-h)); width: clamp(78px, 13vh, 120px); height: clamp(78px, 13vh, 120px); transform: translateX(-50%); transition: left 0.5s cubic-bezier(.3,1.2,.5,1); z-index: 3; pointer-events: none; }
.d-buddy.hop { animation: buddyHop 0.5s ease; }
@keyframes buddyHop { 40% { transform: translate(-50%, -24px); } }
.d-buddy.through { animation: buddyThrough 0.72s ease-in forwards; }
@keyframes buddyThrough { 60% { transform: translate(-50%, -34px) scale(0.8); } to { transform: translate(-50%, -86px) scale(0.35); } }
/* ---- the "typical" row: a small labelled checkbox under each diet door (markup built by js/doors.js buildTyp; placeTyp sets each cell's
   left and --dw, the door's width). The row is the front strip of the hall floor: --typ-h is its height, 0 until a lane has typical plates,
   and the floor and Buddy make room for it. Buddy stands on the row, so he never covers a box. --ty-h is the visible label's height (the
   tap target is the whole strip, --typ-h): 30px on a phone (32 on a tall one, 26 on a very short one), 34 on a wide screen. */
.hall { --typ-h: 0px; --ty-h: 30px; --ty-fs: 13px; --ty-cb: 17px; }
body.has-typ .hall { --typ-h: calc(var(--ty-h) + 6px); min-height: calc(var(--typ-h) + 64px); }   /* the strip always fits inside the hall */
@media (min-width: 761px) { .hall { --ty-h: 34px; --ty-fs: 14px; --ty-cb: 18px; } }
@media (max-width: 760px) and (min-height: 780px) { .hall { --ty-h: 32px; } }
@media (max-width: 760px) and (max-height: 700px) { .hall { --ty-h: 28px; --ty-cb: 16px; } }
@media (max-width: 760px) and (max-height: 600px) { .hall { --ty-h: 26px; --ty-fs: 12px; --ty-cb: 15px; } }
.dr-typ { position: absolute; left: 0; right: 0; bottom: 0; height: var(--typ-h); z-index: 4; pointer-events: none; }
.dr-typ[hidden] { display: none; }
.ty-cell { --c1: #C0392B; --c2: #F6D9D3; position: absolute; top: 50%; left: 0; margin-top: calc(var(--ty-h) / -2); display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--ty-h); max-width: var(--dw, 140px); box-sizing: border-box; padding: 0 10px 0 8px;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; font: 700 var(--ty-fs)/1 var(--f-body); white-space: nowrap; cursor: pointer; pointer-events: auto; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 rgba(23,26,58,0.4); }
.ty-cell::before { content: ""; position: absolute; inset: -11px -3px -6px; }   /* the tap target reaches 9px up into the floor tiles above the label and 4px below it (the 2px border sits inside the inset): 45px tall on a tall phone where the label is 32; nothing interactive sits there */
.ty-cb { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: var(--ty-cb); height: var(--ty-cb); margin: 0; border: 2px solid var(--ink); border-radius: 4px; background: #fff; cursor: inherit; }
.ty-cb::after { content: ""; position: absolute; left: 27%; top: 2%; width: 28%; height: 54%; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); }
.ty-cb:checked { background: var(--c1); }
.ty-cb:checked::after { transform: rotate(45deg) scale(1); }
.ty-cell.on { background: var(--c2); }
.ty-cell.locked { opacity: 0.6; filter: grayscale(0.5); cursor: default; box-shadow: none; }
.ty-cb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ty-cell:has(.ty-cb:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.ty-cell:has(.ty-cb:focus-visible) .ty-cb { outline: none; }
@media (hover: hover) { .ty-cell:not(.locked):hover { background: var(--c2); } }
@media (forced-colors: active) { .ty-cb:checked { background: Highlight; } .ty-cb::after { border-color: HighlightText; } .ty-cell { border-color: CanvasText; } }
.d-plate { flex: none; background: var(--ink); color: #fff; padding: 8px 16px 10px; border-top: 3px solid var(--c1, var(--mito)); display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; min-height: 74px; }
.d-plate.idle { justify-content: center; text-align: center; }
.dp-hint { flex: 1 1 240px; font-size: 13.5px; color: #C9CCF0; }
.dp-hint b { color: #fff; }
.dp-main { flex: 1 1 340px; min-width: 0; display: grid; gap: 5px; }
.dp-top { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.dp-lane { font: 16px var(--f-display); }
.dp-lane em { font: italic 400 12px var(--f-body); color: var(--tag); }
.dp-sub { font-size: 12.5px; color: #A2A7D8; margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-lane em.dp-typ { font-weight: 700; }
.dp-sub .dp-short { display: none; }
.dp-sub.typ { color: #C9CCF0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }   /* the plain-words line for a typical plate, brighter than a door's usual blurb; it wraps to two lines at any width (the short-phone and landscape blocks below turn it back into one line) */
.ribbon.swap .rib-typ { font: italic 700 12px var(--f-body); color: var(--tag, #FFD447); }
.dp-fx { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: #C9CCF0; }
.dp-fx b { color: #fff; }
.dp-fx em { font: 700 11px var(--f-mono); padding: 0 6px; border-radius: 999px; font-style: normal; }
.dp-fx em.down { background: var(--good); color: #fff; } .dp-fx em.up { background: var(--bad); color: #fff; }
.dp-nut { color: #A2A7D8; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-chip { background: #fff; color: var(--ink); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; }
.dp-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.d-plate .btn.ghost { font-size: 13px; padding: 8px 12px; }
.d-plate .btn-eat { font: 20px var(--f-display); padding: 10px 30px; }
.m-name { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.m-name input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; background: #fff; }
.m-warm { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* the lights are the mitochondria */
.hall::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,36,var(--dim, 0)); pointer-events: none; z-index: 2; transition: background 1.2s ease; }
.hall.flick::after { animation: hallFlick 0.8s steps(1) 1; }
@keyframes hallFlick { 0%, 100% { background: rgba(8,10,36,var(--dim, 0)); } 12% { background: rgba(8,10,36,0.62); } 26% { background: rgba(8,10,36,0.12); } 40% { background: rgba(8,10,36,0.55); } 58% { background: rgba(8,10,36,0.2); } 74% { background: rgba(8,10,36,0.45); } }
.dp-nut2 { display: grid; gap: 2px; font-size: 12.5px; color: #C9CCF0; }
.dp-gives b { color: #fff; }
.dp-gives em { font-style: normal; color: #A2A7D8; }
.dp-note { font-size: 12px; }
.dp-note, .dp-note.bad, .dp-note.warn, .dp-note.good, .dp-note.info { color: #B0B5E2; }   /* one tone: a note says what happens to absorption, it does not grade it */
.cf { display: grid; grid-template-columns: 74px 1fr 26px; gap: 6px; align-items: center; margin-top: 3px; }
.cf-n { font-size: 15px; line-height: 1; display: flex; align-items: center; gap: 4px; }
.cf-n small { font: 600 9.5px var(--f-mono); color: #C9CCF0; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; }
.cf-bar { position: relative; height: 9px; background: var(--mon-3); border-radius: 999px; overflow: hidden; }
.cf-bar i { position: absolute; top: 0; bottom: 0; }
.cf-bar .was { left: 0; background: linear-gradient(90deg, #5FD3FF, #7B8CFF); border-radius: 999px 0 0 999px; }
.cf-bar .add { background: rgba(255,255,255,0.65); }
.cf-bar em { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--tag); z-index: 1; }
.cf b { font-size: 12px; text-align: right; color: #fff; }
.cf-foot { font-size: 10.5px; color: #C9CCF0; margin-top: 4px; line-height: 1.3; }
.cf-foot b.bad, .cf-foot b.good { color: #fff; }
.cf-foot.dim { color: var(--mon-muted); margin-top: 2px; }
.nutrep { margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink); }
.nutrep h4 { margin: 0 0 4px; font: 700 12px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.nut-sub { margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
.ns { display: grid; grid-template-columns: 140px 1fr 34px; gap: 2px 8px; align-items: center; margin: 4px 0; }
.ns-n { font-weight: 700; font-size: 13px; }
.ns-bar { position: relative; height: 9px; border-radius: 999px; background: #E7EAF0; overflow: hidden; }
.ns-bar div { height: 100%; border-radius: 999px; background: #3E4690; }   /* one hue at every level: the bar is an amount, not a verdict */
.ns-bar i { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--ink); }
.ns b { text-align: right; font-size: 13px; }
.ns small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.nut-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.nut-table th { text-align: left; font: 600 10.5px var(--f-mono); text-transform: uppercase; color: var(--muted); padding: 2px 4px; border-bottom: 1px solid var(--line); }
.nut-table td { padding: 3px 4px; border-bottom: 1px dotted var(--line); }
.nut-table .num { text-align: right; }
.nut-table em { font-size: 10.5px; color: var(--muted); font-style: normal; border: 1px solid var(--line); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.nut-table .why { color: var(--muted); font-size: 11.5px; }
.nut-lim { margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--muted); }   /* an upper limit is a fact in one neutral note, never a warning box */
.nut-fx { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; }
.nut-fx .bad b, .nut-fx .good b { color: var(--ink); }
.nf-mito { margin-top: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.nf-mito h4 { margin: 0 0 6px; font: 700 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.nf-mito h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 4px; }
.nm { display: grid; grid-template-columns: 92px 1fr 38px; gap: 1px 8px; align-items: center; margin: 3px 0; font-size: 12.5px; }
.nm-bar { height: 7px; border-radius: 999px; background: #E7EAF0; overflow: hidden; }
.nm-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5FD3FF, #7B8CFF); }
.nm b { text-align: right; }
.nm .why { grid-column: 2 / -1; color: var(--muted); font-size: 11px; }   /* one tone: a note on absorption, not a warning */
.nm.nm-amt { grid-template-columns: 92px 1fr auto; }
.nm-na { font-size: 11px; color: var(--muted); }
.nm-none { margin: 2px 0; font-size: 12.5px; color: var(--muted); }
.nm-chips { margin-top: 8px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--mito-d); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--mito); }
.vp .link-btn.info-i { color: #C9CCF0; text-decoration: none; font-size: 13px; line-height: 1; }
a.ext { color: var(--mito-d); text-underline-offset: 2px; }
a.ext::after { content: " ↗"; font-size: 0.85em; }
.nm-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.tg { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.tg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tg-kind { font: 700 10.5px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: #E7EAF0; color: var(--ink-3); }
/* the RDA / AI / no-value chips share one neutral tone on purpose: the kind is a label, not a verdict */
.tg-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.tg-row > span:first-child { color: var(--muted); font-size: 12px; }
.tg p { margin: 6px 0 4px; color: var(--ink-3); }
.tg-links { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tg-steps li { margin: 6px 0; }
.tg-note { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #EEF6FF; border: 1px solid #C9DDF5; font-size: 13px; color: var(--ink-3); }
/* My foods */
.tab.mine { background: #EFEAFF; border-color: #CFC3FF; }
.tab.mine.on { background: #7a5af8; color: #fff; border-color: #5b3bb0; }
.tab.mine .tp { color: #5b3bb0; } .tab.mine.on .tp { color: #E6DEFF; }
.prod.add .pack { border: 3px dashed #9B8AF0; box-shadow: none; }
.prod.add .pack-e { background: transparent; color: #7a5af8; font-size: 46px; }
.empty-shelf .btn { margin-top: 10px; }
.myfood { display: block; font-size: 13.5px; color: var(--ink); }
.myfood h4 { margin: 14px 0 4px; font: 700 12px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.myfood label { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-3); }
.myfood input[type=text], .myfood input[type=number], .myfood select { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.cf-start { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
.cf-start select { flex: 1; }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin: 8px 0; }
.cf-nums { grid-template-columns: repeat(4, 1fr); }
.cf-dv { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin-top: 10px; }
.cf-wide { grid-column: 1 / -1; }
.cf-look { display: grid; gap: 6px; }
.cf-look > span { font-size: 12.5px; color: var(--ink-3); }
#cf_emoji { width: 76px; font-size: 24px; text-align: center; }
.cf-emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-emojis button { border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 18px; padding: 2px 6px; }
.cf-colors { display: flex; gap: 8px; margin-top: 2px; }
.cf-color { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); padding: 0; }
.cf-color.on { box-shadow: 0 0 0 3px var(--ink); }
.myfood details { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.myfood summary { cursor: pointer; font-weight: 700; }
.myfood summary small { font-weight: 400; color: var(--muted); }
.myfood .cf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.myfood .cf-check input { width: auto; }
.cf-checks { grid-column: 1 / -1; display: grid; gap: 6px; }
.cf-preview { display: block; margin: 14px 0 6px; padding: 10px 12px; border-radius: 12px; background: #F4F1FF; border: 1px solid #DCD3FF; min-height: 54px; }
.cf-pv-sub { font-size: 12.5px; color: var(--ink-3); }
.cf-pv-empty { color: var(--muted); font-size: 13px; }
.cf-warn { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #FFF3D6; border: 1px solid #F1D595; font-size: 12.5px; color: #7A4F00; }
.cf-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.btn.danger { color: var(--bad); }
@media (max-width: 760px) { .cf-nums { grid-template-columns: repeat(2, 1fr); } .cf-grid { grid-template-columns: 1fr 1fr; } }
/* the vitals: the bottom half */
.vitals { flex-direction: column; background: var(--ink); border-top: 3px solid var(--mito); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); min-height: 0; }
.v-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.vp { background: var(--mon); border: 1px solid var(--mon-line); border-radius: 10px; padding: 4px 6px 2px; display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.vp header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: #C9CCF0; flex: none; padding: 0 2px; }
.vp header small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mon-muted); }
.vp header b { font-size: 14px; color: #fff; }
.vp header b.warn { color: #FFD27A; } .vp header b.bad { color: #FF9A9A; }
.vp canvas:not(.v-mito) { flex: 1; min-height: 0; width: 100%; display: block; }
.vp-g { grid-row: 1 / span 2; }
.v-mito { position: absolute; top: 26px; right: 12px; width: 96px; height: 62px; border-radius: 10px; background: rgba(12,14,38,0.72); border: 1px solid rgba(255,255,255,0.2); pointer-events: none; }
.vp-s { grid-column: 3; grid-row: 2; display: block; padding: 4px 8px 6px; overflow: hidden; }
.vp-s header { margin-bottom: 2px; }
.vs { display: flex; justify-content: space-between; font-size: 12.5px; color: #C9CCF0; }
.vs b { color: #fff; }
.v-pops { position: absolute; inset: 22px 6px 6px; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 4px 4px 34px; }
@media (max-width: 760px) {
  body.view-doors .stage { flex: 1 1 70%; }   /* the plate card now carries the two readings, so the doors and the card get more of the height than the charts */
  body.view-doors .vitals { flex: 1 1 30%; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .hall { padding: 0 8px; }
  .bunting { margin: 0 -8px; height: 16px; } .bunting i { width: 16px; height: 14px; }
  .hall-head { padding-bottom: 3px; }
  .hall-title { font-size: 12px; padding: 3px 10px 4px; }
  .dr-row { gap: 5px; }
  .door { flex: 1 1 0; max-height: 190px; }
  .dr-sign { font-size: 9.5px; padding: 3px 1px 2px; letter-spacing: 0.03em; }
  .dr-frame { border-width: 3px; }
  .dr-lane { font-size: 26px; }
  .dr-emo { font-size: 11px; padding: 0 4px; }
  .dr-plate i { font-size: 20px; }
  .dr-peak { font-size: 15px; }
  .dr-tag { font-size: 10px; margin-top: 3px; }
  .dr-num { display: none; }
  .dr-floor { height: calc(38px + var(--typ-h)); margin: 0 -8px; border-top-width: 4px; background-size: 30px 30px; }
  .d-buddy { width: 74px; height: 74px; }
  body.view-doors.has-typ .stage { flex-basis: 70%; }   /* the label strip takes 36px: the hall (and so the doors) gets some of it back from the charts */
  body.view-doors.has-typ .vitals { flex-basis: 30%; }
  .ty-cell { gap: 5px; padding: 0 8px 0 6px; border-radius: 7px; }
  .d-plate { padding: 6px 10px 8px; gap: 5px; min-height: 0; }
  .dp-main { flex-basis: 100%; gap: 3px; }
  .dp-lane { font-size: 14px; }
  .dp-sub.typ { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .dp-fx { font-size: 11.5px; gap: 1px 10px; }
  .dp-nut { display: none; }
  .dp-nut2 { font-size: 11px; }
  .dp-note { font-size: 11px; }
  .dp-chip { font-size: 11.5px; padding: 2px 8px; }
  .dp-btns { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .d-plate .btn-eat { flex: 1; font-size: 18px; padding: 9px 12px; order: 3; }
  .d-plate .btn.ghost { padding: 7px 9px; font-size: 12px; }
  #dShuffle span { display: none; }
  .dp-skip { flex: 1; min-width: 0; line-height: 1.15; }
  .v-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.5fr 1fr; gap: 5px; }
  .vp-g { grid-column: 1 / -1; grid-row: 1; }
  .vp-s { display: none; }
  .vp { padding: 3px 4px 1px; }
  .vp header { font-size: 9px; letter-spacing: 0.04em; }
  .vp header small { display: none; }
  .vp header b { font-size: 12px; }
  .v-mito { top: 20px; right: 6px; width: 64px; height: 40px; }
}

@media (max-width: 760px) and (max-height: 720px) {
  body.view-doors.has-typ .stage { flex-basis: 70%; }
  body.view-doors.has-typ .vitals { flex-basis: 30%; }
  .dp-sub.typ { display: block; white-space: nowrap; }   /* on a short phone the description is one line: the short label, not the blurb */
  .dp-sub.typ .dp-long { display: none; }
  .dp-sub.typ .dp-short { display: inline; }
}
/* A phone on its side (or any short, wide window): the plate card goes beside the hall instead of under it, so the doors, their labels and the
   EAT button all fit. The card scrolls if it must. */
@media (orientation: landscape) and (max-height: 520px) {
  body.view-doors .doors { flex-direction: row; }
  body.view-doors .hall { flex: 1 1 56%; min-width: 0; }
  body.view-doors .d-plate { flex: 0 1 44%; min-width: 0; align-self: stretch; overflow-y: auto; border-top: 0; border-left: 3px solid var(--c1, var(--mito)); padding: 6px 12px 8px; gap: 5px 8px; align-content: center; min-height: 0; }
  .d-plate .dp-main { flex: 1 1 100%; gap: 3px; }
  .d-plate .dp-btns { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .d-plate .dp-lane { font-size: 14px; }
  .d-plate .dp-nut, .d-plate .dp-nut2 { display: none; }
  .dp-sub.typ { display: block; white-space: nowrap; }
  .dp-sub.typ .dp-long { display: none; }
  .dp-sub.typ .dp-short { display: inline; }
  .d-plate .btn.ghost { padding: 6px 9px; font-size: 12px; }
  .d-plate .btn-eat { flex: 1; font-size: 17px; padding: 8px 12px; }
  .dp-skip { flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.1; }
  .dp-chip { font-size: 11.5px; padding: 2px 8px; }
  #dShuffle span { display: none; }
  #dSwap { white-space: nowrap; }
  .d-plate .btn-eat { padding: 6px 12px 8px; }
}
/* Short phones: the hall (the doors and their labels) gets first call on the height. The plate card gives up its extras in steps: the
   absorption note first, then the whole "Gives" block, and its buttons get tighter. */
@media (max-width: 760px) and (max-height: 700px) {
  .d-plate .dp-note { display: none; }
}
@media (max-width: 760px) and (max-height: 620px) {
  .d-plate .dp-nut2 { display: none; }
  .d-plate .btn.ghost { padding: 6px 8px; }
  .d-plate .btn-eat { font-size: 17px; padding: 8px 10px; }
  .dp-skip { font-size: 11px; line-height: 1.1; }
  #dSwap span { display: none; }
}

/* ---------------- studio: the 9:16 capture stage ---------------- */
body.studio-on #app, body.studio-on .toasts, body.studio-on .pops { display: none !important; }
.studio { position: fixed; inset: 0; z-index: 70; background: #07091C; display: grid; place-items: center; cursor: pointer; user-select: none; }
.st-stage { --u: 3.75px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #262B6A 0%, #12153A 55%, #0A0C24 100%); color: #fff; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4); gap: calc(var(--u) * 2); }
.st-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.st-brand { font: calc(var(--u) * 4.6) var(--f-display); letter-spacing: 0.04em; }
.st-brand .logo-four { color: var(--mito); display: inline-block; text-shadow: 0 0 10px rgba(232,80,91,0.55); }
.st-clock { background: #fff; color: var(--ink); border-radius: 999px; padding: calc(var(--u) * 0.8) calc(var(--u) * 3); font-size: calc(var(--u) * 4); font-weight: 700; min-width: 6.4em; text-align: center; }
.st-hero { position: relative; margin-top: calc(var(--u) * 2); display: grid; place-items: center; animation: stHero 0.6s cubic-bezier(.2,1.5,.4,1); }
.st-hero .pack { width: calc(var(--u) * 26); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 3); box-shadow: inset calc(var(--u) * -2.4) 0 0 rgba(0,0,0,0.10), inset 0 calc(var(--u) * 0.9) 0 rgba(255,255,255,0.35), 0 calc(var(--u) * 1.4) 0 rgba(0,0,0,0.35), 0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0,0,0,0.45); }
.st-hero .pack-e { font-size: calc(var(--u) * 12); width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 3.5); }
.st-hero .pk-loose .pack-e { font-size: calc(var(--u) * 20); }
.st-qty { position: absolute; top: calc(var(--u) * -2); right: calc(var(--u) * -6); background: var(--tag); color: var(--ink); border-radius: 999px; padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4); font-size: calc(var(--u) * 5.2); font-weight: 700; transform: rotate(8deg); box-shadow: 0 calc(var(--u) * 0.8) 0 rgba(0,0,0,0.3); }
.st-more { position: absolute; bottom: calc(var(--u) * -2); right: calc(var(--u) * -8); font-size: calc(var(--u) * 7); filter: drop-shadow(0 calc(var(--u) * 0.8) 0 rgba(0,0,0,0.35)); }
.st-title { margin: calc(var(--u) * 1.5) 0 0; font: calc(var(--u) * 6.2)/1.05 var(--f-display); text-align: center; text-wrap: balance; letter-spacing: 0.01em; }
.st-sub { font-size: calc(var(--u) * 3.4); color: #C9CCF0; text-align: center; }
.st-chart-wrap { position: relative; width: 100%; background: var(--mon); border: 1px solid var(--mon-line); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.5); }
.st-chart-h { display: flex; justify-content: space-between; align-items: baseline; font: 600 calc(var(--u) * 3) var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: #C9CCF0; padding: 0 calc(var(--u) * 1); }
.st-chart-h small { text-transform: none; letter-spacing: 0; color: var(--mon-muted); font-weight: 400; }
.st-chart-h b { font-size: calc(var(--u) * 6.4); color: #fff; }
.st-chart-h b.warn { color: #FFD27A; } .st-chart-h b.bad { color: #FF9A9A; }
#stChart { display: block; width: 100%; height: calc(var(--u) * 34); }
.st-pops { position: absolute; inset: calc(var(--u) * 8) calc(var(--u) * 2) calc(var(--u) * 2); pointer-events: none; }
.st-pop { position: absolute; transform: translateX(-50%); background: rgba(23,26,58,0.94); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.2); font-weight: 700; white-space: nowrap; animation: stPopLife 3s ease forwards; }
.st-pop.good { border-color: #5FD39A; color: #B9F3D6; } .st-pop.bad { border-color: #FF6B6B; color: #FFC2C2; } .st-pop.warn { border-color: #E0A526; color: #FFE1A3; }
.st-row { width: 100%; display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(var(--u) * 2); }
.st-mito { background: radial-gradient(ellipse at 50% 45%, #232866 0%, var(--mon) 70%); border: 1px solid var(--mon-line); border-radius: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 1.5); }
#stMito { display: block; width: 100%; height: calc(var(--u) * 30); }
.st-cap { text-align: center; font-size: calc(var(--u) * 2.9); line-height: 1.3; color: #fff; padding: 0 calc(var(--u) * 2); min-height: 2.6em; text-wrap: balance; }
.st-stats { display: grid; gap: calc(var(--u) * 1.5); }
.st-stats > div { background: var(--mon); border: 1px solid var(--mon-line); border-radius: calc(var(--u) * 2.5); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4); display: flex; flex-direction: column; justify-content: center; }
.st-stats b { font-size: calc(var(--u) * 6); font-weight: 700; line-height: 1; }
.st-stats span { font-size: calc(var(--u) * 2.8); color: var(--mon-muted); margin-top: calc(var(--u) * 0.6); }
.st-foot { margin-top: auto; font: calc(var(--u) * 3.6) var(--f-display); color: var(--tag); text-align: center; letter-spacing: 0.02em; }
.st-hint { position: absolute; bottom: calc(var(--u) * 1); right: calc(var(--u) * 2); font-size: calc(var(--u) * 2); color: rgba(255,255,255,0.28); }
.st-verdict { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: 36%; background: #fff; color: var(--ink); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 4); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: center; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,0.55); animation: stVerdict 0.45s cubic-bezier(.2,1.5,.4,1); }
.st-vtext > b { display: block; font-size: calc(var(--u) * 4.2); line-height: 1.2; text-wrap: balance; }
.st-verdict .rdo { font-size: calc(var(--u) * 3.3); gap: calc(var(--u) * 2.2); }
.st-vstats { display: grid; gap: calc(var(--u) * 0.6); margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 3.2); color: var(--ink-3); }
.st-vstats b { color: var(--ink); font-size: calc(var(--u) * 3.8); }
.studio.done .st-chart-wrap, .studio.done .st-row { filter: brightness(0.55); transition: filter 0.4s; }
.studio.paused::after { content: "⏸"; position: absolute; top: 12px; left: 12px; font-size: 22px; color: #fff; opacity: 0.6; }
/* the Spike-or-Flat cut */
.st-jtitle { font-size: calc(var(--u) * 8); }
.st-jtitle em { font: italic 400 calc(var(--u) * 4) var(--f-body); color: #C9CCF0; margin: 0 calc(var(--u) * 1); }
.st-ask { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: 47%; display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(var(--u) * 2); align-items: center; animation: stVerdict 0.4s cubic-bezier(.2,1.5,.4,1); }
.st-abtn { border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 2); font: calc(var(--u) * 7)/1 var(--f-display); color: #fff; text-align: center; display: grid; gap: calc(var(--u) * 1); box-shadow: 0 calc(var(--u) * 1.4) 0 rgba(0,0,0,0.35), 0 calc(var(--u) * 5) calc(var(--u) * 10) rgba(0,0,0,0.45); animation: stPulse 1.4s ease-in-out infinite; }
.st-abtn small { font: 600 calc(var(--u) * 3) var(--f-body); opacity: 0.9; }
.st-abtn.spike { background: linear-gradient(180deg, #FF8A5B, #E0552A); }
.st-abtn.flat { background: linear-gradient(180deg, #5FD3FF, #2A6FB0); animation-delay: 0.7s; }
.st-or { font: italic calc(var(--u) * 4.5) var(--f-body); color: #C9CCF0; }
@keyframes stPulse { 50% { transform: scale(1.05); } }
.studio.asking .st-chart-wrap, .studio.asking .st-row { filter: blur(calc(var(--u) * 1.4)) brightness(0.55); }
.st-verdict.judge { grid-template-columns: auto 1fr; top: 44%; }
.st-jword { font: calc(var(--u) * 9.5)/1 var(--f-display); letter-spacing: 0.02em; transform: rotate(-6deg); animation: stStamp 0.5s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; }
.st-jword.spike { color: #E0552A; } .st-jword.flat { color: #2A6FB0; }
.st-verdict.judge .st-vtext > b { font-size: calc(var(--u) * 5.2); }
@keyframes stHero { from { transform: translateY(calc(var(--u) * -6)) scale(0.6); } }
@keyframes stStamp { from { transform: rotate(-30deg) scale(2.4); } 60% { transform: rotate(-8deg) scale(0.92); } }
@keyframes stPopLife { 0% { transform: translate(-50%, 8px) scale(0.9); } 8% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stVerdict { from { transform: translateY(calc(var(--u) * 10)) scale(0.8); } }

/* the swap view on a short phone: drop the forecast chart and the secondary toggles so the shelves get some room */
@media (max-width: 760px) and (max-height: 800px) {
  body.swapping .strip-chart, body.swapping .fx-row > .mono, body.swapping .plate-cap .cap-t { display: none; }
  body.swapping .plate-cap { justify-content: flex-end; margin: 0; }
  body.swapping .plate-cap.bare { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  body.swapping .controls { display: none; }
}
@media (max-width: 760px) and (max-height: 600px) {
  body.swapping .meters { display: none; }
}
@media (max-width: 340px) {
  .ribbon.swap .rib-slot { display: none; }
  /* three cards still have to fit the shelf between the two aisle arrows */
  .prod { width: 88px; }
  .prod-name { max-width: 86px; font-size: 11px; }
  .shelf-row { gap: 2px; }
}
/* touch screens wider than a phone (tablets) get the same bigger buttons on the plate */
@media (pointer: coarse) and (min-width: 761px) {
  body.swapping .you .pchip button { width: 30px; height: 30px; }
  body.swapping .you .pchip button.pc-swap { width: auto; height: 30px; padding: 0 12px; }
  .rib-btn.cancel, .ribbon.swap .rib-btn.back { min-height: 36px; }
}
/* the swap view on a phone in landscape, or any short wide screen: the plate becomes a column beside the shelves */
@media (min-width: 761px) and (max-height: 500px) {
  body.swapping .topbar { min-height: 0; padding-block: 4px; }
  body.swapping .meters, body.swapping .lvl-chip { display: none; }
  .ribbon.swap .hl-l { display: none; }
  .ribbon.swap.replacing { flex-wrap: nowrap; }
  .ribbon.swap.replacing .rib-btn.back, .ribbon.swap.replacing .rib-lane, .ribbon.swap.replacing .rib-slot { display: none; }
  .ribbon.swap.replacing > span.rib-help { flex: 1 1 auto; order: 1; }
  .ribbon.swap.replacing .rib-btn.cancel { order: 2; margin-left: auto; flex: none; }
  body.swapping .home { display: grid; grid-template-columns: minmax(0, 1fr) 350px; }
  body.swapping .stage { grid-column: 1; grid-row: 1; min-width: 0; }
  body.swapping .you { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); overflow-y: auto; border-top: 0; border-left: 3px solid var(--mito); align-content: start; gap: 6px; padding-top: 8px; }
  body.swapping .you > *, body.swapping .you-mid { grid-column: 1; }
  body.swapping .you-buddy, body.swapping .strip-chart, body.swapping .controls, body.swapping .fx-row > .mono { display: none; }
  body.swapping .you .plate { max-height: 120px; overflow-y: auto; }
  body.swapping .you .pchip .pc-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; }
  body.swapping .you .pchip button { width: 28px; height: 28px; font-size: 16px; }
  body.swapping .you .pchip button.pc-swap { width: auto; height: 28px; padding: 0 12px; font-size: 12.5px; }
  body.swapping .you-act { position: sticky; bottom: 0; background: var(--ink); padding-top: 4px; }
}

/* ---------------- the two readings (js/readout.js) ----------------
   INSULIN LOAD and NUTRIENT DENSITY, drawn the same way on the plate card, the label sheet, the result card, the lab report, the studio card and
   My foods: a number with its unit, a bar on a fixed scale, a chip that says where the number comes from. One neutral hue for both bars, no
   letters, no good or bad colour, no shaded zones. Ticks are facts (a usual meal, a 75 g glucose drink, a usual day), never targets.
   Sizes are in em so a surface sets its scale with font-size (the studio card does). */
.rdo { --rdo-ink: var(--ink); --rdo-mute: #5D6385; --rdo-fill: #3E4690; --rdo-track: #E1E5EF; --rdo-tick: #171A3A; --rdo-chip-bg: #F1F3F8; --rdo-chip-bd: #CBD1DE; display: grid; gap: 0.7em; font-size: 12.5px; line-height: 1.3; color: var(--rdo-ink); min-width: 0; }
.rdo-dark, .d-plate .rdo { --rdo-ink: #fff; --rdo-mute: #B0B5E2; --rdo-fill: #A9B1F5; --rdo-track: rgba(255,255,255,0.15); --rdo-tick: #fff; --rdo-chip-bg: rgba(255,255,255,0.07); --rdo-chip-bd: rgba(255,255,255,0.28); }
.rdo-row { display: grid; gap: 0.3em; min-width: 0; }
.rdo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; min-width: 0; }
.rdo-n { font: 700 0.88em var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rdo-mute); white-space: nowrap; }
.rdo-v { text-align: right; min-width: 0; white-space: nowrap; }
.rdo-v b { font-size: 1.4em; font-weight: 700; color: var(--rdo-ink); letter-spacing: -0.01em; }
.rdo-u { font-size: 0.92em; color: var(--rdo-mute); }
.rdo-bar { position: relative; display: block; height: 0.58em; border-radius: 999px; background: var(--rdo-track); margin: 0.2em 0; }
.rdo-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--rdo-fill); }
.rdo-bar.over > i { border-radius: 999px 3px 3px 999px; }
.rdo-bar.over::after { content: "›"; position: absolute; right: 1px; top: 50%; transform: translateY(-52%); font: 700 1.1em/1 var(--f-mono); color: var(--rdo-track); mix-blend-mode: normal; }
.rdo .tk { position: absolute; display: block; text-decoration: none; transform: translateX(-50%); pointer-events: auto; }
.rdo .tk.line { top: -0.3em; bottom: -0.3em; width: 2px; border-radius: 1px; background: var(--rdo-tick); opacity: 0.9; }
.rdo .tk.notch { top: 100%; margin-top: 0.12em; width: 0; height: 0; border: 0.34em solid transparent; border-top: 0; border-bottom: 0.45em solid var(--rdo-tick); opacity: 0.9; }
.rdo-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1em 0.7em; font-size: 0.92em; color: var(--rdo-mute); min-width: 0; }
.rdo-sub .mono { font-size: 0.94em; }
.rdo-b, .rdo-chip { font: 600 0.8em/1.5 var(--f-mono); font-style: normal; padding: 0 0.7em; border-radius: 999px; background: var(--rdo-chip-bg); border: 1px solid var(--rdo-chip-bd); color: var(--rdo-mute); white-space: nowrap; }
.rdo-key { display: flex; flex-wrap: wrap; gap: 0.1em 1em; font-size: 0.86em; color: var(--rdo-mute); }
.rdo-key .rk { display: inline-flex; align-items: baseline; gap: 0.5em; }
.rdo-key .rk .tk { align-self: center; }
.rdo-key .tk { position: static; transform: none; display: inline-block; flex: none; }
.rdo-key .tk.line { height: 0.95em; width: 2px; }
.rdo-key .tk.notch { margin: 0; }
.rdo-lim { display: grid; gap: 0.15em; font-size: 0.92em; color: var(--rdo-ink); border-left: 2px solid var(--rdo-mute); padding-left: 0.6em; }
.rdo-cav { margin: 0; font-size: 0.88em; color: var(--rdo-mute); }
.rdo .link-btn { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rdo .link-btn:hover { color: var(--rdo-ink); }
.rdo .link-btn { padding: 9px 6px; margin: -9px -6px; position: relative; }   /* a bigger target than the 11px of text, with no change to the layout */
.rdo-compact { gap: 0.5em; }
.rdo-compact .rdo-v b { font-size: 1.28em; }
.rdo-compact .rdo-cav { font-size: 0.84em; }
.rdo-l { display: flex; align-items: baseline; gap: 0.7em; min-width: 0; }
.rdo-cav .cv-short { display: none; }

/* shelf tag: two numbers, each over a tiny bar. First line insulin load (% of a usual day), second nutrient density (% of reference intakes). */
.tag.rdo-tag { top: 2px; right: 3px; width: 40px; height: auto; border-radius: 8px; background: #fff; color: var(--ink); border: 1px solid #C3CADA; box-shadow: 0 2px 0 rgba(23,26,58,0.16); transform: none; padding: 3px 4px 4px; display: grid; gap: 3px; place-items: stretch; font: 700 10.5px/1 var(--f-mono); letter-spacing: -0.02em; }
.rdo-tag i { display: grid; gap: 1px; font-style: normal; }
.rdo-tag b { text-align: right; font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.rdo-tag b small { font-size: 8.5px; font-weight: 600; opacity: 0.75; margin-left: 1px; }
.rdo-tag s, .rg s { display: block; height: 3px; border-radius: 2px; background: #E1E5EF; text-decoration: none; overflow: hidden; }
.rdo-tag u, .rg u { display: block; height: 100%; background: #3E4690; border-radius: 2px; text-decoration: none; }
.prod.flip .tag.rdo-tag { animation: flipTag2 0.7s ease; }
@keyframes flipTag2 { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(90deg) scale(1.4); } 100% { transform: rotateY(0) scale(1); } }
@media (min-width: 761px) { .tag.rdo-tag { width: 46px; top: 4px; right: 8px; padding: 4px 5px 5px; gap: 4px; font-size: 11.5px; } .rdo-tag b { font-size: 11.5px; } .rdo-tag s { height: 4px; } }
@media (min-width: 1200px) and (min-height: 760px) { .tag.rdo-tag { width: 54px; top: 6px; right: 12px; } .rdo-tag b { font-size: 12.5px; } }
.shelf-key { margin: -2px auto 4px; max-width: 94%; text-align: center; font-size: 11px; line-height: 1.25; color: var(--muted); }
.shelf-key b { font-weight: 700; color: var(--ink-3); }
@media (max-width: 760px) { .shelf-key .sk-u { display: none; } .shelf-key { margin-bottom: 2px; } }   /* a phone: one short line; the units are in the tag's tooltip and on the label sheet */

/* the ladder on the label sheet: an amount, the glucose rise, and the two readings */
.rung.rdo-rung { grid-template-columns: minmax(0, 1fr) auto 3.9em 3.9em; gap: 4px 10px; }
.rung.rdo-rung .rg { display: grid; gap: 2px; }
.rung.rdo-rung .rg b { text-align: right; font-size: 12.5px; }
.rung.rdo-head { background: none; border: 0; padding: 0 10px; font: 600 10px var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rung.rdo-head span:nth-child(n+3) { text-align: right; }
.rdo-cell { text-align: right; white-space: nowrap; }

/* the result card and the lab report header: the readout instead of a letter */
.res-read { margin: 4px 0 8px; font-size: 13.5px; }
.lab-read { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; }
.lab-read .lr-t { font-weight: 700; font-size: 15px; display: block; margin-bottom: 2px; }
.lab-read .lr-p { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }

/* My foods preview */
.cf-pv .rdo { font-size: 12px; margin-top: 4px; }
.cf-pv-glu { font-size: 12.5px; color: var(--muted); margin: 2px 0 4px; }

/* the explore ribbon's hint line: a plain sentence and one or two buttons (a nudge to the challenges, today's deck, or a pair of foods to compare) */
.rib-hint { flex: 1 1 100%; display: flex; align-items: center; gap: 4px 10px; min-width: 0; padding-top: 5px; margin-top: 1px; border-top: 1px dashed rgba(23,26,58,0.16); }
.rh-k { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rh-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.rh-b { flex: none; display: inline-flex; gap: 6px; }
.rh-b .rib-btn { margin-left: 0; background: var(--ink); color: #fff; padding: 4px 11px; }
.rh-b .rib-btn.ghost { background: none; color: var(--ink-3); border: 1px solid #C3CADA; padding: 3px 10px; }
.rh-b .rib-btn:hover { background: var(--mito); color: #fff; border-color: var(--mito); }
@media (max-width: 760px) { .rh-k { display: none; } .rh-t { font-size: 12px; } }

/* ================= RDA page (js/rdas.js): "How RDAs are arrived at, and why they are imperfect proxies" =================
   Also the extra rows on the "Where the targets come from" cards. One neutral tone throughout: nothing here is a verdict. */
.rdas { font-size: 14px; line-height: 1.5; color: var(--ink); }
.rdas h2 { font-size: 20px; padding-right: 40px; }
.rdas .sub { max-width: 68ch; margin-bottom: 12px; }
.rdas p { margin: 0 0 10px; max-width: 70ch; }
.rdas h4 { margin: 14px 0 6px; font: 700 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.rdas h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 4px; }
.rd-short { background: #EEF6FF; border: 1px solid #C9DDF5; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 13.5px; color: var(--ink-3); }
.rd-short b, .rd-short .rd-sh { color: var(--ink); font: 700 11.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; display: block; }
.rd-short ul { margin: 6px 0 0; padding-left: 18px; }
.rd-short li { margin: 4px 0; max-width: 70ch; }
.rd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.rd-sec { border: 1px solid var(--line); background: var(--card); border-radius: 12px; margin: 8px 0; }
.rd-sec > summary { list-style: none; cursor: pointer; padding: 10px 42px 10px 14px; min-height: 48px; display: flex; align-items: center; position: relative; border-radius: 12px; }
.rd-sec > summary::-webkit-details-marker { display: none; }
.rd-sec > summary > span { display: grid; gap: 1px; }
.rd-sec > summary .rd-h3 { margin: 0; font: 700 14.5px/1.25 var(--f-body); }
.rd-sec > summary small { font-size: 12px; color: var(--muted); }
.rd-sec > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform 0.15s ease; }
.rd-sec[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.rd-sec[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.rd-sec > summary:hover { background: #F7F9FB; }
.rd-sec > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.rd-body { padding: 10px 14px 14px; }
.rd-body > :last-child { margin-bottom: 0; }
.rd-dl { margin: 0 0 8px; }
.rd-dl dt { font: 700 13px var(--f-mono); margin: 10px 0 2px; }
.rd-dl dt small { font: 400 11.5px var(--f-body); color: var(--muted); }
.rd-dl dd { margin: 0 0 4px; max-width: 70ch; }
.rd-fig { margin: 10px 0 0; }
.rd-bell { width: 100%; max-width: 420px; height: auto; display: block; }
.rd-bell text { font: 600 11px var(--f-mono); fill: var(--ink-3); }
.rd-bell .cv { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.rd-bell .b1 { fill: rgba(69, 74, 124, 0.30); } .rd-bell .b2 { fill: rgba(69, 74, 124, 0.14); }
.rd-bell .ax { stroke: var(--ink-3); stroke-width: 1; }
.rd-bell .mk { stroke: var(--ink); stroke-width: 1.5; }
.rd-bell .ar { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.rd-fig figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; max-width: 60ch; }
.rd-steps, .rd-pts, .rd-list, .rd-body ul { padding-left: 20px; margin: 0 0 10px; }
.rd-steps li, .rd-pts li, .rd-list li, .rd-body ul li { margin: 6px 0; max-width: 70ch; }
.rd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.rd-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rd-tbl th, .rd-tbl td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px dotted var(--line); }
.rd-tbl thead th { font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--line); background: #F7F9FB; }
.rd-tbl tbody th { font-weight: 700; }
.rd-tbl tbody tr:last-child > * { border-bottom: 0; }
.rd-ev .rd-grp td { background: #F2F5F8; border-top: 1px solid var(--line); font: 700 12.5px var(--f-body); padding: 8px 8px 6px; }
.rd-ev .rd-grp small { font: 600 10.5px var(--f-mono); color: var(--muted); margin-left: 4px; }
.rd-rk { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3); color: #fff; font: 700 11px var(--f-mono); margin-right: 4px; }
.rd-gb { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.rd-yd { font-variant-numeric: tabular-nums; }
.rd-yd th:not(:first-child), .rd-yd td { text-align: right; white-space: nowrap; }
.rd-yd th, .rd-yd td { padding: 5px 4px; }
.rd-yd th:first-child { padding-left: 8px; }
.rd-yd thead th { letter-spacing: 0; }
.rd-yd tbody th small { display: block; font-weight: 400; color: var(--muted); }
.rd-chip, .tg-kind { font: 700 10.5px var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: #E7EAF0; color: var(--ink-3); white-space: nowrap; }
.rd-chip { display: inline-block; }
.rd-tier { color: var(--ink); }
.rd-dim { color: var(--muted); }
.rd-nlink { font-weight: 700; text-align: left; color: var(--ink); text-decoration-color: #B7BFD3; }
.rd-ev tbody th .rd-chip { display: table; margin-top: 3px; }
.rd-ev { table-layout: auto; }
.rd-ev tbody th { width: 42%; }
.rd-note { font-size: 12px; color: var(--muted); }
.rd-sub { margin-top: 8px; }
.rd-sub > summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 4px 0; min-height: 32px; }
.rd-sub > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.rd-used { font-size: 12.5px; }
.rd-src { list-style: none; padding: 0 !important; }
.rd-src li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; margin: 6px 0; padding: 4px 6px; border-radius: 8px; font-size: 12.5px; max-width: none; }
.rd-src li.hl { background: #FFF6D1; }
.rd-src small { display: block; color: var(--muted); font-size: 11.5px; }
.rd-sn { font: 700 11px var(--f-mono); color: var(--ink-3); padding-top: 2px; }
.rd-eu { display: block; font-size: 11.5px; margin-top: 2px; }
.rd-sx { font: 600 10px var(--f-mono); margin-left: 2px; white-space: nowrap; }
.rd-sx a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; padding: 3px 3px; }   /* underlined, with a hit area of about 24 px: the markers sit next to each other */
.rd-sx a:hover { text-decoration: underline; }
.rd-end { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.rd-cav { font-size: 11.5px; color: var(--muted); }
.tg-cross { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #EEF6FF; border: 1px solid #C9DDF5; font-size: 13px; color: var(--ink-3); }
.tg-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.tg-row > b.mono { font: 600 12.5px/1.4 var(--f-mono); min-width: 0; overflow-wrap: anywhere; }
.tg-row .rd-tier { display: block; }
a.link-btn { cursor: pointer; }
@media (max-width: 520px) {
  .tg-row { grid-template-columns: 92px 1fr; }
  .rd-body { padding: 8px 12px 12px; }
  .rd-sec > summary { padding-left: 12px; }
  .rd-src li { grid-template-columns: 30px 1fr; gap: 6px; }
  .rd-tbl th, .rd-tbl td { padding: 5px 6px; }
  .rd-tbl { font-size: 12px; }
}
@media (max-width: 400px) {
  .rd-yd { font-size: 11.5px; }
  .rd-yd th, .rd-yd td { padding: 5px 3px; }
  .rd-yd th:first-child { padding-left: 6px; }
  .rd-yd thead th { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rd-sec > summary::after { transition: none; } }
.tg.tg-hl { box-shadow: 0 0 0 3px var(--tag); }
/* ===== end RDA page ===== */

/* the readout on the plate card at a door: on a phone the tick legend steps aside (the ticks keep their tooltips; the label sheet, the result card and the report spell them out) */
@media (max-width: 760px) {
  .d-plate .rdo-compact .rdo-key { font-size: 10.5px; gap: 0 0.9em; }   /* a tall phone shows the key as one small line: what the ticks on the bars are */
  .d-plate .rdo { margin: 1px 0 0; font-size: 12px; }
  .d-plate .rdo-compact .rdo-cav { font-size: 10.5px; line-height: 1.3; }
  /* the readings are the card's main news: on a phone what they already say gives way, so the doors keep their height (the blurb is the door's tooltip, the
     "Gives" line is the density's drill-down on the label sheet, the absolute insulin amount is on the result card and the report) */
  .d-plate .dp-sub:not(.typ) { display: none; }
  .d-plate .dp-gives { display: none; }
  .d-plate .rdo-compact .rdo-fact { display: none; }
}
/* the live readings in the aisle strip (explore and the swap view): short, so they stay on the first screenful of the forecast row */
.fx-rds { display: contents; }
.fx-rd { white-space: nowrap; }
.fx-rd b { font: 700 12.5px var(--f-mono); }
.fx-rd small { font-size: 11px; color: #A2A7D8; }


/* short phones and phones on their side: the card keeps the readings and the buttons, and drops what the readings already say (the one-line blurb, the "Gives" block) */
@media (max-width: 760px) and (max-height: 700px) {
  .d-plate .dp-sub:not(.typ) { display: none; }
  .d-plate .dp-nut2 { display: none; }
  .d-plate .rdo { gap: 5px; }
  .d-plate .rdo-compact .rdo-row[data-k="ins"] .rdo-sub .mono { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.view-doors .d-plate { align-content: start; justify-content: flex-start; }
  .d-plate .dp-sub:not(.typ) { display: none; }
  .d-plate .rdo { font-size: 11.5px; gap: 5px; }
  .d-plate .rdo-compact .rdo-row[data-k="ins"] .rdo-sub .mono { display: none; }
  .d-plate .rdo-compact .rdo-v b { font-size: 1.2em; }
  .d-plate .rdo-compact .rdo-cav { font-size: 10px; line-height: 1.25; }
}
/* a short phone, or one on its side, has no room for the key line: it stays in the page for a screen reader, hidden from the eye (the label sheet, the result card and the report print it) */
@media (max-width: 760px) and (max-height: 700px), (orientation: landscape) and (max-height: 520px) {
  .d-plate .rdo-compact .rdo-key { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* on a wide card (a desktop or a tablet) the two readings sit side by side, so the card stays short and the doors keep their height */
@media (min-width: 761px) and (min-height: 521px) {
  .d-plate .rdo-plate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; row-gap: 6px; align-items: start; }
  .d-plate .rdo-plate > .rdo-key, .d-plate .rdo-plate > .rdo-cav { grid-column: 1 / -1; align-self: baseline; }
  .d-plate .rdo-plate > .rdo-key:has(+ .rdo-cav) { grid-column: 1; }   /* the tick key and the caveat share one line when both are there */
  .d-plate .rdo-plate > .rdo-key + .rdo-cav { grid-column: 2; }
}

/* short phones: the readout gets a one-line caveat, the stage gets more of the height, the chips and buttons tighten */
@media (max-width: 760px) and (max-height: 700px) {
  body.view-doors .stage, body.view-doors.has-typ .stage { flex-basis: 70%; }
  body.view-doors .vitals, body.view-doors.has-typ .vitals { flex-basis: 30%; }
  .d-plate .rdo-compact .rdo-fact { display: none; }
  .d-plate .rdo-cav .cv-long { display: none; }
  .d-plate .rdo-cav .cv-short { display: inline; }
  .d-plate .dp-chips { gap: 4px; }
  .d-plate .dp-chip { font-size: 11px; padding: 1px 8px; }
  .d-plate .rdo-compact .rdo-v b { font-size: 1.2em; }
}
@media (min-width: 761px) and (min-height: 521px) {
  body.view-doors .stage { flex-basis: 59%; }
  body.view-doors .vitals { flex-basis: 41%; }
}
@media (min-width: 761px) and (min-height: 521px) and (max-height: 1000px) {   /* a laptop or desktop window: the doors keep the height they had before the card carried the readings */
  body.view-doors .stage { flex-basis: 64%; }
  body.view-doors .vitals { flex-basis: 36%; }
}
/* a phone on its side: the card scrolls, and the buttons stay in view at the bottom of it */
@media (orientation: landscape) and (max-height: 520px) {
  body.view-doors .d-plate { align-content: start; }
  body.view-doors .d-plate .dp-btns { position: sticky; bottom: 0; z-index: 2; background: var(--ink); padding: 6px 0 8px; margin-top: auto; box-shadow: 0 -10px 10px -8px rgba(5,6,24,0.7); }
  .d-plate .dp-chip { font-size: 11px; padding: 1px 8px; }
  .d-plate .dp-chips { gap: 4px; }
}
/* a phone on its side: the card is only about 160px tall, so the plate is emoji and count, the two readings sit side by side with the number under the name, and the caveat is the short line */
@media (orientation: landscape) and (max-height: 520px) {
  .d-plate .dp-chip .cn { display: none; }
  .d-plate .dp-chip { padding: 1px 7px; }
  .d-plate .rdo-plate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: start; }
  .d-plate .rdo-plate .rdo-top { flex-direction: column; align-items: flex-start; gap: 0; }
  .d-plate .rdo-plate .rdo-v { text-align: left; }
  body.view-doors .stage { flex-basis: 60%; }
  body.view-doors .vitals { flex-basis: 40%; }
  .d-plate .dp-sub { display: none; }
  body.view-doors .d-plate { padding: 4px 12px 0; gap: 3px 8px; }
  .d-plate .dp-main { gap: 2px; }
  body.view-doors .d-plate .dp-btns { padding: 4px 0 6px; }
  .d-plate .btn-eat { padding: 4px 12px 6px; }
  .d-plate .rdo-plate > .rdo-cav { grid-column: 1 / -1; }
  .d-plate .rdo-cav .cv-long { display: none; }
  .d-plate .rdo-cav .cv-short { display: inline; }
  .d-plate .rdo-compact .rdo-fact { display: none; }
  .d-plate .dp-lane { font-size: 13px; }
  .d-plate .dp-top { gap: 2px 10px; }
}

/* ---------------- the plate card: it shrinks and scrolls instead of painting over the vitals ----------------
   The card (now carrying the two readings) can be taller than the room the stage leaves it, at 761 to 900 px wide and 600 to 640 px tall, and on a 320x568
   phone with a typical plate. It used to be flex:none, so the charts were drawn over its button row. Now it takes whatever height is left (the hall keeps its
   own minimum), scrolls when it must, and its buttons stay in view at the bottom. Between 761 and 1199 px the plate and the readings take the card's full
   width and the buttons sit on a row of their own, so the two columns of the readout are not squeezed to the width of a phone. */
.d-plate { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.d-plate .dp-btns { position: sticky; bottom: 0; z-index: 2; background: var(--ink); padding-top: 4px; }
@media (min-width: 761px) and (max-width: 1199px) { .d-plate .dp-main { flex-basis: 100%; } .d-plate .dp-btns { margin-left: auto; } }
@media (min-width: 761px) and (max-height: 700px) {   /* a short window: the card drops what the readings already say, as a phone does */
  .d-plate .dp-sub:not(.typ) { display: none; }
  .d-plate .dp-nut2 { display: none; }
  .d-plate .rdo-compact .rdo-key { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .d-plate .rdo-compact .rdo-fact { display: none; }
}
@media (max-height: 640px) {   /* very short: no description line (the plate's name says "typical"), tighter rows, the plate as emoji and count */
  .d-plate .dp-sub.typ { display: none; }
  .d-plate .dp-main { gap: 2px; }
  .d-plate .dp-chip .cn { display: none; }
}

/* the readout's small print stays readable: the "modeled" / "from food tables" chips and the shelf tag's % sign */
.rdo-b, .rdo-chip { font-size: max(11px, 0.8em); }
.rdo-tag b small { font-size: 9.5px; }
@media (max-width: 370px) { #dSwap span { display: none; } }   /* a 360 px phone: the Skip button needs the width, and the hand keeps its name for a screen reader (aria-label) */
@media (max-width: 359px) { .rdo-top { flex-wrap: wrap; } .rdo-v { white-space: normal; margin-left: auto; } }   /* a 320 px phone: the unit may wrap under the number */
@media (orientation: landscape) and (max-height: 520px) { .d-plate .rdo-plate .rdo-v { white-space: normal; } }
/* a focus ring that shows on the light surfaces the readout also lives on (result card, label sheet, report); the dark plate card keeps the yellow one */
.rdo .link-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.d-plate .rdo .link-btn:focus-visible, .rdo-dark .link-btn:focus-visible { outline-color: var(--tag, #FFD447); }
@media (forced-colors: active) {   /* Windows high contrast: the bars and ticks keep an outline and a system colour, and the border-drawn notch is dropped */
  .rdo-bar { border: 1px solid CanvasText; }
  .rdo-bar > i { background: Highlight; forced-color-adjust: none; }
  .rdo .tk.line { background: CanvasText; forced-color-adjust: none; }
  .rdo .tk.notch { display: none; }
  .rdo-tag s, .rg s { border: 1px solid CanvasText; }
  .rdo-tag u, .rg u { background: Highlight; forced-color-adjust: none; }
}