/* <nestly-file-organization> — files finding their home */

nestly-file-organization {
  --nfo-ivory: #FFFCF8; --nfo-peach: #FFB79A; --nfo-coral: #EE8A74; --nfo-lavender: #C7B8FF; --nfo-violet: #6F57E8; --nfo-sky: #A9D4FF;
  --nfo-card-bg: #ffffff; --nfo-ink: #3A2F45;
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 8.6; container-type: inline-size;
}
@media (prefers-color-scheme: dark) { nestly-file-organization { --nfo-card-bg: #2A2420; } }
@media (max-width: 640px) { nestly-file-organization { aspect-ratio: 4 / 5; } }

.nfo-stage {
  position: absolute; inset: 0; isolation: isolate; overflow: hidden; border-radius: 22px;
  border: 1px solid var(--card-border, var(--line, rgba(0,0,0,.08)));
  background:
    radial-gradient(60% 45% at 50% 100%, rgba(199,184,255,.18), transparent 70%),
    radial-gradient(var(--art-dot, rgba(0,0,0,.05)) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--card, #F8F2EA);
}
.nfo-layer { display: contents; }

/* ---- Folders: back (z1) · cards (z2) · front pocket (z3) ---- */
.nfo-folder { position: absolute; bottom: 8%; width: 27%; height: 44%; }
.nfo-folder.nfo-at-1 { left: 5%; }
.nfo-folder.nfo-at-2 { left: 36.5%; }
.nfo-folder.nfo-at-3 { left: 68%; }
.nfo-back { position: absolute; inset: 12% 0 0 0; z-index: 1; border-radius: 10% / 14%; background: var(--nfo-b); }
.nfo-back::before { content: ""; position: absolute; left: 6%; top: -11%; width: 38%; height: 16%; border-radius: 10px 10px 0 0; background: var(--nfo-b); }
.nfo-front {
  position: absolute; left: -2%; right: -2%; bottom: 0; height: 62%; z-index: 3;
  border-radius: 9% / 16%; background: linear-gradient(180deg, var(--nfo-f1), var(--nfo-f2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 26px -16px rgba(60,40,120,.5);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 9% 9%; color: var(--nfo-ink);
  transition: box-shadow .5s var(--ease-out, ease-out);
}
.nfo-folder.nfo-done .nfo-front { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 2px rgba(255,255,255,.55), 0 14px 30px -16px rgba(60,40,120,.55); }
.nfo-fname { font-weight: 700; font-size: clamp(10px, 1.55cqi, 15px); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfo-count { font-size: clamp(9px, 1.2cqi, 12.5px); color: rgba(58,47,69,.68); opacity: 0; transform: translateY(4px); transition: opacity .45s var(--ease-out, ease-out), transform .55s var(--ease-out, ease-out); }
.nfo-folder.nfo-done .nfo-count { opacity: 1; transform: none; }
.nfo-spark { position: absolute; right: 7%; top: -6%; width: 11%; z-index: 4; opacity: 0; overflow: visible; }

.nfo-t-lav   { --nfo-b: linear-gradient(160deg, #B6A4FF, #9C88F5); --nfo-f1: #EAE3FF; --nfo-f2: var(--nfo-lavender); }
.nfo-t-coral { --nfo-b: linear-gradient(160deg, var(--nfo-sky), #7FB2F5); --nfo-f1: #FFDCCD; --nfo-f2: #F6A792; }
.nfo-t-cream { --nfo-b: linear-gradient(160deg, #9B86F2, var(--nfo-violet)); --nfo-f1: var(--nfo-ivory); --nfo-f2: #F1E3F5; }

/* ---- File cards ---- */
.nfo-card {
  position: absolute; left: 0; top: 0; z-index: 2; width: 12.5%; aspect-ratio: 4 / 5;
  padding: clamp(5px, .75cqi, 9px); border-radius: clamp(8px, 1.1cqi, 13px); background: var(--nfo-card-bg);
  box-shadow: 0 0 0 1px var(--line, rgba(0,0,0,.08)), 0 10px 22px -12px rgba(60,40,120,.38);
  display: flex; flex-direction: column; gap: clamp(4px, .55cqi, 7px); transform-origin: 50% 100%; will-change: transform;
}
.nfo-glyph { flex: 1; position: relative; overflow: hidden; border-radius: 9%; display: grid; place-items: center; }
.nfo-name { font-size: clamp(9px, 1.15cqi, 12.5px); padding: 0 2px; font-weight: 600; color: var(--text, #221E1C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nfo-k-pdf, .nfo-k-doc { background: #EFE9FF; align-content: start; justify-items: start; padding: 14% 12%; }
.nfo-lines { display: flex; flex-direction: column; gap: 7%; width: 100%; height: 60%; }
.nfo-lines b { display: block; height: 9%; min-height: 3px; border-radius: 2px; background: #C9BCF7; }
.nfo-lines b:nth-child(2n) { width: 72%; }
.nfo-tag { position: absolute; left: 12%; bottom: 12%; padding: 1px 5px; border-radius: 4px; background: #8F7BEA; color: #fff; font: 700 clamp(7px, .85cqi, 10px)/1.4 var(--font, system-ui); letter-spacing: .04em; }
.nfo-k-img  { background: linear-gradient(175deg, #FFD6C2 0 46%, var(--nfo-coral) 46%, #D96F5E); }
.nfo-k-img2 { background: linear-gradient(180deg, #FFC59E, var(--nfo-coral) 55%, #8E6FD8); }
.nfo-sun { position: absolute; right: 18%; top: 14%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #FFF3D6; }
.nfo-k-vid { background: linear-gradient(160deg, var(--nfo-sky), #6E9BF2); }
.nfo-play { width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.9); position: relative; box-shadow: 0 4px 10px rgba(30,40,110,.25); }
.nfo-play::after { content: ""; position: absolute; left: 40%; top: 30%; border-style: solid; border-color: transparent transparent transparent #4A5BB8; border-width: .55em 0 .55em .8em; font-size: clamp(5px, .7cqi, 8px); }
.nfo-k-code { background: #EEEBE7; color: #6B625C; }
.nfo-code { font: 700 clamp(10px, 1.6cqi, 17px)/1 ui-monospace, Menlo, monospace; }
.nfo-k-dir { background: #FFF4E6; }
.nfo-mini { position: relative; width: 58%; height: 42%; margin-top: 8%; border-radius: 12%; background: linear-gradient(160deg, #A592F7, var(--nfo-violet)); }
.nfo-mini::before { content: ""; position: absolute; left: 0; top: -16%; width: 44%; height: 24%; border-radius: 4px 4px 0 0; background: #A592F7; }
@media (prefers-color-scheme: dark) {
  .nfo-k-pdf, .nfo-k-doc { background: #3A3150; } .nfo-lines b { background: #6F62A8; }
  .nfo-k-code { background: #3A332E; color: #CFC6BD; } .nfo-k-dir { background: #3B3128; }
}

/* ---- Replay ---- */
.nfo-replay {
  position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.1));
  background: var(--bg, #fff); color: var(--text-2, #6A625C); font: 600 12.5px/1 var(--font, system-ui); cursor: pointer;
  transition: color .18s, opacity .25s, transform .16s var(--ease-out, ease-out);
}
.nfo-replay:hover { color: var(--text, #221E1C); }
.nfo-replay:active { transform: scale(.96); }
.nfo-replay:focus-visible { outline: 2px solid var(--nfo-violet); outline-offset: 2px; }
.nfo-replay:disabled { opacity: .45; cursor: default; }
.nfo-replay svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .nfo-extra { display: none; }
  .nfo-card { width: 19%; }
  .nfo-folder { width: 30%; height: 34%; bottom: 10%; }
  .nfo-folder.nfo-at-1 { left: 3%; }
  .nfo-folder.nfo-at-2 { left: 35%; }
  .nfo-folder.nfo-at-3 { left: 67%; }
  .nfo-name { font-size: clamp(8px, 2.6cqi, 11px); }
  .nfo-fname { font-size: clamp(9px, 3cqi, 13px); }
  .nfo-count { font-size: clamp(8px, 2.5cqi, 11px); }
}
@media (prefers-reduced-motion: reduce) { .nfo-replay { display: none; } }