/* The four-tab app shell (home.js): Home, Orders, Support and Account. Phone first; blue and white only. */

/* ---- tab bar: four tabs, the open one sits on a soft blue tile ---- */
@media (max-width:760px){
  .tabbar4{grid-template-columns:repeat(4,1fr);border-top:0;border-radius:22px 22px 0 0;box-shadow:0 -1px 0 var(--line),0 -14px 30px -20px rgba(11,27,58,.28);padding-top:8px}
  .tabbar4 .tab{font-size:11.5px;gap:3px;min-height:52px}
  .tabbar4 .tab-ic{width:54px;height:34px;border-radius:12px;place-items:center;transition:background-color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
  .tabbar4 .tab[aria-current="page"]{color:var(--blue);font-weight:700}
  .tabbar4 .tab[aria-current="page"] .tab-ic{background:var(--blue-l);transform:translateY(-1px)}
  .tabbar4 .tab .hbadge{top:1px;right:6px}
  .tabbar4 .tab .hbadge.dot{top:4px;right:13px}
  /* the side menu is only for browsing the shop; everything else it held now lives in Account */
  .hdr-v2.hdr-inner .hmenu{display:none}
  .hdr-v2 .hmsg{display:grid}
  /* Support is a tab now, so the floating help button would only cover things */
  body:has(.tabbar4) .hp-fab{display:none}
  /* the four-tab bar is a little taller, so the food "View basket" bar sits clear above it */
  body:has(.tabbar4) .nf-float{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.hmsg{display:none;position:relative}

/* ---- Home ---- */
.hx{padding-top:14px;padding-bottom:28px;max-width:720px}
/* food in the basket: the "View basket" bar floats above the tab bar, and Home leaves room for it */
main:has(.hx-float) .hx{padding-bottom:118px}
.hx-hi small{display:block;color:var(--muted);font-size:14px;font-weight:500}
.hx-hi h1{font:800 26px/1.15 var(--f-display);letter-spacing:-.02em;margin-top:2px}

.hx-live{width:100%;display:flex;align-items:center;gap:14px;border:0;border-radius:18px;background:var(--ink);color:#fff;padding:13px 12px 13px 16px;margin-top:14px;text-align:left}
/* a loading bar under the text: it slides while the order waits for a runner, then fills as the order moves */
.hx-live-bar{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.16);margin-top:8px;overflow:hidden}
.hx-live-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#6C97FF,#fff,#6C97FF);background-size:200% 100%;transition:width .7s cubic-bezier(.2,.8,.2,1);animation:hxflow 1.6s linear infinite}
.hx-live-bar.wait i{width:38%!important;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 45%,#8FB4FF 70%,rgba(255,255,255,0));animation:hxslide 1.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes hxslide{from{transform:translateX(-110%)}to{transform:translateX(275%)}}
.hx-live-t{flex:1;min-width:0;display:grid;gap:1px}
.hx-live-t b{font:700 14.5px/1.3 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-live-t small{font-size:12.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-live-go{flex:none;display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.14);border-radius:999px;padding:8px 10px 8px 13px;font:700 12.5px var(--f-body)}

.hx-car{margin:16px calc(-1*max(16px,env(safe-area-inset-left,0px))) 0}
.hx-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hx-track::-webkit-scrollbar,.hx-row::-webkit-scrollbar{display:none}
.hx-slide{flex:0 0 90%;scroll-snap-align:center;min-height:152px;border:0;border-radius:22px;display:flex;align-items:center;gap:10px;padding:16px 14px 16px 18px;text-align:left;position:relative;overflow:hidden;color:#fff}
.hx-slide::before{content:"";position:absolute;right:-50px;top:-60px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.09)}
.hx-s-t{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hx-s-t em{font:700 10.5px var(--f-body);letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.2)}
.hx-s-t b{font:800 18.5px/1.18 var(--f-display);letter-spacing:-.015em;margin-top:9px;text-wrap:balance}
.hx-s-t small{font-size:12.5px;line-height:1.35;opacity:.86;margin-top:4px}
.hx-s-cta{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--f-body);margin-top:10px}
.hx-s-art{position:relative;flex:none;width:92px;height:92px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.4);transform:rotate(5deg);box-shadow:0 14px 28px -14px rgba(3,14,48,.6)}
.hx-s-art img{width:100%;height:100%;object-fit:cover}
.s-blue{background:linear-gradient(135deg,#1F63FF,#0B3FC0)}
.s-ink{background:linear-gradient(135deg,#12296B,#0B1B3A)}
.s-light,.s-sky{color:var(--ink)}
.s-light{background:var(--blue-l)}
.s-sky{background:linear-gradient(135deg,#F2F6FF,#DCE8FF)}
.s-light::before,.s-sky::before{background:rgba(20,86,240,.07)}
.s-light .hx-s-t em,.s-sky .hx-s-t em{background:#fff;color:var(--blue-d)}
.s-light .hx-s-cta,.s-sky .hx-s-cta{color:var(--blue-d)}
.s-light .hx-s-art,.s-sky .hx-s-art{background:#fff;border-color:#fff;color:var(--blue)}
.hx-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.hx-dots i{width:16px;height:4px;border-radius:4px;background:var(--sunk);transition:width .35s cubic-bezier(.2,.8,.2,1),background-color .35s}
.hx-dots i.on{width:30px;background:var(--blue)}

.hx-sec{font:800 19px/1.2 var(--f-display);margin:28px 0 14px;padding-bottom:9px;position:relative}
.hx-sec::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:4px;border-radius:4px;background:var(--blue)}

.hx-card{width:100%;border:0;text-align:left;border-radius:26px;padding:20px 16px 20px 20px;display:flex;gap:10px;min-height:212px;position:relative;overflow:hidden;color:var(--ink)}
.hx-card::before{content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.1)}
.hx-card::after{content:"";position:absolute;right:40px;bottom:-110px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07)}
.hx-c-t{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hx-c-t em{font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.2)}
.hx-c-t b{font:800 27px/1.08 var(--f-display);letter-spacing:-.025em;margin-top:14px}
.hx-c-t small{font-size:13.5px;line-height:1.4;opacity:.92;margin-top:8px}
.hx-c-cta{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--f-body);margin-top:auto;padding-top:14px}
.hx-c-cta .ic{transition:transform .25s}
.hx-card:active .hx-c-cta .ic{transform:translateX(4px)}
.hx-c-art{position:relative;z-index:1;flex:none;width:112px;align-self:center;height:156px}
.hx-tile{position:absolute;right:0;top:6px;width:94px;height:94px;border-radius:26px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.5);box-shadow:0 16px 30px -14px rgba(3,14,48,.55);transform:rotate(6deg)}
.hx-tile.t2{right:30px;top:70px;width:78px;height:78px;border-radius:22px;transform:rotate(-7deg)}
.hx-tile img{width:100%;height:100%;object-fit:cover}
.hx-tile.ic{top:28px;width:100px;height:100px;background:#fff;border-color:#fff;color:var(--blue);box-shadow:0 16px 30px -16px rgba(20,86,240,.45)}
.c-blue{background:linear-gradient(140deg,#2468FF 0%,#1456F0 45%,#0A37AD 100%);color:#fff;box-shadow:0 20px 36px -22px rgba(20,86,240,.8)}
.c-light{background:var(--blue-xl);box-shadow:inset 0 0 0 1px #DCE6FB}
.c-line{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.c-light::before,.c-light::after,.c-line::before,.c-line::after{background:rgba(20,86,240,.05)}
.c-light .hx-c-t em,.c-line .hx-c-t em{background:var(--blue-l);color:var(--blue-d)}
.c-light .hx-c-t em{background:#fff}
.c-light .hx-c-t small,.c-line .hx-c-t small{color:var(--muted);opacity:1}
.c-light .hx-c-cta,.c-line .hx-c-cta{color:var(--blue-d)}
.c-light .hx-tile,.c-line .hx-tile{border-color:#fff;background:#fff;box-shadow:0 16px 30px -16px rgba(11,27,58,.35)}
.c-line .hx-tile.ic{background:var(--blue-l);border-color:var(--blue-l);box-shadow:none}
.hx-on{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;margin-top:5px}
.hx-on i{width:7px;height:7px;border-radius:50%;background:#4ADE80}
.hx-on.off i{background:#FBBF24;animation:none}

.hx-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.hx-q{border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:18px;padding:14px;text-align:left;display:grid;gap:1px;min-height:112px;align-content:start}
.hx-q-ic{width:38px;height:38px;border-radius:12px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;margin-bottom:9px}
.hx-q b{font:700 14.5px/1.3 var(--f-body)}
.hx-q small{color:var(--muted);font-size:12.5px;line-height:1.35}

.hx-row{display:flex;gap:12px;overflow-x:auto;margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:2px 16px 6px;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
.hx-dish{flex:0 0 146px;scroll-snap-align:start;border:0;background:none;text-align:left;padding:0;display:grid;gap:1px;color:var(--ink)}
.hx-d-ph{display:block;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--soft);margin-bottom:7px}
.hx-d-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hx-dish b{font:700 14px/1.3 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-dish small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-d-p{font-weight:700;font-size:13.5px;margin-top:2px}
.hx-again{flex:0 0 226px;scroll-snap-align:start;box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:13px;display:grid;gap:8px;align-content:start}
.hx-ag-top{display:flex;align-items:center;gap:9px;min-width:0}
.hx-ag-top img,.hx-ag-top i{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;font:700 12px var(--f-body);font-style:normal}
.hx-ag-top b{font:700 14.5px var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-again small{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.hx-join{margin-top:26px;border-radius:20px;background:var(--soft);padding:18px;display:grid;gap:4px}
.hx-join b{font:800 17px var(--f-display)}
.hx-join-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---- Orders ---- */
.ox{max-width:720px}
.ox-head small{display:block;font:700 11.5px var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ox-head h1{font:800 34px/1.05 var(--f-display);letter-spacing:-.025em;margin:5px 0 3px}
.ox-head p{margin:0}
.ox-segs{display:flex;gap:8px;margin:18px 0;overflow-x:auto;scrollbar-width:none}
.ox-seg{flex:none;border:0;border-radius:999px;padding:0 20px;min-height:46px;font:700 14.5px var(--f-body);background:var(--soft);color:var(--muted);display:inline-flex;gap:8px;align-items:center;transition:background-color .25s,color .25s,box-shadow .25s,transform .18s cubic-bezier(.34,1.56,.64,1)}
.ox-seg.on{background:var(--blue);color:#fff;box-shadow:0 12px 22px -10px rgba(20,86,240,.7)}
.ox-seg:active{transform:scale(.96)}
.ox-seg em{font-style:normal;min-width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.24);display:grid;place-items:center;font-size:11.5px;padding:0 6px}
.ox-seg:not(.on) em{background:var(--blue);color:#fff}
.ox-guest{margin:0 0 12px}
.ox-list{display:grid;gap:10px;margin-bottom:12px}
.ox-row{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:18px;padding:14px;color:var(--ink)}
.ox-row.live{box-shadow:inset 0 0 0 1.5px #C9D9FF;background:linear-gradient(180deg,#F5F8FF,#fff)}
.ox-logo{flex:none;width:46px;height:46px;border-radius:14px;overflow:hidden;background:var(--blue-l);color:var(--blue);display:grid;place-items:center}
.ox-logo img{width:100%;height:100%;object-fit:cover}
.ox-t{flex:1;min-width:0;display:grid;gap:2px}
.ox-t b{font:700 15px/1.3 var(--f-body)}
.ox-t small{font-size:12.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ox-t .ox-now{color:var(--blue-d);font-weight:600;white-space:normal}
.ox-bar{display:block;height:5px;border-radius:5px;background:var(--sunk);margin-top:7px;overflow:hidden}
.ox-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#1456F0,#6C97FF,#1456F0);background-size:200% 100%;transition:width .7s cubic-bezier(.2,.8,.2,1);animation:hxflow 1.6s linear infinite}
.ox-row .pill{flex:none;margin-top:1px}
.ox-row.sk{height:78px;box-shadow:none;background:linear-gradient(90deg,var(--soft) 25%,#fff 50%,var(--soft) 75%);background-size:200% 100%;animation:hxflow 1.3s linear infinite}
.ox-empty{text-align:center;padding:34px 12px 4px}
.ox-empty-ic{width:104px;height:104px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;margin:0 auto 18px;animation:hxpop .5s cubic-bezier(.34,1.56,.64,1) both}
.ox-empty h3{font:800 20px var(--f-display)}
.ox-empty p{margin:8px auto 0;max-width:30ch}
.ox-mean{margin-top:28px}
.ox-mean>small{display:block;font:700 11.5px var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ox-mean-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ox-m{border:0;border-radius:20px;padding:16px;text-align:left;display:grid;gap:2px;background:var(--blue-xl);box-shadow:inset 0 0 0 1px #DCE6FB;color:var(--ink);min-height:112px;align-content:end}
.ox-m .ic{margin-bottom:10px;color:var(--blue)}
.ox-m.c-blue{color:#fff;box-shadow:none;background:linear-gradient(140deg,#2468FF 0%,#1456F0 45%,#0A37AD 100%)}
.ox-m.c-blue .ic{color:#fff}
.ox-m b{font:800 16px var(--f-display)}
.ox-m span{font-size:12.5px;opacity:.85}
.ox-plan{width:100%;display:flex;gap:14px;align-items:center;text-align:left;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:20px;padding:16px;color:var(--ink)}
.ox-plan-ic{flex:none;width:54px;height:54px;border-radius:16px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center}
.ox-plan span:nth-child(2){flex:1;min-width:0;display:grid;gap:2px}
.ox-plan b{font:700 15.5px var(--f-body)}
.ox-plan small{font-size:12.5px;line-height:1.4}

/* ---- Account ---- */
.ax{max-width:720px}
.ax-h{font:800 26px/1.15 var(--f-display);letter-spacing:-.02em;margin:4px 0 14px}
.ax-me{width:100%;display:flex;gap:14px;align-items:center;border:0;background:none;text-align:left;padding:2px 0 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.ax-av{flex:none;width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 21px var(--f-display)}
.ax-me-t{min-width:0;display:grid;gap:1px}
.ax-me-t b{font:800 18.5px/1.25 var(--f-display)}
.ax-me-t small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-me-t .ax-since{color:var(--blue);font-weight:600;font-size:12.5px}
.ax-role{width:100%;display:flex;gap:12px;align-items:center;text-align:left;border:0;border-radius:16px;background:var(--blue-xl);box-shadow:inset 0 0 0 1px #DCE6FB;color:var(--ink);padding:13px 14px;margin-top:14px}
.ax-role>.ic:first-child{color:var(--blue)}
.ax-role span{flex:1;min-width:0;display:grid}
.ax-role b{font:700 15px var(--f-body)}
.ax-role small{color:var(--muted);font-size:12.5px}
.ax-wallet{margin-top:16px;border-radius:22px;padding:18px;background:linear-gradient(140deg,#2468FF,#1456F0 45%,#0A37AD);color:#fff;display:grid;gap:8px;position:relative;overflow:hidden;box-shadow:0 20px 36px -22px rgba(20,86,240,.8)}
.ax-wallet::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1)}
.ax-w-top{display:flex;align-items:center;gap:9px;position:relative}
.ax-w-top small{font:600 13px var(--f-body);opacity:.9}
.ax-w-ic{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.ax-w-bal{font:800 32px/1.1 var(--f-display);letter-spacing:-.02em;position:relative}
.ax-w-b{display:flex;gap:8px;margin-top:6px;position:relative}
.ax-w-b .btn{flex:1;justify-content:center;min-height:44px}
.ax-w-ghost{background:rgba(255,255,255,.14);color:#fff;border:0}
.ax-list{box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;background:#fff;margin-top:14px;overflow:hidden}
.ax-row{width:100%;display:flex;align-items:center;gap:14px;padding:11px 14px;border:0;background:none;text-align:left;min-height:62px;color:var(--ink);position:relative}
.ax-row+.ax-row::before{content:"";position:absolute;left:68px;right:0;top:0;height:1px;background:var(--line)}
.ax-row:active{background:var(--soft)}
.ax-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center}
.ax-t{flex:1;min-width:0;display:grid}
.ax-t b{font:600 15.5px/1.3 var(--f-body)}
.ax-t small{color:var(--muted);font-size:12.5px;line-height:1.35}
.ax-row>.ic:last-child,.ax-role>.ic:last-child{flex:none;color:#9AA7BF}
.ax-n{flex:none;font-style:normal;background:var(--blue);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}
.ax-out .ax-ic{background:#FDECEA;color:var(--danger)}
.ax-out b{color:var(--danger)}
.ax-guest{text-align:center;border-radius:22px;background:var(--blue-xl);box-shadow:inset 0 0 0 1px #DCE6FB;padding:26px 18px;display:grid;justify-items:center;gap:6px}
.ax-guest b{font:800 19px var(--f-display);margin-top:6px}
.ax-guest p{margin:0;max-width:32ch}
.ax-guest-b{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}

/* ---- Support: who to reach, as plain cards ---- */
.sp-cards{display:grid;gap:10px;margin:0 0 18px}
.sp-card{display:flex;align-items:center;gap:12px;box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;background:#fff;padding:14px 14px 14px 16px}
.sp-card>span{flex:1;min-width:0;display:grid;gap:1px}
.sp-card small{color:var(--muted);font-size:12.5px}
.sp-card b{font:700 15.5px/1.3 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-btn{flex:none;border:0;border-radius:999px;background:var(--blue-l);color:var(--blue-d);font:700 14px var(--f-body);padding:0 18px;min-height:42px;display:inline-flex;align-items:center;text-decoration:none;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.sp-btn:active{transform:scale(.95)}
@media (min-width:860px){.sp-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:859px){.hp-side .hp-card:first-child{display:none}}

/* ---- motion: things rise into place once when a screen opens, and give a little under the thumb ---- */
.hx-card,.hx-slide,.hx-q,.hx-dish,.hx-live,.ox-row,.ox-m,.ox-plan,.ax-role,.ax-me{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.hx-card:active,.hx-slide:active,.hx-q:active,.hx-dish:active,.hx-live:active,.ox-row:active,.ox-m:active,.ox-plan:active,.ax-role:active{transform:scale(.975)}
main.vin .hx>*,main.vin .ox>*,main.vin .ax>*{animation:hxin .5s cubic-bezier(.2,.8,.2,1) both}
main.vin .hx>*:nth-child(2),main.vin .ox>*:nth-child(2),main.vin .ax>*:nth-child(2){animation-delay:.04s}
main.vin .hx>*:nth-child(3),main.vin .ox>*:nth-child(3),main.vin .ax>*:nth-child(3){animation-delay:.08s}
main.vin .hx>*:nth-child(4),main.vin .ox>*:nth-child(4),main.vin .ax>*:nth-child(4){animation-delay:.12s}
main.vin .hx>*:nth-child(5),main.vin .ax>*:nth-child(5){animation-delay:.16s}
main.vin .hx>*:nth-child(n+6),main.vin .ax>*:nth-child(n+6){animation-delay:.2s}
.ox-body{animation:hxin .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes hxin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hxpop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes hxpulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.65)}70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes hxflow{from{background-position:200% 0}to{background-position:0 0}}
@media (prefers-reduced-motion: reduce){
  main.vin .hx>*,main.vin .ox>*,main.vin .ax>*,.ox-body,.ox-empty-ic,.ox-bar i,.ox-row.sk,.hx-live-bar i{animation:none}
}

/* a wider screen keeps the same column, centred, with the cards side by side where there is room */
@media (min-width:761px){
  .hx,.ox,.ax{margin-inline:auto}
  .hx-slide{flex-basis:62%}
  .hx-quick{grid-template-columns:repeat(4,1fr)}
}