/* The fellas in Cut + Dimmer (8 Oct 2026). Link after cd-system.css.
   Renderer: fellas.js, an unchanged copy of the app's static/js/blob.js (16 shapes, flat colour, ink outline,
   the six faces, five patterns, ten things to wear, seven frames, seeded from the account name).
   The fellas are not redrawn. What changes is the room they sit in:
   - Night: the cream disc stays (it is the lit window); the sticker shadow goes, because shadows do not read on deep pine.
   - Day: the white rim stays but thins from 7% to 4.5%, and the shadow tightens.
   - A fella is always lit, at full colour. Status (done, still going, covered) lives in the row beside it, in weight
     and the nights, never in the fella: no dimming, no grey, no sad face. (Tried dimming "not yet": it went muddy and
     read as disabled. Dropped.)
   - The mint dot means studying right now (only inside the pact).
   - One hop, once, when the week counts. Nothing else moves.
   - The fellas are the one place the four colours live freely. The room is pine and light; the people bring the colour.
   Markup: <span class="fl [is-on] [is-hop]" style="--s:48px"><span class="av" data-blob="seed" data-look='{"shape":"bean"}'></span></span>
   (.fl is optional; it carries the dot and the hop. A bare .av works anywhere the app uses one.) */

:root{
  --coral:#E4663F;
  --edge:#F7F4EC;
  --sh:rgba(0,0,0,.28);
  --sh-lift:rgba(0,0,0,.36);
  --fella-disc:var(--cream);
  --fella-gap:var(--ground,#0F2E25);
  --fella-rim:0 0 0 0 transparent;
}
[data-theme="day"]{
  --fella-disc:#FFFDF8;
  --fella-gap:#F7F4EC;
  --fella-rim:0 0 0 calc(var(--s,40px)*.045) #FFFFFF,0 calc(var(--s,40px)*.03) calc(var(--s,40px)*.09) calc(var(--s,40px)*.03) rgba(22,32,28,.13);
  --sh:rgba(22,32,28,.14);
  --sh-lift:rgba(22,32,28,.20);
}

.fl{--s:40px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:none;vertical-align:middle}
.fl>.av{--s:inherit;width:100%;height:100%}
.av{--s:40px;position:relative;width:var(--s);height:var(--s);flex:none;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;background:var(--fella-disc);box-shadow:var(--fella-rim);
  transition:filter var(--t-state,320ms) var(--ease,ease),opacity var(--t-state,320ms) var(--ease,ease)}
.av svg{width:92%;height:92%}

/* studying right now: the mint dot */
.fl.is-on::after{content:"";position:absolute;right:-1%;bottom:-1%;width:max(9px,26%);height:max(9px,26%);border-radius:50%;
  background:var(--mint);box-shadow:0 0 0 max(2px,calc(var(--s)*.05)) var(--fella-gap)}

/* the week counted: everyone hops once */
@keyframes fl-hop{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.25,.6,.4,1)}42%{transform:translateY(-22%);animation-timing-function:cubic-bezier(.55,0,.75,.4)}84%,100%{transform:translateY(0)}}
.fl.is-hop{animation:fl-hop 620ms linear 1 both}
.fl.is-hop:nth-child(2){animation-delay:70ms}.fl.is-hop:nth-child(3){animation-delay:140ms}.fl.is-hop:nth-child(4){animation-delay:210ms}
.fl.is-hop:nth-child(5){animation-delay:280ms}.fl.is-hop:nth-child(6){animation-delay:350ms}
@media (prefers-reduced-motion:reduce){.fl.is-hop{animation:none}}
html[data-motion="still"] .fl.is-hop{animation:none}

/* overlapping rows: a ring of the ground between neighbours */
.flrow{display:flex;align-items:center}
.flrow>*+*{margin-left:calc(var(--s,40px)*-.22)}
.flrow .av{box-shadow:0 0 0 max(2px,calc(var(--s)*.06)) var(--fella-gap),var(--fella-rim)}

/* an empty seat */
.flseat{--s:40px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;
  border:2px dashed var(--line-2);color:var(--mute);font-weight:800;font-size:calc(var(--s)*.42);line-height:1}

/* ---------- frames: the app's blob edges (shell.css), night values as the default ---------- */
.av.dressed{overflow:visible;position:relative;isolation:isolate}
.av.dressed>svg{overflow:visible}
.av.f-stamp{border:0;border-radius:0;background:var(--blob-stamp) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 2px 3px var(--sh));transform:rotate(-3deg)}
.av.f-tape{transform:rotate(2.5deg)}
.av.f-tape::before,.av.f-tape::after{content:"";position:absolute;z-index:1;width:44%;height:16%;background:color-mix(in srgb,var(--amber) 32%,var(--cream));opacity:.93;top:-2%;left:-14%;transform:rotate(-38deg)}
.av.f-tape::after{left:auto;right:-14%;top:auto;bottom:4%}
.av.f-puffy{box-shadow:0 0 0 calc(var(--s)*.07) var(--cream),inset 0 calc(var(--s)*-.05) 0 color-mix(in srgb,var(--ink) 7%,transparent)}
[data-theme="day"] .av.f-puffy{box-shadow:0 0 0 calc(var(--s)*.08) #fff,inset 0 calc(var(--s)*-.05) 0 color-mix(in srgb,var(--ink) 7%,transparent),0 calc(var(--s)*.1) 0 color-mix(in srgb,var(--cream) 82%,var(--ink)),0 calc(var(--s)*.14) calc(var(--s)*.14) var(--sh)}
.av.f-peel{transform:rotate(-4deg)}
.av.f-peel::after{content:"";position:absolute;z-index:1;right:-7%;bottom:-7%;width:40%;height:40%;background:var(--edge);border-radius:50% 0 50% 50%;transform:rotate(-45deg);box-shadow:-2px -2px 5px var(--sh-lift)}
.av.f-scallop{border:0;background:transparent;box-shadow:none}
.av.f-scallop::before{content:"";position:absolute;z-index:-1;inset:-10%;background:var(--blob-scallop) center/100% 100% no-repeat;filter:drop-shadow(0 2px 3px var(--sh))}
.av.f-bomb>svg.bomb{position:absolute;z-index:2;width:34%;height:34%;overflow:visible}
.av.f-bomb>.b1{top:-12%;right:-12%;transform:rotate(14deg)}
.av.f-bomb>.b2{bottom:-8%;left:-14%;transform:rotate(-12deg)}
.av.f-bomb>.b3{bottom:-14%;right:6%;width:26%;height:26%;transform:rotate(22deg)}
.av.f-glow{box-shadow:0 0 0 calc(var(--s)*.035) var(--mint),0 0 calc(var(--s)*.4) calc(var(--s)*.08) color-mix(in srgb,var(--mint) 45%,transparent)}
[data-theme="day"] .av.f-glow{box-shadow:0 0 0 calc(var(--s)*.045) #fff,0 0 0 calc(var(--s)*.075) var(--mint),0 2px 6px var(--sh)}
html[data-a11y] .av.dressed,html[data-a11y] .av.dressed>svg.bomb{transform:none}
html[data-a11y] .av.f-stamp,html[data-a11y] .av.f-scallop{filter:none}