/* Gnocchi: the poster wall. Swiss poster and theatre programme: one grotesk, a hard grid,
   large numerals, hairlines instead of shadows, one accent colour. Category colours are for
   the typographic posters only, never for the interface. */

@font-face{font-family:"Instrument Sans";font-weight:400 700;font-stretch:75% 100%;font-display:block;
  src:url(fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-stretch:75% 100%;font-display:block;
  src:url(fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#FFFFFF; --ink:#111111; --grey:#6B6B6B; --soft:#E4E2DD; --accent:#FF3B00;
  --g:16px; --gap:12px; --rn:2.35;  /* --rn: posters per screen in a row; the cut-off one says "scroll" */
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.35 "Instrument Sans",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{all:unset;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{padding-inline:var(--g);max-width:1760px;margin-inline:auto}
.bar{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 14px;border-bottom:1px solid var(--ink);font-weight:700;font-size:22px;letter-spacing:-.045em;line-height:1}

/* ---------- title with its two pickers, the city and the window ---------- */
.intro{padding:20px 0;text-wrap:balance}
.intro h1{margin:0;font-size:36px;line-height:.95;letter-spacing:-.035em;font-weight:700}
.intro span{font-weight:400;color:var(--grey)}
.pick::after,.showtimes summary::after{content:"";display:inline-block;width:.32em;height:.32em;margin:0 .1em .28em .2em;
  border:solid currentColor;border-width:0 .09em .09em 0;transform:rotate(45deg)}  /* a chevron: the city and the window open a list */
.picker{inset:0 0 auto 0;width:100%;margin:0;padding:0 var(--g) 28px;border:0;border-bottom:1px solid var(--ink);
  background:var(--paper);color:var(--ink)}
.picker::backdrop,.sheet::backdrop{background:rgb(255 255 255 / .85)}
.picker button,.sheet .bar button,.lang,.you{font-size:15px;font-weight:500;letter-spacing:0}
.lang::after{width:.4em;height:.4em;margin-bottom:.22em}
.mark{margin-right:auto}
.you{margin-left:18px;padding:8px 12px 7px;background:var(--accent);font-weight:700}
/* .form .choose, not .choose: it must outweigh .form label */
.picker a,.form .choose label{display:block;margin:0;padding:14px 0 12px;font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:.95;cursor:pointer}
.picker a + a,.form .choose label + label{border-top:1px solid var(--soft)}
.picker [aria-current],.form .choose label:has(:checked){text-decoration:underline var(--accent);text-decoration-thickness:4px;text-underline-offset:6px}

/* ---------- rows: one strip of posters per category ---------- */
main{container-type:inline-size;padding-bottom:72px}
.row{margin-top:40px}
.row:first-child,.day:first-child{margin-top:0}
.row__h,.row__h a{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.row__h{margin:0;padding-top:9px;border-top:1px solid var(--ink);font-size:26px;font-weight:700;letter-spacing:-.028em;line-height:1.05}
.row__h a{flex:1}
.row__h span{flex:none;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:0}
.row__arrow{display:none;padding:0 6px;font-size:28px;font-weight:400;line-height:.7}  /* a mouse's way along a strip, shown where there is one */
.strip{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:12px calc(-1*var(--g)) 0 0;padding-right:var(--g)}
.strip .card{flex:none;width:calc(100cqw / var(--rn) - var(--gap));scroll-snap-align:start}

/* ---------- the wall: a rule with a large numeral per day ---------- */
.day{margin-top:36px}
.day__h{display:flex;align-items:baseline;gap:10px;margin:0;padding:8px 0 10px;border-top:1px solid var(--ink);font-size:13px;font-weight:400}
.day__m{color:var(--grey)}
.day__n{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:.9}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gap);padding-top:10px}
.none{margin:40px 0;font-size:17px;color:var(--grey)}
.more{margin:28px 0 8px;font-size:15px;color:var(--grey)}  /* under a lasting page's wall: how many more until when */

/* ---------- a poster and its caption ---------- */
.card{display:block;min-width:0;container-type:inline-size;font-size:13px}
.face{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.face{position:relative}
.face__tickets{position:absolute;left:8px;bottom:8px;padding:2px 7px;font-size:13px;line-height:18px;white-space:nowrap}  /* sold out, few left, cancelled: a sticker on the picture */
.face__tickets,.face__price{max-width:calc(50% - 12px);overflow:hidden;text-overflow:ellipsis}  /* the two never meet */
.face__price{position:absolute;right:8px;bottom:8px;padding:2px 7px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;line-height:18px;white-space:nowrap}  /* the price as a sticker on the picture, like the sold-out one */
.face img{display:block;width:100%;height:100%;object-fit:cover}
.card__when{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:9px;white-space:nowrap}  /* the price drops to its own line, right, where a narrow card has no room beside the date */
.card__time{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card__price{flex:none;margin-left:auto;font-weight:700}
.card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:5px;
  font-size:16px;font-weight:700;line-height:1.1;letter-spacing:-.012em;overflow-wrap:break-word;hyphens:auto}
.face + .card__title{margin-top:9px}
.card__tail{display:block;margin-top:4px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tickets{padding:0 4px;background:var(--accent);font-weight:700}  /* sold out, few left: a sticker, as on a printed programme */
.card:hover .card__title{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.card[aria-current] .card__title{text-decoration:underline var(--accent);text-decoration-thickness:3px;text-underline-offset:3px}  /* the one the sheet shows */
/* the tile that ends a cut row: how many there are, and the way to all of them */
.more{display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;aspect-ratio:4/5;padding:12px;
  border:1px solid var(--ink);font-size:16px;font-weight:700;line-height:1.1;letter-spacing:-.012em}
.more b{font-size:56px;letter-spacing:-.05em;line-height:.85}

/* the typographic poster for an event without an image: kind, title as large as it fits (Event.poster_size),
   place and day, on the colour of its category */
.poster{display:flex;flex-direction:column;padding:7cqw;background:var(--paper);color:var(--ink);
  font-size:max(10px,6cqw);font-weight:600;line-height:1.1}
.poster__title{flex:1;min-height:0;overflow:hidden;margin:5cqw 0 4cqw;font-size:calc(var(--fs)*1cqw);font-weight:700;
  font-stretch:75%;line-height:.92;letter-spacing:-.02em;overflow-wrap:break-word}
.poster__kind,.poster__foot span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster__foot{display:flex;justify-content:space-between;gap:4cqw;white-space:nowrap}
.poster:has(.face__tickets,.face__price) .poster__foot{visibility:hidden}  /* a sticker takes the foot's place; the lines under the card say the place and day */
.ink-concerts{background:#111111;color:#FFFFFF}
.ink-party-club{background:#2B2BD9;color:#FFFFFF}
.ink-theatre-dance{background:#8E1B3A;color:#FFFFFF}
.ink-comedy{background:#F5D000}
.ink-film{background:#24434F;color:#FFFFFF}
.ink-exhibitions-museums{background:#CFC8B8}
.ink-talks-readings{background:#1E5E3C;color:#FFFFFF}
.ink-workshops-courses{background:#14A098}
.ink-tours{background:#9CCB3B}
.ink-markets{background:#8A6B4A;color:#FFFFFF}
.ink-food-drink{background:#D08A2E}
.ink-quiz-games{background:#5BB5E6}
.ink-sport{background:#D7141A;color:#FFFFFF}
.ink-festivals-street{background:#E8579A}
.ink-kids-family{background:#9B6FD6}
.ink-demos{background:#4A4A4A;color:#FFFFFF}
.ink-worship{background:#4B2A55;color:#FFFFFF}
.ink-none{background:#DEDAD3}  /* no category yet: a light warm grey, text in ink */

/* the foot of every page: under a city its map in columns, the windows and cities, the categories, the kinds people
   search for, as a search engine or an assistant reads a page's end; then a line for the assistants, and the imprint,
   privacy and terms */
.foot{padding:0 0 40px;border-top:1px solid var(--ink);font-size:13px;color:var(--grey)}
.foot h2{margin:18px 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
.foot ul{margin:0;padding:0;list-style:none;line-height:1.7}
.foot a{color:var(--ink)}
.foot__map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.foot__wide{grid-column:1 / -1}
.foot__wide ul{columns:2;column-gap:var(--gap)}
.foot p{margin:18px 0 0;max-width:62em;overflow-wrap:anywhere}
.foot__ai b{font-weight:600;color:var(--ink)}
.foot__legal a{color:var(--grey)}

/* ---------- event page ---------- */
.ev{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:20px 0 72px}  /* minmax: the nowrap button must not widen the page */
.ev__kind{margin:0 0 10px;font-size:13px;font-weight:600}
.ev__title{margin:0;font-size:50px;line-height:.9;letter-spacing:-.03em;font-weight:700;font-stretch:75%;overflow-wrap:break-word}
.ev__when{display:flex;align-items:flex-end;gap:14px;margin:18px 0 0;padding-top:10px;border-top:1px solid var(--ink);font-size:15px;line-height:1.3}
.ev__when > span:first-child{font-size:56px;font-weight:700;letter-spacing:-.05em;line-height:.8}
.ev__when b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1}
.ev__face{--ph:70dvh;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin:0;container-type:inline-size}
.ev__face:has(.poster){max-width:72%}
.ev__face > :first-child{grid-column:1/-1}  /* the gallery: the card's image, the others two by two under it */
.ev__face .face:not(.poster){aspect-ratio:var(--ar);width:min(100%,calc(var(--ph) * var(--ar)))}  /* a picture whole, in its own shape: as wide as its place unless that makes it higher than --ph */
.facts{margin:0;display:grid;grid-template-columns:96px minmax(0,1fr);border-top:1px solid var(--soft)}
.facts dt,.facts dd{margin:0;padding:12px 0;border-bottom:1px solid var(--soft);font-size:15px}
.facts dt{color:var(--grey)}
.facts dd span{display:block;color:var(--grey)}
.source{display:flex;justify-content:space-between;align-items:center;gap:12px;height:56px;margin-top:22px;padding:0 18px;
  background:var(--accent);font-weight:700;font-size:17px;white-space:nowrap}
.source span:first-child{overflow:hidden;text-overflow:ellipsis}
.ev__info .source + .source{margin-top:10px;background:none;border:1px solid var(--ink)}
.desc,.dates,.showtimes,.text section{margin-top:6px;padding-top:14px;border-top:1px solid var(--ink)}
* + .dates,* + .showtimes,.text section + section{margin-top:28px}
.desc h2,.critics h2,.sounds h2,.video h2,.dates h2,.showtimes h2,.text h2{margin:0 0 10px;font-size:13px;font-weight:600}
.desc p,.critics p,.text p{margin:0 0 12px;max-width:36em;font-size:18px;line-height:1.5;overflow-wrap:break-word}
:is(.desc,.critics,.sounds) .desc__by{font-size:13px;color:var(--grey)}
.critics,.sounds,.video{margin-top:22px;padding-top:14px;border-top:1px solid var(--ink)}
.sounds iframe,.video iframe{display:block;width:100%;height:152px;border:0}  /* Spotify's small player */
.sounds iframe[src*="youtube"],.video iframe{height:auto;aspect-ratio:16/9}
.sounds iframe[src*="soundcloud"]{height:166px}
.sounds iframe:is([src*="mixcloud"],[src*="bandcamp"]){height:120px}
.sounds .desc__by{margin:10px 0 0}
p.critics__score{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:20px;font-weight:700}
.critics__score b{font-size:64px;line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums}  /* the score as a poster's numeral */
.trailer{display:flex;justify-content:space-between;align-items:center;height:52px;margin-top:16px;padding:0 18px;
  border:1px solid var(--ink);font-weight:700;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.chips span{padding:1px 6px;border:1px solid var(--ink);font-size:13px;line-height:16px}  /* 20px high, a whole number: the rule under the chips (.facts) no longer covers their lower border */
.desc__by a,.text a{text-decoration:underline}
.dates a,.showtimes summary{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--soft)}
.dates__n{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:.9}
.dates__t{min-width:0;font-size:13px;color:var(--grey)}
.dates__t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;color:var(--ink)}
.dates__t .tickets{display:inline-block;line-height:1.3}  /* the sticker whole, not cut by the line under it */
.dates__t > span ~ span:not(.tickets)::before{content:" · "}  /* a date's time, place and title */
.dates p,.showtimes > p{margin:10px 0 0;font-size:13px;color:var(--grey)}
/* a film's showtimes: a day, as a date above, opens to a row per cinema and a box per showing, its time and version */
.showtimes summary{grid-template-columns:52px minmax(0,1fr) auto;cursor:pointer;list-style:none}
.showtimes summary::-webkit-details-marker{display:none}
.showtimes [open] summary::after{transform:rotate(-135deg) translate(-.2em,-.2em)}  /* the pickers' chevron, up when open */
.cinema{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;padding:10px 0 12px 62px;  /* under the day, past its numeral */
  border-bottom:1px solid var(--soft)}
.cinema p{flex-basis:100%;margin:0 0 4px;font-size:14px;font-weight:600}
.cinema p span{display:block;font-size:12px;font-weight:400;color:var(--grey)}
.cinema a{display:flex;flex-direction:column;min-width:62px;padding:5px 8px 6px;border:1px solid var(--ink);font-size:11px;line-height:1.25}
.cinema b{font-size:18px;letter-spacing:-.03em;line-height:1.05}
.cinema .sold_out,.cinema .cancelled{border-color:var(--soft);color:var(--grey)}
.cinema .cancelled b{text-decoration:line-through}

/* ---------- the sheet: the event page of a tapped card, from peek.js; rises from the foot of a phone, a panel at the right
   of a wide screen. Its page is set in one column, as a programme leaflet: the bar with the kind stays on top while it
   scrolls, the title, the day, the pictures in a strip, the text, the facts, the buttons, the dates ---------- */
.sheet{--fh:clamp(200px,34dvh,340px);  /* a picture's height: two fifths of the sheet, so that the text begins in sight */
  inset:auto 0 0;width:100%;max-height:85dvh;margin:0;padding:0 var(--g) 32px;overflow-y:auto;overscroll-behavior:contain;
  border:0;border-top:1px solid var(--ink);background:var(--paper);color:var(--ink)}
.sheet .bar{position:sticky;top:0;z-index:1;gap:18px;margin-inline:calc(-1*var(--g));padding:14px var(--g) 12px;background:var(--paper);font-size:13px;font-weight:600;letter-spacing:0}  /* as wide as the sheet: the strip scrolls under it, not past it */
.sheet__kind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet__full{align-self:center;margin-left:auto}  /* the event page whole, by the arrows out of the corners */
.sheet__full svg{display:block}
.sheet .ev{display:block;padding:0}
.sheet .ev__kind{display:none}  /* the bar says it */
.sheet .ev__title{margin:18px 0 16px;font-size:30px;line-height:.95;letter-spacing:-.03em;font-stretch:100%;text-wrap:balance}
.sheet .ev__when{margin:0;padding-top:10px;gap:12px}
.sheet .ev__when > span:first-child{font-size:44px}
.sheet .ev__when b{font-size:20px}
/* the pictures: one as wide as the sheet in its own shape, a tall one as high as half the window; several in a strip
   two fifths of the sheet high, the next cut off at the edge, as a row of posters is, scrolled sideways */
.sheet .ev__face{--ph:50dvh;display:flex;gap:var(--gap);max-width:none;margin:18px calc(-1*var(--g)) 0 0;padding-right:var(--g);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.sheet .ev__face .face:not(:only-child){flex:none;width:auto;height:var(--fh);scroll-snap-align:start}
.sheet .ev__face:has(.poster){width:calc(var(--fh)*.8)}  /* the typographic poster, as high as a picture: its figure as wide as it, so that its type is sized by that width */
.sheet .ev__face .face.poster{width:100%;height:var(--fh)}
.sheet .ev__info{margin-top:22px}
.sheet .desc{margin-top:0}
.sheet :is(.desc,.critics) p{font-size:16px;line-height:1.45;max-width:none}
.sheet .desc__by{margin-bottom:0}
.sheet .chips{margin:14px 0 18px}
.sheet .desc + .facts{margin-top:18px}
.sheet .source{height:52px}
.sheet .ev__more{margin-top:32px}
.sheet .ev__more > :first-child{margin-top:0}
@supports not selector(:popover-open){.sheet{display:none}}  /* a browser without popovers follows the card's link */
@media (prefers-reduced-motion:no-preference){
  .sheet{transition:translate .2s ease-out,display .2s allow-discrete,overlay .2s allow-discrete}
  .sheet:not(:popover-open){translate:0 100%}
  @starting-style{.sheet:popover-open{translate:0 100%}}
}

/* ---------- the forms of my.go-gnocchi.app: a field is a line to write on, the button a block of the accent ---------- */
.form,.text .facts,.text .source{max-width:420px;margin-bottom:28px}
.form label{display:block;margin-bottom:18px;font-size:13px;font-weight:600}
.form input{display:block;width:100%;margin-top:4px;padding:8px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  background:none;color:inherit;font:inherit;font-size:22px;font-weight:400}
.form button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:56px;margin-top:18px;
  background:var(--accent);font-weight:700;font-size:17px}
.form .form__quiet{background:none;border:1px solid var(--ink)}
.text .form__error{padding-left:10px;border-left:4px solid var(--accent)}
.text .form__note{font-size:15px;color:var(--grey)}
.text .source{text-decoration:none}
.cf-turnstile{min-height:65px}  /* the check's place, held before it loads */
.choose{margin:0 0 28px;padding:0;border:0}  /* the cities, as the site's picker lists them */
.choose input{position:absolute;opacity:0}  /* the name is the box */
.choose label:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---------- the consent line from posthog.js, sticky so that it never covers the last row ---------- */
.consent{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px var(--g);
  border-top:1px solid var(--ink);background:var(--paper);font-size:15px}
.consent span{flex:1 0 100%}  /* the buttons under the text on phones */
.consent a{text-decoration:underline}
.consent button{width:5em;padding:9px 0;border:1px solid var(--ink);text-align:center;font-weight:700}
.consent button:first-of-type{background:var(--ink);color:var(--paper)}  /* Yes, the one to press */

/* ---------- wider screens ---------- */
@media (min-width:640px){
  .foot__map{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot__wide{grid-column:3 / -1}
  :root{--g:24px;--gap:16px;--rn:3.4}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .intro h1{font-size:48px}
  .row__h{font-size:28px}
  .ev__face:has(.poster){max-width:44%}
  .sheet{--g:24px;inset:0;max-width:560px;margin:auto;border:1px solid var(--ink)}
  .consent span{flex-basis:0}
}
@media (min-width:1024px){
  :root{--g:40px;--gap:20px;--rn:4.4}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:48px}
  .bar{padding:20px 0 18px;font-size:26px}
  .intro{padding:56px 0 40px}
  .intro h1,.picker a{font-size:clamp(56px,5.6vw,92px);line-height:.9}
  .row{margin-top:48px}
  .row__h{padding-top:12px;font-size:34px}
  .strip{margin-top:16px}
  .day{margin-top:56px}
  .day__n{font-size:56px}
  .card__title,.more{font-size:18px}
  .more b{font-size:72px}
  .desc p{font-size:19px}
  /* the event page, not the sheet's copy of it */
  .wrap > .ev{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:start;padding-top:28px}
  .wrap > .ev .ev__face{--ph:calc(100dvh - 130px);grid-area:1/1/4;max-width:none;position:sticky;top:24px}  /* the picture as large as the window lets it, beside the text as it scrolls */
  .wrap > .ev .ev__face:has(.poster){width:min(100%,calc(var(--ph) * .8))}
  .wrap > .ev :is(.ev__head,.ev__info,.ev__more){grid-column:2}
  .wrap > .ev .ev__title{font-size:clamp(44px,4.2vw,64px);line-height:.95;font-stretch:100%;letter-spacing:-.035em;text-wrap:balance}
  .wrap > .ev .ev__when > span:first-child{font-size:64px}
  .wrap > .ev .ev__when b{font-size:24px}
  .wrap > .ev .ev__info{display:flex;flex-wrap:wrap;gap:10px}  /* the tickets and the official page side by side */
  .wrap > .ev :is(.desc,.critics,.trailer,.video,.sounds,.chips,.facts){flex-basis:100%}
  .wrap > .ev .source{flex:1 1 220px;margin-top:10px}
  .wrap > .ev .ev__more{margin-top:32px}
  .sheet{--fh:clamp(240px,40dvh,420px);inset:0 0 0 auto;width:500px;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-left:1px solid var(--ink)}
  .sheet::backdrop{background:none}  /* the wall stays in sight under the panel and nothing moves, so a tap on a card shows that one */
  @media (prefers-reduced-motion:no-preference){
    .sheet:not(:popover-open){translate:100% 0}
    @starting-style{.sheet:popover-open{translate:100% 0}}
  }
}
@media (hover:hover){.sheet .ev__face{scrollbar-width:thin}}  /* a mouse scrolls the strip by its bar */
@media (hover:hover) and (min-width:1024px){.row__arrow{display:block}}
@media (min-width:1280px){:root{--rn:5.4}.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1600px){:root{--rn:6.4}.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- Für dich: a grid of tiles, denser than the wall, so that a screen shows many pictures; on each a cross
   that takes it away and a heart that picks it, the two in the sheet's bar too, which a tile's card opens; under them a
   bar, held at the foot of the window, with the button for the next round ---------- */
.intro:has(.intro__change){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px}
.intro__change{font-size:15px;color:var(--grey);text-decoration:underline}
.picks [hidden]{display:none}  /* a button too, which its own display would show */
.picks .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px;scroll-margin-top:12px}
.picks .card__title{font-size:13px}
.picks .card__when,.picks .card__tail{font-size:12px}
.picks .tile{position:relative}
.tile__no,.tile__yes{display:grid;place-items:center;width:32px;height:32px;background:var(--paper)}
.tile .tile__no,.tile .tile__yes{position:absolute;top:4px}  /* on the tile's picture */
.tile__no::after,.tile__yes::after{content:"";position:absolute;inset:-6px}  /* a thumb's 44px to hit, the look 32 */
.tile .tile__no{left:4px}
.tile .tile__yes{right:4px}
.sheet .bar :is(.tile__no,.tile__yes){position:relative;align-self:center;border:1px solid var(--ink)}
.sheet .bar .tile__no{margin-left:auto}  /* the two first of the bar's buttons, after its kind */
.sheet .bar .tile__no:not([hidden]) ~ .sheet__full{margin-left:0}
.sheet .bar [hidden]{display:none}  /* for an event of no tile */
.picks .grid,.picks .tile{transition:opacity .2s}
.picks [aria-busy="true"]{opacity:.25}  /* the round is sent, or the tile crossed out: the next fades in */
.picks .tile[aria-busy="true"]{pointer-events:none}
@starting-style{.picks .tile{opacity:0}}  /* each tile fades in as it comes */
.tile:has(> .tile__yes[aria-pressed="true"]) .face::before{content:"";position:absolute;inset:0;border:4px solid var(--accent);pointer-events:none}  /* picked: a frame of the accent */
.tile__yes[aria-pressed="true"]{background:var(--accent)}  /* and its heart filled */
.tile__yes[aria-pressed="true"] path{fill:currentColor}
.picks__bar{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;margin:32px calc(-1*var(--g)) 0;
  padding:10px var(--g);border-top:1px solid var(--ink);background:var(--paper);font-size:15px}
.picks__more{padding:0 18px;line-height:44px;background:var(--accent);font-weight:700;white-space:nowrap}
@media (min-width:640px){.picks .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 12px}}
@media (min-width:1024px){.picks .grid{grid-template-columns:repeat(6,minmax(0,1fr))}.picks .card__title{font-size:14px}}