/* tester · folders: a ring of folder cards around the ABSTRAXX mark. Hover (or tap) a folder and its slots fan out.
   Everything is a placeholder for now: grey folder cards (after the "Daily memo" card reference) and numbered empty slots. */
.fd{position:relative;height:100vh;height:100svh;min-height:620px;background:radial-gradient(circle,rgba(239,239,232,.3) 1px,transparent 1.4px) 0 0/5px 5px,#2f8b57;color:#f1efe4;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.fd-stage{position:absolute;left:0;right:0;bottom:0;top:58px}
.fd-ph,.fd-f,.fd-i{position:absolute;left:0;top:0;will-change:transform}
/* tiles that hold each folder's spot while it "loads" */
.fd-ph{width:var(--F);height:calc(var(--F)*.8);margin:calc(var(--F)*-.4) 0 0 calc(var(--F)*-.5);background:#f6f9d6;border-radius:calc(var(--F)*.03);opacity:0;transform:var(--p) scale(.5);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.25,1.2)}
.fd.in .fd-ph{opacity:1;transform:var(--p) scale(1)}
.fd.in.ready .fd-ph{opacity:0;transition-delay:0s!important}
/* a folder card: a soft grey bezel; a colour band on top; a lighter front panel with a tab; name, kind, count */
.fd-f{width:var(--F);height:calc(var(--F)*.8);margin:calc(var(--F)*-.4) 0 0 calc(var(--F)*-.5);cursor:pointer;z-index:2;opacity:0;transform:var(--p) scale(.6);
  transition:transform .55s cubic-bezier(.2,.9,.25,1.15),opacity .35s ease;container-type:inline-size}
.fd.ready .fd-f{opacity:1;transform:var(--p) scale(1)}
.fd.ready .fd-f:hover{transform:var(--p) scale(1.05)}
.fd.ready .fd-f.on{transform:var(--p) scale(1.16);z-index:4}
.fd.ready .fd-f.off{opacity:.2;transform:var(--p) scale(.9)}
/* the file folder (after the manila "ART FACE" reference): a back sheet peeking out, a front sheet with a top tab and a stuck-on label,
   paper grain, thin rules and small type, and the name running huge and cropped across the bottom. Colours per folder: --bg/--fg/--bk */
.fd-card{position:absolute;inset:0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.fd-sh{position:absolute;left:0;right:0;bottom:0;top:13%;border-radius:2.4cqi;overflow:hidden;background:var(--bg)}
.fd-tab{position:absolute;top:2%;height:12%;width:34%;background:var(--bg);clip-path:polygon(0 100%,7% 12%,11% 0,89% 0,93% 12%,100% 100%);border-radius:2cqi 2cqi 0 0}
.fd-back{position:absolute;inset:0;transform:translate(3.5%,-5%) rotate(2.2deg);transform-origin:50% 100%}
.fd-back .fd-sh,.fd-back .fd-tab{background:var(--bk)}
.fd-back .fd-tab{left:12%}
.fd-front .fd-tab{left:58%;display:flex;align-items:center;justify-content:center}
.fd-sh::before,.fd-tab::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fd-lab{position:relative;background:#f4f2ec;color:#111;font:700 4.4cqi/1 'Arimo',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:1.6cqi 2.4cqi;margin-top:1.5cqi;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.fd-sh .fd-big{position:absolute;left:4cqi;right:0;bottom:-4.2cqi;font:400 17.6cqi/1 'Arimo',system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg);white-space:nowrap;text-transform:uppercase}
.fd-col{position:absolute;top:8cqi;font:400 3.5cqi/1.35 var(--mono,'Roboto Mono',monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.fd-col i{display:block;width:16cqi;height:1px;background:currentColor;margin:2.2cqi 0;opacity:.8}
.fd-col b{font-weight:500}
.fd-c1{left:6cqi}.fd-c2{left:38cqi}.fd-c3{right:6cqi;text-align:right}.fd-c3 i{margin-left:auto}
.fd-n{position:absolute;right:6cqi;top:30cqi;font:700 9cqi/1 'Arimo',system-ui,sans-serif;letter-spacing:-.02em;color:var(--fg)}
/* slots: empty numbered placeholders that fly out of their folder */
.fd-i{width:var(--I);height:calc(var(--I)*1.3);margin:calc(var(--I)*-.65) 0 0 calc(var(--I)*-.5);border-radius:calc(var(--I)*.12);background:#f7f9e0;border:1.5px dashed rgba(17,17,17,.28);
  display:flex;align-items:flex-end;padding:7px;cursor:pointer;z-index:3;font:500 10px/1 var(--mono,'Roboto Mono',monospace);letter-spacing:.08em;color:rgba(17,17,17,.6);
  box-shadow:0 8px 18px -12px rgba(0,0,0,.35);opacity:0;pointer-events:none;transform:var(--home) scale(.35);transition:transform .6s cubic-bezier(.2,.9,.22,1.12),opacity .3s ease}
.fd-i.out{opacity:1;pointer-events:auto;transform:var(--p) rotate(var(--r,0deg)) scale(1)}
.fd-i.out:hover{transform:var(--p) rotate(0deg) scale(1.1);z-index:5;background:#fff}
/* centre: the mark */
.fd-mid{position:absolute;left:50%;top:calc(50% + 29px);transform:translate(-50%,-50%) scale(.6);z-index:1;opacity:0;transition:opacity .5s ease .2s,transform .7s cubic-bezier(.2,.9,.25,1.2) .2s;pointer-events:none}
.fd-mid img{display:block;width:var(--M,120px);height:auto}
.fd.in .fd-mid{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fd.has-open.small .fd-mid{opacity:.12}
.fd-h{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,32px);font:500 11px/1.5 var(--mono,'Roboto Mono',monospace);letter-spacing:.12em;text-transform:uppercase;margin:0;z-index:6}
.fd-h span{display:block;opacity:.55}
@media (prefers-reduced-motion:reduce){.fd-ph,.fd-f,.fd-i,.fd-mid{transition-duration:.01s!important;transition-delay:0s!important}}
.fd-card span,.fd-card b{text-transform:uppercase}
.fd-card .fd-big,.fd-card .fd-col,.fd-card .fd-n{color:var(--fg)!important}
.fd-card .fd-lab{color:#111!important}
/* the switch, bottom right (styled like the pencils' "Tap to tidy"): Tap to scroll <-> Tap to tidy */
.fd-tg{position:absolute;right:16px;bottom:16px;z-index:400;box-sizing:border-box;width:98px;text-align:center;padding:7px 9px;border:0;border-radius:0;background:#111;color:var(--paper,#efefe8);
  font:inherit;font-family:var(--mono,'Roboto Mono',monospace);font-size:8.25px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.fd-tg:active{transform:scale(.95)}
.fd-tg b{font-weight:400}
@media (max-width:640px){.fd-tg{right:12px;bottom:14px}}
/* scroll mode: the folders become one deck receding up the screen; drag it down (or tap) to bring the next one forward */
.fd.scroll .fd-f{transition:opacity .3s ease}
.fd.scroll.anim .fd-f{transition:transform .7s cubic-bezier(.2,.9,.25,1.05),opacity .4s ease}
.fd.scroll .fd-mid{opacity:0!important}
.fd.scroll .fd-f .fd-card{filter:drop-shadow(0 -6px 14px rgba(0,0,0,.18))}
.fd-deck{position:absolute;top:0;bottom:56px;left:50%;transform:translateX(-50%);z-index:300;display:none;cursor:grab;touch-action:none}
.fd.scroll .fd-deck{display:block}
.fd-deck:active{cursor:grabbing}
/* TIDY: the same paper file folders, in a neat grid - draggable. (.fd-flat, the flat schedule-style face, is kept but switched off) */
.fd-flat{display:none;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.fd-card{transition:opacity .45s ease}
.fd-flat .fl-tab{position:absolute;left:0;top:0;width:34%;height:10%;background:var(--fc);clip-path:polygon(0 100%,0 0,78% 0,100% 100%);border-radius:1.4cqi 0 0 0}
.fd-flat .fl-body{position:absolute;left:0;right:0;top:9%;bottom:0;background:var(--fc);box-shadow:0 3px 0 rgba(0,0,0,.08),0 12px 22px -16px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:6cqi 6cqi 5.5cqi;color:#111}
.fd-flat .fl-top,.fd-flat .fl-foot{font:700 3.6cqi/1 var(--mono,'Roboto Mono',monospace);letter-spacing:.06em;text-transform:uppercase}
.fd-flat .fl-t{font:900 9.4cqi/1.02 'Arimo',system-ui,sans-serif;letter-spacing:-.01em;text-transform:uppercase;transform:scaleY(1.12)}
.fd:not(.scroll) .fd-f{cursor:grab}
.fd:not(.scroll) .fd-f.drag{cursor:grabbing;z-index:20!important;transition:opacity .3s ease!important}
.fd:not(.scroll) .fd-f.drag .fd-card{filter:drop-shadow(0 22px 22px rgba(0,0,0,.3))}
.fd-unused{box-shadow:0 3px 0 rgba(0,0,0,.08),0 26px 34px -18px rgba(0,0,0,.55)}
.fd.ready:not(.scroll) .fd-f.on{transform:var(--p) scale(1)}
.fd.ready:not(.scroll) .fd-f:hover{transform:var(--p) scale(1.02)}
.fd:not(.scroll) .fd-f.lift{transform:var(--p) scale(1.05)!important;transition:transform .18s ease!important}
.fd:not(.scroll) .fd-f.lift.drag{transform:var(--p) scale(1.05)!important;transition:none!important}
.fd.scroll .fd-i{z-index:400}
/* green grid board, like the colour pencils' blue one (lines + numbered axes drawn in folders.js) */
.fd-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fd-h{color:#f1efe4}
.fd-tg{background:var(--paper,#efefe8);color:#111}
.fd-ph{background:rgba(255,255,255,.14)}
.fd-i{background:#f1efe4;border-color:rgba(255,255,255,.55)}
/* no shadows in the scroll stack */
.fd.scroll .fd-card,.fd.scroll .fd-f .fd-card{filter:none!important}
.fd{isolation:isolate}   /* keep the wheel under the fixed site header */
/* ---------- folders 2: the drifting field + the smiley balls ---------- */
.fd2-field{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.fd.scroll .fd2-field{opacity:1}
.fd2-plane{position:absolute;left:0;top:0;width:0;height:0}
.fd2-x{position:absolute;left:0;top:0;container-type:inline-size;will-change:transform}
#folders2.scroll .fd-f{opacity:0!important;pointer-events:none!important;transition:opacity .4s ease!important}
.fd-deck.fd2-deck{left:0;transform:none;width:100%}
@media (max-width:700px){.fd-deck.fd2-deck{width:86%}}   /* phones: the right edge stays free for scrolling the page */
.fd2-balls{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}