/* The supplied layered glass object, sized for an operating workspace. */
.client-folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,248px),1fr));gap:26px 30px;margin:16px 0 28px;padding-top:48px}
.content>.client-folder-grid{width:calc(100% - 84px);max-width:1460px;margin-inline:auto}
@media(max-width:740px){.content>.client-folder-grid{width:calc(100% - 24px)}}
.client-folder{min-width:0;position:relative;isolation:isolate;--folder-accent:#b4d5a5;--folder-ink:#f5f6ed}
.client-folder:nth-child(4n+2){--folder-accent:#bbc9db}.client-folder:nth-child(4n+3){--folder-accent:#d2bda1}.client-folder:nth-child(4n){--folder-accent:#c5bad3}
.client-folder-stage{position:relative;width:100%;height:228px;perspective:1000px}
.client-folder-back{position:absolute;inset:0 5px 4px;border-radius:14px 26px 22px 22px;background:radial-gradient(ellipse at 20% 15%,color-mix(in srgb,var(--folder-accent) 54%,#fff),transparent 65%),linear-gradient(125deg,#293b32,#121d19);box-shadow:inset 0 1px 1px #ffffff8c,0 14px 32px #0003;overflow:hidden;clip-path:polygon(0 0,40% 0,48% 9%,100% 9%,100% 100%,0 100%)}
.client-folder-back>span{position:absolute;right:18px;bottom:6px;font:italic 150px/1 var(--font-display);color:#ffffff21}
.client-folder-sheets{position:absolute;inset:0;z-index:2;pointer-events:none}
.client-folder-sheet{position:absolute;top:48px;left:12%;width:76%;height:160px;display:flex;flex-direction:column;gap:8px;padding:16px;text-align:left;border:1px solid #ffffff35;border-radius:12px;color:#eff3eb;background:linear-gradient(150deg,#354337,#1a231e);box-shadow:0 8px 18px #0003;transform-origin:50% 100%;transform:translateY(calc(var(--sheet) * -9px)) rotate(calc((var(--sheet) - 1) * 3deg));transition:transform 260ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms;pointer-events:none}
.client-folder-sheet svg{width:20px;height:20px}.client-folder-sheet strong{font:400 21px/1.1 var(--font-display)}.client-folder-sheet small{font-size:11px;line-height:1.4;color:#c1cbbc}.client-folder-sheet>span{font-size:11px;margin-top:auto;color:#d8ff5f}
.client-folder-front{position:absolute;z-index:3;inset:65px 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px;border:1px solid #ffffff52;border-radius:19px 19px 22px 22px;color:var(--folder-ink);text-align:left;background:linear-gradient(160deg,#c7e3c329,#1d2928b8 48%,#101b17f2);box-shadow:inset 0 1px 1px #ffffff5c,inset 0 -1px #ffffff16,0 16px 28px #0002;backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);transform-origin:50% 100%;transform:rotateX(0);transition:transform 260ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms;overflow:hidden}
.client-folder-gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#ffffff30,transparent 33%,transparent 64%,#ffffff08);border-radius:inherit}
.client-folder-label{display:grid;gap:7px;min-width:0;z-index:1}.client-folder-label strong{font:400 27px/1.05 var(--font-display);overflow-wrap:anywhere;letter-spacing:-.015em}.client-folder-label small{font-size:11px;line-height:1.4;color:#d0d9ca}
.client-folder-chevron{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #ffffff36;border-radius:50%;background:#ffffff12}.client-folder-chevron svg{width:16px;height:16px;transition:rotate 200ms}
.client-folder:hover .client-folder-front,.client-folder:focus-within .client-folder-front{transform:rotateX(-9deg)}
.client-folder[data-open="true"]{z-index:5}.client-folder[data-open="true"] .client-folder-front{transform:rotateX(-24deg)}.client-folder[data-open="true"] .client-folder-chevron svg{rotate:-90deg}
.client-folder[data-open="true"] .client-folder-sheet{pointer-events:auto;transform:translate(calc((var(--sheet) - 1) * 38px),calc(-76px - var(--sheet) * 29px)) rotate(calc((var(--sheet) - 1) * 7deg))}
.client-folder[data-open="true"] .client-folder-sheet:hover,.client-folder[data-open="true"] .client-folder-sheet:focus-visible{z-index:4;transform:translate(calc((var(--sheet) - 1) * 38px),calc(-92px - var(--sheet) * 29px)) rotate(0deg);box-shadow:0 18px 32px #0005}
.client-folder>footer{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 5px 0}.client-folder>footer>span{font-size:11px;line-height:1.4;color:var(--muted)}.client-folder>footer .text-button{font-size:11px;white-space:nowrap;min-height:36px;padding:6px}
.client-folders-empty{padding:26px 0;color:var(--muted)}.client-folders-empty p{max-width:55ch}
html[data-theme="light"] .client-folder-front{color:#172219;background:linear-gradient(150deg,#ffffffa8,#f4f8eef0 85%);border-color:#fff;box-shadow:inset 0 1px #fff,0 14px 30px #324c301c}html[data-theme="light"] .client-folder-label small{color:#475645}html[data-theme="light"] .client-folder-chevron{border-color:#243d272e;background:#fff7}
@media(max-width:740px){.client-folder-grid{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:30px;padding-top:40px}.client-folder-stage{height:216px}.client-folder-front{padding:20px}.client-folder-label strong{font-size:26px}}
@media(prefers-reduced-motion:reduce){.client-folder *{transition:none!important}.client-folder:hover .client-folder-front{transform:none}}
/* Opening separates all three named targets rather than hiding links in a stack. */
.client-folder[data-open="true"] .client-folder-sheet{left:0;top:46px;width:31%;height:165px;padding:12px 9px;gap:8px;transform:translate(calc(var(--sheet) * 111%),-92px) rotate(calc((var(--sheet) - 1) * 4deg))}
.client-folder[data-open="true"] .client-folder-sheet strong{font-size:17px;line-height:1.12;overflow-wrap:anywhere}.client-folder[data-open="true"] .client-folder-sheet small{font-size:10px;line-height:1.4}.client-folder[data-open="true"] .client-folder-sheet:hover,.client-folder[data-open="true"] .client-folder-sheet:focus-visible{transform:translate(calc(var(--sheet) * 111%),-108px) rotate(0deg)}
