/* Fill a Red Bag at night: /fill from the Ball's moment, or with ?at=after-ball. src/red-bag/render.ts
   adds this file and the markup it dresses, and only then. It sits on top of assets/css/red-bag.css and
   changes the look alone: the paper, the steppers, the panel's controls, the details step and the bottom
   bar are all as they are there. A file of its own, carrying all it needs: /fill does not load the
   stage's styles (assets/css/red-bag-stage.css), whose focus colour is for a different page. */

.fn-night{--fn-gold:#F4C95D;--fn-hill:clamp(36px,6.5vw,92px);position:relative;isolation:isolate;overflow:hidden;overflow:clip;color:var(--cream);padding-bottom:clamp(70px,8vw,120px);
  background:radial-gradient(70% 720px at 76% 420px,#2f8430 0,#1f6320 36%,var(--holly) 62%,var(--holly-dark) 100%)}
/* the menu sits on this strip: until the page is scrolled it has no background of its own */
.fn-night::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--nav-h);background:var(--cream);z-index:1}
.fn-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.fn-edge{position:absolute;left:0;right:0;top:calc(var(--nav-h) - 1px);height:var(--fn-hill);transform:scaleY(-1);z-index:1;pointer-events:none}
.fn-edge .drift{position:absolute;inset:0;display:block;width:100%;height:100%;color:var(--cream)}
.fn-night>.drift{position:absolute;left:0;right:0;bottom:-1px;display:block;width:100%;height:var(--fn-hill);color:var(--cream);z-index:0;pointer-events:none}
.fn-ground{height:clamp(14px,2vw,28px);background:var(--cream)}
.fn-still{position:relative;z-index:1;text-align:right;padding-top:10px}
.fn-pause{min-height:44px;background:none;border:0;padding:8px 2px;color:var(--cream);font:500 .96rem var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fn-pause:hover{color:var(--fn-gold)}
.fn-pause[hidden]{display:none}

/* the lights: low enough that all ten hang clear of the snow, because each one counts */
.fn-night .fb-lights{position:absolute;top:calc(var(--nav-h) + var(--fn-hill) * .55);right:clamp(-30px,-1vw,0px);width:clamp(420px,50vw,720px);height:auto;overflow:visible;z-index:0;pointer-events:none}
.fn-night .wire{fill:none;stroke:#0d2b0d;stroke-width:2.4}
.fn-night .cap{fill:#0d2b0d}
.fn-night .glass{fill:#3a5c3a;stroke:#0d2b0d;stroke-width:1;transition:fill .35s}
.fn-night .halo{opacity:0;transition:opacity .35s}
.fn-night .bulb.on .glass{fill:var(--c)}
.fn-night .bulb.on .halo{opacity:1}
.fn-night.full .bulb.on .halo,.fn-night.full .bulb.on .glass{animation:fn-twinkle 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -170ms)}
.fn-night.held .fb-lights *{animation-play-state:paused!important}
@keyframes fn-twinkle{from{opacity:1}to{opacity:.5}}

/* the heading, as big as the home page's */
.fn-night .rb-intro{position:relative;z-index:1;padding:calc(var(--nav-h) + clamp(50px,6vw,84px)) 0 clamp(18px,2.4vw,30px);background:none}
.fn-night .intro-hero{text-align:left;max-width:640px;margin:0}
.fn-night .intro-hero .eyebrow{color:var(--fn-gold)}
.fn-night .intro-hero h1{font-size:clamp(3rem,1.5rem + 5.2vw,6rem);line-height:.98;letter-spacing:-.024em;color:var(--cream);margin:.14em 0 .3em}
.fn-night .intro-hero .rule{display:none}
.fn-night .intro-hero .lede{margin:0;color:var(--cream);max-width:54ch}
.fn-under{position:relative;display:inline-block;white-space:nowrap}
.fn-under svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.2em;overflow:visible}
.fn-under path{fill:none;stroke:#D9A93E;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fn-night .rb-builder{padding-bottom:0;background:none}

/* the list: the same paper, lifted off the night sky */
.fn-night .rb-paper{box-shadow:0 34px 56px -26px rgba(0,16,0,.85),0 2px 6px rgba(0,16,0,.25);color:var(--slate)}

/* the bag stands in the snow on top of the panel */
.fn-night .rb-panel{--bag-h:clamp(280px,27vw,360px);--bag-w:min(290px,76%);--bag-left:calc((100% - var(--bag-w)) / 2 - 7%);--elf-w:112px;--elf-left:calc(var(--bag-left) + var(--bag-w) * .78);position:relative;z-index:1;margin-top:calc(var(--bag-h) + 16px);padding-top:20px;background:var(--cream);color:var(--slate);border-radius:26px;box-shadow:0 34px 56px -26px rgba(0,16,0,.85)}
.fn-night .rb-panel::before{content:"";position:absolute;z-index:2;left:-3%;right:-3%;top:-22px;height:52px;border-radius:50%;background:var(--cream);pointer-events:none}
.fn-night .rb-bags{position:absolute;z-index:1;left:0;right:0;top:calc(var(--bag-h) * -1 + 10px);height:var(--bag-h);flex-wrap:nowrap}
/* one bag stands a little left of the middle, leaving the elf room beside it */
.fn-night .rb-bags[data-count="1"]{justify-content:flex-start}
.fn-night .rb-bags[data-count="1"] .rb-bag{width:var(--bag-w);margin-left:var(--bag-left)}
.fn-night .rb-bags[data-count="2"]{--rb-max:44%}
.fn-night .rb-bags[data-count="3"]{--rb-max:30%}
.fn-night .rb-bags[data-count="4"]{--rb-max:23%}
.fn-night .rb-bags[data-count="5"]{--rb-max:18.5%}
/* a red bag from the start, and the brighter red still rises inside it: the painted bag, darkened */
.fn-night .rb-bag__whole--red{opacity:1;filter:brightness(.5) saturate(1.15)}
.fn-night .rb-bag__paper-night{display:inline;filter:brightness(.5) saturate(1.15)}
.fn-night .rb-bag.is-full .rb-bag__whole--red{filter:none}
/* The sum stands where the bag does, in a box of the bag's own height. Its place is padding because a
   percentage in padding is always of the width, which is what the bag's own size is. */
.fn-sum{position:absolute;z-index:2;left:0;right:0;top:calc(var(--bag-h) * -1 + 10px);height:var(--bag-h);box-sizing:border-box;padding:0 calc(100% - var(--bag-left) - var(--bag-w) * .65) calc(var(--bag-w) * .22) calc(var(--bag-left) + var(--bag-w) * .208);margin:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#FFF8EF;text-shadow:0 2px 0 rgba(90,0,14,.5);pointer-events:none}
.fn-sum b{font-family:var(--font-head);font-weight:700;font-size:clamp(2.1rem,1.8rem + 2vw,3.7rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.fn-sum span{font-size:.98rem;font-weight:500}
.fn-sum[hidden]{display:none}
.fn-night .rb-more{position:relative;z-index:3;margin-top:22px}
.fn-night .rb-status{position:relative;z-index:3;margin-top:24px}
/* The elf, cut off above the logo's line, with a heap of snow of its own in front: however the panel's
   curve falls at this width, the cut edge is always behind snow, and only the eyes and up show over it. */
.fn-elf{position:absolute;z-index:0;left:var(--elf-left);top:calc(-14px - var(--elf-w) * .6533);width:var(--elf-w);height:auto;aspect-ratio:150/98;object-fit:cover;object-position:50% 0}
.fn-night .rb-panel::after{content:"";position:absolute;z-index:2;left:calc(var(--elf-left) - 14px);width:calc(var(--elf-w) + 28px);top:-20px;height:34px;border-radius:50%;background:var(--cream);pointer-events:none}
/* Several bags fill the width: the elf would be a stray ear behind them, and taller than the small ones. */
.fn-night .rb-panel:has(.rb-bags:not([data-count="1"])) .fn-elf{display:none}
.fn-night .rb-panel:has(.rb-bags:not([data-count="1"]))::after{display:none}

/* the examples, on the night sky */
.fn-night .rb-need__head h2,.fn-night .rb-theme h3{color:var(--cream)}
.fn-night .rb-need__head p,.fn-night .rb-theme__sub{color:var(--cream)}
.fn-night .rb-example{background:var(--cream);color:var(--slate);border-color:transparent}
.fn-night .rb-example:hover{background:var(--card);color:var(--slate);border-color:var(--fn-gold)}
.fn-night .rb-example[aria-pressed="true"],.fn-night .rb-example[aria-pressed="true"]:hover{background:var(--holly-dark);border-color:var(--fn-gold);color:var(--cream)}
.fn-night .rb-example:focus-visible,.fn-night .rb-real a:focus-visible,.fn-pause:focus-visible{outline-color:var(--fn-gold)}
.fn-night .rb-real{color:var(--cream);border-top-color:rgba(248,245,238,.28)}
.fn-night .rb-real strong{color:var(--cream)}
.fn-night .rb-real a{color:var(--fn-gold)}

@media (max-width:860px){
  /* stacked, the words are where the glow is brightest: a dimmer one keeps them readable */
  .fn-night{background:radial-gradient(70% 720px at 76% 420px,#246d25 0,#1b5b1c 36%,var(--holly) 62%,var(--holly-dark) 100%)}
  .fn-night .intro-hero{text-align:center;margin-inline:auto}
  .fn-night .intro-hero .lede{margin-inline:auto}
  .fn-night .fb-lights{top:calc(var(--nav-h) + var(--fn-hill) * .8);right:50%;width:min(100%,600px);margin-right:calc(min(100%,600px) / -2)}
  .fn-night .rb-intro{padding-top:calc(var(--nav-h) + var(--fn-hill) * .8 + min(27vw,162px))}
  .fn-night .rb-panel{--bag-h:clamp(250px,78vw,330px);--bag-w:min(270px,72%)}
}

@media (max-width:400px){
  .fn-night .rb-panel{--elf-w:96px}
  .fn-night .rb-panel::before{left:-5%;right:-5%}
}

/* ---- the Workshop (5 November 2026): the elves' painted aisle behind the night look, its shelves
   filling as bags are filled (one of twelve stages, chosen by the server). Dimmed behind the heading
   and towards the foot, so every word stays readable on it. ---- */
.fn-night{background:#14301a}
.fn-workshop{position:absolute;left:0;right:0;top:0;height:clamp(720px,68vw,1120px);z-index:-2;pointer-events:none}
.fn-workshop__room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.fn-workshop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,48,26,0) 62%,#14301a 98%),linear-gradient(90deg,rgba(12,30,14,.9) 0,rgba(12,30,14,.62) 34%,rgba(12,30,14,.16) 60%,rgba(12,30,14,.05) 100%),linear-gradient(180deg,rgba(12,30,14,.3) 0,rgba(12,30,14,0) 22%)}
/* the sign: the count in real words, on a painted board hanging in the aisle */
/* It hangs from behind the cream banner at the top, so its ropes are fixed to something (Jaimie): the
   banner and its wavy edge are drawn over the sign, the sign over the lights. */
.fn-night::before,.fn-edge{z-index:2}
.fn-sign{--sw:clamp(250px,23vw,330px);position:absolute;z-index:1;right:clamp(16px,6vw,110px);top:calc(var(--nav-h) + var(--fn-hill) * .15 - var(--sw) * .1);width:var(--sw);aspect-ratio:520/413;margin:0;padding:calc(var(--sw) * .3) calc(var(--sw) * .09) calc(var(--sw) * .07);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-align:center;background:url(/assets/img/red-bag/sign.webp) center/100% 100% no-repeat;color:#5C2626;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.fn-sign--named{--sw:clamp(270px,25vw,350px)}
.fn-sign i{font-style:normal;font-family:var(--font-body);font-weight:700;font-size:clamp(.78rem,.7rem + .3vw,.92rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.15;text-wrap:balance}
.fn-sign--named b{font-size:clamp(.98rem,.78rem + .7vw,1.3rem)}
.fn-sign--named span{font-size:clamp(1.05rem,.9rem + .4vw,1.25rem)}
.fn-sign b{font-family:var(--font-head);font-weight:800;font-size:clamp(1.05rem,.8rem + .8vw,1.4rem);line-height:1.1;text-wrap:balance}
.fn-sign span{font-family:var(--rb-hand);font-weight:700;font-size:clamp(1.2rem,1rem + .5vw,1.45rem);line-height:1.05;color:var(--maroon);text-wrap:balance}

/* the bag stands big, ON the Workshop's workbench (in front of it, its foot on the bench top), and
   the logo's own elf peeks over the back of the bench beside it, mittens on the bench, as in the logo */
.fn-night .rb-panel{--bag-h:clamp(360px,31vw,470px);--bag-w:min(430px,104%);--bag-left:calc((100% - var(--bag-w)) / 2 - 9%);--elf-w:clamp(110px,10vw,140px);--elf-left:calc(var(--bag-left) + var(--bag-w) * .74);
  box-shadow:0 0 0 2.6px var(--rb-ink),0 8px 0 2.6px var(--rb-ink),0 34px 56px -26px rgba(0,16,0,.85)}
.fn-night .rb-panel::before{left:-5%;right:-5%;top:-26px;height:62px;border-radius:0;background:url(/assets/img/red-bag/bench.webp) center/100% 100% no-repeat}
.fn-night .rb-bags{z-index:3;top:calc(var(--bag-h) * -1 + 14px)}
.fn-night .fn-sum{z-index:4;top:calc(var(--bag-h) * -1 + 14px)}
.fn-night .rb-panel::after{display:none}
/* the elf's line is the bench's back edge: it sits just on it, behind the bag */
.fn-elf{z-index:2;top:calc(-22px - var(--elf-w) * .687);width:var(--elf-w);height:auto;aspect-ratio:482/331;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
.fn-night.full .fn-elf{animation:fn-hop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes fn-hop{0%{transform:none}35%{transform:translateY(-16px)}70%{transform:translateY(2px)}100%{transform:none}}
/* what the elf says, in a speech bubble above it: happier as the Workshop fills */
.fn-says{position:absolute;z-index:4;left:calc(var(--elf-left) - 40px);top:calc(-30px - var(--elf-w) * .687 - 64px);max-width:200px;margin:0;padding:8px 14px 9px;background:var(--card);color:var(--maroon);border:2.6px solid var(--rb-ink);border-radius:18px;
  font-family:var(--rb-hand);font-weight:700;font-size:1.3rem;line-height:1.05;text-align:center;text-wrap:balance;pointer-events:none}
.fn-says:empty{display:none}
.fn-says::after{content:"";position:absolute;left:58%;bottom:-11px;width:16px;height:16px;background:var(--card);border-right:2.6px solid var(--rb-ink);border-bottom:2.6px solid var(--rb-ink);transform:rotate(45deg)}
.fn-night .rb-panel:has(.rb-bags:not([data-count="1"])) .fn-says{display:none}
/* the list: the same paper, outlined in the logo's maroon-brown, standing proud of the Workshop */
.fn-night .rb-paper{box-shadow:0 0 0 2.6px var(--rb-ink),0 8px 0 2.6px var(--rb-ink),0 34px 56px -26px rgba(0,16,0,.85)}

@media (max-width:860px){
  .fn-workshop{height:clamp(620px,150vw,900px)}
  .fn-workshop__room{object-position:50% 30%}
  .fn-workshop::after{background:linear-gradient(180deg,rgba(12,30,14,.55) 0,rgba(12,30,14,.5) 45%,#14301a 100%)}
  .fn-sign{--sw:min(270px,74vw);right:auto;left:50%;transform:translateX(-50%);top:calc(var(--nav-h) + var(--fn-hill) * .8 + min(22vw,132px))}
  .fn-night .rb-intro{padding-top:calc(var(--nav-h) + var(--fn-hill) * .8 + min(22vw,132px) + min(56vw,210px))}
  .fn-night .rb-panel{--bag-h:clamp(330px,94vw,440px);--bag-w:min(400px,100%);--elf-w:clamp(96px,26vw,120px)}
}

@media (prefers-reduced-motion:reduce){
  .fn-night .glass,.fn-night .halo{transition:none}
  .fn-night.full .bulb.on .halo,.fn-night.full .bulb.on .glass,.fn-night.full .fn-elf{animation:none}
}