/* stage's box office, the guest's page. The frame's own tokens: plain, and no business's. A business's look sets
   them, then a menu's look sets what it must. page.js puts both on the root, as the box office hands them over. */
:root{
  --paper:#faf9f5; --card:#ffffff; --ink:#27323d; --ink-strong:var(--ink); --accent:var(--ink); --on-ink:var(--paper); --on-accent:var(--on-ink);
  --rule:2px; --sans-own:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --script-own:Georgia,"Times New Roman",serif;
  --sans:var(--sans-own); --script:var(--script-own); --script-scale:1;   /* a look says how large its script face runs beside the frame's own */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}   /* every tap is a press at once: no wait for a second tap, and none taken for a zoom */
body{margin:0;background:var(--paper);color:var(--ink-strong);font:400 17px/1.3 var(--sans);transition:background .3s,color .3s}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}

/* Before the menu arrives, and when there is none at this address */
.wait{min-height:70vh;display:grid;place-items:center;text-align:center;padding:24px}
.wait p{max-width:30ch}
.wait .btn{margin-top:16px}
/* while the first paint covers the page, the wait's words and its button are read on the field's own colour, and stand above it */
.paint .wait{position:fixed;inset:0;min-height:0;z-index:61;color:var(--paint-on)}   /* at the field's middle, over its breath */
.paint .wait .btn{background:var(--paint-on);border-color:var(--paint-on);color:var(--paint)}
.paint .net{z-index:62}
/* under the field the page is laid out but not shown, so a face that arrives there moves nothing a guest could see. It shows as the dot begins to fall */
.paint:not(.paint-fall) #wrap{visibility:hidden}

.wrap{max-width:1120px;margin:0 auto;padding:0 16px 132px}
/* The language switch: shown only when a menu carries a second language. Small, at the head, out of the menu's way */
/* the language switch, at the top right. On a phone it is the page's first line. On a desktop it sits above the table's column, and the menu's column starts with its dates band as if there were no switch (Dan, 10 Nov) */
.langs{display:flex;justify-content:flex-end;gap:4px;margin-top:4px;margin-bottom:-10px}
.langs button{background:none;border:0;border-radius:999px;min-height:44px;padding:0 12px;font-size:13px;letter-spacing:.03em;color:var(--ink);opacity:.7}
.langs button[aria-pressed="true"]{opacity:1;font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* The rhythm and the type sizes below follow a printed menu's: a thin band, a tight hero, an open list. Sizes are in the README */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);margin-top:18px;padding:13px 0 11px;text-align:center;text-transform:uppercase;letter-spacing:.03em;font-size:13px;line-height:1.25;--board:clamp(9.6px,2.9vw,13px)}
/* two lines a column: what closes, then its board. page.js finds --label, one size at which every first line takes one line, and sets .row.
   Without .row the words are too long for that: they wrap, in columns of one width */
.dates.row{grid-template-columns:repeat(var(--cols),minmax(max-content,1fr));column-gap:12px}   /* a wider gap, so three first lines never read as one */
.dates.row p,.dates.row .hours{white-space:nowrap}
.dates div{min-width:0;overflow-wrap:break-word;display:flex;flex-direction:column;align-items:center;justify-content:center}   /* words wrap whole. page.js brings the size down until the longest fits its column, so none is broken or hyphened */
.dates.sizing p{width:min-content;max-width:none}   /* for a moment, while page.js measures each column's longest word */
.dates p{margin:0;max-width:100%;font-size:var(--label,inherit);letter-spacing:.03em}   /* its spacing set here, so it shrinks with its own size and the fit's sum holds */
.dates strong{font-weight:400}
.dates:not(.row) strong{display:inline-block}   /* where the words wrap, the pick-up's day goes to a line of its own before it breaks */
.dates .shut{opacity:.55}
.dates .shut p{text-decoration:line-through}
/* the second line: a board, the pick-up's hours, or the word that a time has passed. Each is as tall as a board and stands on the band's last line */
.clock,.dates .hours,.dates em{margin-top:auto;padding-top:8px;font-size:var(--board);font-weight:600}
.dates .hours,.dates em{line-height:1.6;font-style:normal}
.dates .hours{font-size:calc(var(--board)*.9);line-height:1.778}   /* a little under a board's figures, and still a board's height */
.dates em{letter-spacing:.06em}   /* under the strike and not in it */
/* the countdown under a time still ahead: flap.js's board, in the page's own ink and type */
.clock{line-height:1;letter-spacing:0;
  --flap-face:var(--ink);--flap-ink:var(--on-ink);--flap-wide:.96em;--flap-tall:1.6em;--flap-gap:.5px;--flap-radius:2px;--flap-split:var(--paper)}
.clock .flap-mark{font-size:.74em;margin-left:.18em}
.clock .flap-gap{width:.34em}

.hero{text-align:center;padding:40px 0 0;position:relative}
/* The seal is hand spun. On a first look it rests while the title is written, then turns once, slows and settles past its place.
   After that page.js alone owns its angle: it hangs as a weight on a pin, pushed by the page's scrolling, and swings to rest */
.burst{position:absolute;left:calc(25% - 33px);margin-left:calc(min(86px,22vw) / -2);top:14px;width:min(86px,22vw);height:min(86px,22vw);transform:rotate(-14deg)}
.turning .burst{animation:seal-turn 2s both;will-change:transform}   /* a layer of its own only while it moves. page.js does the same while its model runs */
.burst.unturned{transform:rotate(-14deg) scale(0);animation:none}   /* the seal is not there until the title is written. Then it grows from nothing as it turns (Dan, 10 Nov) */
.hero.away *,body.sheet .hero *{animation-play-state:paused}   /* nothing moves where nobody is looking */
.burst polygon,.burst path{fill:var(--accent)}
/* a look's own seal shape is as wide as it is drawn: --seal-shape is its width over its height. Its words are set light and close, as a hand-set seal's are */
.burst.shaped{width:min(98px,25vw);height:auto;aspect-ratio:var(--seal-shape);margin-left:calc(min(98px,25vw) / -2);top:24px}
.burst.shaped text{font-weight:500;letter-spacing:-.03em}
.burst text{fill:var(--on-accent);font:700 12.5px var(--sans);letter-spacing:.03em;text-anchor:middle}
.logo{color:var(--ink);display:block;margin:0 auto;min-height:24px}
.logo svg{width:132px;display:block;margin:0 auto}
.logo .name{font:700 22px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.kicker{text-transform:uppercase;letter-spacing:.05em;font-size:17px;font-weight:350;line-height:1.2;margin-top:10px}   /* light and open, as the printed menu sets it */
.title{font:400 calc(clamp(46px,11vw,72px)*var(--script-scale))/1.15 var(--script);color:var(--ink);margin-top:2px}
/* The title, written: while the pen's route plays, the real words wait unseen and a copy of them shows through the pen's mask */
.title.unwritten{opacity:0}
.title .probe{display:inline-block;width:0;height:0}
.pen{position:absolute;overflow:visible;color:var(--ink);pointer-events:none}
.pen text{font-family:var(--script);fill:currentColor}
.pen mask path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
/* A menu's own drawing, under the title, in the page's ink. Its heat lines rise and fade, slow and faint, one after another */
.art{width:64px;margin:22px auto 0;color:var(--ink)}   /* small, as a printed menu sets its drawing beside its title */
.art svg{display:block;width:100%;height:auto;overflow:visible}
.heat g{opacity:.26;transform-box:fill-box;animation:heat-rise 4.6s ease-in-out infinite}
.heat g:nth-child(2){animation-delay:-1.5s}.heat g:nth-child(3){animation-delay:-3.1s}.heat g:nth-child(4){animation-delay:-.8s}.heat g:nth-child(5){animation-delay:-2.3s}.heat g:nth-child(6){animation-delay:-3.8s}
.heat path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.6px;vector-effect:non-scaling-stroke}   /* as fine on the screen whatever the drawing's own scale */
.heat path.halo{stroke-width:6px;opacity:.2}
.art.unsketched{opacity:0}   /* the drawing waits for the pen. page.js sketches it once the title is written, and it never slides in */
.lede{max-width:34ch;margin:10px auto 0;text-align:center}
/* a section of dishes far down the page is laid out and painted when it nears the screen, not with the first render. Its last known height holds its place.
   Such a box also cuts what it paints at its own edge. So it reaches 12px past its dishes on every side, and a button's swell and focus ring are whole */
#sections > .groups{content-visibility:auto;contain-intrinsic-size:auto 520px;padding:12px;margin:12px -12px -12px}
h2.caps{font:400 clamp(26px,6vw,32px)/1.1 var(--sans);text-transform:uppercase;letter-spacing:-.06em;text-align:center;color:var(--ink);margin-top:30px}
#h-dishes{margin-top:52px}
#h-dishes + #sections .band:first-child{margin-top:20px}

.feasts{display:grid;gap:16px;margin-top:22px}
.feast{background:var(--card);border:var(--rule) solid var(--ink);border-radius:12px;padding:14px 16px 16px;display:grid;gap:5px;align-content:start}   /* each set in its own surround (Dan, 10 Nov) */
.feast header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.script{font:400 calc(32.5px*var(--script-scale))/1.2 var(--script);color:var(--ink)}
.price{font-size:16.5px;white-space:nowrap}
.serves{text-transform:uppercase;letter-spacing:.03em;font-size:12px}
.feast p{font-size:16.5px;margin-top:6px}
.feast .chips,.feast [data-fa]{margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{border:1.5px solid var(--ink);border-radius:999px;padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;font-size:15px;cursor:pointer}
.chips input{position:absolute;opacity:0}
.chips input:checked + span{font-weight:700}
.chips label:has(input:checked){background:var(--ink);color:var(--on-ink)}
.chips label:has(input:focus-visible){outline:3px solid var(--ink-strong);outline-offset:2px}
.chips label:has(input:disabled){opacity:.45;cursor:not-allowed;border-style:dashed}

.btn{border:var(--rule) solid var(--ink);background:var(--ink);color:var(--on-ink);border-radius:999px;min-height:46px;padding:10px 20px;font-weight:600;letter-spacing:.02em;transition:transform .28s cubic-bezier(.3,1.7,.5,1),background .18s,color .18s,box-shadow .28s cubic-bezier(.3,1.7,.5,1)}
/* a button that adds says so with a plus, a mark of its own so it can turn. Once pressed it is a tick for a moment */
.btn.add::before{content:"+";display:inline-block;margin-right:.45em;font-weight:700;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.btn.add.did::before{content:"\2713"}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.wide{width:100%}
a.btn{display:block;text-align:center;text-decoration:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.did{animation:pop .35s}
:focus-visible{outline:3px solid var(--ink-strong);outline-offset:2px}

.band{margin:36px 4px 0 6px;background:var(--card);border:var(--rule) solid var(--ink);border-radius:10px;box-shadow:-5px 6px 0 var(--ink);padding:8px 18px 5px;font:600 21px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.groups{display:grid;gap:30px;margin-top:24px}
.group:only-child{grid-column:1/-1}
.group header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.group .note{font-size:15.5px;margin-top:7px}
.group header + .serves{margin-top:3px}
.foot{font-size:12px;margin-top:8px}
.dish{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:10px 0}   /* no rule between dishes: the space parts them */
.group header + .dish,.group .serves + .dish,.group .note + .dish{padding-top:14px}
.dish h3{font:600 19.5px/1.2 var(--sans)}
.dish .d{font-size:15.5px;max-width:44ch;margin-top:1px}
.dish .m{font-size:12px;text-transform:uppercase;letter-spacing:.03em;margin-top:3px}
.dish .m .p{font-size:16.5px;letter-spacing:0}
.dish.shut h3,.dish.shut .d{opacity:.5}
/* a dish's marks: each a round sign in the colour of the words beside it, after the dish's line, as a printed menu sets them. The key under the menu says each in words */
.mark{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:17px;height:17px;border-radius:50%;background:var(--ink-strong);color:var(--on-ink);
  font:700 9px/1 var(--sans);letter-spacing:.02em;text-transform:none;vertical-align:1px;padding-top:1px;user-select:none}
.dish h3 .mark{vertical-align:3px}
.hold{white-space:nowrap}   /* a line's last word and its marks, kept together */
.key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:22px;font-size:13px}
.key > span{display:inline-flex;align-items:center;gap:6px}
.step{display:inline-flex;align-items:center;gap:2px}
.step button{width:44px;height:44px;border-radius:50%;border:var(--rule) solid var(--ink);background:transparent;color:var(--ink);font:600 22px/1 var(--sans);display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.7,.5,1),background .15s,color .15s}
.step button:active{transform:scale(.9)}
.step .n{min-width:30px;text-align:center;font-weight:700;font-size:19px}
.step.on .plus{background:var(--ink);color:var(--on-ink)}
.step button[disabled]{opacity:.35;cursor:not-allowed}
.closed{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;border:1.5px dashed var(--ink);border-radius:999px;padding:6px 10px;white-space:nowrap}

/* The table: a column on a desktop, a sheet on a phone */
.panel{background:var(--card);border:var(--rule) solid var(--ink);border-radius:14px;padding:18px 16px 22px}
.panel h2{font:400 calc(34px*var(--script-scale))/1.2 var(--script);color:var(--ink)}
.panel .empty{margin-top:10px;font-size:16px}
.line{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.line .nm{font-weight:600}
.line .lt{font-size:14px}
.totals{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:21px;font-weight:700}
.small{font-size:14px;margin-top:4px}
.suggest{margin-top:14px;border:1.5px dashed var(--ink);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px}
.places{margin-top:16px}
.places .row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.marks{display:flex;flex-wrap:wrap;gap:5px}
.marks i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink);opacity:.4;transition:background .25s,opacity .25s,transform .25s}
.marks i.f{background:var(--ink);opacity:1;transform:scale(1.08)}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:15px}
.field{display:grid;gap:4px;margin-top:12px;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.field input,.field textarea{border:var(--rule) solid var(--ink);background:var(--paper);border-radius:10px;min-height:48px;padding:10px 12px;font-size:17px;text-transform:none;letter-spacing:0;width:100%}
.field textarea{display:block;resize:none;overflow:hidden;line-height:1.35}   /* one line that wraps and grows, never a box to fill */
.field .err{color:#8a1010;text-transform:none;letter-spacing:0;min-height:0}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px}
.check input{width:22px;height:22px;margin-top:1px;accent-color:var(--ink)}
.pick{margin-top:16px;border-top:var(--rule) solid var(--ink);padding-top:12px}
.pick b{font-weight:700}
.pick .chips{margin-top:8px}
.pick .m{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-top:10px}
.pick .said{overflow-wrap:anywhere}
.code{font:700 34px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--ink);margin-top:8px}
.state{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.state i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.state.on i{background:var(--ink)}
.stack{display:grid;gap:10px;margin-top:16px}
.link{background:none;border:0;padding:8px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;min-height:44px;text-align:left}
.staff{margin-top:10px;border:1.5px dashed var(--ink);border-radius:12px;padding:10px 12px;font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.staff div{flex-basis:100%}
.staff .small:empty{display:none}
.staff input{width:128px;border:var(--rule) solid var(--ink);border-radius:8px;min-height:44px;padding:6px 10px;background:var(--paper);letter-spacing:.3em}
.share{width:100%;border:var(--rule) solid var(--ink);border-radius:8px;min-height:44px;padding:6px 10px;background:var(--paper);font-size:13px}
.back{display:none}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--on-ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:12px;transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:5}
.bar.show{transform:none}
.bar.bump{animation:bump .35s}
.bar .t{font-weight:700;font-size:19px}
.bar .c{font-size:14px;opacity:.9}
.bar button{background:var(--on-ink);color:var(--ink);border:0;border-radius:999px;min-height:46px;padding:10px 20px;font-weight:700}
.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,30px);background:#22211e;color:#f6f2e6;border-radius:22px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:10px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9;width:max-content;max-width:calc(100vw - 24px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.show button{pointer-events:auto}
.toast span{padding:6px 10px 6px 0}
.toast button{background:#f6f2e6;color:#22211e;border:0;border-radius:999px;min-height:40px;padding:6px 16px;font-weight:700;flex:none}
/* The connection: said once, at the top, while a write waits or the menu is an old copy */
.net{position:fixed;left:0;right:0;top:0;background:#22211e;color:#f6f2e6;padding:8px 16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;font-size:14px;z-index:10}
.net button{background:#f6f2e6;color:#22211e;border:0;border-radius:999px;min-height:36px;padding:4px 14px;font-weight:700;flex:none}
body.offline .wrap{padding-top:52px}
footer{margin-top:36px;border-top:1.5px solid var(--ink);padding-top:12px;font-size:14px;display:grid;gap:4px}
@keyframes seal-turn{0%{transform:rotate(-374deg) scale(0);animation-timing-function:cubic-bezier(.3,.05,.12,1)}68%{transform:rotate(-6deg) scale(1.07);animation-timing-function:cubic-bezier(.4,0,.5,1)}86%{transform:rotate(-17deg) scale(.985);animation-timing-function:ease-in-out}100%{transform:rotate(-14deg) scale(1)}}
@keyframes heat-rise{0%{opacity:0;transform:translateY(20%)}30%{opacity:.5}62%{opacity:.3}100%{opacity:0;transform:translateY(-24%)}}
@keyframes pop{40%{transform:scale(1.06)}}
@keyframes bump{35%{transform:translateY(-6px)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shake .25s}

@media (max-width:959px){
  /* over an open sheet the toast sits under the Back button's row, never on it. The top stays clear of a phone's keyboard */
  body.sheet .toast{bottom:auto;top:68px}
  /* over the open table a message with its Undo sits on the heading's place, under the way back. The first dish starts below it, so the message
     never lies on a dish's row and Undo is never beside a plus or a minus */
  body.sheet #shop > h2{margin-bottom:40px}
  body.sheet.offline .toast{top:118px}
  /* over an open order a message has a line of its own, under the way back. The order moves down to make room while it shows, so the
     message covers nothing: not the way back, the order's code, its dishes or the staff's line */
  body.sheet.viewing .toast{top:calc(72px + env(safe-area-inset-top));bottom:auto;left:16px;right:16px;width:auto;max-width:none;justify-content:space-between;transform:translateY(-12px)}
  body.sheet.viewing .toast.show{transform:none}
  body.sheet.viewing #pass{transition:margin-top .22s ease-out}
  body.sheet.viewing.toasting #pass{margin-top:60px}
  body.offline .panel{padding-top:66px}
  /* the page behind an open sheet is pinned: page.js sets its top to where it was scrolled, so it cannot move under a finger, on an iPhone too */
  body.sheet{position:fixed;left:0;right:0;overflow:hidden}
  /* the sheet is as tall as what the browser shows now, not as the screen. A drag at its end stays in it. Its last control can be brought 96px
     clear of the bottom edge, where a phone's browser keeps a strip for its own toolbar and takes a tap */
  .panel{position:fixed;inset:0;z-index:8;border:0;border-radius:0;overflow:auto;overscroll-behavior:contain;padding:16px 16px calc(96px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  @supports (height:100dvh){ .panel{bottom:auto;height:100dvh} }
  .panel.open{transform:none;visibility:visible}
  .back{display:inline-flex;margin-bottom:10px}
}
@media (min-width:960px){
  .wrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:44px;padding-bottom:56px;position:relative}
  .langs{position:absolute;top:10px;right:16px;margin:0}
  .langs:not([hidden]) ~ .panel{margin-top:58px}   /* the table makes room for the switch above it */
  .panel{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow:auto;margin-top:18px}
  .bar{display:none}
  .feasts,.groups{grid-template-columns:1fr 1fr;column-gap:40px}
  .feasts{gap:18px 24px}
  .hero{padding-top:62px}
  .burst{left:calc(25% - 33px);margin-left:-49px;top:24px;width:98px;height:98px}   /* at the middle of the space beside the logo, and above the title's line, so its turn never crosses the title */
  .burst.shaped{width:136px;height:auto;margin-left:-68px;top:26px}
  .dates{font-size:14px;padding:17px 0 15px;--board:17px}
  .clock,.dates .hours,.dates em{padding-top:11px}
  .kicker{font-size:20px;margin-top:12px}
  .art{width:84px;margin-top:30px}
  .lede{font-size:19px;max-width:46ch}
  h2.caps{margin-top:34px}
  #h-dishes{margin-top:60px}
  .toast{bottom:28px}
}
/* under a pointer that can hover, a button answers before it is pressed: it lifts off the page on a hard shadow and takes the other colour, with a
   little spring. A plus turns a quarter. A round button swells and turns. A finger has no hover, so a phone is left as it was */
@media (hover:hover){
  .btn:not([disabled]):hover{transform:translateY(-3px);background:var(--on-ink);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
  .btn.ghost:not([disabled]):hover{background:var(--ink);color:var(--on-ink);box-shadow:0 5px 0 var(--ink-strong)}
  .btn:not([disabled]):hover:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 0 var(--ink)}
  .btn.add:not([disabled]):hover::before{transform:rotate(90deg) scale(1.35)}
  .btn.add.did:not([disabled]):hover::before{transform:scale(1.25)}   /* a tick stays upright: only the plus turns */
  .step button:not([disabled]):hover{background:var(--ink);color:var(--on-ink);transform:scale(1.14) rotate(90deg)}
  .step button:not(.plus):not([disabled]):hover{transform:scale(1.14) rotate(180deg)}
  .step button:not([disabled]):hover:active{transform:scale(.92)}
  .bar button:hover,.net button:hover,.toast button:hover{transform:translateY(-2px)}
  .langs button:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
}
.bar button,.net button,.toast button{transition:transform .28s cubic-bezier(.3,1.7,.5,1)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }